Page Speed Insightsでサイトの表示速度を診断した結果、モバイルの評価がよくなかったので、サイト表示速度の改善に取り組んでみました。
どうもサイトの表示が遅いらしい
サイト運営を始めてしばらくして、Page Speed Insightsで診断してサイトの表示速度をチェックしてみました。PCの評価はそれほどでしたが、モバイルの評価がいまいちなことが判明。
そもそもPC・モバイルのどちらも十分なデータがない中での診断なので、正確な診断結果ではないだろうものの、せめて60点はほしいなぁと。改善項目を確認してみると、画像関連で指摘がいくつか出ていました。
設定が足りていない？画像の表示速度が遅い？そういえば、画像圧縮あんまり考えていなかったなと、サイト表示速度の改善対応をすることにしました。
サイト表示高速化のためにやったこと
今回、サイト表示高速化のためにやってみたことです。
・EWWW Image Optimizer
・cocoonの高速化設定
・サイトアイコン画像変更
画像表示系中心に取り組んでみました。
EWWW Image Optimizerで画像圧縮
画像の圧縮がそもそもしていなかったなと、まずはWordPress側からの改善から着手。
Word Pressのプラグイン「EWWW Image Optimizer」を使います。
EWWW Image Optimizerは、
・画像アップロード時に自動で圧縮してくれる
・既存の画像を一括圧縮してくれる
無料プラグイン。
EWWW Image Optimizerでの画像全圧縮手順
※画像数が多いほど圧縮に時間がかかるので、使用していない画像があれば、
先に削除しておくのがおすすめです。
①プラグイン「EWWW Image Optimizer」をインストール、有効化します。
有効化が完了すると、WordPress管理画面 ＞ [設定] ＞ [EWWW Image Optimizer]から
EWWW Image Optimizerの設定できるようになります。
② [EWWW Image Optimizer]の設定画面の[ベーシック]タブを開きます。
「Remove Metadata」の項目で、
「これにより、すべてのメタデータが削除されます。」
にチェックを入れて[変更保存]ボタンをクリックします。
※すでにチェックが入っている場合は、変更不要です。
③[EWWW Image Optimizer]の設定画面の[変換]タブを開く。
「コンバージョンリンクを非表示」の項目で、以下の項目にチェックを入れて、
[変更を保存]をクリックします。
「サイトまたはネットワークの管理者は、これを使用して、他のユーザーが以下の設定を迂回するメディア
ライブラリの変換リンクを使用できないようにすることができます。」
④WordPress管理画面 ＞ [メディア] ＞ [一括最適化] を開いて、
[最適化されていない画像をスキャンする]をクリックして、スキャンします。
スキャンが終わったら、[〇〇点の画像を最適化]をクリックして圧縮を開始します。
「完了」と表示されれば、圧縮完了です。
WordPress上の画像の数によって、圧縮時間は変わります。2000弱で20分程度でした。
Page Speed Insightsで再診断
EWWW Image Optimizerで画像圧縮前後のPage Speed Insightsの診断改結果です。
ちょっとよくなりました。最低目標の60は超えましたが、まだまだな結果です。
cocoonの高速化設定
cocoonテーマ独自の高速化設定があります。
cocoonのテーマをインストールして設定をいれていたものの、「高速化設定」は何もやってなかったなと思い、見直すことに。
cocoonの高速化設定手順
①WordPress管理画面から[cocoon設定]＞[高速化]で設定を開きます。
②以下の項目にチェックがついていなかったら、チェックを入れて、[変更を保存]をクリック
・HTMLを縮小化する
・CSSを縮小化する
・JavaScriptを縮小化する
・Lazy Loadを有効にする
・Googleフォントの非同期読み込みを有効にする
設定変更は以上です。変更保存後は、即反映します。
Page Speed Insightsで再診断
Page Speed Insightsで再診断してみました。
Cocoon設定変更全後のPage Speed Insightsの診断結果です。
PCはなぜかちょっと悪くなり、モバイルはちょっとよくなりました。だいぶ改善されてきましたが、もう一声ほしいところ。
サイトアイコン画像の変更
サイトアイコンは、Webブラウザのタブやブックマークバーなどに表示されるアイコン。推奨値以上のサイズであればなんでもいいだろうと、トップ画像を適当に正方形に加工したものを使っていました。今回、サイトアイコン専用にサイズの小さい画像を用意して、差し替えました。
サイトアイコン画像変更手順
①推奨値512px×512pxのギリギリサイズに再加工します。
タブ表示で浮くのがいやだったので、ついでに背景透明化しました。
②WordPressの管理画面＞[外観]＞[テーマ]＞[カスタマイズ]から、
[サイト基本情報]のサイトアイコンの[画像変更]で新しい画像に差し替えます。
変更は以上です。画像差し替え後は、即反映します。
Page Speed Insightsで再診断
Page Speed Insightsで再診断してみました。
サイトアイコン変更前後のPage Speed Insightsの診断結果です。
PC・モバイルともに大幅に改善されました。
え、ここなの？という意外な感じでしたが、モバイル読み込みにはサイズ感が大きい画像を使っていたんでしょうね。
まとめ
まだまだ改善の余地はありますが、だいぶサイト表示速度が改善されました。
結果的に一番有効だったのは、サイトアイコンの画像の変更でした。
コメント