feature image

2024年3月25日 | ブログ記事

ちょっとわかる!!!!!【Web Speed Hackathon2024 参加記】

この記事は新歓ブログリレー2024の18日目の記事です。

こんにちは、21B SysAd班のmehm8128です。
なんか昨日も記事出した気がするけど、あっちは数週間前に書いてあったものなので記事書くのは久しぶりです。

ちなみに書き終わってpublishするぞって思ったら全部消えて書き直してます。なのでだいぶ雑です。

3/23,3/24にWeb Speed Hackathon 2024に参加したのでその参加記です。
タイトルは去年先輩が出していたブログ記事を真似してます。なんでちょっとわかるなのかは最後に書きます。内容に興味ない人は一番下までスクロールしてください。

な~~~~~~んもわからん!!!!!!!【Web Speed Hackathon 2023 参加記】
こんにちは、@d_etteiu8383 [https://trap.jp/author/d_etteiu8383/]です。今更ぼっち・ざ・ろっく!にハマっています。3/5-3/6の二日間にかけてWeb Speed Hackathon 2023[https://cyberagent.connpass.com/event/270424/]に参加しました。本記事はその参加記です。 ...高スコアが出せたわけでもなく、詳しい解説ができるわけでもないので、本記事は参加記という体の反省会です。 Web Speed Hackathon 2023 とは> Web Speed Hackathonとは、予め準備してあるWebアプリケーションのパフォーマンスを改善することで競い合うハッカソンです。主にWeb技術(フロントエンドおよびNode.js)に関するチューニングを出題いたします。 表示に非常に時間がかかるサービスをどこまで高速化できるかを競います。題材は「架空のショッピングサイト」を予定しています。https://cyberagent.

過去に優勝した先輩の記事↓

Web Speed Hackathon 2021 miniでほぼ満点を出しました
あけましておめでとうございます!19の翠(sappi_red)です。いつもはSysAd班 [https://trap.jp/sysad/]で部内サービスの開発・保守をしています。 Web Speed Hackathon 2021 miniに参加した(している)ので、今回はそれでほぼ満点を出した話を書きます。このコンテストはWeb パフォーマンス改善を競うものです。イベントの詳細は開催告知記事 [https://developers.cyberagent.co.jp/blog/archives/32747/]をご覧ください。今回のminiは今年の2月に行われたWeb Speed Hackathon 2021をベースにしているようです。 そちらの方にも参加したのですが、そのときに参加記を書いていなかったので、振り返りつつ記録するのにちょうどいい機会なのといくつかできそうなことがあったので、参加してみることにしました。年末には記事を出そうと思っていたのですが、文量が増えて結局終了1日前になってしまいました…。 前回のリポジトリ [https://github.com/sa

Web Speed Hackathon

今回含めて学生が参加できるのは過去に6回(mini含む)開催されてて、そのうち3回はtraPから優勝、残りの2回のうち1回はtraPから2位と3位、1回は2位が出ています。

僕は今回が参加3回目で、去年はみやぎハッカソンの最終日と翌日だったのでほとんど参加できず、今回楽しみでした(自信はなかったですが)。

Web Speed Hackathon 2024
「Web Speed Hackathon 」は、お題となるWebアプリケーションのパフォーマンスを改善することを競い合うハッカソン型のイベントです。主にWeb技術(フロントエンドおよびNode.js)に関するチューニングを出題いたします。

やったこと

tsupの設定

https://github.com/mehm8128/web-speed-hackathon-2024/commit/1b518a3f4504685391c9093dfb474ddfdea51e20
https://github.com/mehm8128/web-speed-hackathon-2024/commit/4affbce478bfef9de1ec7225319961970541a664
tsupは最近使ったのですが、特に有利に働くことはありませんでした。
targetはいじったら動かなくなったので諦めました。

いらないの消した

https://github.com/mehm8128/web-speed-hackathon-2024/commit/97834e84b8765a8e6cdb523df01225cc462d4b0a
https://github.com/mehm8128/web-speed-hackathon-2024/commit/5b7ad21f717a038eb0209340c5074472edbf4dae
https://github.com/mehm8128/web-speed-hackathon-2024/commit/c05654ff4b4429695517e266c7b0d8e16d078a25
いらないので消しました。
lodashはこれ見てやりました。
https://youmightnotneed.com/lodash
bundle sizeはこれ使いました。
https://esbuild.github.io/analyze/
jqueryはreadyをDOMContentLoadedのイベントリスナーに書き換えたところで画面が上手く表示できなくなったので諦めました。

規約

https://github.com/mehm8128/web-speed-hackathon-2024/commit/36f8170c186f095f808fff85c70d07cf06f6f804
https://github.com/mehm8128/web-speed-hackathon-2024/commit/661364be4af3b17c14f87894a4257ac8445bad61
最初はdialogコンポーネントのlazy loadだけにしてたのですが、後でサーバーから配信するようにしました。

hero画像とsvgを軽く

https://github.com/mehm8128/web-speed-hackathon-2024/commit/1355eb9572cc263df4144a46b5f87c221467be47
https://github.com/mehm8128/web-speed-hackathon-2024/commit/4271a3f948acfc30aac7ec072d7c3e06228e8d05
しました。

aタグをLinkに

https://github.com/mehm8128/web-speed-hackathon-2024/commit/8766df69d077f2606fd538bdefdb3d6cf2cb32db
SPAになってなかったのでしました。去年もありましたね。

無駄なfetchを削除

https://github.com/mehm8128/web-speed-hackathon-2024/commit/760e568bb09ec2b5528cbde15b00cf64ea4662d2
一覧を取得してそのidを使って全部取得みたいなのがあったけど一覧取得だけでいいので減らしました。

font

https://github.com/mehm8128/web-speed-hackathon-2024/commit/f16a7cb8c4760fc3f9cc2f35646cfc2937ac9147
woff->woff2して使ってそうな太さだけ残しましたが、そもそも使ってないので全部消していいらしいです。

passive: trueに

https://github.com/mehm8128/web-speed-hackathon-2024/commit/43b7c9e3c7fc79606aab8de5f98af7ed72adccba
e.preventDefault()してなかったので。最新chromeだと多分設定自体消してもデフォルトでtrueになってくれます。

magika消した

https://github.com/mehm8128/web-speed-hackathon-2024/commit/cbca77fcbe6e4815358acf7de6c4c86a8f39e65f
聞いたことあるけどなんだっけって調べたら「AIがファイルの形式を判別してくれるやつ」でした。Fileのtypeプロパティで十分そうだったので消しました。

useImage

https://github.com/mehm8128/web-speed-hackathon-2024/commit/f5446e3610c2591b97d696ef871e13af77b930bc
canvasでobject-fit: cover再現してたので消しました。

世界の変化頻度を少なく見積もる

https://github.com/mehm8128/web-speed-hackathon-2024/commit/0ff16d8cc6001bc3e00f09268e78d5d0c72760c1
謎の4096回ループを削除

ログインのバリデーションを軽く

https://github.com/mehm8128/web-speed-hackathon-2024/commit/ef57145d3c28b71a99a16740ea40a0887c427090
去年も出てたReDoSってやつですね。copilotくんに聞きながら改善しました。

side-effects消した

https://github.com/mehm8128/web-speed-hackathon-2024/commit/009619f8134868febf2de396b6e5f43a404ddb0b
copilotくんに聞いたら全部消していいって言ったから消したのですが、そもそもimportがコメントアウトされてました。
preloadImagesも最初からコメントアウトされてましたが運営のミスですかね。
別件ですが、latestEpisodeみたいなやつでlatestじゃなくて一番古いエピソードを取得してたのも実装ミスなんですかね。

loading='lazy'

https://github.com/mehm8128/web-speed-hackathon-2024/commit/c05c8cd365b49d68a6c9525ea9b5c308bf9251d1
雑につけました。

Suspense

https://github.com/mehm8128/web-speed-hackathon-2024/commit/570de888892ed4f3c721940fb4021023c86cc7df
コンポーネント分割してSuspenseすることで、fetchが終わるまでページ全体が表示されないのを改善しました。
関連して、SWRのpreload使おうと思ったけどservice workerのなんかで上手く動かなくて諦めました。

formik

https://github.com/mehm8128/web-speed-hackathon-2024/commit/6cf0d7bb8c6decc9b39a05d7fa15735af921f2a8
https://github.com/mehm8128/web-speed-hackathon-2024/commit/c982dadf242009d4ca00ba2a20431da1be90c760
react-hook-form移行がめんどくさくてコンポーネントのmemo化だけしたのですが、結局一部だけしました。が、点数あんまり変わりませんでした。
作品編集ページがずっとスコア1桁だったのですがみんな何したんですかね。

SeparatorをCSSに

https://github.com/mehm8128/web-speed-hackathon-2024/commit/4aa03572965b441fb8d1b78641ddc9d4943e8704
canvas使ってたので。

png->jpg

https://github.com/mehm8128/web-speed-hackathon-2024/commit/ba3920287c4de3af092fb2de8af55c67cb4fbd03
カバー画像のサイズを圧縮。最初avifにしたらだいぶ画質落ちちゃったのでjpgにしました。
なぜかjxlは圧縮しませんでした。

service worker

https://github.com/mehm8128/web-speed-hackathon-2024/commit/2d350cbaa3d18e2fe00da890a831060d43b4be76
最後までservice workerがよく分からなかったのですが、jxl以外fetchし直さないようにしました。jxlでもいらなかったらしいです。

zustand消した

https://github.com/mehm8128/web-speed-hackathon-2024/commit/c410cba8c803cb9f339eb4e6e5476ddc8c91edc5
モーダルで使ってたけどページ内に収まってたのでuseContext使うまでもなかったです。
関係ないですが、zustandとjotaiのメンテナーって同じなんですよね。

unicodeなんたらを削除

https://github.com/mehm8128/web-speed-hackathon-2024/commit/952de64f0756bb0dce0d8b414891b1c5fa04e05f
ずっと悩んでたのですが、Intl.なんたらで代替が効きました。sensitivityなんたらみたいなコメントがヒントだったんですかね。

いらないデータを送らないように

https://github.com/mehm8128/web-speed-hackathon-2024/commit/706aaf827cdafd926c1dd119355d5d6cc05afd20
忘れてました。

無限ループを阻止

https://github.com/mehm8128/web-speed-hackathon-2024/commit/47cb43ca17bcbeb22432b62454824ca5304b32a4
本当はthree.js消したかったのですが、アスペクト比の処理が分からなかったので諦めました(実際ここでfailしてる人結構いました)。

まとめ

maxスコアだと326.35/700で、レギュレーションチェック前のリーダーボードで全体では17位、学生では10位でした。
最終スコアは終盤ずっと計測ツール(もしくはデプロイ先?)の調子が悪くて毎回ランダムな項目でfailしてたので206.00点とだいぶ低いです。来年もやるなら改善してほしいです。
あとついでに、e2eじゃなくてtesting-libraryとかでtestを書いておいてもらえるとだいぶ助かります。例えばログインのバリデーションだとだいぶレギュレーションチェックで落ちてる人いたので、そこらへんがe2eじゃないテストでactionsでチェックできるとよさそうです。
あとなぜか今回VRTがactionsじゃなくて手元でやらないとだったのでしんどかったです(ほとんど使ってない)。

また、後輩のcpくんが優勝しました(明日記事出すと思います)。

解説聞いてみるともっと改善できたので悔しかったですが、一昨年初参加したときと比べると圧倒的成長できていたのでよかったです。「ちょっとわかる」というのはそういうことです。

1日目は1位になったタイミングもあったのですが(画像参照)、2日目は駄目でした。
chrome_fzwze7g1x5-------1

来年もあるならまた挑戦したいです(一般枠での参加になりますが)。また、いつか自分でも作問できたらなと思ってます。

明日の担当はNzt3くんとcpくんです、お楽しみにー

mehm8128 icon
この記事を書いた人
mehm8128

21B JC。SysAd班で色々やってます

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
ERC20トークンを用いた宝探しゲーム(真)の提案【アドベントカレンダー2018 10日目】 feature image
2018年11月3日
ERC20トークンを用いた宝探しゲーム(真)の提案【アドベントカレンダー2018 10日目】
Azon icon Azon
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2024年3月22日
traPグラフィック班の活動紹介2024
haru10 icon haru10
2023年4月27日
Vulkanのデバイスドライバを自作してみた
kegra icon kegra
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記