HOME → 3 WordPress → 04 運用とトラブル → 

nginx-WordPress WebP 画像の配信

WordPress Twenty Seventeen
nginx + WordPress
次世代フォーマットでの画像の配信
 
「PageSpeed Insights」の測定で、「次世代フォーマットでの画像の配信」に【警告】が表示されるページが出てきた。
 
改善できる項目を見ると、「次世代フォーマットでの画像の配信」に【警告】が表示されている
 
以下、nginx + WordPressの環境で、画像を【 WebP 】での配信に切り替えた記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. WebPに対応した動機
 
画像が多いページを「PageSpeed Insights」で測定してみると、低速の「34」と極めて遅いスコアになる。
画像が多いページを「PageSpeed Insights」で測定してみると、低速の「34」と極めて遅いスコアになる
 
改善できる項目を見ると、「次世代フォーマットでの画像の配信」に【警告】が表示されている。
改善できる項目を見ると、「次世代フォーマットでの画像の配信」に【警告】が表示されている
 
更に画像のURLを見ると、削減対象の【 jpg 】画像が多数表示される。
更に画像のURLを見ると、削減対象の【 jpg 】画像が多数表示される
 
次世代フォーマットへの対応は、全てのブラウザが対応していないこともありまだ先で良いと思っていたが、この【警告】を機に【 WebP 】にて対応することにした。
 
 
 
2. EWWW Image Optimizerによる画像のWebP化
 
【 WebP化 】に当たって、プラグインを使わない方法も検討してみたが、既にアップロードしている画像のWebPへの一括変換が出来る「EWWW Image Optimizer」を採用することにした。
 
プラグイン「EWWW Image Optimizer」をインストールして、有効化する。
プラグイン「EWWW Image Optimizer」をインストールして、有効化する
 
「EWWW Image Optimizer」の設定画面の【 WebP 】タブを開き、「JPG, PNGから WebP」にチェックを入れる。
「EWWW Image Optimizer」の設定画面の【 WebP 】タブを開き、「JPG, PNGから WebP」にチェックを入れる
 
「変更を保存」をクリックすると、下部に.htaccessファイルに追記するためのコードが自動生成される。(Apacheの場合は、画面の指示通り.htaccessファイルを編集すれば良いが、nginxの場合は別の対処が必要。)
「変更を保存」をクリックすると、下部に.htaccessファイルに追記するためのコードが自動生成される
 
また、右下の隅に赤の背景色でPNGという標識が現れる。
右下の隅に赤の背景色でPNGという標識が現れる
 
この標識だとWebPが有効になっておらず、PNGで画像が配信される状態を表している。
 
 
 
3. nginxの設定変更
 
nginxの場合は、次の設定変更を行う。
 
nginx.conf ( /etc/nginx/nginx.conf )の、httpディレクティブ内に以下の内容を追記する。
# WebP 追記
map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}
nginx.confへの追記例。
nginx.confへの追記例
 
 
mime.types( /etc/nginx/mime.types )に以下の内容が入っているか確認する。
image/webp	webp; 
mime.typesへの追記例。
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ディレクティブへの追記例。
serverディレクティブへの追記例
 
他の location ディレクティブよりも上位に記述する。
画像ファイルに対するブラウザキャッシュの設定などよりも後に記述すると、想定通りの動作をしない。
 
サブディレクトリーで「location / 」設定を行っている場合の追記例。
サブディレクトリーで「location / 」設定を行っている場合の追記例
 
 
以上の設定を行った後 nginxを再起動して、再びEWWW Image Optimizerの【 WebP 】タブを開くと、画像がWEBPの表示に変わる。
以上の設定を行った後 nginxを再起動して、再びEWWW Image Optimizerの【 WebP 】タブを開くと、画像がWEBPの表示に変わる
 
この時、「JS WebP Rewriting」にもチェックを入れておく。
 
WebPで画像が配信される状態になった標識。
WebPで画像が配信される状態を現わす標識
 
 
 
