CSSを軽量化し、ページ表示速度を改善せよ！ レガシーWebフロントエンドのパフォーマンスチューニング

大規模レガシーサービスにおけるパフォーマンス改善の道のり 第2回

　2018年の7月から実施されたGoogleの検索ロジックの変更（Google Speed Update）により、ページ表示速度がサイト検索順位に影響するようになりました。今回紹介する取り組みは、Google Speed Updateに備え、タウンワークにおいて、できる限りのパフォーマンス改善を行う目的で実施したものです。本稿には、煌びやかなWebの新技術の話は一切登場しません。むしろ、連綿と受け継がれてきた「秘伝のタレ」に立ち向かう泥臭い話です。この取り組みで行ったアプローチは、不要なものを削って速度改善を図るという技術的には非常にシンプルなものです。ただし、いくつかの制約条件によって難易度が上がっています。本稿では、実際の取り組み内容と結果、および今後についてお話しします。

はじめに

　リクルートテクノロジーズでソフトウェアエンジニアをしている加藤慶之です。

　本稿では、リクルートジョブズが提供する求人情報サービス「タウンワーク」において行った、Webフロントエンドのパフォーマンス改善についての取り組みを紹介します。

ハッカソンスタイルでの問題発見・解決手法の検証

　この取り組みにおける難しさは、時間制約のある中、複雑な問題に対して現実的かつ最も効果のある解決策を提案し、それをできる限り安全にリリースしなければならない、という点にありました。対象となるタウンワークは、掲載求人件数が毎週約90万件にものぼる、日本最大規模の求人情報媒体です。タウンワークのシステムには、10年以上の年月を経て蓄積されたさまざまな問題が積み重なっています。しかし、既にサービスとして成熟しているため、不用意なシステムの変更によるリスクを許容することはできません。Googleのロジック変更が行われる7月までに速度改善を行うには、まずこれらの問題を解きほぐし、解決可能なものに対して最も効果のある打ち手を選択することが必要でした。

　そのため、私たちは5～6人のチームを組み、短時間で集中的に問題発見とその解決策の検証に取り組みました。このハッカソンスタイルの検証プロセスが功を奏し、最も取り組むべき課題を早期に浮き彫りにすることができました。

解決可能な打ち手とその優先順位。実現までのリードタイムが短く期待効果の大きいものを優先した。

計測・分析・実装

　私たちがハッカソンスタイルで問題発見・解決を効率的に進めることができた要因のひとつは、Lighthouseを活用したことにあります。Lighthouseは、Googleが提供しているオープンソースのWebパフォーマンス計測ツールです。Google Chromeの開発者ツールからブラウザ上で実行することができます。

　Lighthouseを実行すると、対象のWebページを読み込む際、パフォーマンスを阻害する要因になっているものが何であるかを教えてくれます。Webのパフォーマンスを左右する要因はさまざまですが、Lighthouseはそれらの要因について監査項目を持っており、対象のWebページが各項目の基準を満たすか否かを自動で判定します。また、監査項目をどれくらい満たしているかを採点し、スコアとして表示してくれます。

改善実施前のタウンワークに対してLighthouseを実行した結果

　上の画像は、改善前のタウンワークのトップページに対してLighthouseを実行した結果のスクリーンショットです。赤く伸びるバーが、解決すべきパフォーマンス上の課題の存在を教えてくれています。

　Lighthouseの便利さは一目瞭然ですが、加えて注目したいのはハッカソン型開発との親和性の高さです。課題に対して解決策を試し、その効果がすぐにわかるツールは、私たちにとって非常に強力な武器です。なぜならば、私たちは解決策の実装と結果の考察に専念することができるからです。Lighthouseで計測し発見した問題について、原因の分析を行い、解決策を実装し、その効果をまたLighthouseで計測する。このサイクルを通して、私たちは取り組むべき課題とその優先順位を明らかにしていきました。