ChromeのLighthouseでサイトの品質をチェックしてみた

はじめに

サイトを作ったはいいのですが、肝心の品質をまだチェックしていませんでした。 そこで今回はChromeにデフォルトで入っているLighthouseを使って当サイトの品質をチェックしてみたいと思います。

Lighthouseとは？

Lighthouseはウェブページの品質を手軽にチェックしてくれるオープンソースツールです。 Chromeのデベロッパーツールを開いた後、以下のLighthouseタブから使用可能です。

画像のGenerate reportボタンを押すと評価が開始されます。 ※ 他のChrome拡張が審査結果に影響を及ぼす場合もあるらしいので、Lighthouseを実行する場合はChromeのシークレットモードで実施するのが良さそうです。

評価項目

評価の項目は全部で

• Performance
• Progressive Web App
• Accessibility
• Best Practices
• SEO

の５つあり、簡単にまとめるとそれぞれ次の通りです。

Performance

項目名のとおり、サイト内の処理スピードを評価する項目です。 例えばページの主要なコンテンツが可視化されるまでにかかった時間などが評価され、スコアが高ければ高いほどサクサク動くサイトであることを示しています。 ただし、凝ったサイトを作ろうとするとどうしてもPerformanceは低くなってしまうものなので、スコアはあくまで参考程度に見るのがいいと思います。 極端な話、jsやcssもないシンプルなhtmlが最もPerformaceは良くなってしまいますし... とはいっても、スコアが50点未満だと明らかにユーザーエクスペリエンスが悪く感じるので、その場合は改善したほうがいいかもしれません。

Progressive Web App

Progressive Web App(PWA)として正しい構成になっているかをチェックする項目です。 PWAとはWebサイトをまるでスマホのネイティブアプリのように扱える技術のことです。 PWAは今後普及していく可能性があるので、Webサイトはあるけど同じ機能を持ったアプリもほしいという方は十分に検討する価値があると思います。 当サイトでは特にPWA対応はしていないのでここは評価項目には含まれませんが、対応しているサイトはLighthouseの指摘に従っておきましょう。

Accessibility

サイトの訪問者に対して親切な作りになっているかどうかを評価する項目です。 例えば、色覚に異常のある方や視力の悪い方でもそのWEBサイトは使いやすいのか？などがチェックされます。 具体例を上げると

• imgタグにaltがついていない
• 文字と背景のコントラストが弱い
• ボタンにaccessibleな名前がついていない

などがあります。 LighthouseがチェックするAccessibilityは基本的なものばかりなので最低限90以上はあった方がいい気がします。

Best Practices

Webの標準的なベストプラクティスに沿ってサイトが作られているか評価する項目です。 ここのスコアが低いと非推奨のブラウザ機能を使っていたり、セキュリティ的に問題がある可能性があります。 サイトの信頼性に関わる部分なので、ここも高得点を狙いましょう。

SEO

検索エンジンに対して最適化された作りになっているかを評価する項目です。 検索結果のランキングに影響するので重要視したいところです。 他の項目と比べても修正に大した労力はかからないはずなので、ここは満点を目指したいです。

当サイトをチェック

早速Lighthouseで当サイトを評価してみます。 結果はこんな感じ

Performanceのスコアが若干良くない気もしますが、基本的には問題ないレベルでしょう。 一応、Performanceのスコアが引かれた原因をチェックすると...

どうやら、Google Fontの容量が大きいのが問題なようです。 まあこれに関してはあまり対策のしようがないので無視してもいいかなと...😓

こんな感じでサイトの品質を簡単にチェックできるので自分が作ったサイトはもちろん、気になるサイトがあればチェックしてみると面白いかもしれません。 （自分は色々な企業のサイトをたまにチェックしては勝手に評価しています😏）