ヤフーのWebパフォーマンス改善の記事を読んだ
どんなことを行ったか
- サービスのCore Web Vitalsスコアの可視化
- ナレッジの横展開
- 各サービスへの改善依頼
- 共通プラットフォームへの改善依頼
特に気になったのは最初の可視化の部分
ラボデータとフィールドデータの可視化の部分で何を使っているかが参考になったのでメモ
ラボデータの可視化
ラブデータの可視化は、lighthouse-ciを用いたみたい
ずっと導入したいと思っているやつ
以下のような簡単なコマンドをcronで定期実行をしているとのこと
// 各ページのメトリクスを収集 lhci collect --url="[ページURL]" --additive --settings.preset=desktop --settings.chromeFlags="--no-sandbox --disable-gpu --disable-dev-shm-usage" // サーバーに送信 lhci upload --token="[トークン]" --serverBaseUrl="[サーバーのURL]"
フィールドデータの可視化
フィールドデータの可視化は、Chrome User Experience Report を使っているとのこと
こちらは知らなかった
ざっくりとした実際のユーザーが体感しているリアルなスコアを知ることができるので、サービス全体の傾向を把握する用途に優れているみたい
ヤフーのプロジェクトでは、LCP/FID/CLSをドメイン別に集計し、CrUXのGoogleデータポータルの機能を使用して可視化しているとこのこと
Googleデータポータルも知らなかったので参考になった
