ハクソク

世界を動かす技術を、日本語で。

最速のF1ウェブサイトはどれか（2021年）

304日前原文(jakearchibald.com)

概要

  • F1 Red Bull公式サイトの読み込みパフォーマンス分析
  • 2019年版より大幅に高速化
  • 画像・CSS・フォントなどにさらなる最適化余地
  • 主な遅延要因と改善案を具体的に解説
  • 競合サイトとの比較によるランキング紹介

Red Bull公式サイト パフォーマンスレビュー

  • Red Bull公式サイト は グラフィックが豊富 で 魅力的なデザイン
  • 2019年版より高速化、総合的に8.6秒で表示完了
  • ただし、さらなる 改善余地 が複数存在

主な遅延要因と改善案

  • インラインCSS の使いすぎによる 3秒遅延
    • ページ全体で必要な分だけインライン化し、残りは外部リソースで読み込み
  • JavaScriptによるレスポンシブ画像実装 で 10秒遅延
    • <img>タグとsrcsetによる本来のレスポンシブ画像運用推奨
  • 画像の別サーバー配置 による 2秒遅延
    • 画像やフォントを同じサーバーに置くことでコネクション数削減
  • 画像最適化不足 で 2秒遅延
    • WebPやAVIFなどの適切な圧縮設定、用途に応じた形式選択
  • JavaScript経由画像読込 で 40秒遅延
    • 画像URLがJSON内に埋め込まれており、表示まで大幅な遅延発生
    • <img>タグで早期ロード、重要画像にはpreload設定
  • フォントの別サーバー配置 で 2秒遅延
    • フォントも同一サーバーへ移動
  • クッキーモーダルの遅延 で 40秒以上
    • 詳細はPart1参照、複数要因が重複

インラインCSSの最適化

  • 現在のインラインCSS は 約80%未使用、600kB以上の無駄データ
  • ページ単位で必要なCSSのみインライン化し、不要分は外部化
  • Squooshでは 初回インタラクション用のみインライン化 し、未使用部分は7kB程度

画像最適化のポイント

  • WebP使用は良いが、品質設定が高すぎて容量大
  • メイン画像の上にさらに 大きなオーバーレイ画像、WebPのアルファチャンネル仕様による容量増
  • AVIF はアルファチャンネルもロスィー圧縮可能で、WebPより容量削減可能
    • ロスレス用途はWebP、一般用途はAVIF推奨
  • JavaScript経由の画像読込 は表示遅延の大きな要因
    • <img>タグ＋レスポンシブ画像＋preloadで早期表示
  • 低品質インライン画像＋ブラー手法 で視覚的遅延を隠蔽
    • ただしプレビュー画像が本画像と異なり違和感、また6kBとやや大きい
    • 1kB以内のWebPやAVIFでの最適化例も紹介

画像圧縮・プレビュー手法の詳細

  • JPEG は小サイズでブロックノイズ発生、ブラーでごまかし
  • WebP は高解像度・低ブラーで高品質維持、ただしクロマサブサンプリング制御不可
  • AVIF はヘッダーサイズ大きめだが、ノイズ少なめ
  • プレビューはWebP推奨、品質・対応性のバランス良好

最適化後の想定効果

  • インライン・画像最適化 でさらに表示速度向上可能
  • 劇的な改善ではないが、十分効果あり

パフォーマンスランキング

  • Red Bull ：8.6秒（2019年比-7.2秒）
  • Alpha Tauri ：22.1秒（+9.3秒）
  • Alfa Romeo ：23.4秒（+3.3秒）
  • 現時点で Red Bullが最速、今後の順位変動にも注目

まとめ

  • Red Bull公式サイト は パフォーマンス面で大きく進化
  • さらなる 最適化 でユーザー体験向上可能
  • 他F1チームサイトとの 比較レビュー は今後も続編公開予定

Hackerたちの意見

これを聞いて思い出したのは、私が好きな原則なんだけど。自分の特徴や、お客さんが自分に何を求めているかを理解したら、それをどこでも体現するのがいいよね！F1はスピードが大事だし。（子供の頃、祖父母とメルボルンのレースに行ったことを懐かしく思い出す。みんなシューマッハに感動してたな。）だから、もちろんあなたのウェブサイトもスピードに関するものであるべきだよ！これって、すべてに当てはまるかもね。ゲスト一人あたりのスキャン時間を測るチケットの改札や、同じことをするフードベンダー、スピードで測定・ランキングするウェブサイトとか。

└

実はこの哲学には強く賛成なんだ。特定の文化を育むことについてだからね。でも、反論のために言うと、ウェブサイトの最適化に使うお金や時間は、実際のレース関連のことに使った方がいいかもしれない。だから、最適化が行われるのはそこかも。実際には、彼らが機械工学の才能を雇うのが得意で、ITをコストセンター（面倒な存在）として見てるから、そっちの部門では安く済ませてるんじゃないかな。

└

F1はスピードが大事だ。 そんなの昔の話だよ。今は大きなチームやスポンサー、広告主を喜ばせるために無限の規制を作ることが中心になってる。2026年の車は、さらに遅くなるだろうね。

