次世代フォーマットでの画像の配信：Lighthouseが実際に求めていること

Lighthouseの警告は、JPEGやPNGファイルをWebPまたはAVIFに変換し、オリジナルの画像をフォールバックとして指定したpicture要素を介して配信することを意味しています。 この監査は、アーキテクチャの変更ではなく機械的な修正で済むため、クリアするのが比較的簡単なものの1つです。

Lighthouseは、モダンなフォーマットにすることで大幅にサイズを削減できると判断した画像を見つけたときに警告を表示します。この予測値はダウンロードされたファイルに基づいているため、レポートされる削減効果は通常達成可能であり、時には控えめに算出されていることもあります。

Lighthouseが測定しているもの

Lighthouseは内部で各画像をWebPに再エンコードし、削減量がしきい値を超えた場合にその差分を報告します。 レポートに表示される数値は、一般的な推奨事項ではなく、実際の予測値です。

しきい値を下回る画像は無視されるため、30枚の画像があるページでも、監査に表示されるのは4枚だけということがあります。リストに掲載されたファイルは、最初に修正すべき価値のあるものです。これらを解消すれば、ページ上の他の画像が古いフォーマットのままであっても、通常は警告全体が消えます。

監査を満たすマークアップ

picture要素を使用し、最初にAVIF、次にWebPを配置し、imgタグにオリジナルのJPEGを指定します。 ブラウザは自身が理解できる最初のソースを選択するため、新しいブラウザには軽量なファイルが配信され、古いブラウザでも画像が表示されます。

imgタグは、altテキスト、寸法、およびフォールバックを保持するため、残しておく必要があります。width属性とheight属性を省略すると、画像が読み込まれる際にレイアウトシフトが発生し、この監査を修正する一方で、別のCore Web Vitalsの測定値を悪化させてしまいます。両方の属性に、フォールバック画像の本来のピクセルサイズを設定してください。

監査をクリアする方法

警告を適切に解決するには、以下の6つのステップに従ってください。

1. Lighthouseレポートを開き、測定可能な削減効果があるとして名前が挙げられている画像をリストアップします。
2. 多くの画像はフォーマットが不適切なだけでなくサイズ自体が大きすぎるため、各画像の表示サイズを確認します。
3. 各画像を実際の表示幅にリサイズします。高解像度ディスプレイ向けに2倍のサイズにします。
4. WebPには品質80で変換し、ページ内で最も大きな画像についてはAVIFに品質65で変換します。
5. 変換後のファイルを、オリジナルをimgフォールバックとしたpicture要素を介して配信します。
6. Lighthouseを再実行し、警告が消え、レイアウトシフトが発生していないことを確認します。

ステップ3はステップ4よりも重要です。ファイルサイズの大部分は寸法によって決まるため、サイズが大きすぎるWebPは、依然として大きすぎる画像のままです。一括変換には数分しかかかりませんが、マークアップの作成には通常それ以上の時間がかかります。

どの画像にどのフォーマットを使うべきか

お使いのプラットフォームはすでにこれを行っていますか

多くのコンテンツシステムやホストは画像を自動的に変換するため、手動で構築する前に確認してください。 同じ作業を二重に行うのはよくあることであり、無駄です。

2分でテストできます。公開されたページを開き、画像を右クリックして新しいタブで開き、アドレスバーのファイル拡張子を確認します。JPEGとしてアップロードしたファイルの拡張子が.webpになっていれば、プラットフォームがすでに変換を行っています。Shopify、ほとんどの管理型WordPressホスト、およびいくつかのサイトビルダーは、デフォルトでこれを行います。

警告が再び表示される理由

変換ステップが自動ではなく手動である場合、新しいアップロードによって問題が再発します。 1月にクリアされたサイトでも、編集者がカメラから直接アップロードしていると、6月には再び警告が表示されるようになります。

ファイルだけを修正するのではなく、プロセスを修正してください。プラットフォームレベルで自動変換を有効にするか、アップロード前に画像をリサイズして変換するというシンプルなルールを合意します。監査は平均的な画像ではなく最も悪い画像を測定するため、複数人が公開作業を行うサイトでは、ルールを明文化することが重要です。

AVIF、WebP、またはその両方を使用すべきか

ほとんどのサイトではWebPのみを使用し、AVIFはページ内の最も大きな画像にのみ追加します。 両方をサポートすると、生成、保存、同期を維持する必要があるファイルの数が2倍になりますが、通常の画像における削減効果はわずかです。

