「次世代フォーマットの画像配信」対策でページ表示速度をアップ

PageSpeed Insightsでページ表示速度を測ると、下画像のように改善できる項目として「次世代フォーマットでの画像の配信」が表示される場合があります。

筆者もこれに悩まされ、対策に困っていました。

が、やっと対策法を見つけ、当ブログに対策を施し、ページ表示速度を上げることができましたので、解説します。

WebPに変換する手順

次世代フォーマットWebPとは？

次世代画像フォーマットとは従来のPNGやJPEGより圧縮率の高い新しい画像フォーマットのことで、そのなかの1つに「WebP（ウェッピー）」があります。

今回はそのWebPによる対策です。

WebPとはGoogleが開発する表示速度を短縮させる静止画フォーマットです。

ただしWebPは読み込めるブラウザが限定的です。「Edge」「Firefox」「Chrome」などのブラウザは対応していますが、「Safari」や「iOS Safari」は対応していません。Androidでは古いバージョンでなければ問題なく使うことができるようです。

筆者の場合はSafariやiOS Safariでも大丈夫ですが、念のため。 Safariをご利用の方、このページ大丈夫ですか？

EWWW Image Optimizerの設定

１

画像を次世代フォーマットWebPにするには、プラグイン「EWWW Image Optimizer」を使います。

WordPress管理画面のサイドバーメニューから、
「設定」＞「EWWW Image Optimizer」の順に進みます。

EWWW Image Optimizerの管理メニューで「WebP」のタブを選択します。

2

「JPGからWebPへの変換〜」の部分のチェックボックスにチェックを入れ、「変更を保存」ボタンを押下します。

サーバーの設定

次にサーバーの管理パネルにログインします。

ここではエックスサーバーを例に説明します。

1

サーバーパネルにログインします。

2

サーバーパネルから「.htaccess編集」を押します。

3

ドメインの中から対象のドメインを探し、「選択する」を押します。

4

「.htaccess編集」のタブを選択。

5

.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

必ず元の状態をメモ帳などに保存しておきましょう。

編集後はサイトが正常に表示されているかどうかを必ず確認し、異常が見つかったら元の状態にに戻せるようにします。

6

「確認画面へ進む」ボタンを押下します。

７

「実行する」を押します。

8

「編集が完了」となったらOK。

画像を一括最適化をする

1

WordPress管理画面のEWWWプラグインに戻ります。

2

「一括最適化」を押します。

3

「最適化されていない画像をスキャンする」ボタンを押します。

4

スキャン後、一括最適化を行います。以上で完了です。

今回ご紹介した方法は、サンツォさんのブログ部を基に自分のにとっての備忘録的な意味もあって書きました。

さらにこの方法についてサンツォさんは下記のように記しています。

長年SEOコンサルを務められ、SEOのプロフェッショナルである @SEOmpota さんからご提供いただきました！