準優勝できそうでできないWeb Speed Hackathon 2025

この記事は新歓ブログリレー2025 19日目の記事です。今日はotimaくんの記事も上がっているので読みましょう。そして千代田桃生誕祭を祝いましょう。

こんにちは。24Bのあきもです。3月22日・23日に開催されたWeb Speed Hackathon 2025というイベントに参加し、レギュレーション落ちで失格になりました。失格を考慮しなければ123人中5位ということで、初参加にしては結構頑張ったんじゃないでしょうか。

Web Speed Hackathonって？

ABEMAなどを作っているサイバーエージェント社主催の、クソ重いWebサイトのパフォーマンスを改善する競技です。今年のテーマは架空の動画配信サービス「AREMA」でした。あれま。チューニングの対象は主にフロントエンドですが、バックエンドをいじることもできます。

順位はGitHub Actionsで測定されたスコアで決まるのですが、改善をする際に元々あった機能を損なったり見た目が大きく変わることがないように気をつけなければいけません（競技終了後に運営によるレギュレーションチェックがあります）。これがかなりの鬼門で、今年はチェックの対象者16人中1人しか通過できないという大惨事が起こりました。通過（即ち優勝）したのはスコア4位の@shun-shobonさんで、僕はスコア5位だったので準優勝できていたかもしれないというわけです。

ちなみに去年はtraPのしーぴーさんが優勝していました。

参加までの経緯

数ヶ月前、2024年の過去問を使った部内Web Speed Hackathonが開催されました。僕は普段バックエンドを書いていてまともにフロントエンド開発をしたことがなかったのですが、部内WSHに参加してみたらフロントエンドにも興味が湧いたので今回のWSHへの参加を決めました。それ以降特にWSHに特化した練習は行っていませんが、開発経験を積みたかったのと前々からパソコンカタカタ系の仕事をしたかったのもあり1月からフロントエンド開発のバイトをしています。

やったこと

本質的な改善としては解説で言及されていたことの半分ぐらいしか行っていないのでここでは説明しません。僕は割とちゃんとコミットメッセージを書いていたので、気になる人はコミットログを見てください。ちなみに1回目のデプロイで1位になった後2回目のデプロイで600点ぐらい出してしばらく1位をキープしていたんですが、あれは何だったのか自分でも分かりません。

デプロイに苦戦してようやく行けたと思ったらなんか1位になっちゃった
どこまで逃げ切れるかな
"Web Speed Hackathon 2025" に挑戦中です！
スコア 371.90 / 1200.00 で、現在 1 位です https://t.co/Ow9W2G71lL #WebSpeedHackathon
— あきも (@akimon658) March 22, 2025

さて、僕が他の多くの参加者と違うのはGCEを使っていたことだと思います。GitHub ActionsでDockerイメージをビルドして、Google Compute Engineのe2-microインスタンスで動くContainer-Optimized OSにデプロイしていました。

なぜHerokuを使わなかったのか？

運営はHerokuへのデプロイを案内していましたが、2024年の問題で運営が案内していたKoyebの無料枠を使ったときスペックが低いのとビルドの遅さがストレスだったのでデプロイ先は自分で決めることにしていました。e2-microなら無料でメモリを1GB使えますし、ビルドも自分でコントロールすることでキャッシュを効かせたりできます。また今回はHerokuへのデプロイが上手くいかないとかでゴタゴタしていたり、運営の人に頼まないとログが見られないといった問題もありました。あらかじめデプロイ先を決めておけばこういった不測の事態も回避できます。

GCEを選んだ理由、使ってみて

ある程度自分でコントロールできれば何でも良かったのでGCEである必要性は特になかったのですが、準備を始めるのが遅くて色々比較している時間がなかったので昔ちょっとだけ遊んだことのあるGCEしか選べませんでした。どうやってデプロイしようかなーと考えていたらContainer-Optimized OSの存在を知り、当初思っていたより楽にコンテナを扱えたのは良かったです。

一方で、これから同じことをしようと思っている人がいるなら知っておいてほしいこともいくつかあります。

課金が発生しうるポイントがいくつかある

e2-micro自体が無料で使えても、ネットワークや静的IPに対して課金が発生します。僕はちゃんと理解しているわけではないので、以下の情報は全て末尾に「知らんけど」を付けて読んでください。

まずネットワークですが、Google CloudにはPremium TierとStandard Tierがあります。デフォルトのPremium Tierは無料枠が下り1GBまでですが、Standard Tierは無料枠が200GBあります。肝心の品質ですが、GoogleによるとStandard Tierは他社並みらしいです。実際どれくらいの差があるのか分かりませんが、性能比較をしている余裕がなかったので僕はケチってStandard Tierにしました。

次に静的IPですが、これは無料枠が月1時間とかなので課金を避けるならCloudflare Tunnelsとかを使うと良いんじゃないでしょうか。僕は面倒くさかったので諦めて課金しました。

僕が知らないだけで他にもまだあるかもしれません。どうせ大した金額にはならないので無料にこだわる必要はないと思っていますが、お金をかけて良いならGCE以外の選択肢もたくさんあるので色々調べると良いと思います。

Cloud Buildを使った方が良いかも

僕は（Cloud Buildを使ったことがなかったのもあり）GitHub Actionsを使っていましたが、イメージのpullがかなりのボトルネックでした。同じGoogle Cloud同士の方が速いとかあるかもしれない（検証していないので知らない）ので試してみると良いんじゃないでしょうか。まぁそれを抜きにしても、プライベートリポジトリの場合はCloud Buildのe2-standard-2の方が1GBだけメモリが多いというメリットがあります。

古いイメージを消さないとすぐストレージがいっぱいになる

コンテナのデプロイ自体はgcloud compute instances update-container インスタンス名 --zone ゾーン名 --container-image イメージ名でできて割と簡単ですが、古いイメージが勝手に消されたりすることは当然ないのでストレージの無料枠30GBなんてすぐ埋まります。僕はログを見てヤバそうだなーと思ったら手作業で古いイメージを消していましたが、何かしらの方法で自動的に消したほうが良いと思います。

結果

前述の通り多くの人がレギュレーションチェックで落ちましたが、それぞれ落ちた理由を教えてもらえました。僕の場合は

ホームに表示されるコンテンツがオリジナルのものと異なります

とのことだったんですが、心当たりがなくて結果発表の直後は微妙な気持ちになっていました。今になって思うと、Cloudflareを噛ませていたのでサーバーが落ちていたかタイムアウトしたとかでCloudflareの画面が表示されていたのかもしれません。

追記

Twitterで理由を詳しく教えてもらえました。

https://x.com/nodaguti/status/1904762867162694023

「コンテンツ」と言われているのだから確かにそうですね。競技中は途中で中身が変わったことに全く気づいていませんでした。優勝した@shun-shobonさんは引っかからずに対処されていて流石だなぁと思います。悔しーーーー！！！

おわりに

この記事を読んだ新入生がWSHに興味を持ってくれたら嬉しいです。ぜひ来年戦いましょう。全力で潰しにいきます。

明日の投稿者はYMACくんです。お楽しみに。