SearchConsoleをのぞいたら、ウェブに関する主な指標という欄に、エラーがたくさん出ていました。
リンクをたどっていくと、PageSpeed Insightsに到着。
「次世代フォーマットでの画像配信」という改善項目が、一番上に表示されていました。
かっこよくいってるけど、画像が重いから軽量化しろって話らしい。
「5Gで通信の高速化・大容量化！！」と騒がれている中でも、軽量化を求められるブログ運営……。
次世代フォーマットへの対応は、プラグインの導入とちょっとした設定で可能でした。
どうしたらいいのか分からず悩んでいる方も多いと思うので、画像付きで解説記事を書いてみました。
少しでも参考になれば嬉しいです。
次世代フォーマットでの画像配信
次世代フォーマットの画像には、「JPEG 2000, JPEG XR, WebP, etc.」があります。
その中でも対応ブラウザの多い、WebP（ウェッピー）という形式が良いようです。
プラグインで一括変換できるため、画像を作り直したり、記事内の画像を入れ替えたりする必要はありません。
EWWW Image Optimizer の設定
プラグイン『EWWW Image Optimizer』を導入しましょう。
導入後、WPの設定から EWWW Image Optimizer を開き、次の2項目を設定します。
1. コンバージョンリンクを非表示
勝手に画像を複製したり、拡張子を変更したりするのを防ぐ項目です。
私はこの項目をチェックしていたのですが、拡張子の変わってしまう画像があったため、コード編集で対応しました。
コード編集する場合
サーバーのファイル管理 >サイト名 > public_html > wp-config.php
「wp-config.php」の編集を開いて、一番最後に下記コードを入れました。
/*ewww 自動変換停止*/
define( 'EWWW_IMAGE_OPTIMIZER_DISABLE_AUTOCONVERT', true );
2. 画像のWebP対応
WebPの項目にチェックを入れると、リライトルールを挿入するというボタンが出てきます。
リライトルール挿入後、右下に表示された赤いマークが、下画像のように緑のマークになったら完了です。
緑色にならなかった場合は、リライトルールを削除して、下記の方法で設定してください。
自分でリライトルールを挿入
サーバーのファイル管理 > サイト名 > public_html > .htaccess
『.htaccess』を編集で開き、先頭に次のコードを入力します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp入力保存後、設定ページを更新して、マークが緑になっているか確認してください。
ブラウザのキャッシュを削除してページを更新すると、緑色に変わる可能性もあります。
それでも緑色に変わらない場合は、下の最適化まで試してみてください。
最適化まで試してだめなら、私は力になれそうにありません。申し訳ありませんが、他ブログをあたってください。
一括最適化とWebP対応の確認
WPのメディアにある「一括最適化」を開き、再最適化を強制にチェックを入れて、画像スキャンと最適化をしましょう。
アップロードしている画像の量にもよりますが、初回はかなり時間がかかると思います。
2回目以降のスキャンや最適化の際は、先ほど入れた「再最適化を強制」のチェックを外します。
最適化が終わるまで、静岡茶でも飲みながら、のんびり待っていてください。
なぜ、静岡茶なのか？私が静岡県民だからですよ！！！
PageSpeed Insightsで確認
以上の内容で、WebP対応や画像の軽量化ができているはずです。
PageSpeed Insights を開きなおし、スコアを確認してみてください。最初よりも改善されているはずです。
次世代フォーマットの項目が『0』にならないのは、たぶんGoogleAnalyticsやAdSense関連なので、気にしなくて大丈夫です。
検証画面からも確認可能
GoogleChromeの検証画面でも、WebP対応の確認が可能です。
自分のブログを開いて、右クリックから検証画面を開きます。
Elements, Console の横にある『>>』からNetworkを開くと、Imgに画像のTypeが表示されます。
このType欄が「webp」になっていれば、次世代フォーマットに対応済みです。
スコア改善よりも記事作成
スコアを見ると、もっと直さなきゃと思ってしまいますが、重大な欠陥でもない限り、記事の作成を優先しましょう。
PVや滞在があるなら、基本的に問題はないと思います。PageSpeed Insightsの結果は、かなりシビアらしいので……。
どれだけ速く表示されるブログでも、中身がなければすぐに閉じられてしまいますからね。
スコア改善して手に入ったのが、高速離脱という結果になりかねません。
機械に喜ばれるブログではなく、人に喜ばれるブログを作っていきましょう！！
最後まで読んでいただき、ありがとうございました。