写真を多用するサイトでは計算が変わります。AVIFを使用することで、すでに数百キロバイトあるファイルをさらに20から30パーセント削減できます。600 KBのヒーロー画像があるページでは、これは実質的な削減になります。40 KBのサムネイルが並ぶページでは、追加のパイプライン構築にかかる労力が得られる効果を上回るため、WebPだけで監査をクリアするのに十分です。

結果を正しく確認する

ブラウザの拡張機能は測定を歪めるため、拡張機能を無効にしたプライベートウィンドウでLighthouseを再実行してください。 スコアは実行ごとに変動するため、1回限りの数値を信頼するのではなく、3回の実行結果を比較します。

ブラウザが新しいフォーマットを実際に受信していることを、想定するだけでなく確認してください。デベロッパーツールを開き、Networkタブに切り替え、画像でフィルタリングしてページをリロードします。Type列に、実際に配信されたものが表示されます。変換後も依然としてJPEGが配信されている場合は、通常、picture要素のマークアップが間違っているか、キャッシュレイヤーが以前のバージョンを保持していることを意味します。

同時に表示される関連する監査

• 画像を適切なサイズに設定する。 画像が表示領域よりも大きくなっています。圧縮するのではなく、リサイズしてください。
• 画像を効率よくエンコードする。 圧縮が不十分です。品質設定を下げてください。
• オフスクリーン画像の遅延読み込み。 ファーストビューより下にある画像に遅延読み込みを追加します。
• 最大視覚コンテンツ（LCP）の要素。 通常はヒーロー画像であり、最初に注意を払うべきものです。
• 画像要素にwidthとheightが明示的に指定されていない。 レイアウトシフトを防ぐために、両方の属性を追加します。

これら5つの監査は通常一緒に表示され、レポートに記載された画像をリサイズして変換することで、そのほとんどを1回でクリアできます。

これで実際にページがどれだけ改善されるか

モダンフォーマットへの変換により、通常は画像容量の25から35パーセントが削減され、最初にリサイズを行うことで、さらに大幅に削減されることがよくあります。 画像の多いページでは、組み合わせによる効果が70から80パーセントに達することも珍しくありません。

この改善は、メインコンテンツがどれだけ早く表示されるかを測定するLargest Contentful Paint（LCP）に現れます。この測定値は通常1枚の画像によって決定されるため、ヒーローファイルのサイズを削減することは、ページ全体におけるその割合以上の効果をもたらします。20枚の小さな画像を削減することよりも、1枚の大きな画像を削減することの方が重要です。

やってはいけないこと

JPEGのフォールバックを削除しないでください。また、訪問者がダウンロードする画像を変換しないでください。 どちらの過ちも、わずかなスコア改善のために実際の機能を犠牲にしてしまいます。

プレス向け素材、印刷可能なガイド、ダウンロード可能なテンプレート、サプライヤーファイルなどは、WebPがブラウザ外で扱いにくいため、JPEGまたはPNGのままにしておくべきです。これらをモダンフォーマットで配信すると、ファイルを開けないユーザーからのサポート依頼が発生し、節約された帯域幅以上のコストがかかることになります。

レポートに記載された画像の変換

すでに公開されているバージョンからではなく、オリジナルのファイルから変換してください。圧縮されたJPEGは新しいファイルに劣化を引き起こすためです。 エンコーダーは既存のノイズと実際のディテールを区別できず、それらを維持するために容量を消費してしまいます。

最大500個のファイルを一度にドロップするか、ZIPアーカイブを直接ドラッグインすれば、セット全体が1回で変換されます。すべてがブラウザ内の独自のプロセッサで実行されるため、クライアントのサイト、ステージングアセット、未公開のページがサーバーに送信されることはありません。ネットワークを介して1つのファイルも送信することなく、サイト全体の変換が数分で完了します。

変換後のファイルは、一致する名前を使用してオリジナルと同じ場所に保管してください。これにより、画像ごとに手動で編集するのではなく、予測可能なパターンでpicture要素のマークアップを生成できるようになります。hero.jpg、hero.webp、hero.avifを保持するフォルダーはテンプレート化が容易であり、次のフォーマット移行の際にも、すべてのページを書き換えるのではなく、一括変換で済むようになります。