ウェブ パフォーマンス ダッシュボードを作成し、JavaScript、リソース、ホームページを最適化して、ビジネスを成功に導く。
Tokopedia は、インドネシアの大手 e コマース企業です。270 万以上の販売者ネットワーク、1,800 万以上の商品リスティング、1 か月の訪問者数が 5,000 万人を超えるウェブチームは、ウェブ パフォーマンスへの投資が不可欠であることを認識していました。パフォーマンス重視の企業文化の構築により、クリック率（CTR）が 35%、コンバージョン（CVR）が 8% 増加しました。
35%
クリック率の伸び
8%
CVR が上昇
4秒
TTI の改善
ビジネス チャンスの強調
ウェブチームはリーダーシップ チームに、ユーザー エクスペリエンスとエンゲージメントを向上させるためのウェブ パフォーマンスへの投資の重要性について語り、高度なパターンと API を使用したパフォーマンスの影響についても説明しました。
採用したアプローチ
JavaScript とリソースの最適化
パフォーマンスの問題の一般的な原因は、レンダリング ブロックや長時間実行の JavaScript です。チームはこれを最小限にするために、いくつかの手順を実施しました。
- サードパーティ スクリプトを選択的に読み込み、クリティカル レンダリング パス向けに最適化するスクリプト コントローラ ライブラリを構築しました。
- 重いライブラリを軽量なライブラリに置き換えました。
- コード分割を実装し、スクロールせずに見える範囲のコンテンツ向けに最適化しました。
- アダプティブ読み込みが実装されました。たとえば、高速ネットワークのデバイスでは高品質の画像だけを読み込む、低速のネットワークではデバイスには低画質の画像を使用するなど。
- スクロールしなければ見えない範囲の画像の遅延読み込み。
- 重要でない JavaScript の読み込みを延期する。
ホームページの最適化
チームは Svelte を使用して、高速のウェブサイト エクスペリエンスを確保するために、初回訪問者向けにライト版のホームページを作成しました。このバージョンでは、Service Worker を使用して Lite 以外のアセットをバックグラウンドでキャッシュに保存しました。
パフォーマンスの予算編成とモニタリング
チームは、Lighthouse などのツールを使用してパフォーマンス モニタリング ダッシュボードを構築し、ウェブページの品質を改善しました。
- ネットワーク品質、インフラストラクチャのモニタリング、フロントエンド パフォーマンス、サーバー パフォーマンスを測定します。
-
ウェブ プラットフォーム API（
Resource Timing API
、
Server-Timingヘッダーなど）、 PageSpeed Insights（PSI）API、 Chrome ユーザー エクスペリエンス レポートのデータを組み合わせて、フィールドとラボの指標をモニタリングします。 - Lighthouse の画像を分析して、画像の最適化の機会を特定できます。
- 継続的インテグレーション（CI）中にバンドルサイズの予算を適用します。バンドルサイズが予算を超えると、CI の実行が失敗します。
e コマース ビジネスにとって、ユーザー獲得は当社の成功の中核をなす要素です。Google はウェブの重要性を認識しており、ユーザーに最良のユーザー エクスペリエンスを提供するあらゆるツールと機能に投資するよう努めています。
Tokopedia、ウェブ プラットフォーム担当エンジニアリング マネージャー Dendi Sunardi 氏
インドと東南アジアの成功事例については、ウェブでのスケーリングに関する事例紹介のページをご覧ください。