Page Speed Insightsの次世代フォーマットの画像配信をWordPressで対応した方法

2018年7月頃よりGoogleは「スピードアップデート」と呼ばれる新しいアルゴリズムを発表。

モバイル検索のランキング要素として「ページの読み込み速度」がより重要になりました。

Googleのページ検証ツール Page Speed Insights（ページスピードインサイト）にも11月初旬より、モバイルでの評価が3G回線時の通信速度ベースとなり、以前よりも厳格な基準となっています。

チェックした時にページ読み込みの時間短縮の改善できる項目として新しく表示されるようになったのが「次世代フォーマットの画像配信」です。

今回は限定的な方法ですがWordPressで次世代フォーマットに対応した方法を紹介したいと思います。

ケー

ウェブサイトのようにトップページを固定ページにしているブログを最近よく見かけるので参考になれば幸いです。

記事リストなどの対応はテーマにより手順が異なるのと、今後対応されると思われるので今回はトップページを固定ページにしてHTMLを直接記述している場合の例となります。

次世代フォーマットの特長・対応ブラウザ

次世代フォーマットについての説明には「JPEG 2000」「JPEG XR」「WebP」という画像フォーマットを推奨していますがあまり聞き慣れない名前です。

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

まずは、それぞれの特長と対応しているブラウザからどのフォーマットを選ぶか検討していきます。

JPEG 2000

対応ブラウザで閲覧している場合、以下にJPEG 2000の画像が表示されています。

JPEG 2000はJPEGの後継規格として生まれ、圧縮時にJPEGの代表的な劣化パターンである「ブロックノイズ」や「モスキートノイズ」が軽減されています。

2018年12月現在Safariのみしか対応しておらず、その他の主要ブラウザでは表示できないため、このフォーマットの採用は候補から外します。

ポイント

対応ブラウザが少ない
処理が重い
拡張子 .jp2

JPEG XR

対応ブラウザで閲覧している場合、以下にJPEG XRの画像が表示されています。

JPEGXRは、JPEGの後継規格でMicrosoftが開発。XRは「eXtended Range」の略。

マイクロソフトがVista以降のOSで標準対応していますが、その他の主要ブラウザはでは表示できないためこのフォーマットの採用は候補から外します。

ポイント

対応ブラウザが少ない
IE系のみ
拡張子 .jpx

WebP

対応ブラウザで閲覧している場合、以下にWebPの画像が表示されています。

WebP（ウェッピー）はGoogleが開発しているオープンな画像フォーマット。

Chromeが対応済みで今後Firefox(2019年1月)、Safari、Edgeも対応予定です。

IEについてはスマホ全盛の今となっては見捨てるしかないかも・・・と思いましたが、対応していないブラウザについては既存のフォーマットを出せますので、今回はWebPで対応してみます。

ポイント

Chromeが対応。Firefox、Edge、Safariも対応予定
拡張子 .webp

WebPへの画像変換方法

既存の画像フォーマットからWebPへの変換方法はいくつかあります。

PhotoShopのプラグインで変換

PhotoShopを利用している場合はプラグインがあります。

試してみたいというかたは以下のURLを参考にしてみてください。

参考 http://telegraphics.com.au/sw/product/WebPFormat

ターミナルからcwebpコマンドで変換（mac/Linux限定)

macを利用している場合はHomeBrewでインストールします。

$ brew install webp

使い方は以下の通り。画質は-q オプションで指定可能。

$ cwebp -q 90 before.jpg（圧縮前のファイル） -o after.webp（圧縮後のファイル）

参考 https://developers.google.com/speed/webp/docs/cwebp

Squooshで変換

WebPへの変換方法はいろいろあるようですが、squooshで変換するのが一番簡単です。

画像をアップロードして、CompressをWebPに変更。

お好みで画質（quality)などを調整したらダウンロードするだけです。

参考 https://squoosh.app/

画像をアップロードするためには？

いざWordPressでメディアにファイルをアップロードすると「セキュリティ上の理由によりこのファイル形式は許可されていません。」と表示されアップロードできません。

画像をアップロードするにはプラグインで対応するか、function.phpに追記して対応する必要があります。

プラグインで対応する

WordPressでは取り扱える拡張子を追加するプラグイン「WP Add Mime Types」を使いWebPを追加します。

プラグインの新規追加で「WP Add Mime Types」と入力。

同じ名前のプラグインの「今すぐインストール」でインストールします。

参考 https://kimiyakitani.wordpress.com/2013/08/16/published-wordpress-plugin-wp-add-mime-types/

インストール後に「有効化」をクリック。

[設定]-[Mime Type設定]の追加の項目に「webp = image/webp」と入力して設定を保存ボタンで完了です。

function.phpで対応する

子テーマのfunction.phpのバックアップを取ってから、以下を追記します。

function custom_mime_types( $mimes ) {
  $mimes['webp'] = 'image/webp';
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

WordPressでは未対応のファイルのためプレビューは表示されず、「サポートされていないファイルタイプ」と表示されますが、対応ブラウザでは表示されます。

HTMLの記述方法

HTMLは<picture>構文を利用。

以下のように記述します。

<picture> 
<source srcset="/wp-content/uploads/2018/12/ringo.webp" type="image/webp" /> 
<img src="/wp-content/uploads/2018/12/ringo.jpg" alt="りんご">  
</picture>

<source>要素のsrcsetにアップロードしたwebpファイルを指定。typeにMIME（ファイルの種類）の情報を記述します。

<source>要素srcsetの画像が表示できない場合は、<img>要素が表示されます。

ビジュアルエディタで作業するとタグがおかしくなるので注意

参考 html5rocks

対応前と対応後でのPageSpeedの変化

WebP対応前と対応後でどのようになったの以下が対応前。

次世代フォーマットの画像配信を対策すると2.1秒速くなるとのこと。

こちらが対応後。

なんと残念なことにモバイルの点数はまったく変わらず・・・。スコアを上げるためにはレンダリングブロックも当然対応しないとダメですね。

追記：翌日もう1度チェックしてみたところスコアが上がってました！

一夜明けてもう1度やってみたらスコアあがってた！https://t.co/ApS5fk9SEq pic.twitter.com/uoGXP9TEDE

— ケー (@weblog_life) 2018年12月19日

なお、GTmetrixはこのような感じ。