歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善

Browser and UI #3の登壇資料です。

スライド内のリンクは、 Googleスライド版をご覧ください。

Transcript

1. 歴代のWeb Speed Hackathonの 出題から考える デグレしないパフォーマンス改善 2025/08/20 did0es
2. Hirai Shuta | did0es（🗣 ディドス） SWE, Next Experts(TypeScript)@CyberAgent, Inc. Lead organizer FEC Tokyo, Meguro.es For more: did0.es
3. Web Speed Hackathon(WSH)の概要 • ⾮常に重たい Web アプリをチューニングして、いかに⾼速にするかを競う 競技 ◦ WebサーバーとAPIサーバーの両⽅の実装を改善 • 詳細 ◦ 採点：提出されたURLに対して、GHAでLighthouseを動かして計測 ◦ 期間：2⽇間 • 過去のお題 ◦ 2025：架空の動画配信サービス「AREMA」 ◦ 2024：架空の漫画サイト「Cyber TOON」（did0esが作問を⼀部担当） ◦ 2023：架空のショッピングサイト「買えるオーガニック」 ◦ 2022：架空のベッティングサービス「CyberTicket」 ◦ 2021：架空のSNSサイト「CAwitter」 ◦ 2020：架空のブログサイト「Amida Blog(あみぶろ)」
4. レギュレーション • 競技を進める上での公平性の担保のほか、以下が定められている ◦ 許可⭕ ▪ リポジトリのコードやファイルは全て変更して良い ▪ 外部のサービス（SaaSなど）は⾃由に利⽤して良い ◦ 禁⽌❌ ▪ Google Chrome最新版で著しい機能落ちやデザイン差異を発⽣させる ▪ 悪意を持ってVRTと⼿動テストを通過させるためのコードを書く
5. レギュレーションチェックマジック（？） • 最終のレギュレーションチェックで順位がガラッと⼊れ替わる ◦ 上位勢がごっそりリーダーボードから消える現象がまあまあある ◦ 2023〜2025の間に開催された3回の競技で、毎回上位から10名ほどが脱落 ▪ did0esは2021年度の競技で5〜7位ぐらいから2位まで上がった🥈 • 原因として多いもの ◦ 採点のVRTが落ちる（UI崩れ） ◦ ⼀部ページが開けない
6. WSHはデグレに厳しい👺
7. でも実際のサービスでデグレったら...😰
8. 歴代のWeb Speed Hackathonの 出題から考える デグレしないパフォーマンス改善
9. 推測より計測、だが... • そもそも重すぎて計測できない ◦ 計測ツールがタイムアウト ◦ 計測完了が超遅い ◦ 競技の性質上、これの待ちに時間を割けない ▪ 実際の業務でもあまり時間をここに割きたくない ◦ 測れないと着⼿が難しい箇所も
10. まずはUI以外で⼿を加えれば確実に 改善につながる箇所を探す
11. UI以外で⼿を加えれば確実に改善につながる箇所の例 • ビルドツールの設定ミス ◦ 開発向けの設定で本番に出している ◦ サポート外のブラウザもサポートしようとしている • 重いパッケージを使っている ◦ Polyfillや富豪的にリソースを使うパッケージが散在 • ブラウザのレンダリング遅延 ◦ ⼤量 or 重い同期的な処理 ◦ シーケンシャルなAPIコール • 応答が遅いAPI ◦ GraphQLのN+1 ◦ スロークエリ
12. ビルドツールの設定ミス：2020年 • Webpack関連 ◦ source mapsやmodeなどを本番向けに変える • Babel関連 ◦ サポート外のブラウザ向けにトランスパイルしない • PostCSS関連 ◦ 不要なCSSをパージする 参考 ：https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackatho n-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3 %81%A8%E8%A7%A3%E8%AA%AC
13. 重いパッケージを使っている：2022年 • Bundle Analyzerやnpm lsなどでサイズを測って⼤きいものから剥がす • 以下2022年度に⽤いられた中で代表的なもの ◦ Polyfill系 ▪ core-jsなどでサポート外のブラウザ向けのものは消す ◦ momentjs ▪ date-fnsやdayjsなど、軽量なものに変える ◦ lodash ▪ lodash-esや⽣JSに変える（You-Dont-Need-Lodash-Underscore） ◦ zengin-code ▪ バックエンドに持っていくか、Webpackでチャンク分割して遅延ロード ◦ axios ▪ Fetch APIに変える 参考：https://developers.cyberagent.co.jp/blog/archives/40123/
14. ブラウザのレンダリング遅延：2021, 2023年 • <script>が同期的 ◦ deferで並⾏にする • リソースの読み込み順のミス ◦ 読み込みの優先度を変える ▪ 計測が必要 ▪ prefetchやpreloadなどを適切に使う • APIのコール順やコールするタイミングのミス ◦ 依存関係のないAPIはPromise.allなどで並列に ◦ Intersection Observerで画⾯に⼊ったタイミングでAPIコール 参考：https://zenn.dev/monica/articles/7e060938f72073
15. 応答が遅いAPI：2023, 2025年 • やることがISUCONっぽいが、WSHでも有効 • [2023] N+1問題 ◦ GraphQLでN+1が発⽣することがある ▪ DataLoader などを使って対処する • [2025] スロークエリ ◦ インデックスを張る ◦ レスポンスサイズを削るためにlimitをつける 参考：https://zenn.dev/shun_shobon/articles/173450f5bec890
16. これでやっとUIに着⼿できる...✨
18. UIに⼿を加える前に • まず現状と向き合う ◦ よっしゃ改善やるぞうぉぉ！！！と前のめりになりがち ◦ 推測より計測 • テストを正とする ◦ テストが落ちなければ、挙動のデグレはないと⾒做せる ◦ 特にE2E(VRT)を整備する ▪ 年度によってはローカル実⾏向けのE2Eが組まれている状態で提供 ◦ ユニットテストで⼩さくはじめても◯
19. UI関連の改善の例 • CSSの値をJSなどで計算する ◦ アニメーション ◦ 過去にJSでしか出来なかったUIの表現 • マルチメディアのサイズが⼤きい ◦ 画像 ◦ 動画 ◦ アイコン系 • フォントを無駄に読み込んでいる ◦ 使わない⽂字まで読み込んでいる ◦ CLSを引き起こすような使い⽅
20. CSSの値をJSなどで計算する：2022, 2024年 • [2022] アニメーションにframer-motionなどを使っている ◦ アニメーションライブラリ⾃体が重いケース • [2022] 画像がCanvas ◦ JSでobject-fit的なことをしてCanvasに描画している • [2024] 画像がCanvas + シェーダー ◦ ThreejsとGLSLでobject-fit的なことをしてCanvasに描画している 2024年のやつは 私が作りました
21. マルチメディアのサイズが⼤きい：2022年 • 画像はSquooshなどで、動画はFFmpegなどで圧縮する ◦ VRTが落ちない程度にサイズを減らす ◦ オンデマンドで圧縮はさける。事前に圧縮（WSHでよくある罠） • ファイルの形式を変える ◦ 画像はWebPやAVIFのようなサイズの⼩さい形式に変換 • アイコン系ライブラリの使い⽅を⾒直す、置き換える ◦ アイコンを全て読み込むような使い⽅になっているケースも ◦ 少なければ画像に1つずつ書き出してCDNなどに配置
22. フォントを無駄に読み込んでいる：2020, 2022年 • フォントのサブセット化 ◦ フォントファイルは subset-font などでサブセット化 ◦ Google Fontsの場合は &text= で使⽤⽂字を指定してサブセット化 • その他サブセット化の参考 ◦ https://blog.jxck.io/entries/2016-03-14/web-font-noto-sans.html ◦ https://blog.jxck.io/entries/2019-10-13/font-feature-settings.html ◦ https://blog.jxck.io/entries/2020-09-07/font-subsetting-with-puppeteer.html
23. おわりに • あくまで計測が優先 ◦ 計測が思うようにできないときにはじめて推測する • 計測がままならない場合、UI以外から着⼿ ◦ UI以外で⼿を加えれば確実に改善できる箇所を探す • UI関連に着⼿する前にテストを整備 ◦ 特にE2EとVRT • ここで取り上げた問題以外にも、WSHでは様々な出題が⾏われています ◦ みなさんも是⾮参加してみてください！
24. ご清聴ありがとうございました