seo-cro

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

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

事例:Lighthouseを使ったチェックの流れ

ここからは、サンプルページを例にとり、Lighthouseを使ったチェックの流れについて見ていきます。
006-GenerateReport
まず、ChromeのツールバーからLighthouseの灯台アイコンをクリックします。
【Generate report】(レポートを生成する)をクリックすると、チェックが行われ、自動的にページが生成されます。

サマリーについて

LighthouseのChrome拡張機能によるチェックが完了すると、レポートが表示されます。レポートの最上部には、各項目のスコアのサマリーが表示されます。
007-Summary

サンプルページの例では、各項目のスコアは以下のようになっています。

・パフォーマンス:50点
・アクセシビリティ:86点
・ベストプラクティス:77点
・SEO:100点
・プログレッシブウェブアプリ:(該当なし)

スコアは0-49点が赤、50-89点がオレンジ、90-100点が緑と色分けされて表示されます。

それでは、各項目を見ていきましょう。

パフォーマンスについて

008-Performance

・スコア表示について
パフォーマンスに関する6つの指標について、スコアが表示されています。
それぞれの指標について【GOOD】(良好)が緑色、【NEEDS IMPROVEMENT】(要改善)がオレンジ色、【POOR】(低スコア)が赤色と色分けされて示されており、改善ポイントを把握しやすくなっています。

サンプルページの例ではFCPが1.7s、CLSが0.007で、【GOOD】(良好)と評価されました。CLSはGoogleのCore Web Vitalsの指標となっており、重要なものの1つです。
次いで、Speed Indexは要改善の3.7sでした。
そのほか、LCP・TII・TBTが【POOR】低スコアと評価されており、こちらも改善が必要となっていることが分かります。

・改善点の確認
各項目の改善点については、【Opportunities】(改善の機会)や【Diagnostics】(診断)の項目で確認することができます。
009-Performance-2

この例では、使用されていないJavaScriptを削除すること、次世代形式の画像フォーマットの使用などで読み込み時間を改善できる余地がある点が指摘されています。これらの内容も加味した改善策を検討することで、より良いページ作りへとつなげていくことができます。

アクセシビリティについて

010-Accessibility
011-Accessibility-2

今回のサンプルページでは、改善点として、背景色と文字表示色(前景色)のコントラストの差が十分でない可能性などについて指摘されています。
該当するページ箇所をチェックして、改善を図ることで、読みやすさなどを向上し、ページの改善を図ることが可能です。

また、改善点だけでなく、合格した項目についても【Passed Audits】の項目から確認できます。

ベストプラクティスについて

012-BestPractices
サンプルページの例では、Generalの項目に、ブラウザエラーが記録されていることが表示されています。
今回のケースでは、リソースが404エラーとなっている点などが示されており、該当項目について対処を行います。

SEOについて

013-SEO

このページではSEOに関するタイトルタグやメタディスクリプションなどの項目は合格となっており、100点【GOOD】(良好)となっています。

構造化データなどは別途確認が必要となっており、チェックツールで確認を行います。

PWAについて

014-PWA

この項目では、プログレッシブウェブアプリとして対応できているかをチェックします。
PWAとしてページを構築している場合は、この診断項目を参照して最適化を検討します。

Lighthouseの活用と、より多くのページのモニタリングについて

このように、Googleが提供するLighthouseのChrome拡張機能を使うことで、ブラウザから簡単にSEO面の課題やパフォーマンスのチェックを行うことが可能です。
ぜひ今回ご紹介した方法を自サイトのページのパフォーマンスチェックにお役立ていただければ幸いです。

その中でも、特にLighthouseでも測定可能なLCP (Largest Contentful Paint)やCLS(Cumulative Layout Shift)などの指標は、今後の検索順位評価項目として重要とされるGoogle Core Web Vitalsに含まれており、数値のチェックやモニタリングが欠かせません。

LighthouseのChrome拡張機能を使うことで個々のページのチェックは可能です。
一方で、多数のページをチェックしたり、時系列でスコアの推移をモニタリングする際には、手動での測定・集計が必要で、やや煩雑な面があります。

弊社が提供している総合SEOツール「seoClarity」では、モニタリングを行いたいページを設定し、FCPやCLSを月次で記録する機能を提供しており、こうした多数のページのチェックやスコアの推移を時系列で確認する際に役立ちます。そのほかにも、SEOに関する多くの機能を有しています。

    ▼seoClarityについてはこちらからご覧ください。

ご相談やお問い合わせはお気軽にご連絡ください

この記事のライター

鈴木 克芳

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

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

おすすめの記事

関連する記事