ファンの歓声が原動力 : Fastly を採用した Mercedes-AMG PETRONAS F1 Team のサイト速度が61.5%アップ

スピード、信頼性、スケーラビリティ。Webサイトとフォーミュラ1世界の制覇に欠かせないあらゆる要素。戦う操縦士の反射神経、驚異的なハイテク、一流のチームワーク、これらを結集するスポーツは他にありません。5大陸で開催され、激しい競争が繰り広げられる20を超えるレースで勝ち続けるには、もちろんスタミナも必要不可欠です。このような厳しい環境にもかかわらず、Mercedes-AMG PETRONAS F1 Team は、8年連続でコンストラクターズチャンピオンシップのタイトルを獲得するという前代未聞の快挙を成し遂げました。

従って、同チームがファン専用サイトを作成するにあたり、あたかもドライバーシートに座っているかのように、豊富な画像を駆使して超高速かつ非常にイマーシブなユーザーエクスペリエンスを忠実なサポーターたちに提供したいと考えたのは当然のことでした。そこで Fastly の Image Optimizer を採用したところ、サイトの平均速度指標が__61.5%改善__しました。これは、Lewis Hamilton が2020年のイタリアグランプリで達成した最速平均ラップタイムの時速262.362キロを時速423.715キロにさらに加速させるようなものです。しかし、スピードだけでは最先端の Web を実現することはできません。

「スピードと信頼性は F1 レースの土台であり、ファンは最高のものを求めます。そのため、私たちのデジタルプラットフォームのユーザーエクスペリエンスが F1 スポーツの高いパフォーマンス基準にマッチし、ファンを魅了し続け、サイトを再訪問してもらえるようにする必要がありました」
Michael Taylor、Mercedes-AMG PETRONAS F1 Team、IT Director

以下では将来の成功を見据え、高速かつ安定したサイトの土台が構築された経緯をご紹介します。

ファンをスタートラインの先頭に置く

「私たちのブランドにマッチする、高いパフォーマンスと安全性、可用性を兼ね備えたデジタルプラットフォームが必要でした。Fastly は、これらの各ポイントを実現してくれました」
Michael Taylor、Mercedes-AMG PETRONAS F1 Team、IT Director

F1 は感覚を刺激し、神経を高揚させます。

そこで当然 Mercedes-AMG PETRONAS F1 Team は、同じレベルのWebサイトエクスペリエンスをファンのために構築したいと考えたのでした。

目を見張るような画像、レース週末のリアルタイム統計、チームの最新情報、ドライバー情報のページに加え、コクピットから見た各シーズンの困難なシケインや表彰台のシャンパンファイトの映像を通じてファンに臨場感をもたらしています。

ファンにチームの内部を見せ（それを継続させる) のは容易なタスクではありません。進化し続けるサイトの機能が、サイト利用者の増大やエクスペリエンスを妨げることがあってはなりません。パフォーマンスやスピードの低下がサイトの利用時間の短縮や直帰率の増加、リピーターの減少につながることをチームは懸念していました。また、__SEO への影響__も考慮すべき要因のひとつです。読み込み時間が遅くなると Google ランキングがあっという間に下がることがあります。

Mercedes-AMG PETRONAS F1 Team にとって、懸念を早急に払しょくできることが非常に重要であったため、堅牢で柔軟性の高いプラットフォーム上に新しいサイトを構築することで、ライブ環境への移行における主な問題を未然に解決しました。

「Fastly とパートナーを組む前は、標準的なインフラストラクチャに頼って、より静的なバージョンのサイトのパフォーマンスを維持していました」と、Chris Church 氏は語ります。「しかしサイトがより複雑化し、画像の使用が増えるのに伴い、未来のユーザーエクスペリエンスを目指す私たちの高い志を実現するには、最高クラスの最適化ツールによる効果的なサポートが欠かせないことに気付いたのです」(Church 氏)

こうした認識の下、チームは信頼できるテクノロジーパートナーの発掘に乗り出したのでした。

チームのニーズ

Mercedes-AMG PETRONAS F1 チームは、新しいテクノロジーの導入において、複数の重要な要件を抱えていました。

• オンボーディングの際にダウンタイムやユーザーエクスペリエンスの低下が発生しない


• 既存のインフラストラクチャに問題なく柔軟に統合できる


• スケーラビリティに問題がなく、サイトの発展に応じてソリューションをスケールアップできる


• コスト面の障壁がなく、ソフトウェアのオンボーディングと実装が簡単でコストパフォーマンスが高い

パフォーマンスの向上と既存インフラへの統合のしやすさが重要な指標でした。AMG と Petronas が微調整と優れた燃料や潤滑油の提供を通じて Mercedes の F1 カーの性能を強化しているように、ファンサイトも最良のベンダーを組み合わせて継続的な改良を重ね、独自のユーザーエクスペリエンスを生み出す必要があるためです。

