スピードハッカソンとは

リクルートテクノロジーズ　アプリケーションソリューショングループ (ASG) のグループマネージャをやっている古川です。 3/7 に開催されるイベントのスピードハッカソンについて解説します。

ASG では定期的に、遅いウェブアプリケーションを高速化する施策を行っています。ウェブサイトのパフォーマンスは、放置しても速くなることはなく、基本的に遅くなります。

遅くなる要因は色々ありますが、一番大きな要因としては「自分のサイトがどれだけ時間がかかっているかわかっていない」という事に尽きます。これは体重計に乗らないと自然と重くなってしまうのと似てます。

性能改善は、ダイエットと色々なところが似ています。

ダイエットも根気よくしっかり体重を落としていく活動ですが、性能チューニングも、遅くなっているところを見つけては根気よく速くしていく必要があります。ただし、本番環境で動作しているものを根気よく速くしようとしても、なかなか形になりません。ダイエットといっしょで、途中で脱落することがあるからです。

そこで ASG では、まず実際のサービスのフロントエンド部分だけを取り出して、制限のない状態でボトルネックを改修し、どの程度影響があるかを調べながら高速化するようにしています。高速化する上で制約のない状況で、理想の状況を作り出すのです。

こうすることで、自分の理想の性能をイメージしやすくなります。最初に理想の姿を思い描いた方が成功しやすいのも、ダイエットと同じですね。

こうした取り組みを、「限られた時間内でどれだけ早くできるか」を競うコンテスト形式で行うことで、素早くボトルネックを特定できます。また高速化の効果を全体で共有することで、「自分たちの場合はどうすれば理想の姿に近づけるのか」を持ち帰ることも可能です。これを1日でやるイベントを「スピードハッカソン」と呼んでいます。

これまで実践した内容に関しては、 Google の web.dev や CodeZine でも取り上げられ、掲載されています。

レギュレーション

それでは、今回のレギュレーションについて説明します。

実際に Hotpepper Beauty の特定のページを抜き出し、そこを高速化します。性能の効果計測には lighthouse と呼ばれる計測ツールを利用します。

最後に lighthouse の点数が高いほうが勝ちとなります。
100点で並んだ場合は、 speedindex の時間で優劣を付けます。

ただし、以下の禁止事項が存在します。

・見た目を大幅に変えること(最後に運営のチェックでどれだけ崩れてるかを確認し、元の状態からどこまで離れているかをチェックする)
・操作できなくなること(最後に運営がリンク等を確認する、操作できなかったらNG)

実際にやってみると、見た目を大幅に削って空白のページにしてしまえば点数は上がります。ただし、見た目が大きく損なわれていると判断された場合は減点、場合によっては計測せず、失格になることもあります。

途中経過時点で禁止事項が確認されても失格にはなりませんが、最終確認時点では、禁止事項に違反した場合は失格になります。

その他、lighthouseにはパフォーマンス以外にもアクセシビリティやSEO、PWAといった計測項目がありますが、それは特に点数に加味しません。ただし、その数値を上げてアピールした場合は別途評価します。

最後に

スピードハッカソンの良いところは、得点が出つつも目に見えて改善が進む、というチューニングそのものの楽しさにあります。
「参加したいけど、成果が出なかったらどうしよう…」「自分が参加しても楽しめるだろうか」と思われる初学者の方であっても、やれることは沢山あります。また、楽しんで競いながら学ぶことは一番の学習になります。

ぜひ、学生や若手の皆さんに参加してほしいです。
あまりウェブは詳しくないけどチューニングに興味ある、という初学者の方も、我こそは性能の鬼である、というウェブのエキスパートの方々にも、是非来ていただけると嬉しいです！！！

エントリーはこちらから！

奮ってご参加ください。