LighthouseでサイトパフォーマンスやSEO対策を見る

2019年7月6日2019年7月16日

LighthouseでサイトパフォーマンスやSEO対策を見る

LighthouseというChrome拡張はご存知でしょうか。

GoogleChromeブラウザ（IEとかEdgeとかFirefoxではなく）で使えるサイトパフォーマンスを見ることができるプラグインです。

サイトパフォーマンスとは、

1. Performance
2. Accesibility
3. Best Practice
4. SEO
5. Progressive Web App

の観点で見たサイトの品質です。

詳しくは公式サイトの説明を読んでみてください。

競合サイトに比べてサイトの品質が悪いということは、ロードが遅いなど読者が読みにくかったりSEO的に評価されにくかったり良いことはないので、改善できるところは改善していくのがいいです。

闇雲に改善はできないので、Lighthouseが指摘した箇所をもとに改善していく感じですね。

Lighthouseの導入方法

LighthouseにアクセスしてChromeに追加をクリック

追加されたら上のバーにLighthouseが追加されているのがわかります。

評価したいページ（今回は自分のブログのトップページを開いてみました）を開きます。

次にLighthouseアイコンをクリックして開き、「Generate report」をクリック

スキャンが始まるのでしばらく待ちます。

するとサイトの評価が表示されます。

私のブログの場合はPerformanceが57点ということで低いので、これを見てみましょう。

Performanceが悪い

下の方に行くと具体的に何が悪いのかが表示されています。

いろいろ書いてますが、要するに「ページ表示速度遅いよ」ということを指摘されています。

例えばFirst Meaningful Paintとは「読者にとって意味のある情報が十分に表示されるまでの時間」なので、わたしのブログのトップページにアクセスすると十分な情報が表示されるまでに4秒かかるということになります。

また、Time to Interactiveとは「タブを開くなど操作できるようになるまでの時間」を表しているので、6.4秒もかかっていることになります。

なかなか遅いですね！

それぞれの項目の詳細な意味は公式サイトの左カラムにある「Performance」の項目から見ることができます。

Opportunities（改善方法）を見る

Lighthouseのレポートの方に戻って下の方に行くと、Opportunitiesという項目があります。

これは、「この辺最適化して改善したら良くなるよ」ってことを提案してくれている内容になります。

例えば「Remove unused CSS」は、使ってないCSSを削除したらどうですか？という提案で、この対策をすると0.45秒早くなるという感じです。

全部対策すると２秒位速くなりそうですね。

Diagnostics（詳細診断情報）を見る

更に下に行くとDiagnosticsという項目が出てきます。

これは、詳細に診断した情報です。

例えばMinimize main-thread workは「Javascriptのコードの内メインスレッドで動いているものを最小に抑えているか」という項目になります。

正直Wordpressなどテンプレートエンジンとプラグインを使って構築しているサイトの場合ろくに対策できるものでもないので、この辺は気にしても仕方ないですね。

LighthouseでサイトパフォーマンスやSEO対策を見る【まとめ】

今回うちのブログでは特に劇的に効果があるような対策が打てる指摘点はなかったのですが、ブログによっては打ち手があるものもあります。

例えばテンプレートやプラグインを使っているのではなく、すべて自分で実装しているサイトであれば細かいチューニングができますので、１つずつ最適化することができます。

もしServerからのResponseタイムが遅いよ

という指摘があった場合はレンタルサーバーを変更することでも改善が見込めます。

具体的には、

ロリポップ！

を使っている場合

Xserver

に移転することで改善が見込めます。

ロリポップは安さが魅力のレンタルサーバーですが、性能的にはXServerのほうが強力です。

サーバー性能が強力ということは、その分レスポンスタイムも速くなるので、サーバーレスポンスタイムが遅すぎるサイトを運営している方は乗り換えを検討してみてもいいでしょう。

こういったパフォーマンス面も考えるともし趣味ブログではなく、収益化も考えてブログやサイト構築を考えている方は、はじめからエックスサーバーでブログを始めるのが一番ではありますね。

たとえば同じ内容のブログが２つあったときに、片方はパフォーマンスが悪く片方はパフォーマンスがいいとするとGoogleはパフォーマンスが良い方を上位表示するので、結果的にその方が稼げるようになるからです。