└

これってちょっと単純化しすぎじゃない？F1ファンになる理由は他にもたくさんあるよ。スペクタクル、富、名声。スピードは確かに多くのファンを引きつけるけど、スピードは他の特徴と矛盾することもあるんだ。例えば、息子をマイアミの予選に連れて行ったんだけど、二人ともすごく楽しんだものの、予選はかなり短くて、テレビで見るほどの興奮はなかった。息子の最初のコメントは、「実際に見ると、そんなに速く見えないね。」だった。結局、数時間トラックを歩き回って、いろんな景色や体験を楽しんで、そっちの方がずっと楽しかったみたい。私の言いたいことは、スピードは大事だけど、プレーンテキストのウェブサイトは勘弁してほしいってこと。スピードとエンターテインメントのバランスが大事だよね。

└

ウェブサイトにもDRSボタンが必要だよね！

SquooshではJPEGとAVIFのサブサンプリングを無効にできるけど、WebPでは無効にできない。フォーマットがそれをサポートしてないからね。これを回避するために、WebPエンコーダーには「シャープRGBからYUV」オプションがあって、サブサンプリングの影響を制限しようとするけど、色がにじむことがある。上記のオプションを使ったよ。これがWebPで本当に嫌いなところなんだけど、AVIFがあって、主要なブラウザでサポートされてるのはありがたい。

これが4年前のことなんだけど、何かサイトはフィードバックを受け入れたのかな？

└

F1の公式サイト、2021年からかなり改善されたね。今はモバイルのPageSpeed Insightsで75点以上取れてるし、当時は約45点だったのに。初期のデータ量を約40%削減して、画像最適化技術も向上させたけど、マクラーレンのサイトみたいなチームサイトにはまだ追いついてないね。

現在の状態のビジュアル化: https://lightest.app/c/Rm995qYNIL 追記: リンクがめちゃくちゃになってなければいいけど。

└

メルセデスとアルピーヌがないのは残念だね。元の投稿にもなかったのが不思議。

最近、職場で「JPEGかPNGか」っていう小さなゲームを作ったんだ。フロントエンドチーム向けにね。ブートキャンプでは画像フォーマットに全然焦点を当てないから、Figmaの画像が全部PNGでエクスポートされて、ウェブサイトが膨れ上がっちゃうんだ。開発者たちは「シャープだから」と主張することが多いけど。とにかく、私のゲームは画像のスライドを見せて、どのフォーマットが最適かを投票するっていうもの。みんながコツをつかんだら、WebPやSVGも入れてみた。最後の二つについて話すのは、簡単に悪用されるからなんだ。例えば、埋め込まれたPNGを持つSVGとかね。

└

これ、いいアイデアだね！めっちゃ好き。

└

で、結果はどうだったの？

└

実際の例で一番好きなのは、手描きのスケッチみたいな見た目のウェブサイトに2トーンのグラフィックをたくさん追加したことかな。デザイナーは、ベクターグラフィックスの方がスケールがいいからSVGじゃなきゃダメだって言ってたけど、SVGは20MBもあったんだよね。高解像度のPNG版は20kBだった。平面的な色が少ないときはPNGがすごく良いけど、細かいディテールが多いとSVGはあんまり良くないよ。

└

開発者たちはよく「フォーマットがシャープだ」と主張するけど、最近はPNGの代わりにロスレスのWebPも使えるよ。

└

開発者たちはよく「フォーマットがシャープだ」と主張するけど、彼らは正しいよ。PNGはロスレス圧縮を使ってるし、JPEGはロスのある圧縮を使ってるからね。（JPEG XLはロスレスを可能にする。）

└

結果として、すべてのFigma画像がPNGとしてエクスポートされて、ウェブサイトが膨れ上がるんだよね。サイズだけじゃなくて、デコーディング時間も影響する。JPEGはデコードがすごく早いから、表示までの時間にとっても重要なんだ。

└

ブートキャンプは画像フォーマットにあまり焦点を当てないよね。どの大学の授業でそれを学んだのか教えてくれる？

└

そういえば、圧縮結果を表示して、開発者がどれを使うか選べるツールがあってもいいかも。JPEG、PNG、WebP、JPEG XL、SVGとか。JPEG XLが95%の確率で勝つと思うけど。

└

大きなSVGは、Figmaからのエクスポートの副作用かも。何を見ればいいのか分からない人が多いし、めちゃくちゃ非効率なエクスポートを見たこともあるよ。

今、ベルギーのスプリント予選を見てて、ここにこの投稿を見つけた。2025年版も見てみたいな！

これ、数十年前の好きな本を思い出させるな。「Websites that Suck」ってやつ。これがきっかけでウェブデザインに興味を持ったのかも。今でも、クソみたいなサイトじゃないものを作ろうと頑張ってるよ。

暇だったから、今のF1チームのためにサクッとサイト作ったよ。

└

すごくクールだけど、実際のウェブサイトへのリンクがないのはあり得るのかな？

そんな一回限りの契約者が作ったマーケティングの gimmick のロードタイムなんて、全然気にしてなかったよ。俺たちは速い車を作ったんだから。