お役立ちコラム

あなたのサイトの品質向上を助ける、注目のGoogle提供ツール「Lighthouse」

Lighthouse

 

2018年2月16日のGoogleウェブマスター向け公式ブログ で Googleは自社のブラウザ「Chrome」に新しく「Lighthouse」という拡張機能を追加したと発表がありました。

この追加された拡張機能は、「サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ(PWA)、SEOの対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示する」と発表されています。皆さんが、WEBサイトの運営で「暗礁に乗り上げない」ように「Lighthouse(灯台)」と名を付けたそうです。

 

さて、どんなツールなのか、早速、確認してみたので、ご紹介しますね。

 

まず、Lighthouseをインストールしてみましょう

Lighthouseはブラウザ「Chrome」を使用していればChromeウェブストアにアクセスして簡単にインストールできます。(ちなみにデベロッパーツールを開き、「Audits」タブを選択しても Lighthouse は起動できます)

 

  1. ChromeウェブストアLighthouse にアクセス
  2. 「+CHROMEに追加」をクリック。
  3. 「Lighthouse」を追加しますか? で[拡張機能を追加]をクリック

 

Lighthouse2

 

Lighthouse3

 

これで、インストールは完了。インストールされると拡張機能バーの Lighthouse アイコンが表示されます。

 

WEB活

 

Lighthouse4

 

では、実際にサイトを解析してみましょう

拡張機能バーの Lighthouse アイコンをクリックして表示さるナビゲーションウインドウで[Generate report]をクリックします。

 

Lighthouse5

 

すると、Lighthouseが起動して、表示されているWEBサイトの解析を実行してくれます。解析には少し時間がかかりますので、結果が表示されるまで、しばらく待ってください。

 

Lighthouse6

 

ブラウザを見ていると、モバイル時の画面などが表示され、様々な解析を行っているのが、なんとなく分かります。

 

解析結果は、こんなレポートが表示されます

全て英文なのですが、Google翻訳機能(ブラウザで右クリックして[日本語に翻訳])を使えば、すべて日本語に翻訳してくれます。

パフォーマンス、プログレッシブ ウェブアプリ(PWA)、アクセシビリティ、ベストプラティクス、SEOなどの対策状況がスコアリングされているのが分かりますね。

スコアが低いとオレンジ表示、スコアが高いとグリーンに表示されます。スコアがオレンジの項目について改善が必要というわけですね。

 

解析結果

 

日本語に翻訳表示すると、以下のようになり、分かりやすくなります。

では、実際になにが診断され表示されているのか、見てみましょう。ちなみに外部のブログサービスやCMSを使用しているケースでは、スコアが悪くても改善できない項目も、ちらほら存在しますが、改善できる部分も多く指摘されますので、頑張って取り組んでみると良いでしょう。

 

パフォーマンス

 

パフォーマンス

サイトの表示速度を計測し、どの部分で時間がかかっているのかを診断し表示してくれます。Lighthouseの素晴らしいところは、併せて改善の方法についてもナビゲーションしてくれるところです。それぞれに項目をクリックすると展開され、詳細を見ることが出来ます。

 

 

プログレッシブ ウェブアプリ(PWA)

PWAとは、簡単にいうと「アプリのようなウェブサイト」という感じで、アイコン、スプラッシュスクリーン、オフラインキャッシュ、プッシュ通知等のアプリのような機能をWEBサイトで実現するというウェブとアプリの両方の利点を兼ね備えたGoogleが提供している技術(アプリ)です。Lighthouse はPWAで作成されたサイトの診断し、改善点などをアドバイスしてくれます。

アクセシビリティ

サイトの閲覧者およびGoogleのクローラーにとって分かりやすく操作性が良いかを診断してくれるものです。HTMLタグなどのサイトの構造的なことや、デザイン的に問題が無いかなどを診断し、問題点を指摘してくれます。これも1つ1つ、改善していくと良いですね。

 

ベストプラティクス

 

ベストプラティクス

ベストプラクティスは、HTTPS にしているかとかアプリケーションキャッシュや Web SQL DB を使っていないかなど、現代のブラウザのセキュリティやパフォーマンスを低下させる要素を診断してくれます。指摘された項目を改善すれば良いというわけです。

SEO

これは、その名の通り、SEO対策に関する診断ですね。

このサイト診断では、唯一、グリーン表示のスコアですが、指摘が1件あります。ページ全体の75%以上をフォントサイズ16ptに改善するようにという指摘。Googleがモバイル閲覧をポイントにしているのが分かりますね。

 

改善したら、どんな効果が期待できるのだろう

基本的にGoogleが求める「良い作りのサイト」の条件に、あなたのサイトが適合しているかを診断するツールです。あくまでも「良い作りのサイト」ということで、コンテンツの専門性や独自性、コンバージョンに繋がる導線の有効性などを診断するものではありません。

ですから、このツールの指摘事項を改善したからと言って、魅力的なコンテンツができるわけでも、コンバージョンが飛躍的に上がるわけでもありません。

ですが、Googleがこのような観点から、あなたのサイトを評価しているという意味では、それを知って、改善できる機会を手にできるわけですから、できる限りの対応を考えられると良いでしょう。結果として、SEOで優位になる可能性が感じられます。

あなたの会社のサイトも、是非、診断してみてください。

執筆者

川端俊之川端 俊之

FIRSTITPRO 代表
http://www.firstitpro.jp
28歳でソフトウェア会社を創業し経営者となり12年の間、食品物流会社、アートフラワーショップ出店などの経営実績を積み重ねる。中小企業のITコンサ ルティング経験は10年を超え、数々の企業のIT経営実現のアドバイス・インターネット活用したビジネス・業務のIT化など様々なコンサルティング実績を 持つ。 「日本の根底を支える50人以下の企業へ最良の経営とITを届ける」をポリシーに経済産業省推進資格ITコーディネータ資格認定者組織である FIRSTITPROを組織し現在に至る。
2008年ITコーディネータ(認定番号:0081722007C)

お役立ちコラムの
トップへ

ページの先頭へ