koblog

高校生のWEBデザインブログ

Google Lighthouseの使い方を解説【SEO&速度チェック】

サムネイル

ブログをやっている人はSEOスコアやブログの速度を何で確認していますか。または確認していますか。僕は最近ではGoogleの「lighthouse」を使っています。SEOスコアやブログの表示速度など様々なスコアがひと目で分かるので、とても便利です。

 

今回はとても便利なGoogleの万能チェックツール「lighthouse」の使い方を紹介したいと思います。

 

 

lighthouseとは

lighthouse

Googleが提供している「lighthouse」はGoogle Chromeだけで使えるWEB解析ツールです。Chromeだけというのは、lighhouseはChrome拡張機能なのでFire foxやsafariでは使えないということです。

 

他にも有料のSEOチェックツールがある中、無料で使えるlighthouseはかなり重宝されているのでは無いでしょうか。lighthouseでチェックできる主な機能は下のとおりです。

 

SEOスコア

・表示速度(パフォーマンス)

アクセシビリティスコア

・ベストプラクティススコア

プログレッシブスコア

 

インストール方法

キャプチャー1

下のリンクから拡張機能としてインストールします。インストール後、右上にアイコンが表示されたらインストール成功です。

 

lighthouse:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

 

lighthouseの使い方

1.検証したいサイトを開く

まずはGoogle Chromeで検証したいサイトだけを開きます。このときChromeで他のタブ・ウィンドウを開かないようにしてください。

いつみてもオシャレですね。

キャプチャー2

 

2.設定を変更 

lighhouseのアイコンをクリックして「options」を選択します。そこで検証したいものを選びます。設定が終わったら「OK」をクリックして「Generate report」に進んでください。

キャプチャー3

 

キャプチャー4
 

キャプチャー5

 

3.結果を確認

検証が始まると下の画面のようにスマホ表示になります。このまま待っていると結果が新しいウィンドウで開くので、確認してみてください。

キャプチャー6

 

僕のブログでは下のようになりました。SEO100点なのは嬉しいですが、やはりトップページからjQueryを使っているためパフォーマンスが低いです。ちなみにパフォーマンスに関しては多分ですが、同じくGoogleが提供している「PageSpeed Insights」を使っていると思います。このスコアを見ると多分スマホとパソコン両方のスコアの平均だと思います。

 

注意点ですが、正直パフォーマンスは検証する日時によってかなり変わります。というのも、トップページに重い記事があるとかなりスコアが下がってしまいます。どうしても気になる人は白紙の記事を1つ作るといいかもしれません。

キャプチャー7

 

*追記

インストール方法としてnpmを使う方法があるみたいです。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる