| 日本語 | English |

PageSpeed Quest

PageSpeed QuestはWebフロントエンドのスピード改善を支援するフレームワークです。

Webフロントエンドのスピード改善には、ボトルネックの解消をはじめ数多くの手法やアイデアがあります。しかし理論的に有効な手法をアプリケーションに実装しても、期待した成果が得られないことがよくあります。

PageSpeed Questを利用すると、事前にアイデアの仮説検証を速やかに繰り返し、効果のあるアイデアから優先的に実装できます。

仕組み

Web APIのモックツールであるVCRをご存知の方は、それをWebページに拡張したものと解釈いただくとわかりやすいです。

LighthouseをPageSpeed Questが提供するHTTPプロキシ経由で実行します。このHTTPプロキシは、WebサーバーとLighthouseを中継するのと同時に、Webページのリソースを静的ページのようなファイル群に変換して「録画」します。

次からはWebサーバーにアクセスするのではなく、記録された静的ファイルを元にWebサーバーの応答を「再生」します。このときリソースごとのレイテンシーや通信速度もできるだけ再現します。

この仕組みにより、アプリケーションを実際に改修するのではなく静的ファイル群を変更するだけで、計測結果にどのような影響があるかを速やかに試験できます。

使い方

Node JS 18以上が必要です。

プロジェクトの作成

まずは仮説検証を進めるプロジェクトを作成します。ディレクトリ名は必要に応じて変更してください。

mkdir my-first-quest
cd my-first-quest
yarn init -y
yarn add pagespeed-quest -D

Webページの記録

次のコマンドでLighthouseを実行し、計測に必要なファイルを記録します。URLは変更してください。

yarn psq lighthouse recording https://exmaple.com/

inventoryディレクトリにファイルが作成されます。

• inventory/index.json リソース一覧とメタデータ
• inventory/[method]/[protocol]/[hostname]/[...path] 各リソースの内容

これらのファイルを改変すると、次に解説する再生操作でLighthouseが受信するリソースやメタデータ、転送スピードを改変できます。

Webページの再生と計測

次のコマンドでWebページを再生し、Lighthouseで計測します。

yarn psq lighthouse playback

レポートページが自動で表示されます。レポートファイル等はartifactsディレクトリに作成されます。

再生プロキシの起動

次のコマンドでWebページを再生するプロキシのみを起動できます。

yarn psq proxy -p 8080

通常のブラウザのHTTPプロキシにhttp://localhost:8080を設定することで、開発者ツールでパフォーマンスタイムラインを詳しく観察できます。

ただし、このHTTPプロキシはダミーのSSL証明書を用いるため、ブラウザのSSL証明書エラーチェックは無効にしてください。たとえばMacOSであれば、次のコマンドでSSL証明書のエラーチェックを無効としてHTTPプロキシをhttp://localhost:8080としたChromeを起動できます。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --proxy-server=http://localhost:8080

開発環境の共有やトレーニングにも

PageSpeed Questは、Webアプリケーションのリリースを必要としないスピーディーな仮説検証意外にも有用です。

• 第三者の協力 第三者の協力を得るとき、開発環境の共有が難しい場合があります。Webフロントエンドの仮想的な開発環境を容易に共有できます。
• トレーニング 自身のサイトに限らず、あらゆるWebページを題材にWebフロントエンドのスピード改善をトレーニングできます。

連絡先

技術サポートやビジネス利用に関しては [email protected] まで連絡ください。