現在、当ブログはGoogle AdSenseの審査中です。
審査には数週間かかることもあるとのことで、審査状況を確認していたところ、AdSenseからのメールが届きました。
そこには、サイトの読み込み速度を改善しておくと良いというヒントが書かれていました。
このメールをきっかけに、審査を待つ間に何かできることはないかと考え、PageSpeed Insightsという無料の診断ツールで自分のサイトの状態を確認してみることにしました。
結果として、この2日間はトラブルの連続でした。
良かれと思って触った設定のせいで記事が表示されなくなったり、画像が全部消えたり。
今回は、その一部始終を記録として残しておきたいと思います。
PageSpeed Insightsをやってみた、そしてHTTPSの警告
まず診断してみたところ、「安全でないリクエスト」という警告が出てきました。
一部のデータがhttp://のまま読み込まれているとのことでした。
調べてみると、ConoHa WINGのWordPress設定画面で「WordPressアドレス」と「サイトアドレス」が、両方ともhttp://のままになっていました。
サイト自体はSSL化されていたのですが、この設定だけが取り残されていたようです。
修正の際には、WAF（セキュリティ機能）を一時的にOFFにしてからURLをhttps://に書き換え、保存後にWAFを再びONに戻す、という手順を踏みました。
さらに、過去の記事データの中にもhttp://の表記が53件残っていることが分かりました。
こちらはBetter Search Replaceというプラグインを使い、まずDry Run（試し実行）で置換対象を確認したうえで、本番の一括置換を行いました。
画像を見直す
続いて、画像まわりの見直しに取りかかりました。
「ももも」のアイコン画像を確認したところ、もともと680×440という横長の画像を、200×200の正方形の枠に無理やり収めていたことが分かりました。
そこでCanvaで新たに800×800の正方形画像を作り直し、プロフィールと吹き出しの両方に反映しました。
また、EWWW Image Optimizerというプラグインを導入し、これまでにアップロードしていた413件の画像をまとめて圧縮しました。
あわせて、ConoHa WING側の「ブラウザキャッシュ」機能も有効化しています。
やってしまった。アイキャッチが全部消えた日
作業の途中、もう使っていないと思い込んだ画像をメディアライブラリから削除しました。
すると、公開していた6記事すべてのアイキャッチが、一斉に表示されなくなってしまいました。
慌てて調べてみたところ、WordPressのメディアライブラリの仕組みそのものに原因があることが分かりました（詳しくは後述します）。
幸い、Canvaに元のデザインデータが残っていたため、6記事分のアイキャッチを1つずつ作り直し、なんとか復旧することができました。
さらに調べていく中で、ヘッダーの背景画像についても、ファイル名が「-1.jpg」のはずが実際には「-1-1.jpg」になっており、リンク切れを起こしていたことが発覚しました。
こちらもあわせて修正しています。
メディアライブラリの画像削除、ご注意ください
WordPressのメディアライブラリの画像は「参照」の仕組みで記事に表示されています。
ライブラリ側で削除すると、その画像を使っている記事のアイキャッチや本文画像も同時に消えてしまいます。迷ったときは削除せず残しておくのがおすすめです。
高速化設定に挑戦した2日目
2日目は、Cocoonの設定画面にある「高速化」タブを開き、ブラウザキャッシュ、CSS/JSの縮小化、Googleフォントの非同期読み込みをそれぞれ有効にしました。
また、事前読み込みの設定から、使っていないajax.googleapis.comとcdnjs.cloudflare.comの項目を削除しました。
ここまでは順調だったのですが、CSS/JSの縮小化を有効にした途端、複数の記事でアイキャッチや吹き出し、写真が表示されなくなる不具合が発生しました。
一つずつ設定を切り分けて確認した結果、原因はCSS/JSの縮小化にあることが分かり、この項目だけをOFFに戻したところ、無事に元通りの表示に戻りました。
ブラウザキャッシュとGoogleフォントの非同期読み込みは、そのまま有効にしています。
スコアの推移
2日間の対応によって、パフォーマンススコアは以下のように推移しました。
| タイミング | パフォーマンス | おすすめの方法 |
|---|---|---|
| 最初 | 58点 | 73点 |
| HTTPS修正後 | 61点 | 100点 |
| 高速化設定後 | 76点 | 96〜100点 |
| 縮小化を戻した後 | 61点 | 100点 |
この2日間で学んだこと
今回の一件を通じて、あらためて実感したことが3つあります。
1つ目は、良かれと思って行った設定変更が、思わぬ不具合を招くことがある、ということです。
2つ目は、WordPressのメディアライブラリの仕組み（削除すると使用箇所からも同時に消える）は、初心者がつまずきやすい落とし穴だということです。
3つ目は、たとえ失敗しても、原因を一つずつ切り分けていけば、着実に解決できるということです。
パフォーマンススコアは、最終的には縮小化をOFFに戻したことで61点に落ち着きましたが、表示崩れが直っていることの方がずっと大切だと感じています。
引き続き、無理のない範囲で少しずつ改善を進めていきたいと思います。
今回は本当にヒヤヒヤしたね。でも記事が全部直ってよかったよ
【この記事を書いた人】栄養士 ももも／アラフォー・ブログ初心者。野菜・食品の栄養やレシピを中心に、日々試行錯誤しながら発信しています。
