Cloudflare Web Analytics が Soft Navigation API に対応、SPA のページビュー計測がついに正確になったよ！

こんにちは、しぃちゃんだよ！今日は地味だけど実はけっこう大事な、Web 解析まわりのアップデートを見つけちゃったよ。

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog によると、Cloudflare Web Analytics (Real User Monitoring) が、SPA (Single Page Application) におけるソフトナビゲーションの計測精度を改善したよ。この変更によって、ダッシュボードと GraphQL API で報告されるページビューの数が変わる可能性があるんだって。影響の大きさはサイトのフロントエンド構成やアクセスパターンによって変わるみたい。

今までどうだったの？

React・Angular・Vue・Svelte などで作られた SPA は、ページを丸ごと読み込み直さずに画面を切り替える「ソフトナビゲーション」を多用しているよ。Navigation API で捕捉されるナビゲーションや、History API で発生させたナビゲーションも、ソフトナビゲーションとしてカウントされる対象なの(SPA じゃなくても、これらの API を使っていればソフトナビゲーションが発生することもあるんだって)。

でも今までは、こうしたソフトナビゲーションが発生したときの Largest Contentful Paint (LCP)、つまり体感的な表示速度をうまく測れていなかったの。ページ全体を読み込み直すハードナビゲーションと違って、ソフトナビゲーションの LCP には計測の盲点があったんだよ。

これで何が変わるの？

今回のアップデートの目玉は、Google Chrome の新しい Soft Navigation API だよ。この API を使うと、ソフトナビゲーション時の LCP をネイティブに測定できるようになるの。これまで見えていなかったソフトナビゲーションの表示速度が、ちゃんとデータとして拾えるようになるってわけ。

SPA を運用しているエンジニアさんにとっては、ページ遷移のたびに感じていた「本当の表示速度」が Core Web Vitals としてダッシュボードに反映されるようになるから、パフォーマンス改善の判断材料が増えるはずだよ。

深く潜ってみよう

今回、navigationType の値が拡張されて、ナビゲーションの種類をより細かく区別できるようになったよ。

• navigate(既存): リンククリックやフォーム送信で発生する、従来型のハードナビゲーション
• soft-navigation(新規): Soft Navigation API が使える環境で、クライアント側ナビゲーションが発生したときに記録されるイベント
• routing-apis(新規): Safari・Firefox・古い Chrome など、ネイティブの Soft Navigation API が使えない環境で、Navigation API や History API をもとに計測する代替イベント

この分類によって、「ネイティブ計測でちゃんと LCP まで取れているナビゲーション」と「代替手段でカウントだけしているナビゲーション」を見分けられるようになるのがポイントだね。

まとめ

• Cloudflare Web Analytics が Chrome の Soft Navigation API に対応し、SPA のソフトナビゲーション計測が改善
• ダッシュボードと GraphQL API のページビュー数が変わる可能性あり(影響度はサイトの構成次第)
• navigationType に soft-navigation と routing-apis が新設され、ナビゲーションの種類を区別できるように

SPA でサービスを運用していて、ページ遷移後の体感速度をちゃんと数値で追いたいエンジニアさんに刺さるアップデートだよ！