PINTO!株式会社PLAN-Bの情報発信メディア

2020.10.20

五十嵐 和希

SEO SOLUTION

Lighthouseとは?SEOに便利なチェックツールを紹介します

WRITER

五十嵐 和希

株式会社PLAN-B システム開発本部 PDMチーム

大手広告主企業での広告宣伝部、総合広告代理店でのプロモーション部を経験し、PLAN-Bへ入社。
企業のオウンドメディア立ち上げ支援や自社開発DMP「Juicer」のマーケティング責任者を担う。
現在は自社開発プロダクト「SEARCHWRITE」のプロダクトオーナーとしてPMFに向けた活動を担当している。Twitterを見る

目次
    1. Lighthouse(ライトハウス)とは?
    2. Lighthouseにおけるサイト評価基準
    3. Lighthouseの導入方法
    4. チェック項目5つのそれぞれの説明
      1. 01:Performance
      2. 02:ProgressiveWebApp
      3. 03:Accessibility
      4. 04:Best Practices
      5. 05:SEO
    5. Lighthouseの活用事例【大手サイト編】
      1. suumo
      2. 食べログ
      3. MERY
    6. Lighthouse以外におすすめのサイトチェックツール
      1. モバイルフレンドリーテスト
      2. 構造化データテストツール
      3. test my site
    7. まとめ:LighthouseはSEO対策に効果的なチェックツール!

GoogleやYahoo!で自社のWEBサイトを上位表示させるために行われるSEO対策。想定読者が求めるコンテンツの作成や、SNSを活用しリンクを取得するなど、様々なSEO対策があります。

ただしSEOの改善を加える前に、現状サイトがどのような評価を受けているのかを知る必要があります。今回はサイトの評価を確認することができるLighthouse(ライトハウス)についてご紹介します。


Lighthouse(ライトハウス)とは?

Lighthouse(ライトハウス)とは、Webアプリを監査するためのツールです。特にPWA(プログレッシブウェブアプリ)を中心としたサイトの評価を簡単に確認することができます。

LighthouseはもともとGoogleが公式で運営していたツールであり、GoogleChromeの拡張機能を使って使用します。

Lighthouseの主な項目は、PWAに必要な品質項目を満たしているかどうかや、ページスピードに関する内容です。いずれもサイトの改善にも役に立つ内容ですが、新たにSEOの項目が追加されたため、検索順位を上げたい場合にはぜひ活用したいツールです。


Lighthouseにおけるサイト評価基準

Lighthouseは以下のような評価基準に沿って、サイトの評価やパフォーマンスを判断しています。

今回紹介するのはあくまで一例であり、実際はより多くの指標からサイト分析は行われています。

  • 画像要素はaltを指定しているか?
  • 未使用のCSSやJavaScriptは削除されているか?
  • メタタグでtitle(タイトル)が記載されているか?
  • メタタグでdescription(ディスクリプション)が記載されているか?
  • リンクへの誘導文字は具体的に記載されているか?(URLがそのまま記載されている、あるいは「詳しくはこちら」のようなあいまいなものではないか)
  • hreflang(言語指定)が適切に指定されているか?

Lighthouseの導入方法

LighthouseはGoogle Chromeの拡張機能をインストールすることで使用が可能です。Google Chromeを起動して、下記URLからLighthouseの拡張機能が追加できます。

Lighthouse

インストール完了後、ブラウザの右上メニューに「!」マークのアイコンが表示されるので、監査対象のWebページを開いた状態でアイコンをクリックします。すると「Generate Report」のボタンが表示されるので、クリックするとサイトの評価が開始されます。暫くするとスコアレポートが表示されます。(optionボタンから5つのチェック項目のうち、どの項目のレポートを生成するか選べます。)

以上が拡張機能での使用方法ですが、同様の機能をGoogle Chromeのデベロッパーツールから利用することができます。デベロッパーツールは右クリックで表示されるメニュー内の検証を選ぶと表示されます。その中から「Audits」を選び「Perform an audit」、「Run Audit」の順番で選択をすると、サイトの評価が開始されます。


チェック項目5つのそれぞれの説明

Lighthouseで確認可能なチェック項目は、以下の5つです。

チェック項目

01:Performance

Lighthouseで確認可能なチェック項目の一つ目は、ページの読み込みや、ユーザーの操作によって生じるレスポンスの速さなど、主にサイト内のスピードに関する評価が表示されるParfomaceがあります。

Performanceには、ページの読み込み速度を改善するために必要なCSSやJavaScriptの最適化についての解説もあるので、スコアが低いものは積極的に改善しましょう。

02:ProgressiveWebApp

Lighthouseで確認可能なチェック項目の二つ目は、ProgressiveWebAppと呼ばれる、WebサイトをPWA化するうえで必要なチェックリストを基にスコアが付けられるチェック項目があります。

ProgressiveWebAppには、Service Workerの登録有無に加え、HTTPS化されているかどうかや、3G回線での読み込みスピードに関するチェック等が含まれています。