4. 画像のWebPへの一括変換
 
「EWWW IO」の設定を行うと、管理画面の左メニューの「メディア」の中に「一括最適化 」という項目が追加されているので、これををクリックする。
 
「一括最適化 」画面が表示されるので、右端にある「WebP のみ:圧縮をスキップし、WebP 変換のみを試みます。」にチェックを入れ、一括変換を行う。
「一括最適化 」画面が表示されるので、右端にある「WebP のみ:圧縮をスキップし、WebP 変換のみを試みます。」にチェックを入れ、一括変換を行う
 
この例は、一度「EWWW IO」の一括最適化で圧縮した画像に対して、再度、WebP 変換のみを行った例であるが、更に、平均45%もの減少が図られた。
この例は、一度「EWWW IO」の一括最適化で圧縮した画像を、再度、WebP 変換のみを行った例であるが、更に、平均45%もの減少が図られた
 
全画像の「WebP 変換」が、完了。
全画像の「WebP 変換」が、完了
 
変換前:「PageSpeed Insights」でのスコア「76」。
変換前:「PageSpeed Insights」でのスコア「76」
 
変換前:「次世代フォーマットでの画像の配信」に要した時間「2.7s」。
変換前:「次世代フォーマットでの画像の配信」に要した時間「2.7s」
 
変換後:「PageSpeed Insights」でのスコア「78」。
変換後:「PageSpeed Insights」でのスコア「78」
 
変換後:「次世代フォーマットでの画像の配信」に要した時間「0.15s」。
変換後:「次世代フォーマットでの画像の配信」に要した時間「0.15s」
 
 
上記サイトとは別の、Reverse Proxy 配下の他のサーバーにも「EWWW IO」をインストールしたところ、nginx の設定を行っていないにもかかわらず、表示がWebPで画像が配信される状態になった。
Reverse Proxy 配下の別のサーバーに、「EWWW IO」をインストールしたところ、nginx の設定を行っていないにもかかわらず、表示がWebPで画像が配信される状態になった
 
このサイトでは既に、有料版の「EWWW IO」で画像圧縮を行っており、これらの画像に対して「WebP 変換」を行うと、「オリジナルより大きい WebP 画像です。」と表示されたり、圧縮されても 10% 前後になった。
このサイトでは既に、有料版の「EWWW IO」で画像圧縮を行っており、これらの画像に対して「WebP 変換」を行うと、「オリジナルより大きい WebP 画像です。」と表示されたり、圧縮されても 10% 前後になった。
 
 
 
5. WebP配信の確認
 
画像が【WebP】で配信されているかどうかを確認するには、Google Chromeのデベロッパーツールの「Network」タブで行う。
 
「Network」タブでページのリロードを行い、「img」の「Type」で確認する。
「Network」タブでページのリロードを行って、「img」の「Type」で確認する
 
全ての画像が【 WebP 】になったわけでは無いが、殆んどの画像が【 WebP 】になった。
 
 
 
6. WebP化の効果
 
「PageSpeed Insights」で、「次世代フォーマットでの画像の配信」の【警告】が表示された該当ページの変化は下記の通り。
 
評価スコアが、キャッシュが使われたこともあり「34」から「51」に、「17」ポイント上がった。
評価スコアが、キャラクターが使われたこともあり「34」から「51」に、「17」ポイント上がった
 
改善できる項目での「次世代フォーマットでの画像の配信」が、【 2.4s 】から【 0.3s 】になった。
改善できる項目での「次世代フォーマットでの画像の配信」が、【 2.4s 】から【 0.3s 】になった
 
この内訳は、アップロードした画像ではなく、Google Map等【 CDN 】からの画像である。
この内訳は、アップロードした画像ではなく、Google Map等【 CDN 】からの画像である
 
 
以上で、「次世代フォーマットでの画像の配信」における【警告】を解消することが出来た。
 
 
以上。
(2020.04.01)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください