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

3 min読了の目安(約3100字IDEAアイデア記事

初出:https://qiita.com/drafts/292c45c42565aa676b2d/edit

とりあえずのチェックであれば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と比べるとややマーケティング寄りのツールで、エンジニアが直接利用するのであれば他の2つの方が良さそうではある。

Analytics

サイトの速度

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

Search Console

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

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

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

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

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

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

Google以外

GTmetrix

PageSpeed以外にもYSlowという米Yahoo!基準のパフォーマンスチェックができる。
ただしYSlowは全然メンテナンスされていないので、現代のブラウザ事情にどれだけ即しているかは不明。
有料プランに加入していないとモバイルテストが出来ないのもやや使いにくい。

Pingdom Website Speed Test

死活監視やパフォーマンス監視のPingdomの分析ツールが無料でも利用できる。
見た目はスタイリッシュだがこちらもモバイルは非対応となっておりやや使いにくい。

Website Grader

分析エンジンはLighthouseのものを使っているらしいので特別使う理由がなければ別にいいのでは。