標準化された読み込み属性を採用するための教訓
この投稿の目的は、CMS プラットフォームのデベロッパーやコントリビューター（CMS コアの開発担当者）に、今こそブラウザレベルの画像遅延読み込み機能のサポートを実装するべき時であることを納得してもらうことです。また、高品質のユーザー エクスペリエンスを確保し、遅延読み込みを実装しながら他のデベロッパーによるカスタマイズを可能にするための推奨事項も紹介します。このガイドラインは、WordPress へのサポートの追加と、Joomla、Drupal、TYPO3 での機能の実装を支援してきた Google の経験に基づいています。
CMS プラットフォームのデベロッパーであれ、CMS ユーザー（CMS でウェブサイトを構築する担当者など）であれ、この投稿を参照すれば、CMS でブラウザレベルの遅延読み込みを利用するメリットについて詳しく知ることができます。CMS プラットフォームに遅延読み込みを実装する方法については、次のステップのセクションをご覧ください。
背景情報
過去 1 年間で、loading 属性を使用した画像や iframe の遅延読み込みは WHATWG HTML 標準の一部になり、さまざまなブラウザでの採用が拡大しています。ただし、これらのマイルストーンは、ウェブをより高速かつリソース節約するための土台になるにすぎません。現在、分散ウェブ エコシステムで loading 属性を使用できるようにしています。
コンテンツ マネジメント システムはウェブサイトの約 60% を活用しているため、これらのプラットフォームは最新のブラウザ機能をウェブに導入するうえで重要な役割を果たしています。WordPress、Joomla、TYPO3 などの一般的なオープンソース CMS では、画像に loading 属性のサポートがすでに実装されています。ここでは、そのアプローチと、他の CMS プラットフォームにも導入するうえで役立つポイントを見ていきます。メディアの遅延読み込みは、サイトが大規模に恩恵を受けられる重要なウェブ パフォーマンス機能です。そのため、CMS コアレベルでの採用が推奨されます。
遅延読み込みを実装するケース
標準化
標準化されていないブラウザ機能を CMS に採用することで、広範なテストが容易になり、改善の余地がある領域が浮き彫りになります。ただし、CMS 全体での一般的なコンセンサスとして、ブラウザの機能が標準化されていない限り、各プラットフォームの拡張機能またはプラグインの形式で実装することをおすすめします。プラットフォーム コアへの採用を検討できるのは、標準化された機能です。
ブラウザ サポート
ブラウザによるこの機能のサポートも同様に懸念されます。CMS ユーザーの大多数がこの機能のメリットを享受できるはずです。この機能がまだサポートされていないブラウザの割合がかなり高い場合、少なくともそれらに悪影響が及ばないようにする必要があります。
ビューポートからの距離のしきい値
遅延読み込みの実装でよくある懸念は、読み込みサイクルが後の段階で開始されるため、ユーザーのビューポートに一度表示された画像が読み込まれない可能性が高くなることです。以前の JavaScript ベースのソリューションとは対照的に、ブラウザではこうしたアプローチに慎重に対応しています。さらに、実際のユーザー エクスペリエンス データに基づいてアプローチを微調整することで影響を最小限に抑えることができるため、ブラウザレベルの遅延読み込みは CMS プラットフォームで安全に導入できるはずです。
ユーザー エクスペリエンスに関する推奨事項
要素にディメンション属性を必須にする
レイアウト シフトを回避するために、画像や iframe などの埋め込みコンテンツには必ず寸法属性 width と height を含めることが以前から推奨されてきました。そうすることで、ブラウザは実際に読み込む前に要素のアスペクト比を推測できます。この推奨事項は、要素が遅延読み込みされているかどうかにかかわらず適用されます。ただし、ビューポートで画像が完全に読み込まれない可能性は 0.1% 高いため、遅延読み込みを使用すると、やや適用しやすくなります。
CMS では、すべての画像と iframe でディメンション属性を必ず指定してください。 そのような要素すべてでこれが不可能な場合は、両方の属性を指定しない画像の遅延読み込みをスキップすることをおすすめします。
スクロールせずに見える範囲の要素の遅延読み込みを回避する
現時点では、スクロールしなければ見えない範囲に配置されている画像と iframe に loading="lazy" 属性のみを追加することをおすすめします。これは、Largest Contentful Paint 指標の遅延（2021 年 7 月に顕著な遅延が生じる場合があるため）です。ただし、レンダリング プロセスの前に、ビューポートに対する要素の位置を評価するのは複雑であることを認識しておく必要があります。これは、CMS が loading 属性の追加に自動化されたアプローチを使用している場合に特に当てはまりますが、手動による操作であっても、さまざまなビューポート サイズやアスペクト比などのいくつかの要因を考慮する必要があります。その場合でも、スクロールせずに見える範囲に表示されるヒーロー画像やその他の画像や iframe は、遅延読み込みが行われないようにすることを強くおすすめします。
JavaScript のフォールバックを回避する
JavaScript を使用すると、loading 属性をまだサポートしていないブラウザに遅延読み込みを行うことができますが、このようなメカニズムでは常に画像や iframe の src 属性を最初に削除する必要があるため、この属性をサポートしているブラウザでは遅延が発生します。さらに、このような JavaScript ベースのソリューションを大規模な CMS のフロントエンドにロールアウトすると、潜在的な問題の表領域が増加します。これは、標準化されたブラウザ機能が導入される前に、主要な CMS がコアに遅延読み込みを採用していない理由の一環です。
技術的な推奨事項
遅延読み込みをデフォルトで有効にする
ブラウザレベルの遅延読み込みを実装する CMS では、全体としてこの機能をデフォルトで有効にすることをおすすめします。つまり、画像と iframe に、ディメンション属性を含む要素に対してのみ loading="lazy" を追加する必要があります。この機能をデフォルトで有効にすると、手動で（たとえばイメージごとに）有効にした場合よりも、ネットワーク リソースを節約できます。
可能な限り、loading="lazy" はスクロールしなければ見えない範囲に表示される可能性のある要素にのみ追加してください。クライアントサイドでの認識が低めで、ビューポートのサイズが多様であるため、この要件を CMS に実装するのは複雑な場合がありますが、少なくともおおよそのヒューリスティックを使用して、スクロールせずに見える範囲に表示される可能性が高いヒーロー画像などの要素は遅延読み込みの対象から除外することをおすすめします。
要素ごとの変更を許可する
loading="lazy" はデフォルトでイメージと iframe に追加する必要がありますが、LCP の最適化などのために、特定のイメージの属性を省略できるようにすることが重要です。CMS の利用者が平均的にテクノロジーに詳しいと考えられる場合は、すべての画像と iframe に公開される UI コントロールを使用すると、その要素の遅延読み込みを無効にできます。別の方法または追加として、API をサードパーティのデベロッパーに公開して、コードを介して同様の変更を行うこともできます。
たとえば、WordPress では、HTML タグまたはコンテキストまたはコンテンツ内の特定の HTML 要素について、loading 属性をスキップできます。
既存コンテンツのレトロフィット
loading 属性を CMS の HTML 要素に追加する方法は、大まかに次の 2 つです。
- バックエンドのコンテンツ エディタ内から属性を追加し、この属性をデータベースに永続的に保存します。
- この属性は、フロントエンドでデータベースからのコンテンツをレンダリングするときに、その場で追加します。
CMS では、既存のコンテンツでも遅延読み込みのメリットを得るために、レンダリング時にその場で属性を追加することをおすすめします。この属性をエディタからしか追加できない場合は、新しいコンテンツや最近変更されたコンテンツのみが有効になり、CMS がネットワーク リソースを節約する際の影響が大幅に軽減されます。さらに、この属性をその場で追加することで、ブラウザレベルの遅延読み込みの機能がさらに拡張された場合に、将来的な変更を簡単に行えるようになります。
ただし、属性をその場で追加することで、要素に既存の可能性のある loading 属性に対応し、そのような属性が優先されます。これにより、CMS またはその拡張機能も、重複する属性との競合を発生させることなく、エディタ主導のアプローチを実装できます。
サーバーサイドのパフォーマンスを最適化する
サーバーサイド ミドルウェアなどを使用してオンザフライでコンテンツに loading 属性を追加する場合は、速度を考慮してください。この属性は、CMS に応じて DOM トラバーサルまたは正規表現で追加できますが、パフォーマンスを高めるためには後者をおすすめします。
使用する正規表現は最小限に抑える必要があります。たとえば、属性を含むコンテンツ内のすべての img タグと iframe タグを収集し、必要に応じて各タグ文字列に loading 属性を追加する 1 つの正規表現です。たとえば、WordPress では、特定の要素に対してさまざまなオンザフライ オペレーションを実行する単一の一般的な正規表現を使用しています。その loading="lazy" の追加は 1 つのため、1 つの正規表現を使用して複数の機能を促進します。また、CMS のコアの遅延読み込みは、拡張機能ではなく、CMS のコアの遅延読み込みをおすすめする理由の一つです。そうすることで、サーバー側のパフォーマンスを最適化できます。
次のステップ
CMS で機能のサポートを追加するための既存の機能リクエスト チケットがあるかどうかを確認します。まだない場合は新しいチケットを開いてください。必要に応じてこの投稿を参照し、提案に役立ててください。
ご質問やご意見がございましたら、私にツイートしてください（felixarntz@）。また、ブラウザレベルの遅延読み込みのサポートが追加されている場合は、お使いの CMS をこのページに記載してください。他の課題に直面した場合は、解決策を見つけるために、もっと知りたいと思っています。
CMS プラットフォームの開発者の方は、他の CMS で遅延読み込みがどのように実装されているかをご確認ください。
調査から得られた知見とこの投稿で紹介した技術的な推奨事項を活用して、パッチや pull リクエストなどで CMS へのコードの投稿を開始できます。
ヒーロー写真撮影: Colin Watts、Unsplash より