PageSpeed InsightsのOSS(Lighthouseライトハウス)をインストールしてみる

PageSpeed Insights(ページスピードインサイト)とは

SEO対策のためにPCやモバイルで読み込み速度を確認するツールです。

https://developers.google.com/speed/pagespeed/insights/

GoogleのPageSpeed Insightsでもチェックは可能ですが、
自分のパソコンやサーバにインストールすることで複数のサイトの確認やPWA対応しているかどうかも確認が可能です。

Lighthouse(ライトハウス) Google Chrome拡張機能

Google Chromeの拡張機能もあります。
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

Lighthouse(ライトハウス)をパソコンやサーバにインストール

OSSとしてGithubで公開されています。


$ npm init -y
$ npm install lighthouse

実行コマンド


$ lighthouse https://dev-hack.pw

コマンドを実行した場所にレポートのHTMLが出力されます。

詳細な使用方法はこちら
Lighthouse(ライトハウス)ドキュメント

計測できる機能

Performance

First Contentful Paintやインタラクティブになるまでの時間などページを表示するまでのパフォーマンスがわかります。

Accessibility

ボタンの名前や画像のaltタグが不足していると改善点として表示されます。

Best Practices

セキュリティ脆弱性を持つJavascriptの表示やconsoleエラーの有無も教えてくれます。

SEO

ページが検索エンジンの結果のランキングに対して最適化されていることが確認されます。

ProgressiveWebApp

PWAに対応しているか確認することができます。

まとめ

全ページの確認やレポートを作成するときは、シェルスクリプトを作成して実行すると作業効率化ができるのと日々のチェックが簡単になりますね。

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x