Googleが開発しているLighthouseというツールをご存知でしょうか。Googleが提供している、しかも非常に簡単にSEOやサイトパフォーマンスをチェックできるということで、最近注目を集め始めています。この記事を読めば、Lighthouseの使い方、Lighthouseから得られた結果をウェブサイトの改善につなげる方法が分かります。
Lighthouseとは？
Lighthouseとは、Googleが開発・提供をしている、ウェブサイトのパフォーマンスやアクセシビリティ、適切なSEO対策がされているのか？ といった要素をチェックすることができるツールです。
Lighthouseでは何ができる？
それでは、具体的にLighthouseでは何ができるのでしょうか。
簡単に言えば、ウェブサイトがユーザーにとって快適な状態（例えば、ページの読み込みスピードや、モバイル端末で使ったときのユーザービリティ等）にあるか、SEOの基本がしっかりとできているのかをひと目で確かめることができるのです。
Lighthouseのインストール方法
Lighthouseのインストール方法は非常に簡単です。LighthouseはGoogle Chromeの拡張機能として提供されているため、Windows、Macを問わず、Google ChromeがブラウザとしてインストールされているPCであれば使用することができます。
そのため、必要な作業としては、下記URLにアクセスし、ChromeにLighthouseを追加するだけです。
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
上記URL右上の「Chromeに追加」ボタンをクリック。
「Lighthouse」を追加しますか？ というポップアップが出るため、「拡張機能を追加」ボタンをクリック。
クリックすると上記のように拡張機能がChromeに追加されます。
以上でLighthouseのインストールは完了です。普段からChromeをブラウザとして使っている方であれば、1分程度で完了するくらいの簡易さです。
Lighthouseの使い方
それでは続いてLighthouseの実際の使い方をご説明します。
LighthouseをChromeにインストールすると、ブラウザの右上にこのような灯台のマークが表示されます。
この灯台マークをクリックすると、上記のようなポップアップが表示されるため、続いて左下の「Options」をクリック。
すると、チェック項目を選択することができるため、特にこだわりがなければすべての項目にチェックを入れ、「OK」をクリックします。クリックすると、元の画面に戻るため、「Generate report」をクリックしましょう。
すると、チェック作業がスタートし、チェックが完了するとブラウザの別ウィンドウが開かれ、チェック結果（Lighthouse Report）が表示されます。
※ 上記はサンプルとして「https://www.yahoo.co.jp/」をチェックした結果になります。
以上がLighthouseの実際の使い方になります。
Lighthouseでチェックできる項目と改善方法
続いて、LighthouseでパフォーマンスとSEOについてチェックできる項目と、それらの具体的な改善方法についてご紹介します。
※ なお、Lighthouseは日々アップデートを繰り返しているため、下記は2019/01/25時点での項目となります。
<パフォーマンス>
まずはパフォーマンスの部から見ていきます。
◯Metrics（指標）
- ・First Contentful Paint
- こちらは、ページが読み込まれたときに、最初のテキストあるいは画像が読み込まれるまでの時間という指標になります。
- ・First Meaningful Paint
- こちらは、ユーザーがページの主要コンテンツが表示された、と認識するタイミングまでの時間という指標になります。
- ・Speed Index
- こちらは、ページのコンテンツがユーザーの目に見える状態になるまでの時間という指標になります。
- ・First CPU Idle
- こちらは、ページの読み込みが終わり、CPUが待機状態になるまでの時間という指標になります。
- ・Estimated Input Latency
- こちらは、レイテンシの値、いわゆるユーザーの入力に対する反応の速さという指標です。ユーザーの入力から反応までの時間が短ければ短いほど評価は高くなります。
◯Opportunities（改善方法の提案）
続いて、ではどうすれば上記の指標が改善されパフォーマンスが上がるのかという課題に対して、Lighthouseでは具体的な改善方法まで提案してくれます。
- 1 Defer offscreen images
- ウェブサイトがブラウザに表示されたときに、ファーストビューで表示される画像以外は、遅延ロードするようにしましょうという提案になります。遅延ロードを使うことで、最初の読み込みにかかる時間が大幅に短縮され、パフォーマンスが改善します。
- 2 Serve images in next-gen formats
- 当然ながら、大きな画像ファイルの読み込みを要求されるウェブページは表示速度が余分にかかります。そのため、JPEG2000、JPEGXR、WebPといった、画像の次世代圧縮フォーマットを使用しましょうという提案です。
1枚の画像のファイルを小さくした程度ではそこまでパフォーマンスには大きな差が生まれませんが、ウェブサイトで使っている画像が全体的に小さくなれば、パフォーマンスももちろん向上します。
- 3 Preconnect to required origins
- こちらは、比較的新しい技術ですが、サイトスピードを改善するために、「ユーザーが特定のリンクをクリックする前から、バックグラウンドでリンク先の表示に必要なリソースを先読みする」という事前読み込みを使ってはいかがでしょうか？ という提案になります。
- 4 Eliminate render-blocking resources
- こちらは、ウェブサイトのレンダリングをブロックするようなJavaScriptなどのリソースを削除しましょうという提案です。JavaScriptとは、ウェブブラウザ上で動作するプログラミング言語のこと。レンダリングとは、プログラミング言語から実際の画像、映像、テキスト、音声などを生成することを指します。
- 5 Defer unused CSS
- 読み込んだページで使っていないCSS（大きなCSSライブラリ等）を読み込まない、というものです。基本ですが、パフォーマンス改善には非常に効果があります。
◯Passed audits（合格した審査）
今回はYahoo JAPAN (https://www.yahoo.co.jp/)をサンプルとしてチェックを行っていますが、チェックを通過した項目には下記のようなものもあります。
- 1 Properly size images
- こちらは適切なサイズの画像を使う、というものです。PC用とスマホ用で、それぞれ最適なサイズの画像が読み込まれるように、出し分けるというものです。
- 2 Minify CSS
- こちらは、CSSのサイズを小さくしているかどうか、という項目です。CSSとは、ウェブページのスタイル、装飾を指定するための言語です。
- 3 Minify JavaScript
- 2と同様に、JavaScriptのサイズを小さくしているかどうか、という項目です。JavaScriptとは、ウェブブラウザ上で動作するプログラミング言語です。
- 4 Enable text compression
- テキストについても、圧縮（gzip、deflateまたはbrotli）しているかどうか、という項目です。
- 5 Server response times are low (TTFB)
- サーバーの応答時間、レスポンスが短いかどうかという項目です。
- 6 Avoid multiple page redirects
- 複数ページのリダイレクトがされないかどうか、というチェック項目です。見たいページの前に複数のリダイレクトが挟まれていると、当然ながら最後のページがロードされる前に余分に時間がかかり、ユーザーにとって不便です。
- 7 Preload key requests
- プリロードキーリクエストを使用しているかどうかという項目です。HTMLのhead要素内に、link要素でrel属性にpreloadを指定（<link rel = preload>）することで、コンテンツの先読みを行うことができます。これにより、パフォーマンスの改善をすることができます。
- 8 Use video formats for animated content
- 動画コンテンツを配信する際に、ビデオフォーマットを使用しているかどうかというチェック項目です。大きなGIFは動画コンテンツの配信には非効率的なため、GIFの代わりに動画はMPEG4 / WebMビデオを、静止画にはPNG / WebPを使用することを推奨しています。
- 9 Avoids enormous network payloads
- ユーザー側にむやみに大きなサイズのファイル（大きなファイルサイズの画像など）をダウンロードさせないようにしているか？ というチェック項目です。
- 10 User Timing marks and measures
- こちらは、合格・不合格といった項目ではありません。あくまで、アプリのパフォーマンスが良いかどうかを計測するために役立つ API を紹介するための項目です。
Googleでは、これらのJavaScript のパフォーマンスを改善するために、User Timing APIを使用してアプリをチェックすることを推奨しています。
＜SEO＞
続いてSEOに関するチェック項目です。
◯Additional items to manually check（手動で確認すべき追加項目）
- 1 Page is mobile friendly
- ページがモバイルフレンドリーかどうかをチェックする項目です。モバイルフレンドリーとは、スマホ用サイト、モバイル用サイトがユーザーにとって使いやすいことを示す概念です。Lighthouseではカバーしていない項目があるため、こちらもGoogleが提供しているモバイルフレンドリーテストを使って、モバイルフレンドリーであるかどうかをチェックするようにしましょう。
- 2 Structured data is valid
- 構造化データが有効かどうかをチェックする項目です。構造化データを検証するためには、構造化テストツールを使用します。
◯Passed audits（合格した審査）
前述の通り、Yahoo JAPAN（https://www.yahoo.co.jp/）をサンプルとしてチェックを行っていますが、チェックを通過したSEO項目についても確認しておきましょう。
- 1 Has atag with width or initial-scale
- スマホなど、モバイルでの表示を最適化するために、ビューポートメタタグが使われているかどうかというチェック項目です。
- 2 Document has a ＜title＞ element
- ページにタイトル要素があるかどうかというチェック項目です。
- 3 Document has a meta description
- ページにディスクリプション要素があるかどうかというチェック項目です。
- 4 Page has successful HTTP status code
- リクエストが正しく処理され、適切なステータスコードが返信されているかどうかというチェック項目です。
- 5 Links have descriptive text
- わかりやすいリンクテキスト（説明文）があるかというチェック項目になります。
- 6 Page isn’t blocked from indexing
- そのページがクローラーをブロックしていないかというチェック項目です。クローラーをブロックしていれば、Googleなどの検索エンジンにインデックスされないため、SEOを行うのであれば避けるべきであるためです。
Lighthouseを使ってウェブサイトのパフォーマンス・SEOの改善をしてみましょう
- LighthouseはChromeの拡張機能なのでクリックするだけでインストールできる
- LighthouseはSEOとウェブのパフォーマンスのチェックを自動でしてくれる
- Lighthouseはチェックだけでなく具体的な改善方法の提案までしてくれる
Lighthouseのチェック項目は、SEOの基本を抑えたものになっています。Lighthouseに沿ってウェブサイトを改善することで、SEOのベースを作る助けになります。さらにLighthouseでは具体的な改善方法の提案まで行ってくれるため、ぜひLighthouseを使ってサイトのパフォーマンス・SEOをチェックし、改善につなげてみましょう
