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

Google LighthouseはWebページの解析ツールです。
- Performance
- Accessibility
- Best Practices
- SEO
- PWA
の項目について評価して、自分のサイトやブログが「適切なパフォーマンスが出せているか、適切な設定ができているか」について確認することができます。

そこまで使用頻度が高いわけではないですが、たまにチェックした方がいいです。
この記事ではLihgthouseのインストール方法から使い方まで説明していきます。
Lighthouseのインストール方法
LighthouseはChromeの拡張機能です。
ですので、まずはこちらからChromeウェブストアに行きます。(外部リンクです)
「Lighthouse」と検索して、「Chromeに追加」してください。









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です。




「日本語に翻訳」が出ないときは、以下のようにしてみてください。
「日本語に翻訳」が出ない人はコチラ
なぜか「Englishに翻訳」というルー語のような項目は出ています。これをクリックして見てください。


するとURLの部分にGoogle翻訳が出てくるので、「別の言語を選択」→「日本語」を選択してください。






Lighthouseの計測結果について
Lighthouseの計測結果を見ると、「もっとパフォーマンスを上げないと!」とか「もっとちゃんとSEO設定をしないと!」「PWAの設定は!?」と思うかもしれませんが、正直そこまで血眼になっていい点を取らなくてもいいと思います。
超トップブログでも、全部そこまで計測値が高いわけではないです。
ですので、あまりスコアを上げることに躍起になる必要もないかな、と思います。
ただし、設定を変えたりWordPressのプラグインを導入したときに、極端にパフォーマンスが下がったりしたら対策をすべきかな、と思います。
あとは、そもそもSEOの設定が上手くいっていなかったり、画像のalt属性を書いていなかったり、基本的な部分に問題がある場合は改善すべきかな、と思います。
まとめ
Lighthouseのインストール方法と使い方について説明しました。
Lighthouseは手軽に導入できるので、定期的にパフォーマンスのチェックをしていきましょう。

