プラカンブログSTAFF BLOG

2019.12.20

WEBの表示速度を計測するツールLighthouseは灯台という言葉どおりだ!

WEBの表示速度を計測するツールLighthouse

2017年2月14日に
PageSpeed Insightsというホームページの表示速度をチェックするツールを紹介しましたが、今回はLighthouseという表示速度を計測するツールを紹介します。

Lighthouse

Lighthouseは、Google Chrome上で稼働するツールで、「Google Chromeの拡張機能を利用する」「Chrome DevToolsを利用する」「コマンドラインツールを利用する」といった利用方法があります。

今回は「Google Chromeの拡張機能を利用する」方法を使ってみました。
Google Chromeを立ち上げLighthouseの拡張機能をインストールします。

Lighthouseのインストールはこちら

インストールするとGoogle Chromeの右上にLighthouseのアイコンが表示されます。

Lighthouseのアイコン

表示速度を調査したいWEBページのURLをGoogle Chromeで開き、Lighthouseのアイコンをクリック、ポップアップメニューのGenerate reportをクリックすると結果ページが表示されます。
結果ページには100点をベストに次の5項目の採点結果が表示されます。

5項目の採点結果

1.Performance(表示速度パフォーマンス)
2.Accessibility (WEBサイト利用におけるアクセシビリティ)
3.Best Practices(WEBサイトとして理想的な実装チェック)
4.SEO(SEO対策)
5.Progressive Web App(WEBとアプリの利点を備えているか)

Lighthouseって表示速度の計測だけでなく、アクセシビリティやSEOの採点もあるんですよね!

自社サイトのSEOの採点結果

自社サイトを調査したSEOの結果画面

上記はLighthouseで自社サイトを調査したSEOの結果画面です。83点でオレンジ色になっています。
良い評価の85~100点が緑、平均的な45~84点がオレンジ、警告を意味する0~44点が赤色で表示されるようです。

画像にALTが入ってないところやフォントサイズなどモバイルフレンドリーでない箇所も分かるようになってます。LighthouseはGoogleの拡張機能ですので、指摘されているところを改善すると点数が上がったり、実際に検索エンジンでの表示結果も上位に上がるのかも知れません。

Lighthouseは灯台という意味ですが、WEBの問題点を照らしてくれるツールで、他社のサイトもさくっと調査できるので便利だなと思いました。
ただ表示される結果が英語で、すぐに理解が難しいので日本語バージョンにしてほしい!
Google翻訳で訳しながら結果を解読しています。まるでジグソーパズルをひとつずつ埋めるかのように…(笑)

+dc(三)

この記事は、MIKI が書きました。