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

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

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

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

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

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

Web Speed Hackathon

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

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

やったこと

無駄な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くんです、お楽しみにー