03:Accessibility

LighthouseにあるAccesibilityという項目は、サイトの訪問者および、検索エンジンのロボットに対して最適な作りになっているかを査定します。

Aceesibilityの審査対象は、テキストや背景の色が見やすいか、またHTMLの構造が正しく設定されているかなどが挙げられます。

04:Best Practices

Lighthouseで確認可能なチェック項目の四つ目は、BestPracticesという項目があります。

このBestPracticesでは、サイトをスクロールする際のパフォーマンスを上げる方法を把握できます。

具体的にはモバイル対応したサイトの品質向上に向けたアドバイスや、パフォーマンス低下に繋がる内容を避けるための手法が確認可能です。

05:SEO

SEOに関してもLighthouseで確認可能なチェック項目です。Lighthouseを活用することで、検索結果のランキングに影響する項目が表示されます。

他にもcanonicalが正しく設定されているか、またrobots.txtによってページがブロックされていないかなど、基本的なSEOの内容が確認できます。


Lighthouseの活用事例【大手サイト編】

では具体的にLighthouseを活用し、大手サイトを分析してみましょう。ここでは主要な大手サイト3社を例に取り上げます。

LighthouseはPCページで使用しても自動的にモバイルページを対象にチェックを行います。(PCページとモバイルページのURLを切り分けている場合はモバイルページのURLが対象になります。)またサイト全体ではなく、ページ毎の評価が確認できます。(Lighthouseの指標は2018年3月11日現在のデータです)

suumo

チェック項目スコア
Performance60
Progressive Web App82
Accessibility84
Best Practices75
SEO 90

対象URL:https://smp.suumo.jp/

(株)リクルートが運営する、日本最大級の不動産情報サイトである「SUUMO」。SUUMOをLighthouseで調べてみると、Performanceのスコアが60と若干低めですが、それ以外の分野では高得点となっています。

加えてSEOチェック項目ではフォントサイズが小さいということ以外は、全ての結果が良好です。Progressive Web Appの点数が高いことから、PWA対応しているサイトであることが分かります。

食べログ

チェック項目スコア
Performance63
Progressive Web App55
Accessibility60
Best Practices63
SEO 90

対象URL:https://s.tabelog.com/

S「食べログ」はカカクコムグループが運営する、日本最大級のグルメサイトです。

そんな食べログのligthhouseのスコアを分析すると、SEOのスコア以外の評価が若干低いという結果が出ました。読み込み速度を改善するために、PNGやJPEGといった画像ファイルを新しい基準(JPEG 2000やJPEG XR)にすることが推奨されています。

その他画像に関する内容で、ページの表示速度を遅くしてしまっているという結果が出ました。

MERY

チェック項目スコア
Performance38
Progressive Web App45
Accessibility64
Best Practices56
SEO 90

対象URL:https://mery.jp/

MERYはかわいくなりたい女の子向けのメディア発信を始めたとした、インターネットサービスです。

MERYはlighthouseの分析において5つの項目のうち、Performanceのスコアが最も低いという結果になりました。上記の2サイトと比べ、画像の数が多いので読み込みに大きな負担がかかってしまっているようです。画像サイズが大きいものは圧縮して軽くする必要があります。


Lighthouse以外におすすめのサイトチェックツール

Lighthouseの他にも、SEO対策を行う上で様々なチェックツールが存在します。

その中でもLighthouseが使用を推奨している、および機能が似ているチェックツールをご紹介します。

モバイルフレンドリーテスト

対象となるサイトのURLを入力するだけで、サイトがモバイル対応されているかどうかを確認することができるツールです。クローラーがページを読み込む際に妨げとなっているスクリプトや画像など、改善が必要な個所も分かります。

モバイルフレンドリーテスト:https://search.google.com/test/mobile-friendly

構造化データテストツール

構造化データが正しく設定されているかどうかを確認することが可能です。検索結果のランキングに直接影響を与えることはありませんが、LighthouseのSEO項目にその他のチェックツールとして紹介されているため、今後より重要度が増すと考えられます。PCページとモバイルページを別々に設定している場合は、モバイルページにも同様に構造化データを使用しましょう。

test my site

モバイルサイトの読み込み速度をチェックするツールです。他サイトと比較してくれるため、自分のサイトが業界的に速いのかどうかが分かり便利です。またおおよその訪問者の離脱率が表示されるので、どれだけ機会損失を生んでしまっているか確認しましょう。


まとめ:LighthouseはSEO対策に効果的なチェックツール!

ここまでサイトの評価を簡単に把握できるLigthhouseの使い方や特徴などをお伝えしました。

LighthouseはSEOにおいても、様々な項目をチェックできるため、SEO対策を行う上で非常に役立つツールです。

SEO改善目的に加え、ユーザーにより快適な体験を提供するためのチェックツールとしても、ぜひLighthouseを十分に活用してみてください。

SEOをもっと学びたい方はこちらもチェック:SEO対策の全てを紹介!

SEARCH WRITE