Ownedmedia ウェブ制作に役立つコンテンツを発信中!

分析・アナリティクス 2018.05.30

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

Tags: ,,,
最終更新日:Update

今回はChromeの拡張機能であるLighthouseというツールを使って、ウェブサイトのパフォーマンスをトータルで確認していきたいと思います。これまでにもウェブサイトのパフォーマンスについてはいろんなツールを使ってみていきましたが、今回登場するLighthouseはGoogleの公式ということもあり、ウェブサイトの設計指針やSEOなどの観点からも、重要な指標になるのではないでしょうか。

 

LighthouseはChromeの拡張機能ですので、アドオンで追加するか、デベロッパーツールにも標準で搭載されているのですぐに利用することができます。

 

アドオンから利用する場合は、アドオンを追加し有効化されている状態で、ウィンドウ右上にある灯台のマークをクリックします。そうすると、Lighthouseのダイアログが表示されるので「Generate report」をクリックします。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

間も無くWebページのデバッグが始まります。デバッグが終わると解析結果が表示されますので、しばらく待機しましょう。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

ちなみにデベロッパーツールからLighthouseを利用する場合ですが、デベロッパーツールの「Audits」タブを選択し、中央に表示されている「Perform an audit…」のボタンをクリックします。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

同じく、Webページの解析が始まりますので、結果が出るまでしばらく待ちましょう。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

少し時間が経過するとLighthouseの解析結果がレポートとして表示されます。上部に大きく5つのスコアが表示されています。右から「Performance」「Progressive Web App」「Accessibility」「Best Practice」「SEO」となっています。満点が100点となっており、点数のレベルで緑から黄色、最低は赤と色分けで表示されています。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

WEBサイトのスピードを示す「Performance」

まずは、WEBサイト高速化のためには重要な指標となる「Performance」の項目です。ここでは表示速度の改善に向けたポイントがチェックされます。この数字がいいということはそれだけWEBサイトが高速であるということが言えます。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

評価に対しての具体的なチェックポイントと対策についてはこのように表示されています。(英語で書かれているので翻訳が必要ですね、、)

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

ウェブアプリの仕組みがあるかを見る「Progressive Web App」

これからのWEBサイトは、ブラウザの進化とともに、より機能が充実してくると予想されています。その中で推奨されているのが「Progressive Web App」です。つまり、WEBサイトにどれだけアプリに近い要素や仕組みが組み込まれているかというところをチェックします。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

この数値が高ければ、次世代のWEBサイトの仕様であり、アプリに近いものであると言えますね。ただし、専門的な知識が必要になってくるのでこのスコアを上げるのはハードルが高いでしょう。

 

ユーザーに親切な設計であるかを見る「Accessibility」

次は、デザイン的な観点も含まれるのですが、WEBサイトの情報やコンテンツがいかにユーザーへ伝わりやすいかをチェックされます。例えばコンテンツ内の要素のカラーコントラストなどが挙げられます。ですので、UIに関する知識が必要になってきます。また、ユーザーだけでなくクローラーに対しても情報が伝わりやすいかどうかもチェックの対象となります。タグの記述も厳密にする必要があります。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

この数値が高いということは、それだけユーザーの視点に合わせた構成で、クローラーへの対策も行われているということになります。

 

グーグルが推奨している指針をまとめた「Best Practice」

この項目ではグーグルが推奨しているWEBサイトの設計指針をまとめた内容になります。たとえばHTTP/2に対応しているかどうかや、不正なスクリプトを使用しないという基本的なところから、コンソールにエラーが無いなどもみられます。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

この項目は多岐に渡るのですが、ひとつずつ確実にクリアしていきたいですね。

 

内部SEO対策のチェック項目が並ぶ「SEO」

最後の項目では、SEOの観点から正しくウェブサイトが設計されているかをチェックしていきます。メタタグを揃えるところから、インデックスされる仕組みがあるか、また、モバイルフレンドリーであるかどうかも重要なポイントになります。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

このスコアを上げることが内部SEO対策の効果的な方法であると言えますね。

 


 

今回は当サイトをチェックしてみましたが、まだまだ改善の余地はありそうですね。。とりあえず表示されていればウェブサイトとしての機能を果たしているかもしれませんが、将来のことを考えると、こういった細かい部分での完成度を高めていくことが、サイトの価値を上げる手段でもあるのではないでしょうか。

 

また後日、別記事にてこれらのスコアを上げるための施策をまとめていきたいと思います。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?