「Webサイトは当初、Netlify がホストする Next.js ベースのWebサイトとして開発、公開されましたが、後に Contentful をコンテンツ管理のバックエンドとして導入しました。Netlify と Contentful は共に、ページやデータ、画像アセットの配信向けに CDN のオプションを提供しています」と、Penny Harrison 氏は説明しています。

Fastly は、これら両方のサービスのフロントエンド CDN として使用され、Mercedes-AMG PETRONAS F1 Team ドメインのページやデータ、画像アセットをキャッシュし、これらのドメインは Fastly のサービスを通じて Netlify と Contentful の CDN URL にマッピングされています。

1秒の差が大きな違いを生む - テストと結果

Webサイトの主要 KPI は、ファンにとっての読み込み体験です。現在このページは www.mercedesamgf1.com サブドメインで Netlify によって配信されるコンテンツと images.ctfassets.net サブドメインで Contentful によって配信される画像で構成されています。

ページの読み込み時間をテストし、エンドユーザーのエクスペリエンスを向上させるため、Fastly はサイトのデモバージョンを新しい URL (画像向けの Contentful サブドメインを Fastly がコントロールするサブドメインに置き換えたもの) にパブリッシュしてから数日以内に迅速にテストを実施しました。その後、Fastly はこのサブドメインへのリクエストを Contentful サブドメインにマッピングし、配信の際に動的な画像最適化が適用されるようキャッシュ機能をセットアップしました。

これにより、「Netlify ページ + Fastly 画像」とライブサイト (Netlify ページ + Contentful 画像) の比較を容易に行うことができました。

また、「Fastly ページ + Fastly 画像」のパフォーマンスをテストして上記2つのケースと比較するため、メインサイト URL の前面に別のサブドメインをセットアップしました。これにより、ページコンテンツに関して Fastly のキャッシュ機能と Netlify のキャッシュ機能の間に、サイトのコンテンツ更新をパブリッシュするスピードに影響を及ぼす可能性がある何らかの問題が存在しないかどうかをテストできる環境を構築できました。幸い、そのようなケースは発生しませんでした。

Fastly がサポートする Mercedes-AMG PETRONAS F1 チームのファンサイトは、2023年9月6日にライブ環境に移行したばかりですが、すでに以下を含む重要な指標において優れた結果を生み出しています。

• Largest Contentful Paint (LCP) : ページにある最も大きいコンテンツブロックが表示されるのにかかる時間を測定する Google Web Vitals 指標のひとつ


• Visually Complete : ユーザーから見てページのレンダリングが完了するのにかかる時間


• Speed Index : ページの表示が完了するのにかかる時間を示すスコア (低いほど望ましい)

壁紙ページに最も多くのコンテンツが含まれているので、このページで確認された最も重要なパフォーマンス改善の結果を見てみましょう。

Largest Contentful Paint の平均値が2万9,000ミリ秒から6,000 - 8,000ミリ秒に減少

Visually Complete の平均値が5万ミリ秒から5,000 - 1万ミリ秒に減少

Speed Index の平均値が1万8,000からわずか4,000に改善 (4分の1以下)

壁紙ページに関するこれらの結果から、明らかなパフォーマンスの向上が確認できます。また、パフォーマンスの大幅な改善がサイト全体に見られました。例えば、ホームページの Speed Index の平均値は1万8,000からわずか4,200に減り、驚異的な61.5%のスピード改善が確認されました。

また、平均合計バイト数が10%減少しました。通常、バイト数の減少は視覚的な品質の低下に関連しますが、このケースでは異なります。理由は、Fastly の Image Optimizer が画質に関して人間の目で判別可能なことと、このように画像が豊富で非常にイマーシブなサイトに含まれる大量の詳細なデータの間で最適なポイントを特定し、画像を最適化するためです。

Penny Harrison 氏は、Fastly が実現するパフォーマンス改善によって、視覚的な品質が目に見えて低下することはないと断言しています。

「画質がきわめて重要な壁紙ページを例にとると、大きな画面で表示してもまったく問題が見られません。画像は高解像度表示され、非常にシャープで素晴らしいです」(Harrison 氏)

Fastly で未来に向けて加速

確固たるスピードと信頼性を手に入れた Mercedes-AMG PETRONAS F1 Team のファンサイトは、Fastly という頑丈かつ柔軟性の高いエンジンを使用して今後もパフォーマンスを強化し続けるでしょう。

優れたエクスペリエンスへとつながる道をクリアにすることで、ファンは (実際に F1 カーを操縦することなく) 現場のアクションに限りなく近い体験が得られるようになります。

今後の展望

Fastly の Compute と CDN 動画ストリーミングソリューションにより、さらに優れたインタラクションが可能になるため、将来的に Mercedes-AMG PETRONAS F1 Team とのコラボレーションが拡大する可能性が常に開かれています。

今後、新たな共同プロジェクトにゴーサインが出るかどうかは別にして、このように素晴らしいチームとパートナーを組んで仕事ができることを私たちは誇りに思います。