画像をWebp化しサイトを高速化したい。
PageSpeed Insightsで「次世代フォーマットで画像配信することで高速化が見込める」との表示が出たけどどうすればいいの？
この記事では、プラグインEWWW Image Optimizerを使用して次世代フォーマットWebPで画像配信するための手順についてお伝えします。
次世代フォーマットで画像配信する理由
私が次世代フォーマットで画像配信する理由は他でもありません。
PageSpeed Insightsで改善項目に「次世代フォーマットでの画像配信」で高速化が見込めると出たからです。
画像を次世代フォーマットにする手順について色々な方の記事を見てもほとんどの方の記事が、PageSpeed Insightsのスコアアップ対策として紹介されています。
この記事を見ていただいている方も、悩みを持ちこの記事に辿り着いていただいたのではないでしょうか。
この記事については次のような悩みにお応えします。
- 次世代フォーマットにする手順が知りたい
- 次世代フォーマットにすると実際のところスコアはどうなるの
- PageSpeed Insightsでパソコンのスコアは良いがモバイルのスコアが上がらない
次世代フォーマットとは
PageSpeed Insightsで改善項目に「次世代フォーマットでの画像配信」として紹介されているのは、以下の３つです。
- JPEG2000
- JPEG XR
- WebP
これらのいづれかのフォーマットにすることで、PNGやJPEGより圧縮性能が高く、ダウンロード時間やデータ使用量を抑える事ができると紹介されています。
JPEG2000
JPEG2000は、JPEGの後継として規格化された画像フォーマットです。
詳しいことはググってください。
ここで大事なのは、JPEG2000に対応しているブラウザはSafariのみという点です。
JPEG XR
JPEG XRは、マイクロソフトが開発した画像フォーマットです。
詳しいことはまたもやググってもらいますが、JPEG2000の改善版のようです。
ここで大事なのは、JPEG XRに対応しているブラウザはマイクロソフトのEdgeとIEのみという点です。
WebP
WebPは、グーグルが開発した画像フォーマットです。
なんとなく見えてきたぞ。
グーグルといえばChrome、つまり対応ブラウザは、Chromeのみ・・・
かと思いきや、WebPに対応しているブラウザはChrome、Edge、Firefox、Operaです。
自社開発の画像フォーマットを最後に紹介しておいて、複数ブラウザ対応だなんて、謙虚だぜグーグルさん。
WebP化することにした
私のサイトでは画像をWebP化することにしました。
理由は以下の３点です。
- 複数ブラウザに対応している
- 画像を変換してWordPressにアップロードするのが面倒くさい
- EWWW Image Optimizerで対応できる
複数ブラウザに対応しているというのは前述の通りです。
決め手は、画像を変換してWordPressにアップロードするのが面倒くさいというのと、既に有効化して画像圧縮に利用しているEWWW Image OptimizerでWebP化の機能を提供しているので簡単そうだという理由です。
画像をWebP化する
それではWordpressで画像をWebP化するための手順と、対策前後のスコアがどうなったのか見ていきましょう。
WebP化対策前
私が対策前にPageSpeed Insightsで計測したスコアがこれです。
WebP化対策前のパソコンスピード
パソコンのスピードはWebP化対策前でもそこそこ良いスコアが出ています。
WebP化対策前のモバイルスピード
モバイルのスピードはWebP化対策前だと「遅い」認定されてしまっています。
WebP化対策前の改善項目
WebP化対策前のモバイル改善項目です。
次世代フォーマットでの画像配信とすることで2.55秒も改善できるという結果になっています。
モバイルのスピード前提はchromeの3G回線でのスピードで計測する（2019年3月時点）とのことです。
そのため画像の表示速度は画像の重さに大きく左右されるのでしょう。
WebP化手順
WebP化するための手順について紹介します。
ただし、WebP化の実施により何かしら不具合が発生した場合でも当サイトでの責任負い兼ねます。
あくまで自己責任でお願いします。
EWWW Image Optimizerの有効化と設定変更
EWWW Image Optimizerを使用していない方はまずインストールと有効化を実施してください。
その後、EWWW Image Optimizerの設定を変更します。
[br num=”1″]「WebP」タブの「JPG,PNGからWebP」のチェックボックスにチェックを入れて変更ボタンをクリックします。
[br num=”1″]
.htaccessの編集
.htaccessを編集します。
念の為バックアップを取ってから実施しましょう。
[br num=”1″]これをすることでブラウザがWebPに対応していればWebPで表示して、対応していなければ元のフォーマットで表示してくれるようになります。
[br num=”1″].htaccessの編集方法は２つあります。
EWWW Image Optimizerの設定画面に表示のコードを.htaccessに直接書き込む方法と、
EWWW Image Optimizerの設定画面の「リライトルールを挿入する」ボタンをクリックする方法です。
[br num=”1″]どちらの手段でも今後の手順がうまくいけば問題ありません。
下記は「リライトルールを挿入する」ボタンをクリックした場合の画面です。
「ルールが正常に検証されました」となっていることを確認してください。
ここで画面の右下の四角の赤色の背景、白文字で「PNG」となっているところが、WebP対応ブラウザ（Chrome等）で確認すると緑色の背景、白文字で「WebP」と表示されています。
私の場合はSafariで作業していたので赤色の背景、白文字で「PNG」のまま変わりませんでしたが、上手くいっているので特に問題はないです。
実際Chromeで開いてみると緑になっていました。
.htaccessの確認
ここまで特に問題なく進んでいる場合はこの手順はスキップしても構いません。
.htaccessに反映されているか念の為確認するだけです。
[br num=”1″]エックスサーバーのサーバーパネルから.htaccessを開きます。
[br num=”1″]リライトルールが挿入されていることを確認します。
[br num=”1″]
既にアップロードしている画像をWebP化する
ここまでの手順が上手く行っていれば、今後アップロードする画像はWebP化されます。
既にアップロード済みの画像をWebP化するには、一括最適化を実行します。
[br num=”1″]メディアの一括最適化から「再最適化を強制」にチェックが入っていることを確認して再最適化を実行します。
[br num=”1″]
WebP化されたことを確認する
WebP化されたことは、ブラウザ側で確認します。
Chrome上で右クリックし、「検証」をクリックします。
表示された画面で、「Network」、「Img」の順にクリックし、Type欄がWebPになっていればOKです。
私の場合なぜか数点pngのままのファイルもありましたが、一旦無視して対策完了とし、対策後の検証に進みました。
WebP化対策後
私が対策後にPageSpeed Insightsで計測したスコアがこれです。
WebP化対策後のパソコンスピード
パソコンのスピードは若干の改善は見られたものの、元々があまり悪くなかったのであまり改善はありません。
ここは遅くならなかったということでOKです。
WebP化対策後のモバイルスピード
モバイルのスピードは圧倒的に改善されました。
ただし１点だけ気になる事が。
実は、改善直後に再度スピードを計測したところ、スコアに変化はありませんでした。
しかし、次の日に計測し直したところ、画像のような改善が見られました。
改善から次の日の計測までに特に何もしていないので、普通にWebP化したことで改善されたと信じてはいます。
WebP化対策後の改善項目
WebP化対策後のモバイル改善項目です。
改善できる項目に「次世代フォーマットでの画像配信」という項目がなくなりました。
めでたしめでたし。
まとめ
画像を次世代フォーマットのWebP化したことで、モバイルのページスピードに改善が見られました。
WebP化後の検証も兼ねて、この記事を書いたのはWebP化の約１ヶ月後です。
WebP化についてはあくまで自己責任でお願いしていますが、私の場合、今の所不具合は発生していません。
何か発生した場合は追記します。