昨今、企業のWebサイト運用において、快適なUX(ユーザーエクスペリエンス)を提供することは欠かせない要素となってきています。特に、GoogleがUXに直結した、ページの快適な表示速度や操作性、画面の安定性などを定量的に測る「Core Web Vitals(コアウェブバイタル)」という定義を発表し、2021年6月から検索アルゴリズムの一部に適用したことで、多くの企業がこの「Core Web Vitals」を通じたUX改善に本格的に取り組みだしています。

前回のCore Web Vitals（GoogleのUX指標）の全貌と改善方法【前編】では、Core Web Vitalsの3つの指標「LCP(Largest Contentful Paint)」「FID（First Input Delay）」「CLS（Cumulative Layout Shift）」を具体的に説明し、それらを計測する主なツールを紹介しました。Core Web Vitalsはどういう指標で、その中にはどのような項目が含まれており、その項目は具体的にどのようなものかについて理解できる内容になっています。

中編となる今回は、ブラウザにWebページが表示されるまでの仕組みと、Core Web Vitalsの指標の1つである、ページで最も有意義なコンテンツが表示されるまでの時間を測定した「LCP」に影響を与える要素と解決策を紹介します。

  • LCPのスコア指標

ブラウザにWebページが表示されるまでの仕組み

Core Web Vitalsを改善する上では、ブラウザがWebページを表示するまでの流れをおおまかに把握する必要があります。

まずブラウザは最初にHTMLをダウンロードし、ドキュメントの構造(タグの親子関係など)を機械的に上から解析します。HTMLは通常、多くのリソース(画像やCSSなど)を参照し、ページ表示に利用します。それらリソースへの参照をドキュメント内に発見次第、順次それらの取得を開始します。

特にレイアウト決定に不可欠な「CSS」と「JavaScript」は重要で、最優先でその内容の解析が行われます。それらがそろわないとブラウザも先に進めないので、処理待ちを強いられます(レンダリングブロック)。

ここまで情報がそろって初めて、ブラウザは「そのページにはどんな要素があり、それぞれどこに表示するか」を理解し、画面にWebページを映し出す準備がやっと整います。この一連の作業は、ブラウザが表示されるまでの揺るがない仕組みなので、まずはこの仕組みを念頭に入れて、Core Web Vitalsの各指標の改善にあたる必要があります。