🍋

Lighthouseってなぁになぁに？

2024/07/03に公開

SEO

Lighthouseとは

Googleが無料で提供しているWebサイトを分析・診断するツールです
以下の4つの項目でWebサイトを評価できます

パフォーマンス(Performance)
ユーザー補助(Accessibility)
おすすめの方法(Best Practices)
SEO
この4つの項目でそれぞれ課題や改善方法を教えてくれるので、Webサイトの質を上げることができます

Lighthouseの使い方

導入

Chromeウェブストアから拡張機能のLighthouseを追加
拡張機能を入れなくても検証ツールからLighthouseを利用することもできます

今回は検証ツールでLighthouseを利用します

分析

分析したいデバイスのサイズやどの項目を分析したいかを指定できます
分析は右上の「ページ読み込みを分析」から分析ができます
（今回はZennのページで分析していきます）

分析にはやや時間がかかりますが、分析が終わると結果が出ます

分析するときは拡張機能などが邪魔しないようシークレットモードで分析するのが良さそう💭

パフォーマンス(Performance)

パフォーマンスを見てみると5つの指標が記載されています

First Contentful Paint：ページが表示され始めたあたりの時間
Largest Contentful Paint：テキストや画像などのページ内の最大コンテンツが表示されるまでの時間
Total Blocking Time：ページ表示開始からユーザーの操作に応答できるまでの読み込み時間
Cumulative Layout Shift：ページを表示している間にレイアウトがずれたりしていないかなどの指標
Speed Index：ページの読み込み速度を示す指標

ユーザー補助(Accessibility)

これはいわゆるアクセシビリティというもので、Webサイトへアクセスする全てのユーザー(障がいを抱える方や検索エンジンのクローラ)が同等に使用できる色使い・コントラストやスクリーンリーダーを考慮できているかを表す指標

SEO

SEO=「Search Engine Optimization」の略で、日本語で「検索エンジン最適化」という意味です
Webサイトの内容を、検索エンジンが理解しやすいように最適化して検索結果に表示させることでサイト内の伝えたい情報をユーザーにきちんと届けられるようになる
また、情報を適切に詰め込むことでユーザーの検索結果に表示されやすくなる
評価する内容としては、

HTTPステータスコードが正常か
meta情報があるか
robots.txtが有効であるか

などです

まとめ

Lighthouseを活用して小さなことでもWebサイトを改善させることはとても重要なことに思います
少しずつ改善されていくLighthouseのスコアを見ていると気持ちがいいですねっ
ぜひLighthouse活用してWebサイトに改善できるところがないか探してみてください👀

Lighthouseとは

Lighthouseの使い方

導入

分析

パフォーマンス(Performance)

ユーザー補助(Accessibility)

おすすめの方法(Best Practices)

SEO

まとめ

Discussion