Google Lighthouseの使い方と日本語表示されない場合の対処法

Google LighthouseはWebページの解析ツールです。

• Performance
• Accessibility
• Best Practices
• SEO
• PWA

の項目について評価して、自分のサイトやブログが「適切なパフォーマンスが出せているか、適切な設定ができているか」について確認することができます。

この記事ではLihgthouseのインストール方法から使い方まで説明していきます。

Lighthouseのインストール方法

LighthouseはChromeの拡張機能です。

ですので、まずはこちらからChromeウェブストアに行きます。（外部リンクです）

「Lighthouse」と検索して、「Chromeに追加」してください。

Lighthouseの使いかた

こちらも簡単です。

まずは計測したいWebページに移ります。

そして、Chromeの右上にある拡張機能一覧から「Lighthouse」を選んでください。もし、一覧にピン留めされていなかったら、拡張機能マークから「Lighthouse」をピン留めしてください。

あとは「Generate report」をクリックするだけです。右上の歯車マークで「どの項目を計測する」「デスクトップorモバイル」の設定ができます。

しばらくすれば計測結果が表示されます。

計測結果の説明

各項目が何を計測しているか説明しておきます。

• Performance（パフォーマンス）：ページの読み込みスピードを診断します。読み込みスピードを妨げている原因も解析してくれます。
• Accessibility（アクセシビリティ）：ページの使いやすさ、見やすさを診断します。文字や背景などのコントラストを計測して見やすさを測ったり、alt属性やname属性をちゃんとつけているかなどを測ります。
• Best Practices（ベストプラクティス）：セキュリティや脆弱性のあるAPIを使っていないかどうかを診断します。HTTPSを使用しているかなどを測ります。
• SEO：SEOの設定が上手くできているか、を診断します。SEOについてはこちらをご覧ください。
• PWA（プログレッシブウェブアプリ）：PWAの設定ができているか、の診断をします。PWAとは、簡単に言うと、ウェブサイトをモバイルアプリのようにスマホにインストールする機能です。

Lighthouseが日本語化されていないとき

基本的に日本語化されているようですが、私の環境では日本語化されませんでした。

「英語でも大丈夫！」という人はそのままでも大丈夫ですが、「日本語がいい！」という人は以下の要領で日本語化してください。

日本語化、といいましたがGoogle翻訳すればOKです。

「日本語に翻訳」が出ないときは、以下のようにしてみてください。

Lighthouseの計測結果について

Lighthouseの計測結果を見ると、「もっとパフォーマンスを上げないと！」とか「もっとちゃんとSEO設定をしないと！」「PWAの設定は！？」と思うかもしれませんが、正直そこまで血眼になっていい点を取らなくてもいいと思います。

超トップブログでも、全部そこまで計測値が高いわけではないです。

ですので、あまりスコアを上げることに躍起になる必要もないかな、と思います。

ただし、設定を変えたりWordPressのプラグインを導入したときに、極端にパフォーマンスが下がったりしたら対策をすべきかな、と思います。

あとは、そもそもSEOの設定が上手くいっていなかったり、画像のalt属性を書いていなかったり、基本的な部分に問題がある場合は改善すべきかな、と思います。

まとめ

Lighthouseのインストール方法と使い方について説明しました。

Lighthouseは手軽に導入できるので、定期的にパフォーマンスのチェックをしていきましょう。