nginx-WordPress WebP 画像の配信

tacsan

4年前

WordPress Twenty Seventeen
nginx + WordPress
次世代フォーマットでの画像の配信

「PageSpeed Insights」の測定で、「次世代フォーマットでの画像の配信」に【警告】が表示されるページが出てきた。

以下、nginx + WordPressの環境で、画像を【 WebP 】での配信に切り替えた記録。

　目　次

1.　WebPに対応した動機
2.　EWWW Image Optimizerによる画像のWebP化
3.　nginxの設定変更
4.　画像のWebPへの一括変換
5.　WebP配信の確認
6.　WebP化の効果

1. WebPに対応した動機

画像が多いページを「PageSpeed Insights」で測定してみると、低速の「34」と極めて遅いスコアになる。

改善できる項目を見ると、「次世代フォーマットでの画像の配信」に【警告】が表示されている。

更に画像のURLを見ると、削減対象の【 jpg 】画像が多数表示される。

次世代フォーマットへの対応は、全てのブラウザが対応していないこともありまだ先で良いと思っていたが、この【警告】を機に【 WebP 】にて対応することにした。

2. EWWW Image Optimizerによる画像のWebP化

【 WebP化】に当たって、プラグインを使わない方法も検討してみたが、既にアップロードしている画像のWebPへの一括変換が出来る「EWWW Image Optimizer」を採用することにした。

プラグイン「EWWW Image Optimizer」をインストールして、有効化する。

「EWWW Image Optimizer」の設定画面の【 WebP 】タブを開き、「JPG, PNGから WebP」にチェックを入れる。

「変更を保存」をクリックすると、下部に.htaccessファイルに追記するためのコードが自動生成される。（Apacheの場合は、画面の指示通り.htaccessファイルを編集すれば良いが、nginxの場合は別の対処が必要。）

また、右下の隅に赤の背景色でPNGという標識が現れる。

この標識だとWebPが有効になっておらず、PNGで画像が配信される状態を表している。

3. nginxの設定変更

nginxの場合は、次の設定変更を行う。

nginx.conf （ /etc/nginx/nginx.conf ）の、httpディレクティブ内に以下の内容を追記する。

# WebP 追記
map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

nginx.confへの追記例。

mime.types（ /etc/nginx/mime.types ）に以下の内容が入っているか確認する。

image/webp	webp;

mime.typesへの追記例。

WebPを使うserverディレクティブ（ /etc/nginx/conf.d/配下のconf ）内に以下の内容を追記する。

# WebP 追記
location ~* ^.+\.(png|jpe?g)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

serverディレクティブへの追記例。

他の location ディレクティブよりも上位に記述する。
画像ファイルに対するブラウザキャッシュの設定などよりも後に記述すると、想定通りの動作をしない。

サブディレクトリーで「location / 」設定を行っている場合の追記例。

　　　　 	location ^~ /trek {
                root /home/yaopi/www;
                index index.php index.html index.htm;
                try_files $uri $uri/ @wp;

                # WebP 追記
                location ~* \.(png|jpe?g)$ {
                        add_header Vary Accept;
                        try_files $uri$webp_suffix $uri =404;
                }

                location ~ \.php$ {
                        fastcgi_split_path_info ^(.+\.php)(/.+)$;
                        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
                        fastcgi_index index.php;
                        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                        include fastcgi_params;