はじめに
今回は、サイト内の画像を圧縮してWebページの表示速度を改善する方法についてです。
Googleのwebページを評価する最新の指標「Core Web Vitals」では、ページの表示速度が重要な項目の1つとして取り入れられています。
Webページの表示速度は、SEOを意識するなら避けては通れない課題となっています。
副業社長のサイトでも、 GoogleのPage Speed Insights でパフォーマンスを確認してみましたが、診断結果はモバイルのパフォーマンスが63点でした。
一応、最低限のラインは満たしているものの、合格ラインとされる70点を超えていません。
「Core Web Vitals」は主にモバイル検索の指標なので、この点数は改善する必要があります。
診断結果ページの「改善できる項目」を見ると
- 次世代フォーマットでの画像の配信
- テキスト圧縮の有効化
- 適切なサイズの画像
とあったので、画像を圧縮するプラグインを導入することにしました。
今回紹介する EWWW Image Optimizer を選んだ理由は、無料で制限なく使えるためです。
前置きが長くなりましたが、EWWW Image Optimizerの導入と設定方法をまとめましたのでご参考ください。
前提として、EC２インスタンスにGDライブラリがインストールされている必要があります。
GDのインストール手順はこちらから
※WordPress バージョン 6.1.1、EWWW Image Optimizer バージョン 7.2.0を使用しています。
※2023年8月8日時点の情報です。
画像圧縮プラグイン EWWW Image Optimizer の有効化
まずはプラグインのインストールから。
メニューのプラグインから新規追加を選択します。
キーワードに EWWW Image Optimizer と入力して検索し、結果が表示されたらインストールして有効化します。
導入方法は他のプラグインと変わりはありません。
WordPressのメニュー「プラグイン」を開いて、枠が青くなっていれば有効化は完了です。
EWWW Image Optimizerの設定
インストールした EWWW Image Optimizer の設定項目を確認していきます。
WordPressのメニューから「設定」→「EWWW Image Optimizer」をクリックします。
メニュー画面へ移動したら、以下の4点を設定しておきましょう。
① 基本タブの「メタデータを削除」にチェックが入っていることを確認
ここはプライバシーや機密情報を守るための設定で、位置や日時などの画像に含まれる余計な情報を削除してもらいます。
② 基本タブ下部の「WebP変換」にチェック
「WebP」とは、Googleが開発している静止画像フォーマットのこと
WebP変換にチェックを入れることで、Wordpressにアップロードした画像を自動で変換してくれます。
これで記事に画像を多く使っても、PNGやJPEGより高い圧縮率でファイルサイズを抑えられるわけです。
③ WebP の配信方法の「リライトルールを挿入する」をクリック
画面にコードが羅列されるので少し怖くなりますが、安心してクリックしてOK。
要約すると、WebPは一部のブラウザには対応していないため、「ブラウザに応じて表示するフォーマットを自動で変える」ルールを追加しておくといった内容です。
右下の赤背景のPNGが緑背景のWEBPになればOKです。
何らかの理由でリライトルールを挿入できない場合は、WebP の配信方法に書かれているコードをサーバー上のファイルに直接挿入する必要があります。
サーバーにアクセスし、「.htaccess」ファイルの冒頭（#BEGIN WordPressより上）へコードをコピーペーストしてください。
※.htaccessファイルの編集はミスをするとサイトが閲覧できなくなる可能性がありますので慎重に行ってください。
④ 変換タブの「変換リンクを非表示」にチェック
タブが出ていない場合は「Enable Ludicrous Mode」をクリックしてください。
変換タブで「変換リンクを非表示」等の設定項目が表示されていない場合は、画像のライブラリがインストールされていない、または有効になっていない可能性があります。
前置き部分で説明していた前提が、ここで必要になってきます。
GDライブラリをインストールする方法は、こちら（別記事リンク）の記事にまとめていますので、併せてご参考ください。
ここまで設定できれば、 EWWW Image Optimizer の設定は完了です。
過去画像も一括最適化
次に過去の画像を一括最適化します。
これまでの設定で、今後アップロードする画像は自動で最適化されますが、過去に投稿した画像までは自動でやってくれません。
せっかくここまで設定したので、あと少しだけ頑張って、過去の分も最適化しておきましょう。
メニューのメディアにある一括最適化から「最適化されていない画像をスキャンする」をクリックします。
最適化される画像の点数が表示されたら「画像を最適化」をクリックします。
しばらく待つと一括最適化が完了します。
最適化情報はメディアのライブラリをリスト表示にすることで確認ができます。
これで、過去にアップロードした画像も軽量化できました。
さいごに
再度 Page Speed Insights で改善項目を確認したところ、次世代フォーマットでの画像の配信が消えていました。
一括最適化前
一括最適化後
画像をWebPにしたことにより、推定6.30s短縮できたということでしょうか。
これで少しは改善されたのではないかと思います。
今回の記事は以上になります。
