🚴

ウェブサイトを作ったらとりあえずテストしておきたいパフォーマンスツールたち

2020/10/03に公開

Web

パフォーマンス

idea

とりあえずのチェックであればGoogleのツールだけで十分だが、一応他のツールもいくつか挙げる。

Google

パフォーマンスチェックツール

Lighthouse

Lighthouse はオープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。このツールは Chrome 拡張機能として実行するか、コマンドラインから実行できます。 Lighthouse に監査したい URL を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。
注: Lighthouse は現在、ホーム画面への追加やオフラインサポートをはじめとする Progressive Web App 機能に重点をおいています。また一方で、このプロジェクトの包括的な目標は、ウェブアプリ品質のあらゆる側面を網羅した、エンドツーエンドの監査を提供することです。

もともとChrome拡張として存在していたLighthouseだがChrome 60にてデベロッパーツールに統合された。
以前はAuditsというタブで表示されていたが、現在はLighthouseという名前通りのタブになっている。

PageSpeed Insights

PageSpeed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
https://developers.google.com/speed/docs/insights/about/?hl=ja-JP

Test My Site

Test My Site は Google が提供する無料のツールで、お客様のモバイルサイトの速度を測定し、ユーザーエクスペリエンスを向上するための最適化案を提示します。
Lighthouse のデータをもとに、ページとサイトの速度向上に役立つ、お客様のためにカスタマイズされた最適化案を提供し、ユーザーの視点から見て質の高いエクスペリエンスを実現するためのベストプラクティスとリソースを紹介します。
https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/faq/

Lighthouse / PageSpeed Insights / Test My Siteの違い

Lighthouseの説明ページの日本語版は情報が少ないが、英語版に切り替えるとLighthouseをチェックした後にPageSpeed Insightsも利用する流れがある。
基本的にLighthouseはSEOやPWAを含めたローカルで実行される包括的なパフォーマンスチェックであり、パフォーマンスのみを正確に検査したいのであればリモートで実行されるPageSpeed Insightsの方が正確といった使い分けがよさそう。（内部的にはPageSpeed InsightsがLighthouseの分析エンジンを利用しているという形らしい）

またポジションがいまいち不明なTest My Siteだが、よくある質問に「Test My Site のテスト結果は、テクニカルチームと話し合う際のたたき台としてご利用ください。」とあるように、LighthouseやPageSpeed Insightsと比べるとややマーケティング寄りのツールで、エンジニアが直接利用するのであれば他の２つの方が良さそうではある。

Analytics

サイトの速度

Google Analyticsを導入しているのなら注視しておきたい。

Search Console

モバイルフレンドリーテスト - Google Search Console

URLを指定してのモバイルフレンドリーテスト。
ログイン不要で使えるが、トップページ以外のURLを片っ端からチェックするのは大変なので次の項のSearch Consoleのクロール結果を参照したほうが良い。

モバイルユーザビリティ - Google Search Console

Googleがクロールしたページのモバイルユーザビリティ適合度を確認できる。

クロールの統計情報 - Search Console

クロールの統計情報でページレスポンスなどの推移を確認できる。