Web サイトのパフォーマンスを改善する際に、まずなにをすればいいのか、そもそも何が課題なのかがわからないという場合があると思います。
今回は、そんなときに Web サイトをチューニングの助言してくれるツールやサービスを紹介します。
Lighthouse
Lighthouse は Google が提供している、オープンソースのツールです。
Google Chrome の拡張機能と CLI のツールが提供されています。
サイトの Performance、Accessibility、PWA（Progressive Web Apps）対応状況などについての確認できます。
また、サイトの品質を向上させるための具体的な対策を提示してくれます。
- Lighthouse の名前の由来
- デベロッパーが「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse（灯台）」と名付けられたのだそう。
Google Chrome 60 からは、Chrome DevTools に統合され、Audits タブから実行できるようになっています。
Google ウェブマスター向け公式ブログ : Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介
Audits
Google Chrome の Chrome DevTools には、Audits というパフォーマンスの課題を検索してくれる機能がついています。
パフォーマンスを計測するためには、対象のページで Chrome DevTools を起動して、Audits タブの [ Run audits ] をクリックするだけです。
- Audits の読み方
- Audits は「おーでぃっつ」と読みます。日本語で「監査」「(問題の)審査」という意味。
PageSpeed Insights
PageSpeed Insights は、URL を入力すると実際にページを読み込んで、Web ページの課題を検出してくれます。
前述した Audits と違い、オンライン上で利用します。
こちらも、分析エンジンには Lighthouse が利用されています。
Google ウェブマスター向け公式ブログ : PageSpeed Insights、Lighthouse の使用を開始しました
Lighthouse と同じ結果になると思いきや、そうではなく、本家 Lighthouse よりも少し低いスコアがつくらしいです。
PSI 経由で取得した Lighthouse の結果と、ローカルの Chrome で取得した Lighthouse のスコアが異なることがあります（ありますというより、ほとんどの場合は異なるはず）。
これは、Lighthouse を実行する環境の違いです。PSI の Lighthouse はクラウドで実行されます。
一方、Chrome の Lighthouse はあなたが使っている Chrome で実行されます。
したがって同じ結果にはなるとは限りません（なお、Chrome で Lighthouse を実行するときは、拡張機能を無効にしたシークレットモードを利用することを推奨します）。Google製スピード測定ツールのPageSpeed Insightsが分析エンジンにLighthouseを組み込む | 海外SEO情報ブログ
Test My Site
Test My Site も Google が提供している、モバイルサイトのテストツールです。
Test My Site は、以下のようなことができます。
- モバイルでのサイト読み込み速度の確認
- 読み込み中の想定離脱数を確認
- 業種別平均速度との比較
- 速度改善の提案
こちらは PageSpeed Insights に比べ、Web でのテスト結果は、表示速度だけとシンプルになっています。
テスト結果の詳しいレポートはメールで送ってもらう形式です。
詳細レポートは、日本語で丁寧に記載されていますが、PageSpeed Insights の内容と変わらない様子。
まとめ
今回は Web サイトをチューニングの助言してくれるツールやサービスを4つ紹介しました。
Google 様様、Lighthouse 様様って感じでしたが、紹介したツールやサービスがサイトチューニングのお供になれば幸いです。
それでは、今回はここまで : )