【PageSpeed Insights】次世代フォーマットでの画像の配信

ホームページの表示速度は、Googleの評価・検索順位に影響します。
ページ表示速度を改善することで、コンバージョン（問い合わせ・会員登録・商品購入など）が上がり、売り上げに直結することもあります。

本記事では、PageSpeed Insightsの次世代フォーマットでの画像の配信の改善方法について取り上げます。

PageSpeed Insightsを用いたページ表示速度の改善

PageSpeed Insightsとは、モバイル・パソコン向けページのパフォーマンスに関するレポートと、改善点・方法を確認できるサービスです。
弊社コーポレートサイトを例に確認してみましょう。

左がモバイル、右がパソコンの評価です。
それぞれの速度スコアは、0-49点で遅い、50-89点で平均、90-100で速いとなっています。
モバイルが32点、パソコンが75点なのでかなり遅いですね。
次世代フォーマットでの画像の配信を改善することで、どれだけ速くなるのか見ていきましょう。

画像をWebPに変換

WebP（ウェッピー）に変換することで、PNGより26%、JPEGより25-34%圧縮した形で画像を扱うことができます。
Photoshop バージョン23.2からWebP形式に対応し、編集や保存が可能となりました。
Photoshopをお持ちでない方は、squooshなどの画像変換Webアプリで変換してください。

squoosh
squooshは、Google提供の画像変換Webアプリです。
変換したい画像の劣化状態と圧縮率を同時に確認しながら書き出すことができます。

WebP画像の使用方法

①pictureタグを使用する

pictureタグを使用することで、WebP非対応ブラウザではJPEG画像が出るようになります。
この例では、media属性を使ってモバイルとパソコンで画像を出し分けています。

<picture>
  <source type="image/webp" media="(max-width: 767px)" srcset="asset/images/dummy01_sp.jpg.webp">
  <source type="image/webp" media="(min-width: 768px)" srcset="asset/images/dummy01.jpg.webp">
  <source media="(max-width: 767px)" srcset="asset/images/dummy01_sp.jpg">
  <img src="asset/images/dummy01.jpg"alt="dummy01" width="1220" height="686">
</picture>

②.htaccessで制御する

①の方法はホームページ内のすべてのimgタグを書き換える必要があるため、すでに公開されているサイトには不向きです。
そこで、ブラウザがWebPに対応しており、WebP変換されたファイルがあればブラウザにWebPを返す設定を.htaccessに記述します。

dummy01.jpgというファイル名の画像の場合、WebPのファイル名はdummy01.jpg.webpとする必要があります。
dummy01.webpでは読み込まれないので、注意が必要です。
png、gifなども同様に、dummy01.png.webp、dummy01.gif.webpとします。

# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
  # Rewriteモジュールを有効にする
  RewriteEngine On

 # WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例
 # その場合のみ後続のRewriteRuleを適用する
 RewriteCond %{HTTP_ACCEPT} image/webp

 # 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
 RewriteCond %{SCRIPT_FILENAME}.webp -f

 # *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可)
 # Content-Typeはimage/webpにする
 RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=_image_request
</IfModule>