JavaScript++かも日記

SEOツール Lighthouse(ライトハウス)を使ってみる

Sharing is caring!

Lighthouse(ライトハウス)は、Googleが提供しているChrome拡張で、Webページのパフォーマンスや品質向上のための検査を自動で行ってくれるオープンソースのツールです。

作ったWebページを多くの人に見てもらうためには、ストレスのないユーザーフレンドリなページに仕上がっていることは必須です。

ただ、ちゃんとユーザーフレンドリーで使い易いコードを書けているかを自分で調べるには、豊富な最新の知識も時間も必要です。PCとモバイルでも違います。大変ですね。

でも!、このツールを使うと、調べたいページを開いてから Chrome 右上のボタンを押すだけで自動で様々な項目を調べてスコアを出してくれます。

超簡単。しかもGoogle謹製だけあって結構深く、新しい。

こんな便利なツールを使わない手はありません。

では、入れてみます。

インストール

追記 2019-0726 気付かなかったのだけど ChromeのDevツールに既に実装されてたらしい。Chromeならインストール不要で使えるっ!、というわけで以下はChromeの拡張機能にインストール場合の説明です。

下記URLからChromeの拡張機能にインストールします。
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

下記ページの右上の「Chrome追加」ボタンを押すとインストールできます。

使い方

該当ページを開いて、右上のLighthouseアイコンをクリックするだけです。

調査項目

調査してくれる項目は大きく次の4つです。それぞれ詳細なチェック項目があって採点とアドバイスを返してくれます。

  1. Performance
  2. Accessibility
  3. Best Practicers
  4. SEO

スコアは100円満点で0-49が赤、50-89がオレンジ、90-100が緑で表示されます。

各項目ごとの詳細なリファレンスは以下から辿れるのでここには書きません。
https://developers.google.com/web/tools/lighthouse/

今回は、牛久大仏に隣接する公園墓地「牛久浄苑」のページ https://bosan.net/ のスコアアップを Lighthouse で試してみました。

オール 100 まで、あと 1ポイントです(^^)v

こんなふうに 100点 をいくつも並べるまでは様々な苦労もあり、まぁ、ここまでスコアを上げるテクニックも手に入れたのですが、その辺はまたあとで。

P.S. ローディング速度などだけならこれも便利
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

因みにiPhoneを使って このページをPageSpeed Insightsでみるとこうなります。素のWordPressが出力するコードはゴテゴテですが、AMPで出力すると、かなり良くなります。

通常URL AMP
PC https://jsgt.org/wp/?p=370
https://jsgt.org/wp/?p=370&amp=1
スマホ https://jsgt.org/wp/?p=370
https://jsgt.org/wp/?p=370&amp=1