⇒【東証プライム企業も多数利用!】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは?
【PR】楽天市場 【PR】じゃらん 【PR】一休 【PR】Qoo10 【PR】Abema
【重要】本記事は2020年12月時点の情報を基に執筆しています。Lighthouse自体は現在もGoogleが提供を続けていますが、利用方法には変化があります。後述の単体のChrome拡張機能版はManifest V2という古い仕様のままであり、Googleは現在Chrome DevToolsに内蔵された機能やPageSpeed Insightsの利用を推奨しています(Chrome for Developers公式ブログ「Performance tooling in 2024 and beyond」より)。また、記事内で触れている「Progressive Web App(PWA)」のチェック項目は、Lighthouseバージョン12(2024年)で廃止され、現在の監査項目には含まれていません。以下の内容は発表当時の情報として参考にしつつ、最新の利用方法は本文中の注記をご確認ください。
Googleをはじめとする検索エンジンで上位表示を狙っていくうえでは、良質なコンテンツであることはもちろん、ページの表示スピードや、ユーザーやGoogleのクローラーがきちんと表示できるかなど、ユーザビリティが高いことも重要です。
今回はGoogleで出しているLighthouseについて解説をします。
1.「Lighthouse(ライトハウス)」とは?
Lighthouse(ライトハウス)は、Googleが提供しているWebアプリやWebページの評価機能を持つツールです。現在ではChrome DevToolsに標準で内蔵されているほか、PageSpeed Insightsやnpmモジュールとしても利用できます。
Lighthouseには「灯台」という意味があり、「パフォーマンス」「アクセシビリティ」などの項目で特定のWebアプリやWebページをチェックでき、結果を見ながら品質改善につなげてもらうためにGoogleが提供しているものです。
2018年、これに「SEO」の項目が追加され、SEOチェックツールとしても使えるようになりました。
2.Lighthouseの利用方法
現在もっとも手軽な方法は、Chromeの開発者ツール(DevTools)を使うことです。ページ上で右クリックして「検証(検証する)」を選択するか、キーボードのF12キーでDevToolsを開き、Lighthouseの機能が統合されたPerformance(パフォーマンス)パネルやLighthouseパネルから監査を実行できます。また、サイトのURLを入力するだけで手軽に診断できるPageSpeed Insights(https://pagespeed.web.dev/)も広く利用されています。
このほか、以前は下記のURLからChromeの拡張機能として追加する方法も一般的でしたが、この拡張機能版は古い仕様(Manifest V2)で作られており、Googleは現在DevToolsやPageSpeed Insightsの利用を推奨しています。利用する際はこの点にご注意ください。
(参考)拡張機能版のChromeウェブストアURL:
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
Lighthouseの拡張機能ページ右上にある【Chromeに追加】のアイコンをクリックします。ダイアログボックスに【Lighthouseを追加しますか?】と表示されますので、【拡張機能を追加】をクリックして追加します。
【「Lighthouse」がChromeに追加されました】と表示されれば、LighthouseのChrome拡張機能の追加完了です。
インストール後はChrome上に表示された灯台アイコンをクリックして使用できます。
3.Lighthouse でサイトをチェックする方法
Lighthouseでは、パフォーマンス、アクセシビリティ、ベストプラクティス、SEOについてのチェックを行うことができます。(なお、後述の通りPWA項目は2024年のLighthouse v12で廃止されており、現在は対象外です)
3-1.パフォーマンス監査
・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はユーザーが予期しないレイアウトのずれに関する指標です。
視覚の面で安定して表示されているかを測定する指標として重要です。
3-2.アクセシビリティ
この項目では、Webページのコンテンツに全てのユーザーが適切にアクセス・閲覧できるかをチェックします。
画面読み上げを行うユーザーにとって適切なページとなっているか、画面のコントラストは閲覧に適切かなどの項目がチェックされます。
3-3.ベストプラクティス
ウェブページのコードが適切に記述されているか、ベストプラクティスをもとに改善を図るための項目です。
ブラウザのエラーコードや、画像のアスペクト比が適切でないなどの「一般的なベストプラクティス」に関するものや、SSL(HTTPS)が使用されていないなどのセキュリティに関する部分など、ベストプラクティスに基づく改善項目が確認できます。
3-4.SEO
この項目は、検索エンジンの順位に関する最適化を図るためのものとなっています。
タイトルタグ、メタディスクリプションがあるか、HTTPステータスコードは問題ないか、ページがクロール可能になっているかなど、SEOに関わる項目がチェックされます。
3-5.(参考)Progressive Web App(2024年以降はLighthouseの監査項目から廃止)
発表当時はPWAに関する項目もLighthouseの監査対象でした。モバイルネットワークでページが十分高速に読み込まれるか、PWAに最適化されているかなどの項目についてチェックされていました。
しかし、ChromeのPWAのインストール可能性基準の変更に伴い、Lighthouseバージョン12(2024年4月)でPWAカテゴリは正式に廃止され、同年5月にはPageSpeed Insightsもこの仕様変更に対応しました。現在のLighthouseでは、PWAは独立した監査カテゴリとしては表示されませんのでご留意ください。
4.SEO対策とはGoogle対策である
インターネットが普及した現代では、誰もが「情報が欲しい」と思ったらまず、欲しい情報に関連するキーワードでネット検索するでしょう。
そして、大抵の人が1ページ目に載った10位までの情報でリサーチを終わらせます。
かつて日本の検索エンジンは、GoogleやYahoo!のほかにもInfoseekやExcite、Goo、MSNなど複数あってシェアを分けていましたが、現在でもGoogleがダントツで1位の独走状態です。
2位のYahoo!もGoogleの検索アルゴリズムに準じているので、日本においては、「SEO対策=Google対策」と考えていて間違いありません。
5.まとめ
GoogleはLighthouseの機能をChrome DevToolsのPerformanceパネルに統合するなど、現在もツールの使いやすさを継続的に改善しています。形を変えながらも、Lighthouseは今後もWebサイトの品質をチェックする中心的な手段であり続けるでしょう。
ただ、ツールを使ううちにツールを使いこなすことが目的化してしまい「最終的に何をしたいのか?」という本当のゴールを見失ってしまっては意味がありません。
Webサイトの目的は「ターゲットユーザーにコンバージョンしてもらうこと」のはずだし、Googleの検索アルゴリズムは、常にユーザビリティの向上のためにアップデートされています。
もし、「結局、SEO対策では何を大事にすればいいの?」と迷ってしまうことがあったら、「ユーザー目線」に立ち戻り、ユーザーにとってより良いWebサイトとなるように改善してみてください。
⇒【東証プライム企業も多数利用!】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは?