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

2019.06.07

五十嵐 和希

SEO SOLUTION

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

WRITER

五十嵐 和希

株式会社PLAN-B システム開発本部 PDMチーム プロダクトオーナー

2013年中途採用でPLAN-Bに入社。東日本エリアの営業マネージャーを経て、2017年にビジネス開発ユニットを立ち上げ、オウンドメディア運用と事業開発を行う。その後、2018年よりJuicer事業部へ異動。自社開発DMP「Juicer」の販売戦略を中心としたマーケティング活動に従事。現在はPDMチームにてプロダクトオーナーとして新規事業の立ち上げを行っている。

目次
    1. Lighthouseってなに?
    2. Lighthouseの導入方法
    3. チェック項目5つのそれぞれの説明
      1. 01:Performance
      2. 02:ProgressiveWebApp
      3. 03:Accessibility
      4. 04:Best Practices
      5. 05:SEO
    4. 大手サイトをチェックしてみた
      1. suumo
      2. 食べログ
      3. mery
    5. その他のサイトチェックツールは?
      1. モバイルフレンドリーテスト
      2. 構造化データテストツール
      3. test my site
    6. まとめ:SEOチェックツールとしては今後に期待!

SEOに強いWebサイトは、GoogleやYahoo!といった検索結果の上位に表示させることができます。当然上位に位置するほどユーザーのアクセスが集まるので、各サイトがSEO対策に力を入れています。

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


Lighthouseってなに?

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

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


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

ページの読み込みや、ユーザーの操作によって生じるレスポンスの速さなど、主にサイト内のスピードに関する評価が表示されます。ページの読み込み速度を改善するために必要なCSSやJavaScriptの最適化についての解説もあるので、スコアが低いものは積極的に改善しましょう。

02:ProgressiveWebApp

WebサイトをPWA化するうえで必要なチェックリストを基にスコアが付けられます。

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

03:Accessibility

サイトの訪問者および、検索エンジンのロボットに対して最適な作りになっているかを査定します。テキストや背景の色が見やすいか、またHTMLの構造が正しく設定されているかどが審査の対象として挙げられます。

04:Best Practices

サイトをスクロールする際のパフォーマンスを上げる方法など、モバイル対応したサイトの品質向上に向けたアドバイスや、パフォーマンス低下に繋がる内容を避けるための手法が確認できます。

05:SEO

検索結果のランキングに影響する項目が表示されます。canonicalが正しく設定されているか、またrobots.txtによってページがブロックされていないかなど、基本的なSEOの内容となっています。


大手サイトをチェックしてみた

LighthouseはPCページで使用しても自動的にモバイルページを対象にチェックを行います。(PCページとモバイルページのURLを切り分けている場合はモバイルページのURLが対象になります。)またサイト全体ではなく、ページ毎の評価が確認できます。では実際にどのようなスコアが表示されるのか、検索結果で上位を獲得している大手サイトを例にしてみましょう。(2018年3月11日現在)

suumo

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

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

Performanceのスコアが60と若干低めですが、それ以外の分野では高得点となっています。SEOのチェック項目ではフォントサイズが小さいということ以外は、全ての結果が良好です。Progressive Web Appの点数が高いことから、PWA対応しているサイトであることが分かります。

食べログ

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

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

SEOのスコア以外の評価が若干低いという結果が出ました。読み込み速度を改善するために、PNGやJPEGといった画像ファイルを新しい基準(JPEG 2000やJPEG XR)にすることが推奨されています。その他画像に関する内容で、ページの表示速度を遅くしてしまっているという結果が出ました。

mery

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

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

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


その他のサイトチェックツールは?

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

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

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

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

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

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

test my site

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


まとめ:SEOチェックツールとしては今後に期待!

今回Lighthouseを利用してチェックしたいずれのサイトもSEOの値が90と高く、修正の必要がある項目として挙がっているのは全て文字サイズに関する内容でした。SEOの項目は最近導入されたばかりということもあり、基礎的なものしかなくまだまだチェック対象としては少ないですが、今後更に詳細な内容が追加されていくとのことです。

現状はSEOの改善目的というよりも、ユーザーにより快適な体験を提供するためのチェックツールとして利用するのが良いでしょう。

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