DemandSphereGoogleが開発しているLighthouseというツールをご存知でしょうか。Googleが提供している、しかも非常に簡単にSEOやサイトパフォーマンスをチェックできるということで、最近注目を集め始めています。この記事を読めば、Lighthouseの使い方、Lighthouseから得られた結果をウェブサイトの改善につなげる方法が分かります。いった要素をチェックすることができるツールです。Lighthouseでは何ができる?それでは、具体的にLighthouseでは何ができるのでしょうか。簡単に言えば、ウェブサイトがユーザーにとって快適な状態(例えば、ページの読み込みスピードや、モバイル端末で使ったときのユーザービリティ等)にあるか、SEOの基本がしっかりとできているのかをひと目で確かめることができるのです。Lighthouseのインストール方法Lighthouseのインストール方法は非常に簡単です。ChromeがブラウザとしてインストールされているPCであれば使用することができます。そのため、必要な作業としては、下記URLにアクセスし、ChromeにLighthouseを追加するだけです。https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja上記URL右上の「Chromeに追加」ボタンをクリック。いうポップアップが出るため、「拡張機能を追加」ボタンをクリック。クリックすると上記のように拡張機能がChromeに追加されます。以上でLighthouseのインストールは完了です。普段からChromeをブラウザとして使っている方であれば、1分程度で完了するくらいの簡易さです。Lighthouseの使い方それでは続いてLighthouseの実際の使い方をご説明します。LighthouseをChromeにインストールすると、ブラウザの右上にこのような灯台のマークが表示されます。この灯台マークをクリックすると、上記のようなポップアップが表示されるため、続いて左下の「Options」をクリック。すると、チェック項目を選択することができるため、特にこだわりがなければすべての項目にチェックを入れ、「OK」をクリックします。report」をクリックしましょう。Report)が表示されます。上記はサンプルとして「https://www.yahoo.co.jp/」をチェックした結果になります。以上がLighthouseの実際の使い方になります。続いて、LighthouseでパフォーマンスとSEOについてチェックできる項目と、それらの具体的な改善方法についてご紹介します。Lighthouseは日々アップデートを繰り返しているため、下記は2019/01/25時点での項目となります。<パフォーマンス>まずはパフォーマンスの部から見ていきます。Paintこちらは、ページが読み込まれたときに、最初のテキストあるいは画像が読み込まれるまでの時間という指標になります。Paintこちらは、ユーザーがページの主要コンテンツが表示された、と認識するタイミングまでの時間という指標になります。Indexこちらは、ページのコンテンツがユーザーの目に見える状態になるまでの時間という指標になります。Idleこちらは、ページの読み込みが終わり、CPUが待機状態になるまでの時間という指標になります。Latencyこちらは、レイテンシの値、いわゆるユーザーの入力に対する反応の速さという指標です。ユーザーの入力から反応までの時間が短ければ短いほど評価は高くなります。◯Opportunities(改善方法の提案)続いて、ではどうすれば上記の指標が改善されパフォーマンスが上がるのかという課題に対して、Lighthouseでは具体的な改善方法まで提案してくれます。imagesウェブサイトがブラウザに表示されたときに、ファーストビューで表示される画像以外は、遅延ロードするようにしましょうという提案になります。遅延ロードを使うことで、最初の読み込みにかかる時間が大幅に短縮され、パフォーマンスが改善します。formats当然ながら、大きな画像ファイルの読み込みを要求されるウェブページは表示速度が余分にかかります。そのため、JPEG2000、JPEGXR、WebPといった、画像の次世代圧縮フォーマットを使用しましょうという提案です。1枚の画像のファイルを小さくした程度ではそこまでパフォーマンスには大きな差が生まれませんが、ウェブサイトで使っている画像が全体的に小さくなれば、パフォーマンスももちろん向上します。resourcesこちらは、ウェブサイトのレンダリングをブロックするようなJavaScriptなどのリソースを削除しましょうという提案です。JavaScriptとは、ウェブブラウザ上で動作するプログラミング言語のこと。レンダリングとは、プログラミング言語から実際の画像、映像、テキスト、音声などを生成することを指します。CSS読み込んだページで使っていないCSS(大きなCSSライブラリ等)を読み込まない、というものです。基本ですが、パフォーマンス改善には非常に効果があります。(https://www.yahoo.co.jp/)をサンプルとしてチェックを行っていますが、チェックを通過した項目には下記のようなものもあります。imagesこちらは適切なサイズの画像を使う、というものです。PC用とスマホ用で、それぞれ最適なサイズの画像が読み込まれるように、出し分けるというものです。CSSこちらは、CSSのサイズを小さくしているかどうか、という項目です。CSSとは、ウェブページのスタイル、装飾を指定するための言語です。JavaScript2と同様に、JavaScriptのサイズを小さくしているかどうか、という項目です。JavaScriptとは、ウェブブラウザ上で動作するプログラミング言語です。compressionテキストについても、圧縮(gzip、deflateまたはbrotli)しているかどうか、という項目です。(TTFB)サーバーの応答時間、レスポンスが短いかどうかという項目です。redirects複数ページのリダイレクトがされないかどうか、というチェック項目です。見たいページの前に複数のリダイレクトが挟まれていると、当然ながら最後のページがロードされる前に余分に時間がかかり、ユーザーにとって不便です。requestsプリロードキーリクエストを使用しているかどうかという項目です。preload>)することで、コンテンツの先読みを行うことができます。これにより、パフォーマンスの改善をすることができます。content動画コンテンツを配信する際に、ビデオフォーマットを使用しているかどうかというチェック項目です。WebPを使用することを推奨しています。いうチェック項目です。measuresこちらは、合格・不合格といった項目ではありません。紹介するための項目です。APIを使用してアプリをチェックすることを推奨しています。<SEO>続いてSEOに関するチェック項目です。friendlyページがモバイルフレンドリーかどうかをチェックする項目です。モバイルフレンドリーとは、スマホ用サイト、モバイル用サイトがユーザーにとって使いやすいことを示す概念です。Lighthouseではカバーしていない項目があるため、こちらもGoogleが提供しているモバイルフレンドリーテストを使って、モバイルフレンドリーであるかどうかをチェックするようにしましょう。valid構造化データが有効かどうかをチェックする項目です。構造化データを検証するためには、構造化テストツールを使用します。JAPAN(https://www.yahoo.co.jp/)をサンプルとしてチェックを行っていますが、チェックを通過したSEO項目についても確認しておきましょう。initial-scaleスマホなど、モバイルでの表示を最適化するために、ビューポートメタタグが使われているかどうかというチェック項目です。elementページにタイトル要素があるかどうかというチェック項目です。descriptionページにディスクリプション要素があるかどうかというチェック項目です。codeリクエストが正しく処理され、適切なステータスコードが返信されているかどうかというチェック項目です。textわかりやすいリンクテキスト(説明文)があるかというチェック項目になります。indexingそのページがクローラーをブロックしていないかというチェック項目です。クローラーをブロックしていれば、Googleなどの検索エンジンにインデックスされないため、SEOを行うのであれば避けるべきであるためです。Lighthouseを使ってウェブサイトのパフォーマンス・SEOの改善をしてみましょうLighthouseはChromeの拡張機能なのでクリックするだけでインストールできるLighthouseはSEOとウェブのパフォーマンスのチェックを自動でしてくれるLighthouseはチェックだけでなく具体的な改善方法の提案までしてくれるLighthouseのチェック項目は、SEOの基本を抑えたものになっています。Lighthouseに沿ってウェブサイトを改善することで、SEOのベースを作る助けになります。お問い合わせDemandSphereは、SEO担当がサイトの評価を高め、SEOを効率的に進めるために開発されたインハウス化を支援するSEOツールのプラットフォームです。