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

PR

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モバイル」の設定ができます。

lighthouse3

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

クマ

計測も簡単ですね!

計測結果の説明

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

クマ

各項目の中身も詳しく計測してくれますが、ページによって変わってくるので、そのあたりは自分の計測結果を見てみてください。

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

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

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

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

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

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

「日本語に翻訳」が出ない人はコチラ

なぜか「Englishに翻訳」というルー語のような項目は出ています。これをクリックして見てください。

日本語化3

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

Lighthouseの計測結果について

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

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

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

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

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

まとめ

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

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

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次