直近 1 年間のウェブパフォーマンスが分かる CrUX Vis がすごい
PageSpeed Insights や Chrome のパフォーマンスタブで、ウェブページのパフォーマンスをチェックしている人も多いだろう。しかし、長期的にパフォーマンスを観察したいと思ったことはないだろうか。
とくに、ビジネスの現場においてウェブパフォーマンスの重要性を語るならば、より正確で客観的なデータが必要だろう。
そんなときに使えるのが、CrUX Vis である。
Chrome のビッグデータが一目で分かる
使い方は簡単だ。知りたいサイトの URL を入れるだけ。試しにこのブログ (https://wangel.aioilight.space/) を入れてみる。
最初のページでは、Core Web Vitals の指標で、グラフが表示される。これは過去 1 年間での Chrome による Core Web Vitals の計測結果になる。このデータによると、LCP は良い範囲であるものの若干悪化傾向に、INP と CLS は良い範囲で安定していることが分かる。
Controls というところから URL ではなくオリジン単位にしたり、集計対象のデバイスを変えることができたりする。
グラフのデータは 28 日間の平均値になっていて、横軸は 7 日ごとの移動平均となっている。つまり、たとえパフォーマンスが良くなるよう改善したとしても、すぐにグラフが反応するわけではなく、じんわりと変化していくことになる。
Core Web Vitals 以外の指標もチェックできる！
左のメニューから、Core Web Vitals 以外のメニューを選択すると、LCP、INP、CLS 以外の指標も確認することができる。
Core Web Vitals 以外の指標だと、TTFB もかなり重要だ。TTFB を改善することで直接的に LCP や FCP も改善することができるため、影響が大きい。サーバーの構成を変更したときや、スクリプト言語、ミドルウェアの更新などを機に改善・悪化していないかを確認してみよう。
また、画像 LCP 時間の内訳もかなり重要で、どのパートが LCP の時間をどのくらい占めているかが分かる。例えば、画像の最適化を進めることによって画像の読み込み時間が減ったのにもかかわらず、画像のレンダリング遅延時間が増加している場合を考えてみよう。この場合、他のレンダリングブロックが原因で LCP 時間が改善できていないということが分かる。そうと分かれば、次はレンダリングブロックを軽減する行動に移せるし、その行動の結果を確認することも容易だ。
このように、ページパフォーマンスのさらなる改善に役立てることができる。しかも、Chrome のパフォーマンスプロファイラとは異なり、本物のデバイスによる結果だから、より、現実に即している。
まとめ
CrUX Vis を使えば、視覚的にウェブパフォーマンスの指標を確認できる。もちろん、改善の結果が目に見えて分かるし、次するべきことを発見するのにも役に立つ。
また、お手本となるようなサイトを見つけてどのような結果になっているか確認するのにも使えるし、競合他社の状況を確認する……とか。そんな使い方もできるね。
