Webプラットフォーム

Traveloka での Core Web Vitals と Web パフォーマンス

トラフィックが多くコンバージョンに直結するページのパフォーマンス改善。実ユーザーの計測とパフォーマンスバジェットを軸に進めました。

役割: Software Engineer (Web)
期間: 2018–2025
技術スタック: Core Web Vitals · Next.js · Real-user monitoring · Code splitting

課題

トラフィックが多く、コンバージョンに直結する Web 体験だったため、パフォーマンスは開発者のノートパソコンではなく、ユーザーが実際に体験しているもので測る必要がありました。

アプローチ

まず実ユーザーを測る。 何を直すかは実ユーザーの計測で決め、パフォーマンスバジェットで劣化が戻ってこないようにしました。
ブラウザが実行する JavaScript を減らす： コード分割、遅延読み込み、依存関係の最適化。
残りの経路も改善する： JavaScript の実行、レンダリング、ネットワーク、画像、サードパーティのスクリプト。

伝えること

学んだことは講演にもしました。DevFest Jakarta 2023 での「Performance: Core Web Vitals Top Recommendations + INP」と、Google I/O Extended Jakarta 2022 での「Bridging the Gap: Making It Easier to Build for the Web」です。

記事も書いています。イベントループは思っているものと違うでは、INP を悪化させる長いタスクと、その分割の仕方を説明しています。