CMS 向けのブラウザレベルの遅延読み込み

標準化された loading 属性を採用するための学習

Felix Arntz

この投稿の目的は、CMS プラットフォームのデベロッパーとコントリビューター（つまり、CMS コアを開発する人々）に、今こそブラウザレベルの画像遅延読み込み機能のサポートを実装する時であると説得することです。また、遅延読み込みを実装する際に、高品質のユーザー エクスペリエンスを確保し、他のデベロッパーによるカスタマイズを可能にする方法に関する推奨事項も紹介します。これらのガイドラインは、WordPress へのサポート追加や、Joomla、Drupal、TYPO3 への機能実装を支援した経験に基づいています。

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 にサイズ属性を提供することが望ましいです。このような要素すべてでこれが不可能な場合は、これらの属性の両方を指定していない画像の遅延読み込みをスキップすることをおすすめします。

スクロールせずに見える範囲の要素の遅延読み込みを避ける

現時点では、CMS は、スクロールしなければ見えない位置にある画像と iframe にのみ loading="lazy" 属性を追加することをおすすめします。これは、Largest Contentful Paint 指標の遅延を回避するためです。この遅延は、2021 年 7 月に発見されたように、場合によっては重大なものになる可能性があります。ただし、レンダリング プロセスの前にビューポートに対する要素の位置を評価するのは複雑であることを認識する必要があります。これは、CMS が loading 属性を追加するために自動化されたアプローチを使用している場合に特に当てはまりますが、手動による介入に基づいている場合でも、異なるビューポート サイズやアスペクト比など、いくつかの要因を考慮する必要があります。それでも、ヒーロー画像や、スクロールせずに見える範囲に表示される可能性が高いその他の画像や iframe は、遅延読み込みから除外することを強くおすすめします。

JavaScript のフォールバックを回避する

JavaScript を使用して、loading 属性を（まだ）サポートしていないブラウザに遅延読み込みを提供することはできますが、そのようなメカニズムは常に、画像または iframe の src 属性を最初に削除することに依存しているため、属性をサポートしているブラウザで遅延が発生します。さらに、大規模な CMS のフロントエンドにこのような JavaScript ベースのソリューションを導入すると、潜在的な問題の発生範囲が広がります。これが、標準化されたブラウザ機能が登場する前に、主要な CMS がコアに遅延読み込みを採用していなかった理由の一つです。

技術的な推奨事項

遅延読み込みをデフォルトで有効にする

ブラウザレベルの遅延読み込みを実装する CMS の全体的な推奨事項は、デフォルトで有効にすることです。つまり、loading="lazy" を画像と iframe に追加する必要があります。できれば、サイズ属性を含む要素のみに追加します。この機能をデフォルトで有効にすると、手動で有効にする場合（画像ごとに有効にする場合など）よりも、ネットワーク リソースを大幅に節約できます。

loading="lazy" は、可能な限り、スクロールしなければ見えない位置に表示される可能性が高い要素にのみ追加する必要があります。この要件は、クライアントサイドの認識不足やさまざまなビューポート サイズにより、CMS で実装するのが複雑になる可能性がありますが、少なくとも近似ヒューリスティックを使用して、スクロールせずに見える範囲に表示される可能性が高いヒーロー画像などの要素を遅延読み込みから除外することをおすすめします。

要素ごとの変更を許可する

loading="lazy" はデフォルトで画像と iframe に追加する必要がありますが、特定の画像（LCP 向けに最適化する画像など）では属性を省略できるようにすることが重要です。CMS のユーザーが平均して技術に詳しいと考えられる場合は、すべての画像と iframe に UI コントロールを公開して、その要素の遅延読み込みをオプトアウトできるようにします。また、API をサードパーティのデベロッパーに公開して、デベロッパーがコードを通じて同様の変更を行えるようにすることもできます。

たとえば、WordPress では、HTML タグまたはコンテキスト全体、またはコンテンツ内の特定の HTML 要素に対して loading 属性をスキップできます。

既存のコンテンツを改修する

大まかに言うと、CMS で HTML 要素に loading 属性を追加するには、次の 2 つの方法があります。

  • バックエンドのコンテンツ エディタ内から属性を追加し、データベースに永続的に保存します。
  • フロントエンドでデータベースからコンテンツをレンダリングするときに、属性を動的に追加する。

CMS では、既存のコンテンツにも遅延読み込みのメリットをもたらすために、レンダリング時に属性を動的に追加することをおすすめします。この属性をエディタでのみ追加できる場合、メリットを享受できるのは新規または最近変更されたコンテンツのみとなり、ネットワーク リソースの節約に対する CMS の効果が大幅に低下します。さらに、属性を動的に追加することで、ブラウザレベルの遅延読み込みの機能がさらに拡張された場合でも、将来の変更に簡単に対応できます。

属性を動的に追加する場合は、要素に loading 属性が存在する可能性を考慮し、そのような属性を優先する必要があります。これにより、CMS またはその拡張機能でも、重複する属性との競合を発生させることなく、エディタ主導のアプローチを実装できます。

サーバーサイドのパフォーマンスを最適化する

たとえば、サーバーサイドのミドルウェアを使用して loading 属性をコンテンツに動的に追加する場合は、速度を考慮する必要があります。CMS に応じて、DOM トラバーサルまたは正規表現を使用して属性を追加できます。パフォーマンスの観点からは、後者をおすすめします。

正規表現の使用は最小限に抑える必要があります。たとえば、コンテンツ内のすべての img タグと iframe タグ（属性を含む）を収集し、必要に応じて各タグ文字列に loading 属性を追加する単一の正規表現を使用します。たとえば、WordPress では、単一の一般的な正規表現を使用して、特定の要素に対してさまざまなオンザフライ オペレーションを実行します。loading="lazy" の追加は、単一の正規表現を使用して複数の機能を容易にするための 1 つの方法にすぎません。この形式の最適化は、CMS のコアで遅延読み込みを採用することが拡張機能よりも推奨されるもう 1 つの理由でもあります。これにより、サーバーサイドのパフォーマンス最適化が向上します。

次のステップ

CMS で機能のサポートを追加するための既存の機能リクエスト チケットがあるかどうかを確認します。まだない場合は、新しいチケットを開きます。提案をサポートするために、必要に応じてこの投稿への参照を使用してください。

ご質問やコメントがある場合、またはブラウザレベルの遅延読み込みのサポートが追加された場合に CMS をこのページに掲載するには、ツイート（felixarntz@）してください。他にも課題がある場合は、解決策を見つけるために、それらについても詳しくお聞かせください。

CMS プラットフォームのデベロッパーは、他の CMS が遅延読み込みをどのように実装しているかを調査します。

調査から得られた知見と、この投稿の技術的な推奨事項を使用して、パッチや pull リクエストなどの形式で CMS へのコードの提供を開始できます。