こんにちはフロントエンドエンジニアのまさにょんです!
今回は、Lighthouseの使い方とSEO・Webアクセシビリティのスコア測定方法について解説していきます。
目次
SEOとは?
SEOとは「Search Engine Optimization」(サーチ・エンジン・オプティマイゼーション)の略で、
日本語に直すと「検索エンジン最適化」という意味になります。
SEOは検索結果での上位表示や、認知度の向上、ホームページへの集客効率の向上、ブランディング等の目的で実施されます。
Webアクセシビリティとは?
「Webアクセシビリティ」とは「高齢者や障害者など心身の機能に制約のある人でも、
年齢的・身体的条件に関わらず、Webで提供されている情報にアクセスし利用できること」を意味します。
Webは、高齢者や障害者にとっても、重要な情報源であり、
情報格差を生まないためにも「Webアクセシビリティ」を確保することが求められます。
どうやってSEO・Webアクセシビリティのスコア測定をするのか?
Google Chrome の DevToolsを使って、SEO・Webアクセシビリティのスコア測定をすることができます。
Webサイト全体のスコア測定をしたいときは、次のように「モード: ナビゲーション」にするのがおすすめです。
![](https://masanyon.com/wp-content/uploads/2022/11/LightHouse-1-1024x569.jpg)
また、1つのページだけ測定したい場合は「モード: スナップショット」で実施することをおすすめします。
Lighthouseの基本的な使い方と結果の見方
右上にある「ページ読み込みを分析」ボタンを押すと、Score測定が始まります。
測定結果は、次のように選択した項目について一覧表示がなされており、
各測定項目の測定結果と改善のヒントがその後に続きます。
![](https://masanyon.com/wp-content/uploads/2022/11/LightHouse-2-1024x573.jpg)
SEOのScore測定結果
SEOのScore測定結果画面は次のようになっています。
改善のヒントを参考に改善していきましょう。
![](https://masanyon.com/wp-content/uploads/2022/11/LightHouse-SEO-1024x487.png)
WebアクセシビリティのScore測定結果
WebアクセシビリティのScore測定結果画面は次のようになっています。
改善のヒントを参考に改善していきましょう。
![](https://masanyon.com/wp-content/uploads/2022/11/LightHouse-Web-1024x677.jpg)
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
![](https://www15.a8.net/0.gif?a8mat=3NNG1X+D8W8C2+3GWO+6O1Z5)
『GEEK JOBキャンプ』スピード転職コース(無料)
![](https://www13.a8.net/0.gif?a8mat=3NNG1X+DAOJ5E+40C4+5ZMCH)
【IT道場】入校時0円! 就職目的プログラミングスクール
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+DML78Y+53W0+609HT)
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
![](https://www14.a8.net/0.gif?a8mat=3NNGTV+ACPDGY+4VYG+60H7L)
『techgym』 (Python特化・無料)
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+C2MGDU+4PGA+BY641)