Core Web Vitalsとは
Core Web Vitalsとは、Web上の実際のユーザーエクスペリエンスを測定するGoogleのUX指標です。
Core Web Vitalsの要素として、「LCP」「FID」「CLS」があります。
LCP:Largest Contentful Paint
FID:First Input Delay
CLS:Cumulative Layout Shitf
Core Web Vitalsが検索ランキングの要因になること が、
2021年5月に発表されました。
Page Speed Insightsについて
Page Speed Insights(やLighthouse)を利用することで、Core Web Vitalsの値を含むサイトの様々な指標と問題を見ることができます。
Page Speed Insightsには、フィールドデータとラボデータがあります。
- フィールドデータは実際のユーザのデータをもとに計測されたデータ
- ラボデータは自分のパソコン(環境)で計測したデータ
フィールドデータ(4個)
- 「First Contentful Paint」
→ページの読み込みが開始されてから、ページのコンテンツの一部が画面に表示されるまでの時間を測定
- First Input Delay
→ユーザーの最初のインタラクションからページがそれに応答するまでの、ページのインタラクティビティを測定
- 「Largest Contentful Paint」
→ページの読み込みが開始されてから、最大のテキストブロックまたは画像要素が画面に表示されるまでの時間を測定
- 「Cumulative Layout Shift」
→予期しないすべてのレイアウトシフトの累積スコアを測定
→非同期でデータfetch後にその要素が表示されることで最初に表示された要素が下に動く等です。Reactなら、lodaing中に同じ高さの要素を配置したりすることで解消できます。
ラボデータ(6個)
-
「First Contentful Paint」 (フィールドデータに説明記載)
-
「Largest Contentful Paint」(フィールドデータに説明記載)
-
「Cumulative Layout Shift」(フィールドデータに説明記載)
-
「Time to Interactive」
→ページの読み込みが開始されてから視覚的にレンダリングされ、最初のスクリプトが読み込まれるまでの時間を測定
- 「Speed Index」
→ページの読み込み中にコンテンツが視覚的に表示される速度を測定
- 「Total Blocking Time」
→メインスレッドがブロックされたFCPとTTIの間の合計時間を測定
Page Speed Insightsを参考に改善
Page Speed Insightsさらに下にスクロールすると、
「改善できる項目」が見つかります。
これを参考にサイトを改善していくことで、先程見た指標の値を改善していくことができます。
例えば、「使用していない JavaScript の削除」を確認したら、
If you are not server-side rendering, split your JavaScript bundles with
React.lazy(). Otherwise, code-split using a third-party library such as loadable-components.
以下の様に書かれていました。
ReactはSPAなのでクライアント側でJavaScriptを使って表示を変更しているのですが、他のページのコードもバンドルして送ってしまっています。
改善するためには、ここに書かれているように、JavaScriptバンドルを React.lazy（）で分割する必要があります。
このやり方に関しては、公式(コード分割)が非常にわかりやすいです。
ここを参考にコードを分割することで、使用してないJavaScriptの通信量を減らすことができました。
この様に、「改善できる項目」に書かれていることを実装していくことで、Core Web Vitalsの数値を改善していくことができます。
その他
「使用していないJavaScriptの削除」だけは有名な企業のサイトなどでも結構赤のまま残ってました。
ライブラリで使用されてたり、アナリティクスなど他のツールなどで使用されている消せないものもあるので程々に。
おまけ
Total Blocking Timeの原因となる場所の見つけ方
Total Blocking Timeとは
Total Blocking TimeとはFirstContentfulPaintとTime to Interactiveの間の全てのLong Tasksのブロック部分の合計です。
Long Tasksとは、50ミリ秒を超えて実行されるタスクです。
(70ミリ秒のタスクの場合、ブロック部分は20ミリ秒)
Long Tasksを調べる
Long Tasksを調べるにはChromeデベロッパーツールを使います。
Chromeデベロッパーツールを開き、Performanceタブを開きます。
リロードボタンを押すことで、ページを再ロードして計測することができます。
計測したら、下の方に行き、Mainの箇所を確認します。
この灰色のタスクバーのうち、右上が赤くなっているのがLongTasksです。
タスクバーをクリックし、さらに下の「Bottom-Up」などで詳細を見ることができます。
参考文献