『HOT PEPPER Beauty』Frontend スピードハッカソンに参加してきた

こんにちは

今回リクルートさんが主催するスピードハッカソンに参加したので色々感想をまとめておきたいと思います。

チームメンバーのおかげでなんと優勝することができたので本当に嬉しかったです！

概要

「HOT PEPPER Beauty」のとあるページを今回のイベント用に改悪したものを渡され、それを改善するとLightHouseの計測結果(Performance)を参考にスコアづけされるというものでした。

機能・見た目を損なわなければ基本的には何をしても良いという感じでした

チームメンバーは一応ある程度実力差が出ないように調節されてたんでしょうか・・・？全くわかりません

やはりコロナウイルスが問題となっていたので消毒液は完備され、こまめに消毒するよう連絡がありました。

そもそもチューニングやフロントの速度をガチで改善した経験がなかったため色々ネットでググったり、HOT PEPPER BeautyのページをLightHouseで計測してみたりはしてみました。

事前に調べたものはNotionにまとめてハッカソン開始時にチームメンバーに一応共有しました

個人的にはその時の知識をめっちゃ使ったので前準備に少し時間割いててよかったなと思いました（でももっと準備すべきだった）

後は念の為Node.jsを現時点で推奨版の12.16.1へアップデートしておきました

チームごとに席に座る時に @たじまさんの名前があったのでtwitterでみたことある人だ！って勝手にちょっと盛り上がってました

内容説明が終わったら早速競技に取り組む予定だったんですがチームメンバーが１人遅刻したようで元々３人チームで他より１人少なめだったのに更に減って２人になるとのことで@どらさんに別チームから移動してきてもらうことになりました

とりあえずLightHouse一回実行してみてPerformanceの欄に出ているエラーを順に潰していくことになりました。

以下僕が取り組んだものです

自分は画像を最初から全て読み込んでおくのではなく最初は解像度をとても下げるなりそもそも表示しないなどで負荷を低くして必要な時に正規のものを表示するというLazyLoadを担当することになりました。軽く調べてはいたのですが実装はした覚えがなく手探りで進めたらやらかしました・・・

jQueryが元々入ってたので jQueryのlazyload -> https://github.com/tuupola/lazyload

を使用したんですが

Qiitaを参考に書いてみて、ローカル環境ではきちんと動いてたので（そう見えただけ）pushしたんですがどうやら書き方が古い（又は別の書き方してた）ものを参考にしちゃったみたいで本番で画像が表示されなくなってしまいました・・

きちんと一次情報を探りにいくのは大事でした

ハンバーガーとサンドイッチがpushされました

CSS,JSも全て読み込み終わるまで待ってたら遅いので非同期処理にすることにしました。

JSに関してですが、Chromeでは今の所deferをつけても記述順が守られるとみたことがあったので