【画像解説】ページの速度を測れる「Lighthouse」の使い方を紹介

ブログ

「サイトの表示速度」って、きちんと測ったことありますか?

サイトの表示速度は、
検索上位を狙っているあなたには、特に重要なことなのです。

Lighthouseはサイトの表示速度を「簡単に」計測できる拡張機能で、

パソコンでサイトを開けば、たった数クリックでサイトの表示速度を測ることができます。

サイトを見るときに、表示速度で「見る見ない」を決めることもあるので「速度重視」です。

この記事では、そんな便利なchromeの拡張機能「Lighthouse」について紹介していきます。

拡張機能 「Lighthouse」とは?

Lighthouseとは、サイトの表示速度(パフォーマンス)を測定する拡張機能です。

サーチコンソールにも同じものがありますが、

「ページの表示速度がどのくらいか」と

「 表示速度の低下の原因と改善部分」を教えてくれるのです!

パフォーマンスの数値が高いほど、そのサイトは「パフォーマンスが良い」ということなるので

もちろんのことですが「改善部分」を最小限にするといいですね。

ページの表示速度は「検索順位」にも関わります。

では、そんな便利なLighthouseの導入方法・使い方を紹介します。

Lighthouseの導入の仕方【4ステップ】

Lighthouseの導入手順は4つ。簡単に導入できるのがポイントです。

先にすこしだけ、流れを説明すると

「ウェブストアにアクセスして、機能を検索して、導入する。」

といった流れになります。

ここで注意しなければならないのが、

「スマホ」や「タブレット」では拡張機能は導入できないので注意してください。

手順① chromeウェブストアにアクセス

まず最初に、chromeのウェブストアにアクセスするところから。

Googleで「拡張機能」と入れ検索すると、

グーグル検索で表示された「グーグルウェブストア」の写真

一番上に「chrome ウェブストア」とでてくるので、このサイトにアクセスし「Lighthouse」を導入します。

chromeウェブストア

これが「chrome ウェブストア」です。

手順② 検索窓に「Lighthouse」と入力

ウェブストアの左上に、小さな検索窓があります。(赤枠)

chromeウェブストア_赤枠

画像の赤枠のところです。 ここに「Lighthouse」と入力してください。

Lighthouse_入力

このように、Lighthouseと入力したら、検索をします。

手順③ Lighthouseを選択

そうすると、オレンジの灯台のようなものが書かれていて、

「Lighthouse」と書かれている拡張機能が出てきます。

Lighthouse_選択画面_赤枠

画像の赤枠の拡張機能がLighthouseです。

この拡張機能を、追加していきます。

手順④ chromeに追加する

Lighthouseを選択したら、青い背景の「chromeに追加」を押します。そうすると….

Lighthouse 拡張機能追加確認の写真

ページ上部に「拡張機能を追加」と「キャンセル」という項目がでてきます。

 

Lighthouse_追加確認_赤枠済み_1

「拡張機能を追加」を押し、Lighthouseの導入が完了です!

たったこれだけで「Lighthouse」の

・サイトのページの表示速度測れる
・サイトの改善点を教えてくれる

といった機能を使うことができるのです!

これだけ便利な機能、入れないともったいないですよね?

Lighthouseの使いかた【簡単!】

Lighthouseの使い方は、簡単です。

Lighthouse使い方

画像の赤枠の部分を押し、Lighthouseを選択して

lighthouse 使用時 画像

Generate report」と出てきたらを押すだけ。

たったこれだけなので、サイトを開いてすぐに「Lighthouse」を使うことができます!

※サイトによっては計測する際に少し時間がかかる場合があります。

Lighthouseを導入するメリット

Lighthouseを導入するメリットは2つあります。

・サーチコンソールで測定の手間が省ける
・どのページでも表示速度を測定できる

この2つです。 どちらかというと、2つ目のメリットの方が大きいです。 なぜなら…。

サーチコンソールで測定の手間が省ける

サーチコンソールでページの表示速度を測れますが、

サイトの編集をしていて、

「表示速度を測るためだけ」に毎回サーチコンソールにアクセスするのって面倒くさいですよね。

その「面倒くさい手間」をLighthouseは省いてくれます!

サイトの編集や、画像の圧縮が終わったあと、
メンテナンス後など、 すぐページ速度を測れるので非常に便利です。

面倒くさいことは省きたい。というかたは
お試しで導入してみるのもありかも…!?

どのページでも速度を測定できる

2つ目のメリットは「どのページでも測定ができる」という点です。

※一部、使えないページもあります。

この拡張機能の怖いところは

「自分のサイトだけ」ではなく「 他人のサイト」の測定もできます。

言ってしまえば、 ライバルのサイト分析などもできてしまうのです。

ブログなどであなたが収益化を目指しているとしたら、分析は必須ですよね。

収益化を狙っている方は、Lighthouseを導入するといいかも…?

Lighthouseが使えない主なページ

Lighthouseが使えない主なページは「Twitter」と「chromeのメインページ」です。

正確にいうと、Twitterは使えますが、
ログインページの計測になるので、さほど意味を成しません。

確認はできていませんが、

ログインが必要になる、Facebookやインスタグラムでもそうなるのかもしれません。

また、chromeのメインページも使用することができません。

Lighthouseは導入がおすすめ!

Lighthouse「ページの表示速度・パフォーマンスを簡単に測定できる」簡単で便利な拡張機能です。

たった4ステップで簡単で
表示速度・速度に関する改善点などを教えてくれるので、

サイト運営者には「特に」入れておきたい機能です。

いいサイトを作っても、表示速度が遅くて見てもらえない…

なんてことを防ぐためにも、Lighthouseを導入しておきましょう!

Lighthouseを追加したい方はこちらからできます。
→ Lighthouse 導入ページ

Lighthouse
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

※導入はパソコンのみで可能です。

【番外編】Lighthouseを削除する方法

Lighthouseを導入したけど、もう使わなくなった…となったとき、

削除する方法がわからないと困りますよね。

「Lighthouseを削除」するのも、導入と同じくとても簡単にできます。

Lighthouseの削除方法は、

①ページの上の「ジグソーパズル」のようなマークを押す

②Lighthouseの右の三つの点を押す

③chromeから削除を選択

Lighthouseを削除するためのプロセス

④削除、キャンセルの項目が出てくるので「削除」を選択する。

Lighthouse削除最終確認

たったこれだけで、chromeからLighthouseが削除できます。

もし、必要なくなったらこの方法で削除してみてください。