Chromeブラウザで「Webサイト 採点しました？」 Chrome Lighthouseで測定可能！（測定基準を完全理解！）
◇「 Webサイト点数 」の仕組みをメモ
今回は「LighthouseのPerformance 」は「 どの点を測定して、私たちのサイトを評価しているのか？ 」調べてみました。
なぜ？開発者が？と
思われたかもしれませんがMyサービスのパフォーマンスを良くするようチューニングする機会が、偶にあるのですが、そのたびに忘れてしまう・・・。のでメモっておきます。
分かりにくいので「 Youtube動画 」にまとめています
◇Chromeブラウザ搭載の「 Lighthouse 」とは？
近年、「 Google ウエブマスター向け公式ブログ 」でも紹介されているとおり、
Webのページパフォーマンス・UXもSEOに重要な部分になります。
その重要になってきている「 Webページの読み込みパフォーマンスを測定」するツールがLighthouse / PageSpeed Insightsです。
- Chromeに実装されている機能で確認できるのが「Lighthouse」
- Googleのサイトで確認するのが「PageSpeed Insights」
Webページパフォーマンスだけでなく「SEO」「Accessibility」「Best Practices」も
測定（チェック）できるのがChromeブラウザ搭載の「 Lighthouse 」です！！
なぜ？あなたが？
個人的にWebサービスを作っていて、SEO等に興味をもったのがきっかけでした。
- LaravelDB.com https://laraveldb.com
- BmapQuery.js https://mapapi.org
◇Lighthouseの使い方
1. [デベロッパーツール] → [Lighthouse] → [Generate report]
2.測定結果：かなり良い方でしょう。
この点数はどういう基準で測定されてるのでしょうか？
と疑問に思ったので調べてみました。
◇「６つのメトリクス（測定基準）」今回はPerformanceのみ
以下「６つのメトリクスを解説」
「Lighthouse：Performance == PageSpeed Insights」として解説を進めていきます。
First Contentful Paint(FCP)メトリック
ページの読み込みが開始されてから、ページのコンテンツのいずれかの部分が画面にレンダリングされるまでの時間を測定します。
Speed Index
スピードインデックスは、ページ読み込み中にコンテンツがどれだけ早く視覚的に表示されるかを測定します。
Largest Contentful Paint(LCP)メトリック
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
Time to Interactive(TTI) メトリック
Webサイトによっては、インタラクティブ性を犠牲にしてまで、コンテンツの可視性を最適化している場合があるので、TTIの測定が重要になってきます。サイトは準備ができているように見えますが、ユーザーが操作可能になるタイミングを測定しています。
Total Blocking Time(TBT) メトリック
Total Blocking Timeは「First Contentful Paint からTime to Interactive」までの間で、メインスレッドが入力の応答性を妨げた長くブロックされていた時間の合計を測定します。
Cumulative Layout Shift (CLS)メトリック
Cumulative Layout Shift(キュームレイティブ・レイアウト・シフト)は、ページの存続期間全体で発生するすべての予期しないレイアウトシフトについて、すべての個々のレイアウトシフトスコアの合計を測定します。
【参考サイト】
Web.dev（ https://web.dev ）
６つのメトリクス測定基準の割合
※こちらもご参考まで。
「６つのメトリクス」全てグリーンを目指す！！
６つのメトリクス全てグリーンになればGoogleが定義する良いサイトと判断されると思いますので、
上記測定基準が見えてきたと思いますので、AllGreenを目指しましょう！
以下のように黄色とか赤色のヒントが出てくるので、ヒントをクリックして内容を確認して解消していくと
必然とgreenになっていきます！！
※「解消しやすそうなものから」やるのがコツです！！
◇Lighthouse 関連の重要な記事
▼Google ウエブマスター向け 公式ブログ（ページエクスペリエンスについて）
▼ PageSpeed Insights（Lighthouse：Performance測定と同様）
◇Youtube動画
記事では分からんって人はこちら
以上
Discussion