この記事は約 4 分で読めます。
ユウキです。
サイト表示速度が遅い場合、画像が重いことが原因の可能性で代表的です。
画像が原因の場合、Lighthouse 検査するとパフォーマンスのチェック項目に Serve images in next-gen formats と指摘されますが、
これを解決してサイト表示速度を改善したいなら、 EWWW Image Optimizer を使って画像形式を WebP に変換すれば解決します。
- 重い画像を軽くして、サイト表示速度を改善したい人
- EWWW Image Optimizer を使って WebP を表示される方法を知りたい人
- やってみたけど、なぜか WebP が表示されずに悩んでいる人
目次
プラグインのインストール
はじめに WordPress のプラグインから新規追加で EWWW Image Optimizer を検索してインストール、有効化します。
検索結果に同じ画像が 2 つ表示されるので、間違えないように注意してください。
EWWW Image Optimizer の設定
プラグインを有効化したら、以下の手順で設定を進めます。
ベーシックのタブを選んで、【メタデータを削除】にチェック。画像に付与されている余計な情報を取り除いてくれます。
変換のコンバージョンリンクを非表示にチェックする。人為的な誤変換を防ぐための設定です。
WebP タブに移動して、【 JPG、PNG から WebP 】にチェックして保存すると、下に .htaccess へ追加するためのコードが表示されるので、コピーしておきます。
エックスサーバーのサーバーパネル内、 .htaccess 編集へ移動して、
【 # BEGIN WORDPRESS 】の直前にコピーしておいたコードを張り付けて保存する。
.htaccess の編集はバックアップを取って、間違えないよう十分に注意してください。
EWWW Image Optimizer の設定画面右下の表示が緑色で WebP となっていればサーバーパネル側の編集は大丈夫です。
メディアに【一括最適化】というメニューが増えているので、そこから【最適化されていない画像をスキャンする】をクリックして設定完了です。
設定しても WebP が表示されない場合
設定完了後、WebP が正しく表示されているか確認する方法は 2 つあります。
ひとつは Chrome の検証機能を使います。
【Network】→【Img】を選んで、ページを更新すると、【Type】に画像形式が表示されます。
もうひとつは、Lighthouse で確認した際に【Serve images in next-gen formats】の表示が出なければ設定完了しています。
時々、設定は正しくできているはずなのに、WebP が表示されない場合があります。
その場合は、ブラウザキャッシュをクリアすると解決します。
.htaccess に追加したコードが消えてしまう場合
EWWW Image Optimizer を使って WebP を表示するために .htaccess の変更をしたのに、追加したコードが削除されてしまう場合、
【# BEGIN WORDPRESS】と【# END WORDPRESS】の間に追加していることが原因です。
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
上記の通り、注意書きとして記載されているので、編集内容を確認してみてください。
定期的に Lighthouse で確認すると、不具合があっても早期に発見しやすいのでおすすめします。
Safari の WebP 対応について
現時点（2020年5月17日時点）では、Safari のブラウザで WebP の画像形式が未対応のため表示できないようです。
ですが、設定で .htaccess に追加したコードによって、未対応ブラウザに対してはこれまで通り、PNG や JPEG が表示されるので安心して大丈夫ください。
各ブラウザの WebP 対応状況を確認する場合はテキストリンクを参考にどうぞ。
まとめ
サイトによっては画像形式を WebP に変更するだけでも、モバイル表示速度が劇的に改善します。
手軽にできるのに、得られるリターンは魅力的なので、必ず取り入れておきたいカスタマイズですね。
以下の記事と併せて設定すると、サイト表示速度の大幅改善が見込めますので参考にしてみてください。
では今回はこの辺で。
ありがとうございました！
