Defer offscreen images の Lighthouse 警告を修正する方法

'Defer offscreen images' Lighthouse 警告とは？

Lighthouse の defer offscreen images 警告とは何でしょうか？ Lighthouse は以下のいずれかに該当するページにフラグを立てます：

• ビューポートの高さの3倍以下に表示される画像。
  画像が lazy loading されておらず、ページの表示領域の高さの3倍以下に終端があり、表示領域より下から始まる場合。
• かつ、0.02MB以上またはロードに50ms以上かかる画像。
  小さい画像やインライン化された画像は Lighthouse によって無視されます。多くの lazy loading スクリプトは小さなプレースホルダー画像を使用します。
• かつ、loading 属性が定義されていない画像。
  Lighthouse は loading="lazy" または loading="eager" 属性を持つ画像を無視します。

'Defer offscreen images' 警告は Lighthouse のメトリクスに直接影響を与えません。理論上、オフスクリーン画像を含むページでも高速に読み込むことは可能です。しかし実際にはそうならないことが多いです。オフスクリーン画像が多すぎると、Largest Contentful Paint (LCP) などの重要な Lighthouse メトリクスに間接的に影響を与える可能性が高くなります。

簡単なおさらい - Lazy loading とは？

Lazy loading とは、ページの表示領域にない画像を後から読み込むことを意味し、通常はスクロールして表示される直前に読み込まれます。

'Eager loaded' のオフスクリーン画像の原因は？

画像はデフォルトでは遅延読み込みされません。遅延読み込みされていないオフスクリーン画像は、画像の loading 属性が空であるか、カスタム lazy loading ライブラリに準拠していないためにページに配置されます。オフスクリーン画像は通常、以下の原因で発生します：

• CMS の不適切にコーディングされたプラグイン。
• ネイティブ lazy loading を無効にするプラグイン
• 背景画像
• 不適切な HTML を生成するページビルダー（例：Elementor や WP Bakery）。
  
• WYSIWYG エディター（TinyMCE など）にコピー＆ペーストされたテキスト。
• 不適切なテンプレートコーディング。

オフスクリーン画像がページスピードに与える影響

オフスクリーン画像は Lighthouse のメトリクスに直接影響を与えません。しかし、ウェブページのレンダリングを不必要に複雑にし、高い Lighthouse スコアを取得することをほぼ不可能にします。ブラウザはウェブページを画面に表示する前に、より多くのリソースをダウンロードする必要があります。オフスクリーン画像には3つの問題があります。

• ブラウザはページをレンダリングする前に、より多くの画像をダウンロードする必要があります。
• ページのレンダリングに必要な他のリソースは、優先度が低くなるため遅延する可能性があります。
• ブラウザはページのレンダリング時に、はるかに多くのメモリを使用する可能性があります。

'Defer offscreen images' の修正方法

'Defer offscreen images' を修正するには、表示ビューポートにない画像を lazy loading する必要があります。ネイティブ lazy loading または lazy loading ライブラリを追加することで実現できます。ネイティブ lazy loading を追加するには、画像要素に 'loading="lazy"' を追加するだけです。

<img      src="image.webp" 
     alt="a native lazy loaded image" 
     width="300" height="300">

代替手段として、lazysizes のようなネイティブ lazy loading ライブラリを追加するか、独自の lazy loading を実装することもできます（思っているよりも簡単です）。

そこから少し調査が必要です。これらの画像が遅延読み込みされずにページに配置されている原因を特定してみてください。主な原因は5つあります：

1. CMS の不適切にコーディングされたプラグイン。
   一部のプラグインは、lazy loading を有効にする適切なフックを使用せずに、HTML を直接ページに追加する場合があります。
2. ネイティブ lazy loading を無効にするプラグイン。
   デフォルトでネイティブ lazy loading を無効にするプラグインが存在します。
3. 不適切な HTML を生成するページビルダー
   Elementor や WP Bakery のようなページビルダーは、最適とは言えない肥大化したコードを生成することがよくあります。これに対する簡単な修正方法はありません。ページビルダーはワークフローの一部であることが多いです。解決策には、肥大化したコードのクリーンアップとワークフローの変更が含まれます。
4. WYSIWYG エディターにコピー＆ペーストされたテキスト
   TinyMCE のようなほとんどの WYSIWYG エディターは、ペーストされたコードのクリーンアップが不十分です。特に Microsoft Word のような他のリッチテキストソースからペーストした場合に顕著です。これらのエディターは画像に lazy loading を追加しない場合があります。
5. 不適切な（テンプレート）コーディング。
   lazy loading が有効になっていても、テンプレートにハードコーディングされた画像は lazy loading されていない可能性があります。テンプレートのオフスクリーン画像を確認し、lazy loading を適用してください。

どちらが優れているか - ネイティブ lazy loading vs lazy loading スクリプト

どちらが優れているでしょうか？ブラウザネイティブの loading="lazy" と lazy loading スクリプト、どちらを使うべきでしょうか？個人的にはブラウザネイティブの lazy loading を推奨します。なぜなら、オーバーヘッドを生むような外部スクリプトを使用する必要がないからです。ネイティブ lazy loading はより高速です。ただし、ネイティブ lazy loading は Safari ではサポートされていません。ユーザーの大半が iPhone や Mac でウェブを閲覧している場合は、lazy loading スクリプトの使用を検討してください。ほとんどの場合、ネイティブ lazy loading のメリットは Safari をサポートしないデメリットを上回ります。

'Defer offscreen images' の回避策

オフスクリーン画像を遅延読み込みできない場合もあります。テンプレートにアクセスできなかったり、CMS が lazy loading をサポートしていなかったりする場合です。オフスクリーン画像の影響を軽減するための回避策がいくつかあります。これらの回避策は完璧とは言えず、新たな課題を生む可能性があります。

• 画像を最小化・圧縮する。
  現在の画像を最小化・圧縮してください。小さい画像は大きい画像よりも読み込みパフォーマンスへの影響が少なくなります。
• より高速な新しい画像フォーマットを使用する。
  PNG や JPEG ファイル形式の代わりに、WebP のようなより高速なファイル形式に切り替えてください。
• 大きなページを複数のページに分割する。
  大きなページを複数のページに分割することで、ページに表示される画像の数を減らすことができます。
• 無限スクロールを実装する。
  無限スクロールは基本的に lazy loading と同じ概念ですが、画像だけでなくウェブページ全体のパーツに適用されます。画像のような繰り返し要素をスクロールする場合（Pinterest などを参照）、無限スクロールによりページ速度を大幅に改善できる可能性があります。