このサイトの高速化の一環として画像形式を見直して WebP での配信に切り替えた話です。今年 4 月頃のことです。
目次
PageSpeed Insights のパフォーマンスが 67 点
4 月の初めに、このサイトのトップページの画像が大きい画面だとグレーの枠がついて表示されるバグを修正しようとしたら、意外と根本から直さないといけなくて、今まで表示のために使っていた WordPress プラグインの Photo Express for Google から表示部分を取り出して改良を加えてプラグインを作りました。そして PageSpeed Insights で計測したら、とても点数が悪くモバイルでパフォーマンス 67 点、ユーザー補助 77 点、おすすめの方法 100 点、 SEO 85 点と散々な結果でした。
2019 年の 8 月に計測した時は 98 点だったのにガックリしました。
調べたところ LCP (Largest Contentful Paint) という指標が 2020 年 5 月に Google から指標として発表され、 2021 年 6 月中旬から本格的に検索ランキング要因の一部として取り入れられているようです。 2019 年の 7 月くらいにサイトのデザインを一新したあとです。育児と介護と実家の片づけに忙しくて、情報を完全にキャッチアップできていませんでした。
PageSpeed Insights にて画像の形式を変更すると容量が少なくなると指摘されました。今までは互換性重視で JPEG と PNG だったのですが、 WebP か AVIF に変更することにしました。
画像形式は AVIF と WebP のどちらにするか検証
このサイトの画像は Google フォトに置いてそれを Blogger から URL を取ってきています。以下のサイトを見ると、 rw というパラメーターを付加するだけで WebP に変更できるようです。
→ GitHub Gist ： Google/Blogger Image URL Parameters
実験のモデルは 4 月のフロントページの桜の画像で JEPG 形式で Google フォトに節約画質でアップロードしたものです。 480 × 360 ピクセルで転送容量は 93.88 kB です。 URL は以下です。
rw というパラメーターを付加するだけでこんな感じに WebP に変換してくれます。便利ですね。（拡張子は変更しなくても rw で出力されます。）転送容量は 64.99 kB で、約 30 kB 減りました。
以下が上記のページからの抜粋です。
- rj
- 強制 JPEG 書き出し
- rp
- 強制 PNG 書き出し
- rw
- 強制 WebP 書き出し
- rg
- 強制 GIF 書き出し
- l#
- クオリティーレベル
- e#
- キャッシュ日数
これを見て気がつくでしょう。たぶん AVIF に変換したかったら、 ra というパラメーターをつければいいことに。
で試して見たのがこちら。
見事 AVIF には変換できました。しかしです、転送容量が 107.41 kB と JPEG より多くなってしまいました。
じゃあクオリティーをさげればいいのではないかと、 l10 というパラメーターを追加しました。しかしクオリティーのパラメーターが有効にならず、 AVIF の転送容量は変わらず JPEG 配信の方が容量が少ないという結果です。
WebP なら l10 のパラメーターが効き、転送容量が 12.52 kB になりました。
ということで、 AVIF は諦めて WebP にすることにしました。
一部のファーストビューの画像は自分のサーバーに置くことにした
実験で使った桜の画像の URL は Google アルバムアーカイブがまだ生きていた頃に取得した URL なので、サーバーの応答時間がとても速いです。
同じ画像を Blogger から URL を取得したものに変更するとサーバーの応答時間が極端に遅くなり、転送時間が 575 ms です。
LCP を早くするのにこの 575 ms は致命的に遅いです。このサイトはファーストビューは画像とタイトルしかほぼないので、 LCP を改善するには画像の読み込み速度を速くするしかないのです。
その昔は Google のサイトに画像を置いていた方がレスポンスが圧倒的に速かったのでそうしていたのですが、 Picasa が終了し後継の Google アルバムアーカイブも終了してから、 Bologger 経由で URL を取得した画像のレスポンスが非常に悪いのです。たぶん意図的に 500 ms ほど遅くしていると思われます。
そこで Google アルバムアーカイブ時代の URL はそのままで、 Blogger 経由で取得した URL ファーストビューの画像を速く読み込むために、アイキャッチにしている画像だけ自分のサーバーに置くことにしました。ファーストビューの画像は CSS でぼかしているので、解像度も高画質の必要なくなんとなくぼやっと形がわかればよいのです。ブラウザの表示サイズの半分でかつクオリティーを極限まで下げることにしました。自分のサーバーに置くなら画像形式は何でもよいので、圧縮率がよいという AVIF を検討しました。
AppStore に AVIF Converter という変換アプリがあったので、インストールして圧縮してみました。 JPEG よりは容量が少なくなりましたが、クオリティーのパラメーターを設定するには追加でお金を払う必要があります。今年の春から無料で使えるようになった Affinity では AVIF で書き出すことができません。そこでとりあえずフリーウェアの GIMP を試してみると、なかなかの圧縮率で AVIF のファイルができました。
しかし残念なのはクオリティーを落としても転送容量が 4.13 kB あります。ということで AVIF にするのは諦めて、 WebP を採用することにしました。 AVIF はグラデーションの圧縮に優れているようで、今回の用途にはあまり合わない画像形式だったようです。
WebP でクオリティーを最低レベルにしたら同じ画像サイズ転送容量が 3.82 kB 台と小さくなりました。 AVIF より WebP の方が対応しているブラウザが多いので、容量が小さくなるなら WebP を選択するのが賢いでしょう。
AVIF で保存すると Google フォトにて元の画質になる
検証の過程で AVIF で圧縮したものを Google フォトに上げると節約画質でバックアップしているにも関わらず、元の画像で保存されることに気がつきました。これは AVIF での保存の方が Google の保存形式より小さい場合に起こります。有名なところでは iPhone で撮影した HEIC 形式の画像です。
そして先に上げたパラメーターを使うと AVIF 形式を WebP 形式に変換して表示することが可能です。 Google フォトが AVIF のクオリティーのパラメーターに対応したときに対応できるように、ブログ本文の画像は AVIF で保存することにしました。
使っている現像ソフトの Luminar Neo は AVIF 形式での書き出しに対応していないので、一度可逆圧縮の PNG に書き出して、それを AVIF Converter と GIMP で変換して Google フォトにバックアップして元の画質で保存されるかどうか検証しました。結果 AVIF Converter は無料版では大半の画像で元の画質では保存できず再圧縮がかかってしまいました。一方 GIMP で変換したものはすべて元の画質で保存できました。というわけでブログ本文の画像は GIMP で AVIF に変換したものを Google フォトにバックアップすることにしました。
| ファイル名 | JPEG via Luminar Neo (KB) |
PNG (KB) | AVIF via AVIF Converter (KB) |
Google Photos 元の画質 |
AVIF via GIMP from PNG (KB) |
Google Photos 元の画質 |
|---|---|---|---|---|---|---|
| 20260407_1 | 1,045 | 6,283 | 180 | ○ | 52 | ○ |
| 20260407_2 | 1,090 | 7,058 | 301 | 68 | ○ | |
| 20260407_3 | 825 | 6,584 | 173 | ○ | 63 | ○ |
| 20260407_4 | 1,006 | 7,192 | 241 | 71 | ○ | |
| 20260407_5 | 975 | 6,245 | 225 | 33 | ○ | |
| 20260407_6 | 732 | 6,268 | 96 | ○ | 24 | ○ |
| 20260407_7 | 2,089 | 10,188 | 1,296 | 404 | ○ |
1 枚 1 枚手動で圧縮するのは面倒なので、 GIMP に Batcher というプラグインを入れてバッチ処理を行うことにしました。 GIMP は 3.0 から内部がガラッと変わったらしく、 2 系までのバッチ処理のプラグインは使えないので、使い方を調べても有用な情報はほぼなくて、何度も試行錯誤してバッチ処理を完成させました。ウォーターマークを入れる処理とファイル名を変更する処理もバッチ処理に組み込みました。（これはまた後日記事にします。）
最後にどうせ再圧縮するなら、 PNG で書き出す必要はないのではないかと思い、無圧縮の TIFF 16 ビットで書き出してから、 AVIF に変換したもの容量の違いです。
| ファイル名 | TIFF (KB) | AVIF via GIMP form TIFF (KB) |
Google Photos 元の画質 |
|---|---|---|---|
| 20260407_1 | 36,883 | 52 | ○ |
| 20260407_2 | 38,361 | 69 | ○ |
| 20260407_3 | 38,765 | 64 | ○ |
| 20260407_4 | 38,203 | 72 | ○ |
| 20260407_5 | 35,704 | 35 | ○ |
| 20260407_6 | 34,209 | 24 | ○ |
| 20260407_7 | 39,149 | 407 | ○ |
PNG に圧縮する時間がかからないので、多分これが一番速く作業できると思います。 AVIF に圧縮が終わったら、 TIFF ファイルは削除します。
こんな感じでファーストビューの画像を自分のサーバーにおいて WebP で、本文の画素は Google フォトに置いてパラメーターで WebP に変換して出力するとことにしました。自作テーマにて背景画像を指定している部分の function.php を書き換えて対応しました。
この変更だけで PageSpeed Insights のモバイルにてパフォーマンス 86 点、ユーザー補助 77 点、おすすめの方法 100 点、 SEO 92 点とスコアが上がりました。画像に h1 タグが載っている場合、 LCP の改善には画像の読み込み速度を改善するのが一番効果が高いです。
こんなに点数が悪いことを見せつけられると、改善しなくてはと思いここからサイトの改修が本格的に始まるのです。
