Web Speed Hackathon 2025に参加しました

Web Speed Hackathon 2025 とは

CA主催のフロントメインのパフォーマンスチューニングコンテストです。激重webアプリを渡されて、2日間でどれだけLighthouseのスコアを上げられるかを競います。

Web Speed Hackathon 2025【一般応募用】- connpass

今年の題材は架空の動画配信サービス「AREMA」でした。

ちなみにまだ採点のbotは動いてると思うので、今からでも挑戦することはできると思います。

事前勉強

初参加だったので、軽く予習をすることに。フロントのパフォーマンスチューニングといえばということで、mizchiさんのjsconfの発表がいい感じ。

それから2024年の問題もちょっと見てみました。バンドラーの設定・lazy loading・N+1あたりはなんとなく分かってまあいけるべという感じで挑んでみました。

予選通過

朝10時の起床に成功。予選突破です。以下はざっくり時系列順のやったことです。

ネットワークを見る
- jsがデカすぎるのでとりあえずminifyとかしよう
  - webpack configを弄る
  - BundleAnalyzerで見る
  - ffmpeg-wasmが重すぎるので消す
- 初期表示にいらない画像が大量に読み込まれている
  - lazy importを消す
  - imgをloading=lazyにする
  - 画像アセットがデカすぎるのでw=640pxくらいにした
- index.htmlがデカすぎる
  - ssr用のRecommendedのエンドポイントのプリフェッチデータがデカすぎるのでレスポンスを必要最低限にする
  - renderToStringとStaticRouterProvider hydrate={true}でSSRにしてみる
- 無駄なリクエストを消す
  - プリフェッチデータを使用して、無駄なリクエストを消す
パフォーマンスを見る
- unocssの初期化が重すぎるということがわかる
  - serverで事前にcssを吐き出すようにしてみる
  - やりたいことはできたが、そもそも初期化が重いのでruntime unocssを完全に消してみる
    - スタイルが壊れる
    - unocssは初期描写後も動的にスタイルを追加していくので、動的に変化するようなclassはstyleに逃がす
      - className={`w-[${itemWidth}px]... みたいなのを倒していく作業
    - モーダルとかはAIパワーでtailwindからstyleに全部逃がした
- Hoverが重すぎる
  - カーソル位置から自身がHover中か検知するコンポーネントが重いのでonMouseEnter/Leaveにする

なんて感じでやっていたらここで時間切れ。VRTテストにunocssで壊れたスタイルを通すのに時間を使いすぎました。

最終結果は174点でした。ユーザーフローを測定してもらうために200点の足切りがあったのですが、そこを超えられず。

やれなかったこと

chunk
JsEllipsis
- 時間なかった
LayoutShift改善
- 動画とかにaspect-ratio書いてあげるだけだった
いらんライブラリ整理
- ffmpeg-wasmはコスパいいからやったけど、他はそんな時間ないです
cssテク
- カードサイズの計算とかもcssでやれたらしい。cssなんもわからん
画像
- svgの中にフォントデータが埋まってるのでいい感じにできるらしい。pngに変換しちゃったｗ
- 画像は、表示場所に合わせて複数の画像サイズを用意しても良かったなーと今更思う。
- gif動画は重いので動画にした方がよい
CDN
- cloudfrontで無料でいい感じにできたはず。次はやる

全体的にLCPとかFCPとか分かってなかったので、そこを意識する必要があったなーという感じでした。

おわりに

悔しい結果となりましたが、devtoolの使い方やライブラリの知識など、全体的に学びが多かったですし、なにより楽しかったです。来年も開催されるらしいので、また強くなって帰ってきたいと思います。主催の方、本当にありがとうございました！

Web Speed Hackathon 2025 とは

事前勉強

予選通過

やれなかったこと

おわりに

ためになるリンク集