見出し画像

WebPageTestでWeb版「NAVITIME」のパフォーマンスを日々計測している話

NAVITIME_Tech

こんにちは、ふらです。
ナビタイムジャパンでWeb版『NAVITIME』の開発・運用を担当しています。

Web版『NAVITIME』ではSEO 対策として各ページのパフォーマンスを注視しています。
今回はWeb版『NAVITIME』のパフォーマンスをどのように計測して維持しているのかについてご紹介します。
Webサービスのパフォーマンス改善はしたいけど、どこから手を着けたらいいのか分からないという方の参考になれば幸いです。

Web版『NAVITIME』とは

Web版『NAVITIME』は、ルート検索・時刻表・地図検索などの機能を提供しているWebサービスで、PC／スマートフォンの各種ブラウザからどなたでもご利用いただけます。


SEOとパフォーマンスの重要性

Webサービスを運用しているとSEO（Search Engine Optimization：検索エンジン最適化）対策という言葉を目にすると思います。
以前までのSEO対策では、独自性のある内容を作ることやクローラーに読み取りやすいセマンティックなHTMLになっていることなど、コンテンツ自体にフォーカスしたものが中心でした。しかし、最近ではそれらに加え、高いパフォーマンスによる良いユーザー体験が提供できていることも求められるようになっています。
GoogleではCore Web Vitals（以後CWV）という指標を提唱しており、WebのUXを測る指標となっています。CWVは検索結果のランキング要因の1つとして取り入れられているため、ページのパフォーマンスを改善していくことは非常に重要になっていると言えます。

WebPageTest

CWVはPageSpeed InsightsやLighthouseを利用することでも測定可能ですが、我々のチームではWebPageTest（以後WPT）を採用しています。

WPTは以下のような特徴が挙げられます。

  • エミュレータの細かい設定が可能

  • APIでのテスト実行が可能

  • レンダリングの様子を動画でキャプチャできる

  • Cumulative Layout Shift（CLS：累積レイアウト シフト数）やLargest Contentful Paint（LCP：最大視覚コンテンツの表示時間）の対象を視覚的に確認できる

  • リクエストヘッダが付与でき、PageSpeed InsightsやLighthouseでは再現できないようなリクエストにも対応できる

以前の乗換案内の画面を見ると、CLSが赤色の部分で発生していることが一目で分かるようになっています。このように我々開発者はここを直せば良いという気づきを得ることができます。

CLS発生箇所の特定

WPTは非常に便利なのですが、公式環境は一部制限があり、業務として定期的に測定するには困る場合が出てきました。

  • 全世界のユーザーが同じ環境を利用しているため待ちが発生する

  • 一定期間ごとにリクエスト回数の上限がある

我々のチームでは上記の制限を回避するため、社内にプライベートなWPT環境を構築することにしました。
構築方法が公式から公開されていますので、そちらを参考にプライベート環境にWPTを構築することができます。

定期実行と記録

プライベート環境により制限なく計測する環境はできたのですが、1ページあたり3回テストを実行すると2分近くかかってしまうため、計測対象が多くなってくるとかなりの待ち時間が発生してしまいます。また、変化がすぐ分かるように測定結果をスプレッドシートに転記していましたが、こちらも対象が増えると転記するだけでも時間がかかってしまいます。
そこで、テストの実行と結果の転記を自動で行う仕組みを用意しました。自動化にはCICDツールのJenkinsを使いました。

  1. Jenkinsでスプレッドシートで管理している計測対象のURLを取得

  2. WPTのAPIを使ってテストを実行

  3. 実行完了後、Jenkinsでテスト結果を取得

    1. WPTの結果ページをスクレイピングして抽出

  4. スプレッドシートに結果を転記

日々の計測サイクル

パフォーマンス計測を導入した結果

WebPageTestの導入と自動化によって問題点の把握と日々の測定をすることができるようになりました。
その結果、乗換案内ではCLSの発生を検知→0にすることができ、サーバー処理の見直し等を行い、LCPも小さくすることができました。

CLSの発生を検知、対応した結果

まとめ

今回はWeb版『NAVITIME』のパフォーマンスをどのように計測して維持しているのかについてまとめました。

近年のSEO対策ではパフォーマンスも重要になってきていますが、WebPageTestを使うことで簡単にパフォーマンス計測ができます。
パフォーマンス改善をどこから手をつけて良いか分からないという方も可視化・数値化されることで問題点の把握、改善施策が立てやすくなると思いますので導入してみてはいかがでしょうか。


Web版『NAVITIME』で行った実際の改善内容については別のメンバーがまとめているのでそちらも併せてご覧ください。