2020.08.28
Lighthouseでウェブサイトのパフォーマンスを向上してサイト評価を上げる
Lighthouseはウェブサイト（やウェブアプリ）のパフォーマンスを計測してくれるchromeの「拡張機能」です。アクセシビリティへの対応や表示速度の高速化など、サイト評価を上げるための改善点を分析できます。
SEOにも重要！ウェブサイトを解析して品質向上
ウェブサイトの品質を向上すれば、サイト評価も上がります。もちろんそれだけで検索順位が上がるわけではないですが、内部SEOの対策として、改善点を具体的に指摘してくれるので修正もしやすいです。Googleが提供するツールなので、SEO的にもGoogleの指標に沿って改善していくことは重要かと思います。
Lighthouseを使ってみる
chromeウェブストアからインストール
- chrome ウェブストアの「Lighthouse」へ
- 右上にある「chromeに追加」ボタンをクリック
- 確認のダイアログが出るので「拡張機能を追加」をクリック
Lighthouseの使用方法
検証したいページを開いて、右上のLighthouseアイコン（拡張機能）から「Generate report」をクリックして、しばらく待つと検証結果が表示されます。
検証結果
「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」「プロブレッシブ ウェブアプリ」の5つの項目で解析して改善点を指摘してくれます。検証結果は、英語での表記になりますが、chromeのウェブ翻訳でも十分内容はわかるかと思います。
パフォーマンス
サイトの表示速度を計測して、時間がかかっているところを診断してくれます。無駄なサイズの画像やなど具体的な指標を示してくれるので改善に向けて作業しやすいです。
アクセシビリティ
わかりやすく、使い勝手の良いサイトなのかを診断してくれます。HTMLの構造的な問題や識字しやすいかなどのデザイン的な改善点について指摘してくれます。
ベストプラクティス
セキュリティやパフォーマンス低下の原因になる要素がないかを診断してくれます。
SEO
内部SEO対策に対しての問題点を指摘してくれます。
プログレッシブ ウェブアプリ
プログレッシブウェブアプリ（PWA）とは、アプリのように動かせるモバイル向けのウェブサイトのことです。PWAを診断し、改善点を指摘してくれます。
まとめ
Lighthouseはウェブの開発してる人や運用してる人にとってとても便利なツールです。どこがダメなのか、具体的に指摘してくれるので修正もすごく楽ちんです。
個人的には、各項目のスコア100を目指してひとつひとつ改善点を解消していくのも達成感があります。
