seo-cro

Lighthouseの使い方 – GoogleのChrome拡張機能でSEOチェックをする方法①

Lighthouseの使い方 – GoogleのChrome拡張機能でSEOチェックをする方法①

Googleをはじめとする検索エンジンで上位表示を狙っていくうえでは、良質なコンテンツであることはもちろん、ページの表示スピードや、ユーザーやGoogleのクローラーがきちんと表示できるかなど、ユーザビリティが高いことも重要です。
今回は自社のコンテンツのパフォーマンスをチェックしてくれるGoogleのChrome拡張機能「Lighthouse」の使い方についてご紹介していきます。

Lighthouseとは?

Lighthouseとは、Googleが提供しているWebページのパフォーマンスや品質、SEO観点などの改善項目を自動でレポートしてくれるツールです。
Chrome拡張機能としても提供されており、簡単にコンテンツの課題点や改善方法を把握し、SEO内部対策の強化にも役立てることができます。

※参考:Lighthouseについて(英語)
https://web.dev/learn/#lighthouse
002-Lighthouse

LighthouseのChrome拡張機能の追加方法

LighthouseはChromeの拡張機能として簡単に追加でき、すぐに使用することができます。
GoogleChromeを立ち上げ、Chromeウェブストアから追加します。

・ChromeウェブストアのURL
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
003-GoogleWebStore
Lighthouseの拡張機能ページ右上にある【Chromeに追加】のアイコンをクリックします。

004-ChromePlugin
ダイアログボックスに【Lighthouseを追加しますか?】と表示されますので、【拡張機能を追加】をクリックして追加します。

005-InstallCompleted

【「Lighthouse」がChromeに追加されました】と表示されれば、LighthouseのChrome拡張機能の追加完了です。

インストール後はChrome上に表示された灯台アイコンをクリックして使用できます。

Lighthouseでチェックできる項目

Lighthouseでは、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、そしてPWA(プログレッシブウェブアプリ)についてのチェックを行うことができます。
※参照:Lighthouseでチェックできる各項目について
https://web.dev/learn/#lighthouse

パフォーマンス監査

・First Contentful Paint (FCP)
FCPは、最初のテキストまたは画像が表示されるまでの時間です。

・Time to Interactive (TTI)
TTIは、ページが完全にインタラクティブな状態になるまでの時間です。
具体的には、FCPで測定されるコンテンツが表示され、ページ上で表示される要素のイベントハンドラが設定され、50ミリ秒以内にユーザーの反応に対応できる状態と定義されています。

・Speed Index
スピードインデックスは、ページ上のコンテンツが可視化されるまでの速さを表します。

・Total Blocking Time (TBT)
TBTは、あるページでマウスクリック、画面タップ、キーボードなどのユーザーの入力から応答までの待ち時間(ブロックされる時間)の合計を測定します。
FCPとTTIの間の50ミリ秒を超える長いタスクのブロックされる部分の合計です。
(Lighthouseが検出した70ミリ秒のタスク→ブロック部分は70-50=20ミリ秒となります)

・Largest Contentful Paint(LCP)
LCPは、最も大きなテキストや画像の要素が表示されるまでの時間です。
おおよそ、ページの主要コンテンツをユーザーが閲覧できる状況になるまでの時間を表します。

・Cumulative Layout Shift(CLS)
CLSはユーザーが予期しないレイアウトのずれに関する指標です。
視覚の面で安定して表示されているかを測定する指標として重要です。

▼LCP・CLSは、ランキング要素に加わる予定の「Google Core Web Vitals」にも関連し、非常に重要

上記LCP・CLSは、Googleがユーザーエクスペリエンス上重要と考える指標「Core Web Vitals」にも入っています。
Googleは2020年5月28日にCore Web Vitalsを検索のランキング要素として今後取り入れていくとの計画を発表しており、今後ますます現状把握や改善へ向けての取り組みが重要になる項目です。
参照:GoogleによるCore Web Vitalsをランキング要素に加えるとのアナウンス
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

アクセシビリティ

この項目では、Webページのコンテンツに全てのユーザーが適切にアクセス・閲覧できるかをチェックします。

画面読み上げを行うユーザーにとって適切なページとなっているか、画面のコントラストは閲覧に適切かなどの項目がチェックされます。

ベストプラクティス

ウェブページのコードが適切に記述されているか、ベストプラクティスをもとに改善を図るための項目です。

ブラウザのエラーコードや、画像のアスペクト比が適切でないなどの「一般的なベストプラクティス」に関するものや、SSL(HTTPS)が使用されていないなどのセキュリティに関する部分など、ベストプラクティスに基づく改善項目が確認できます。

SEO

この項目は、検索エンジンの順位に関する最適化を図るためのものとなっています。
タイトルタグ、メタディスクリプションがあるか、HTTPステータスコードは問題ないか、ページがクロール可能になっているかなど、SEOに関わる項目がチェックされます。

SEOについては、以下の14項目がチェックできます。

項目 内容
Has a <meta name=”viewport”> tag with width or initial-scale <meta name=”viewport”>タグにwidthまたはinitial-scaleが設定されている
Document has a <title> element ページにタイトル要素が設定されている
Document has a meta description ページにメタディスクリプションが設定されている
Page has successful HTTP status code ページのステータスコードに問題がない
Links have descriptive text リンクには説明的な内容が含まれている
Links are crawlable リンクはクロール可能な状態になっている
Page isn’t blocked from indexing インデックスに際し、ページがブロックされていない
robots.txt is valid robots.txtが有効である
Image elements have [alt] attributes 画像要素に[alt]属性がある
Document has a valid hreflang ページに有効なhreflangが設定されている
Document has a valid rel=canonical ページに有効なrel=canonicalが設定されている
Document uses legible font sizes ページでは読みやすいフォントサイズの文字が使用されています
Document avoids plugins ページではプラグインが使用されていません
Tap targets are sized appropriately タップする領域は適切なサイズです

Progressive Web App

この項目は、プログレッシブウェブアプリ(PWA)に関する項目をチェックします。
モバイルネットワークでページが充分高速に読み込まれるか、PWAに最適化されているかなどの項目についてチェックされます。

おわりに

いかがでしたでしょうか?本記事にてChrome拡張機能「Lighthouse」の概要を説明させていただきましたが、利用事例に関して次記事で紹介させていただきます。

Next >> Lighthouseの使い方 – GoogleのChrome拡張機能でSEOチェックをする方法②

この記事のライター

鈴木 克芳

鈴木 克芳ウェブコンサルティングディビジョン

2014年にクロスフィニティに入社、2019年10月からはハートラスとして業務を担当。
十数年に渡りIT・Webに関わるBtoBビジネスのマーケティング・コミュニケーションに従事。
現在はseoClarityの製品担当として、製品のローカライズや導入サポートを推進。
日本のお客様のエンタープライズプラットフォームの導入・活用を支えている。

おすすめの記事

関連する記事