Lighthouseの使い方 SEO・Webアクセシビリティのスコア測定方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Lighthouseの使い方とSEO・Webアクセシビリティのスコア測定方法について解説していきます。

SEOとは？

SEOとは「Search Engine Optimization」(サーチ・エンジン・オプティマイゼーション)の略で、

日本語に直すと「検索エンジン最適化」という意味になります。

SEOは検索結果での上位表示や、認知度の向上、ホームページへの集客効率の向上、ブランディング等の目的で実施されます。

Webアクセシビリティとは？

「Webアクセシビリティ」とは「高齢者や障害者など心身の機能に制約のある人でも、

年齢的・身体的条件に関わらず、Webで提供されている情報にアクセスし利用できること」を意味します。

Webは、高齢者や障害者にとっても、重要な情報源であり、

情報格差を生まないためにも「Webアクセシビリティ」を確保することが求められます。

どうやってSEO・Webアクセシビリティのスコア測定をするのか？

Google Chrome の DevToolsを使って、SEO・Webアクセシビリティのスコア測定をすることができます。

Webサイト全体のスコア測定をしたいときは、次のように「モード: ナビゲーション」にするのがおすすめです。

また、1つのページだけ測定したい場合は「モード: スナップショット」で実施することをおすすめします。

Lighthouseの基本的な使い方と結果の見方

右上にある「ページ読み込みを分析」ボタンを押すと、Score測定が始まります。

測定結果は、次のように選択した項目について一覧表示がなされており、

各測定項目の測定結果と改善のヒントがその後に続きます。

SEOのScore測定結果

SEOのScore測定結果画面は次のようになっています。

改善のヒントを参考に改善していきましょう。

WebアクセシビリティのScore測定結果

WebアクセシビリティのScore測定結果画面は次のようになっています。

改善のヒントを参考に改善していきましょう。

Twitterやってます！Follow Me！

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

最近の投稿

2024年1月17日【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 2024年1月17日JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) 2023年12月30日PythonでCSVをJSONに変換する方法 2023年12月30日PythonでCSV・Dataframeを指定の行数まで切り取る方法 2023年12月28日JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 2023年12月28日VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法