公開日: 2025 年 3 月 19 日
T-Mobile は、米国の大手通信会社で、広範なネットワーク カバレッジと高速な 5G 接続を提供しています。
T-Mobile は、実際のユーザーのウェブに関する主な指標を分析することで、ウェブに関する主な指標の改善がユーザー エクスペリエンスとビジネス指標の両方に大きな影響を与えることを認識しました。
T-Mobile は、デジタル プレゼンスの向上に継続的に取り組んでおり、ウェブサイトの Core Web Vitals（特に Largest Contentful Paint（LCP））を改善してユーザー エクスペリエンスを高め、結果として主要なビジネス指標を改善しました。
データに基づくウェブ パフォーマンスの認識向上
ウェブ全体で優れたユーザー エクスペリエンスを確保する必要性が高まっていることを認識した T-Mobile の SEO チームとプロダクト チームは、ウェブサイトのパフォーマンス向上を目指した共同イニシアチブを開始しました。最初のステップは、Core Web Vitals を関係者との議論の最前線に置き、最優先事項として認識してもらうことでした。これは多くの企業の開発チームが一般的に直面する難題でした。
この問題に対処するため、T-Mobile はデータドリブン戦略に転換しました。Lighthouse のラボデータと Chrome UX レポート（CrUX）のデータではパフォーマンスの全体像を把握できないことを十分に認識していた T-Mobile は、web-vitals JavaScript ライブラリを T-Mobile のウェブ プロパティに組み込み、実際のユーザーからパフォーマンス データ（フィールド データ）を直接収集して分析しました。
T-Mobile は、現場の Core Web Vitals データを分析スイートと統合することで、次のような有用なデータポイントを獲得しました。
- ユーザー エクスペリエンスへの影響: T-Mobile.com の訪問者は、ページの読み込みに時間がかかると直帰する傾向があります。
- ビジネスへの影響: ページの読み込みに時間がかかると、T-Mobile.com のコンバージョン率が低下します。
データから、T-Mobile ウェブサイトのパフォーマンスとビジネス指標の相関関係が明確にわかりました。
チームは、LCP の 100 ミリ秒セグメントにわたる収益への影響を推定することで、経営陣の注目を集め、ウェブサイトのパフォーマンスを改善するための部門横断的なタスクフォースを立ち上げることができました。T-Mobile の SEO チームとプロダクト チームは、明確なデータを提示し、改善の余地を測定することで、ウェブに関する主な指標の改善の重要性を効果的に伝えました。
ウェブ パフォーマンスの改善を拡大して最大限の効果を引き出す
パフォーマンスに関する課題に包括的に取り組むため、T-Mobile チームはスケーラビリティを念頭に置いて一連の技術的な改善を行いました。これらの取り組みでは、重要なコンポーネントの最適化とテクノロジーの活用に重点を置き、デジタル プラットフォーム全体でパフォーマンスの持続的な向上を図りました。
カスタマー エクスペリエンスへの影響
サイトのパフォーマンスを改善するための取り組みの結果、Largest Contentful Paint（LCP）が全体で 42% 減少しました。
この機能強化により、ユーザー エクスペリエンスが次のように改善されました。
ビジネスへの影響
ページの読み込み時間が短縮されたことで、購入フローも効率化され、ショッピングの意図がある見込み顧客の訪問のコンバージョン率が同じ期間に 60% 向上しました。
T-Mobile の成長を支えた主なパフォーマンスの向上
主な取り組みとその影響の詳細は次のとおりです。
API のキャッシュとリファクタリング
応答時間を短縮し、サーバー負荷を軽減するために、Products API や Promotions API などの API がキャッシュに保存され、リファクタリングされました。キャッシュの最適化のためにコンテンツ配信ネットワーク（CDN）にオフロードしたことが、これらの改善に大きく貢献しました。
静的アセットのキャッシュ保存
読み込み時間を短縮するために、JavaScript、スタイルシート、クライアント ライブラリなどの静的アセットがキャッシュに保存されました。CDN キャッシュと最適化されたキャッシュ設定により、配信速度が向上し、サーバー負荷が軽減されました。この最適化は、サイト全体のパフォーマンスを高めるうえで重要な役割を果たしました。
画像コンポーネントの最適化
チームは、画像サイズを小さくすること、WebP などの最新の画像形式を使用すること、レスポンシブ画像を実装することにより、画像コンポーネントを最適化し、最小のファイルサイズで最高の品質を確保しました。
コンポーネントのプリロードとプリフェッチ
重要なリソースはプリロードとプリフェッチが行われ、必要に応じてすぐに使用できるようになりました。これにより、ユーザーの待ち時間が短縮され、ページの読み込み時間が短縮されました。
重要なドメインへのプリコネクトとフリッカー防止スクリプトの改善
チームは、重要なドメインへの事前接続を実装して早期接続を確立し、リソース取得のレイテンシを短縮しました。また、コンテンツのフラッシュを最小限に抑え、スムーズなユーザー エクスペリエンスを実現するために、フリッカー防止スクリプトを改善しました。
Adobe Experience Manager（AEM）プラットフォームの移行
チームは、パフォーマンス機能の向上とインフラストラクチャの改善を実現する、フロントエンド プラットフォームの新しいバージョンに移行しました。
Angular コンポーネントを AEM ファクトリー コンポーネントに移行する
Angular コンポーネントは Adobe Experience Manager（AEM）ファクトリー コンポーネントに移行され、アーキテクチャが効率化され、パフォーマンスとメンテナンス性が向上しました。
ランディング ページの主な最適化
画像カルーセルの最適化、Adobe webSDK の使用、動的メディアのキャッシュ時間の延長、ペイロードの圧縮、画像デザインの更新などにより、読み込み時間とユーザー エクスペリエンスが改善されました。
API のエラーの削減
チームは、いくつかの主要な e コマース ページのエラーを減らし、より信頼性の高いデータ配信とユーザー インタラクションの向上を実現しました。
データを民主化してウェブ パフォーマンス文化を育む
T-Mobile は、ウェブのパフォーマンスの向上に継続的に取り組むため、組織全体でいくつかの重要な対策を講じています。これらの取り組みは、パフォーマンス データへのアクセスを民主化し、チームの教育とエンゲージメントを促進し、Core Web Vitals を事前にモニタリングし、すべてのコードリリースにパフォーマンス基準を適用することを目的としています。次の戦略は、データを利用可能にし、継続的な学習を促進し、堅牢なガバナンス プラクティスを確立することで、ウェブ パフォーマンスの文化を育んでいる方法を概説しています。
Core Web Vitals データの民主化
T-Mobile は、堅牢な Looker Studio ダッシュボードを使用して、組織内のすべてのメンバーがパフォーマンス データにアクセスできるようにしました。また、包括的なウェブ パフォーマンス ウィキでは、Core Web Vitals レポートを効果的に解釈して活用するためのガイドをチームメンバーに提供しています。
T-Mobile の Looker Studio ダッシュボードに表示される、ウェブに関する主な指標のリアルタイム指標。 左から右に、次のように表示されます。
- スピードメーター: 選択した期間にキャプチャされたすべての LCP イベントの 75 パーセンタイル。
- 折れ線グラフ: 選択した期間の 75 パーセンタイルのスコアの日別推移。
- 円グラフ: 選択した期間の [良好]、[改善が必要]、[低速] の評価の割合。
- 積み上げ折れ線グラフ: 選択した期間における「良好」、「改善が必要」、「低速」の評価の割合の推移（1 日単位）。
継続的な教育とエンゲージメント
プロダクト マネージャーと SEO マネージャーは、ウェブ パフォーマンスのロードショーやナレッジ トランスファー セッションを定期的に開催しています。これらの取り組みは、幅広いチームの教育とエンゲージメントを促進し、優れたウェブ パフォーマンスへの継続的な取り組みを促進します。
Core Web Vitals のアラート システム
さまざまなページグループの Core Web Vitals をモニタリングするためのアラート システムが構築されています。ウェブに関する主な指標が特定のベースラインしきい値に達すると、関連する関係者にメールアラートが自動的に送信されます。
コード リリースのパフォーマンス要件
T-Mobile は、コード リリースのパフォーマンス要件も定めています。ページを公開するには、Lighthouse で特定のパフォーマンス レベルを満たす必要があります。これにより、ウェブ パフォーマンスの基準を維持できます。
こうした対策を講じることで、T-Mobile はウェブ パフォーマンスを常に優先し、継続的改善の文化を育て続けることができます。
謝辞
T-Mobile のウェブサイトのパフォーマンスとこのケーススタディに携わった Kevin Lau、Monique Misrahi、Bill Dinger、Laura Mathisen、Suresh Gundu、Duke Fong、Amir Mohammadi、Liang Yeh、Jennifer Panke、Julia Edgar、Ejaz Malik、Damon Jochum、Will Fraley、Gene McKenna、Vinayak Hegde、Warren McNeel の皆様に感謝いたします。
このケーススタディは、T-Mobile と Google のカスタマー ソリューション パートナーである Ilya Motamedi、Dakota Deady、Christine Zanedis との共同開発です。このイニシアチブの成功に貢献した分析情報とサポートを提供しました。