こんにちは。クルーズ株式会社CTOの鈴木です。
以前の投稿で「フロントエンドのエラー監視Sentyを導入した話」でSentry導入の話をしましたが、コアウェブバイタルの監視についてもSentryで最近行うようになったため事例共有をしたいと思います。
Core Web Vitalsの重要性
2021年にGoogleは、Webページのユーザー体験（UX）の向上を目指して、Web Vitalsという概念を導入することを発表し、特に検索の表示順位に影響を与える指標としてCore Web Vitals を定義しています。
Core Web Vitals のビジネスインパクトについては以下の記事をを参考にしてください。
パフォーマンス計測上の課題
Core Web Vitalsを可視化するツールはGoogle Search Console をはじめとして様々ありますが、JSエラーと同様に特定のブラウザや特定の条件でしか発生しない課題について網羅的に把握が困難であり、単純に開発者やSEO担当者が自分のPC上で計測を行うだけでは圧倒的に情報が不足していました。
またページ表示が遅い理由の把握も、遅いページの特定ができれば開発者ツールなどで調査可能ですが、具体的に問題のあるページがなんなのかについては、WebサーバのログやGoogle Analyticsの情報からしか判断できず、効果的な原因究明が十分に行えておりませんでした。
上記の問題の解決手段としてSentry のPerfomace Monitoringでの監視を実施しています。
導入背景としては
- 既にJSエラー監視やLaravelのエラー監視で社内で活用実績があること
- 端末・回線・ブラウザといったような利用環境に関連する情報が取得できること
- Slack連携が可能で即時通知ができること
があります。
運用
Core Web Vitals ＋ LCPについて、以下の閾値を設けて監視し、引っかかったものは改善するよう運用そしています
運用する中で技術的にハマったこと
CORSの設定が必要であるということに導入後しばらく気づかず計測が正しくできない、また一部外部サービスとの連携が正常にできない状況になってしまっていました。
特にSentryは日本語の文献が少ないため導入当初全く気づかず、原因の特定にそれなりに時間がかかってしまったことが反省点です。
運用していく中で見えてきたこと
大きなところでいうと
- 実は実行待ちになっているスクリプトもあり、中には非同期で呼び出せるものも含まれていた。
- 使われていないスクリプトも読み込んでいた。（正確にはどのページでも共通にも見込んでいたが、そのページでは使っていなかった）
- 外部連携で使用しているJSファイルの実行に時間がかかっていたものがあった
- 開発者が意図しない海外CDNを呼び出している箇所があった（使用しているJSライブラリが海外CDNを参照していたことがわかった）
です。なので今の時点だとほとんどがGoogle Developer Toolでわかる内容が有益な情報でしたという状態です。
これだけだとGoogle Developer Toolで十分じゃない？という結論にはなってしまうのですが、Core Web Vitalsの視点で見て課題があるページが発見できることと、フロントエンドエンジニアだけではなく、エンジニア職種全員がSentryというツールを利用することで、問題のあるトランザクションのCore Web Vitalsの数値や、各トランザクション中のタイムライン上での各リソースファイルの読み込み・実行状況を把握できるようになったことは導入の効果として大きかったと考えています。
特に、このSDK（JSファイルって）っているの？とか、この処理ってサーバ側でやった方が実行速度短縮できない？とかこのJS、CSSファイルは自社契約のCDN上から呼んだ方が早くない？そもそもAPIが遅すぎるから結果として全体が遅くなるんじゃない？などのディスカッションを様々な技術職種のメンバーと行えるようになったことは極めて重要だと思っています。
まだ運用を始めて間もないですが、Sentryを活用してWebページのユーザー体験を向上させていきます。
