season's quarterly

数学/物理/プログラミング

Web Speed Hackathon 2022 for Students 参加記

3/5-6の二日間にかけて Web Speed Hackathon 2022 for Students に参加しました。Web Speed HackathonというのはWebサイトのパフォーマンスをチューニングするコンテストです。学生限定なので参加者は40人とかだった。

www.cyberagent.co.jp https://github.com/CyberAgentHack/web-speed-hackathon-2022

準備

Herokeでデプロイ

まずリポジトリをforkする。なんも分からんのでREADME.mdにある通り取り敢えずHerokeでデプロイすることにする。下の記事を参考にした。 qiita.com ちなみに自動デプロイしようとしたけどなんか反映されなかったので手動デプロイでやっていた。URLが取得できたらlearderboardのissueから参加登録する。 初回計測がこれなんですけどなぜか高く出てしまって最後まで超えられませんでした（泣）。 f:id:season1618:20220306191825p:plain

手元で実行

リポジトリをcloneする。yarn installしようとしたら問題発生。

PS C:\Programming\web-speed-hackathon-2022> yarn install
yarn : このシステムではスクリプトの実行が無効になっているため、ファイルC:\Users\user\AppData\Roaming\npm\yarn.ps1 を読み込むことができません。詳細については、「about_Execution_Policies 」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ yarn add react-image
+ ~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PS 
SecurityE    xception
    + FullyQualifiedErrorId : UnauthorizedAccess

qiita.com 実行ポリシーがそのままだった。forkしたリポジトリだとこうなるぽい？Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Processしたらできた。

ところがlocal hostにアクセスしたらUncaught ReferenceError: exports is not definedと出てしまいページが表示されない。Slackで別の学生が同じ報告をしていた。Windowsに起因する問題だったらしく、新しくpushされたもので実行できたら表示された。やっと競技開始です。

競技

コードを読んで取り敢えずReactが使われてることだけは分かった。

Reactコンポーネントを関数コンポーネントの外に置く

トップページ開いたらThe component styled.button with --- has been created dynamically.がたくさん出てきたので、定義を関数コンポーネントの外に置きました。改善にはなるけどスコアには大きく影響しないそうです。

画像の読み込みを何とかする

TrimmedImageの読み込みが遅かったので色々やろうとしたんですが上手くいきませんでした。サブピクセルレンダリングという言葉を覚えて整数座標にしたりしてた。

canvas の最適化 - Web API | MDN

HTML5 canvas のパフォーマンスを向上させる - HTML5 Rocks

それ以外

以下の記事を読んで試行錯誤したのですが、結局何もできませんでした。知識が浅いな～。

zenn.dev trap.jp

結果

次あったらもっと良い結果を出せるように頑張りたい。 f:id:season1618:20220306191038p:plain traPの先輩が上位に入っていて凄いなあと思った。