Adobe Experience Manager Sitesの段階的なレンダリングによるwebパフォーマンスの最適化

webページの読み込みが遅いと、訪問者にフラストレーションが溜まり、サイトから離れてしまいます。Adobe Experience Manager SitesのEdge Delivery Servicesは、コンテンツをユーザーに迅速に配信することで、最高クラスのパフォーマンスを提供するように設計されています。

ここでは、webコンテンツを3段階のフェーズに分けて読み込み、ページのペイロードを分割する、コンテンツ管理システムの段階的なレンダリングについて解説します。

段階的なレンダリングが重要な理由

段階的なレンダリングは、顧客体験を向上させるだけでなく、Google LighthouseやCore Web Vitalsのスコアを改善し、サイトパフォーマンスの最適化に役立ちます。

webページを段階的に読み込むことで、Google LighthouseやCore Web Vitalsで容易に高スコアを達成でき、次のような効果があります。

• 検索エンジン最適化（SEO）とトラフィック： Core Web Vitalsは、関連性などの要因とともに、検索順位に影響します。Core Web Vitals を改善することで、検索結果で上位に表示されやすくなります。これにより、サイトが見つかりやすくなり、より多くのトラフィックを集めることができます。
• 直帰率： サイトパフォーマンスとページの読み込み速度が改善することで、ユーザーエクスペリエンスが向上し、直帰率が減少します。
• エンゲージメントとコンバージョン： ページの読み込み速度が速くなると、ユーザーがサイトにとどまり、コンテンツに興味を持ち、コンバージョンに至る可能性が高まります。

Adobe Experience Manager Sitesの段階的なレンダリングの仕組み

Adobe Experience Manager SitesのEdge Delivery Servicesでは、3つのフェーズでwebコンテンツが読み込まれます。

• フェーズE（Eager）： このフェーズでは、LPC（Largest Contentful Paint）を測定するために必要なすべての要素が読み込まれます。LCPは、メインページのコンテンツを読み込むのに必要な時間を測定し、ユーザーエクスペリエンスの重要な側面であるユーザーが感じる読み込み時間を示します。
• フェーズL（Lazy）： このフェーズでは、同じデータソースから提供される、LCPにとっては重要ではないリソースの大部分が読み込まれます。
• フェーズD（Delayed）： このフェーズでは、3rdパーティのタグやアセットなど、目に見えるエクスペリエンスに必須ではない、その他のすべてが読み込まれます。

これら3つのフェーズをより詳細に見てみましょう。

フェーズE - Eager

フェーズEでは、ページの最大の要素 （画像、ビデオ、テキストなど）が読み込まれる時間を表す、LCPの最適化に焦点を当てています。LCPを短縮することで、ユーザーはページをすばやく確認し、操作できるようになります。

このフェーズでは、ページの最大の要素を表示するために必要なすべが読み込まれます。通常は、マークアップ、CSSスタイル、JavaScriptファイルなどで構成されています。

フェーズL - Lazy

フェーズLでは、ペイロードのうちTBT（合計ブロッキング時間）に影響を与えない部分のみが読み込まれます。TBTとは、ユーザーがwebページを操作できない時間のことで、サイトパフォーマンスやCore Web Vitalsに悪影響を及ぼします。

このフェーズでは、JavaScriptやCSSのブロック、LCPにとって重要でない残りの画像、ブロッキングに関係のないその他のJavaScriptライブラリが読み込まれます。ページのヘッダーとフッターもLCPのクリティカルパスではないため、このフェーズで、それぞれのブロックで非同期的に読み込まれます。

フェーズD - Delayed

フェーズDは、ペイロードのユーザーエクスペリエンスに直接影響を与えない部分が読み込まれます。これには、3rdパーティのタグ、マーケティングツール、同意管理要素、拡張分析、チャットモジュールなどが含まれます。これらはパフォーマンスに影響を与える大きなJavaScriptファイルを生成することが多いため、このフェーズで読み込まれます。

このフェーズを開始するのは、LCPイベントから少なくとも3秒遅らせることが重要です。それにより、ユーザーエクスペリエンスの残りの部分が安定する時間を確保することができます。

段階的なレンダリングでは、ユーザーエクスペリエンスへの影響にもとづいて各要素を戦略的に読み込むため、パフォーマンスの高いサイトを実現できます。Adobe Experience Manager SitesのEdge Delivery Servicesは、この段階的なレンダリングのアプローチに加えて、エッジアーキテクチャ、リアルユーザーモニタリング（RUM）、永続的なキャッシュなどの機能を備えており、高速な読み込みを実現し、Google LighthouseやCore Web Vitalsで高スコアを達成して、シームレスなユーザーエクスペリエンスを提供できます。

段階的なレンダリングのアプローチの詳細について詳しくは、ユーザーガイドをご確認ください。