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に対応しているか確認することができます。
まとめ
全ページの確認やレポートを作成するときは、シェルスクリプトを作成して実行すると作業効率化ができるのと日々のチェックが簡単になりますね。