ウェブサイトのパフォーマンス計測ツール【Lighthouse】の使い方

先日、Webサイトのパフォーマンス測定ツールとして有名な「Pagespeed Insights」の評価基準が代わって話題になりました。

Googleが開発する「Lighthouse」というツールを基にスコアが算出される様になったようです。

参考:Lighthouse によるウェブアプリの監査

今回は、Pagespeed Insightsではなく、Google Chromeの拡張機能としてLighthouseを使う方法を紹介します。

Lighthouseとは

Lighthouseは、Google製のウェブサイトの監査ツールです。

ウェブサイトに対してLighthouseを実行すると、ページに対してテストを行い、パフォーマンス改善のヒントが得られます。

 

Lighthouseの測定では、2018年11月13日現在、以下の5項目について測定できます。

  • パフォーマンス
  • プログレッシブウェブアプリケーション
  • アクセシビリティ
  • ベストプラクティス
  • SEO

Pagespeed Insightsでは、このLighthouseによる測定結果のうち、「パフォーマンス」についてのスコアや改善方法が提示されています。

 

LighthouseはPagespeed Insightsの他に、

  • Googleの拡張機能として実行
  • コマンドラインツールとして実行

する方法もあり、これらの方法では上記に挙げた「パフォーマンス」以外の4項目についても測定できます。

手軽にサイトパフォーマンスを計測する場合はPagespeed Insightsで測定し、その他についてもガッツリ計測する場合は拡張機能やコマンドラインツールとして使用しましょう。

 

今回は、全て計測でき、かつ導入しやすい「Googleの拡張機能として実行」するためのLighthouseの使い方を紹介します。

 

Googleの拡張機能としてLighthouseを使用する

chrome ウェブストアのLighthouseのページから、Lighthouseを追加します。

以下のページから、「Chromeに追加」をクリックして拡張機能を追加しましょう。

Lighthouse

Lighthouseの拡張機能が追加されたら、パフォーマンスを測定したいサイトを開き、Lighithouseのアイコンをクリックします。

右下にある「Generate report」をクリックすると測定が始まります。

 

測定には1分〜数分かかることがあります。

測定が終了すると、結果が表示されます。

5つの項目についてのスコアが表示され、その下に各項目についての細かいデータや改善点が表示されます。

それぞれの項目について確認し、サイトのパフォーマンスを改善しましょう。

 

まとめ

ウェブサイトのパフォーマンス測定ツール「Lighthouse」の使い方を紹介しました。

スコアが低い場合は改善項目がたくさん表示されるので、少しずつ改善していきましょう。

ブログ形式のサイトを改善する場合、まずは「パフォーマンス」、「ベストプラクティス」、「SEO」あたりから改善するのがおすすめです。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください