Core Web Vitals（GoogleのUX指標）の全貌と改善方法【後編】

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

本連載の【前編】では、Core Web Vitalsの3つの指標「LCP(Largest Contentful Paint)」「FID（First Input Delay）」「CLS（Cumulative Layout Shift）」を具体的に説明し、それらを計測する主なツールを紹介しました。【中編】では、ブラウザにwebページが表示されるまでの仕組みと、「LCP」に影響を与える要素と解決策について紹介しました。

最終回となる今回は、残る２つの指標「FID」「CLS」に影響を与える要素と解決策について詳しくご紹介し、最後に今までの話を統括します。

FIDに影響を与える要素と解決策

一般的にFIDに影響を与えるといわれる代表的な要素は、「ページ描画をブロックするJavaScript」、「実行時間が長いJavaScript」の２つあります。

「ページ描画をブロックするJavaScript」に関する課題と解決策

FIDのスコアを悪くする要素として、画面にWebページの描画を行うレンダリングという処理をブロックするJavaScript（サードパーティ含む）の問題があります。特に「ロングタスク」が発生すると、FIDが悪化しやすくなります。これはメインスレッドを50ms以上占有するJavaScriptなどの処理が、ページ描画の初期段階に発生することを指します。

メインスレッドが占有されている間は、ブラウザはその処理を実行するための作業にリソースを費やしてしまいます。そのためにユーザーから受け付ける入力操作を開始できず、FIDが悪化します。ロングタスクの発生は、Google Chromeの開発者モードの「Performance」で確認することができます。下図の赤い網掛け部分が、ロングタスクを起こしている箇所になります。

Chrome開発者モードの「Performance」で確認した際に、ロングタスクが発生している例

FIDを改善するには「初期描画段階でのロングタスク発生を抑止する」ことが重要です。その方法として推奨するのは、初期描画に影響のないJavaScript等は積極的にページ下部に移設することです。これはLCP改善にも有効です。

JavaScriptを読み込むタイミングが遅くなるので、ユーザーが最初に入力操作をする際に、JavaScriptがメインスレッドを占有する処理が発生しないため、結果としてFIDのスコアが改善します。また、タグマネージャーで管理されている3rdパーティなどのタグの発火タイミングをチューニングする方法も推奨しています。描画に影響せず、ビジネス観点で優先的に発火する必要がないタグはタグの発火タイミングを遅らせることで結果として、FIDのスコアが改善されるケースが多々あります。

そして、タグマネージャーの整理を定期的に行うことも大切です。

上記の2点は「不要不急のタイミングでのJavaScript処理を避ける」施策ですが、本当に不要なタグなら削除してしまったほうがよいのは自明です。ある施策用のタグをタグマネージャー経由で発火していたが、施策終了後にもそのタグ自体は残ってしまっているということはありがちです。そういった、本来利用していないタグが残っており、それがFIDスコアに悪影響を与えているという場合もあるので、利用用途や目的を考慮しながら、整理を行うことをおすすめします。