はじめに

• CyberAgent Web Speed Hackathon 2025に参加してきたのでその参加記録

今回のテーマ

動画配信サイトArema TVのパフォーマンス改善でした

https://github.com/CyberAgentHack/web-speed-hackathon-2025

やったこと

https://github.com/Penpen7/web-speed-hackathon2025-private

• Webpack Bundle Analyzerでバンドルしているライブラリを解析しながら、不要なライブラリを削ったりWebpackの設定を調整していく
  • modeをproductionに変更
  • sourcemapがinline化されていたため削除
  • ffmpeg.wasmをバンドルしないように削除
    • 以下を参考にしてCDNから落とすように修正
  • iconifyのjsonを削除
    • そのまま削除してしまったので、アイコンが消えてしまった…
    • あとでjsonを必要な分だけ入れるようにして対処
  • chunkFormatを有効化
  • ビルドが遅いのでcacheを追加
    • 後から懇親会とかで話したらwebpackからviteに移行すればよかったらしい
• SSRを無効化
  • サーバーサイドのAPIのレスポンスタイムが悪く、index.htmが返ってくるのが遅すぎた
• サムネイルURLのクエリパラメータを削除
  • 同じ画像が何度も取得されているので、クエリパラメータを削除
• jpegからwebpにフォーマットを変更
  • いつもの
• Renderを修正
  • なぜか2位になったが、多分壊れてスコアが伸びてしまっただけ
• gzip/brで圧縮してファイルを配信するよう@fastify/compressを導入
• 静的ファイルはすべてブラウザキャッシュが効くようにした
• APIのレスポンスを軽量化
  • なぜかseries→episodes→seriesと無駄にネストしてデータを取るようになっていてデータがバカデカくなっていたので、series→episodeで止めるように修正
  • descriptionが長いので、不要な場合は空文字で返すように修正
• react-router-domでコンポーネントを取得するときに1000 msのディレイがかかっていたので削除
• JavaScript内でスタイルを計算している箇所をCSSで行うように修正
  • Hoverable, AspectRatioコンポーネントを改善
• CLS対策のため画像にheightとweightを入れるように修正

やれなかったこと

• svgの軽量化
  • フォントファイルがbase64で埋め込めれていてsvgoをかけても圧縮できなかったため、どうしよう…となっていた
  • vector形式に変換してやってからsvgoを実行
• fetchの高速化

結果

• 73位でした…難しかった…
  

振り返り

• 去年よりはいろいろやることできたが、結果まで繋がらなかった
• fetchに細工されていることに気づかず、ボトルネックとは違うところを改善し続けていた
  • 解説聞きながらあれもこれもやったんだよなーと思っていたが、肝心の部分を治せていなかった
  • 意図的な遅延処理に引っかかりがち
• もっと開発者ツールのperformanceタブを有効活用していきたい
• 参加前にあらかじめチートシートを作って、次回立ち向かっていきたい

まとめ

自分は普段バックエンドを主戦場にやっているため、Web Speed Hachathonをフロントエンドについて学ぶ貴重な機会にしています🙏
今回の反省を糧に次回に向けてよりパフォーマンスチューニングの知識を深めていきたいと思います。
最後になりましたが、主催のCyberAgentさん、運営の皆様、参加者の皆様、ありがとうございました！