Google Lighthouseの使い方を解説【SEO&速度チェック】
ブログをやっている人はSEOスコアやブログの速度を何で確認していますか。または確認していますか。僕は最近ではGoogleの「lighthouse」を使っています。SEOスコアやブログの表示速度など様々なスコアがひと目で分かるので、とても便利です。
今回はとても便利なGoogleの万能チェックツール「lighthouse」の使い方を紹介したいと思います。
lighthouseとは
Googleが提供している「lighthouse」はGoogle Chromeだけで使えるWEB解析ツールです。Chromeだけというのは、lighhouseはChromeの拡張機能なのでFire foxやsafariでは使えないということです。
他にも有料のSEOチェックツールがある中、無料で使えるlighthouseはかなり重宝されているのでは無いでしょうか。lighthouseでチェックできる主な機能は下のとおりです。
インストール方法
下のリンクから拡張機能としてインストールします。インストール後、右上にアイコンが表示されたらインストール成功です。
lighthouse:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
lighthouseの使い方
1.検証したいサイトを開く
まずはGoogle Chromeで検証したいサイトだけを開きます。このときChromeで他のタブ・ウィンドウを開かないようにしてください。
いつみてもオシャレですね。
2.設定を変更
lighhouseのアイコンをクリックして「options」を選択します。そこで検証したいものを選びます。設定が終わったら「OK」をクリックして「Generate report」に進んでください。
3.結果を確認
検証が始まると下の画面のようにスマホ表示になります。このまま待っていると結果が新しいウィンドウで開くので、確認してみてください。
僕のブログでは下のようになりました。SEO100点なのは嬉しいですが、やはりトップページからjQueryを使っているためパフォーマンスが低いです。ちなみにパフォーマンスに関しては多分ですが、同じくGoogleが提供している「PageSpeed Insights」を使っていると思います。このスコアを見ると多分スマホとパソコン両方のスコアの平均だと思います。
注意点ですが、正直パフォーマンスは検証する日時によってかなり変わります。というのも、トップページに重い記事があるとかなりスコアが下がってしまいます。どうしても気になる人は白紙の記事を1つ作るといいかもしれません。
*追記
インストール方法としてnpmを使う方法があるみたいです。