Lighthouse ドキュメントを読んでの要点メモ

# Lighthouseの公式ドキュメントを読んで ~ Performance編 ~
## 目次
1. [記事作成の背景](#記事作成の背景)
1. [公式ドキュメント](#公式ドキュメント)
1. [概要](#概要)
1. [各項目の詳細](#各項目の詳細)


## 記事作成の背景
Lighthouseを使ってみて、Performanceの数字が変動するのが気になったので調べることにした

## 公式ドキュメント
今回はweb.dev内の[Lighthouse](https://web.dev/learn/#lighthouse)カテゴリの中から特に[Performance audits](https://web.dev/lighthouse-performance/)を取り上げる。
また機会があれば、PWAなど他の項目もまとめるかも。

## 概要
以下の4項目に分かれている

1. [Performance audit scoring](https://web.dev/lighthouse-performance/#performance-audit-scoring)
1. [Metrics](https://web.dev/lighthouse-performance/#metrics)
1. [Opportunities](https://web.dev/lighthouse-performance/#opportunities)
1. [Diagnostics](https://web.dev/lighthouse-performance/#diagnostics)

Performance scoreに直接影響してくるのはMetricsの項目であるが、OpportunitiesやDiagnosticsも間接的には関わってくる
> In general, only metrics contribute to your Lighthouse Performance score, not the results of Opportunities or Diagnostics. That said, improving the opportunities and diagnostics likely improve the metric values, so there is an indirect relationship.

## 各項目の詳細
### Performance audit scoring
#### Why your score fluctuates
スコア変動の理由。

- adsのA/Bテスト
- インターネットの通り道の変更
- PCのスペック
- ネットワークのリクエストに影響を与える拡張機能
- ウイルスソフト<br>
これらを深く見るなら→https://github.com/GoogleChrome/lighthouse/blob/master/docs/variability.md

#### How the Performance score is weighted
Performance scoreの重み付け。

- Performance scoreは加重平均
- 効果が大きいものに対して重み付けを大きくしている
  - 何がインパクトあるかは日々の調査によって変更される

例えば、
Lighthouse6から8では、[Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/)と[Cumulative Layout Shift](https://web.dev/cls/)の重みが大きくなっている

#### How metric scores are determined
ミリ秒の単位でLCP(Larget Contentful Paint)などの各項目の測定が行われ、それぞれ0から100までのスコアに変換される
それらがもとにPerformance scoreが決められる。

得点分布の50~92までは直線だが、それ以上になると幅広い範囲での各項目の改善をしないとスコアは上がりにくい

### Metrics
各項目があり、それぞれの名前のみ列挙(詳細はリンク先)

- [First Contentful Paint](https://web.dev/first-contentful-paint/)
- [First Meaningful Paint](https://web.dev/first-meaningful-paint/)
- [Speed Index](https://web.dev/speed-index/)
- [First CPU Idle](https://web.dev/first-cpu-idle/)
- [Time to Interactive](https://web.dev/interactive/)
- [Max Potential First Input Delay](https://web.dev/lighthouse-max-potential-fid/)
- [Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/)
- [Largest Contentful Paint](https://web.dev/lighthouse-largest-contentful-paint/)

### Opportunities
各項目があり、それぞれの名前のみ列挙(詳細はリンク先)

- [Eliminate render-blocking resources](https://web.dev/render-blocking-resources/)
- [Properly size images](https://web.dev/uses-responsive-images/)
- [Defer offscreen images](https://web.dev/offscreen-images/)
- [Minify CSS](https://web.dev/unminified-css/)
- [Minify JavaScript](https://web.dev/unminified-javascript/)
- [Remove unused CSS](https://web.dev/unused-css-rules/)
- [Efficiently encode images](https://web.dev/uses-optimized-images/)
- [Serve images in modern formats](https://web.dev/uses-webp-images/)
- [Enable text compression](https://web.dev/uses-text-compression/)
- [Preconnect to required origins](https://web.dev/uses-rel-preconnect/)
- [Reduce server response times (TTFB)](https://web.dev/time-to-first-byte/)
- [Avoid multiple page redirects](https://web.dev/redirects/)
- [Preload key requests](https://web.dev/uses-rel-preload/)
- [Use video formats for animated content](https://web.dev/efficient-animated-content/)
- [Reduce the impact of third-party code](https://web.dev/third-party-summary/)
- [Avoid non-composited animations](https://web.dev/non-composited-animations/)
- [Lazy load third-party resources with facades](https://web.dev/third-party-facades/)

### Diagnostics
各項目があり、それぞれの名前のみ列挙(詳細はリンク先)

- [Avoid enormous network payloads](https://web.dev/total-byte-weight/)
- [Serve static assets with an efficient cache policy](https://web.dev/uses-long-cache-ttl/)
- [Avoid an excessive DOM size](https://web.dev/dom-size/)
- [Avoid chaining critical requests](https://web.dev/critical-request-chains/)
- [User Timing marks and measures](https://web.dev/user-timings/)
- [Reduce JavaScript execution time](https://web.dev/bootup-time/)
- [Minimize main thread work](https://web.dev/mainthread-work-breakdown/)
- [Ensure text remains visible during webfont load](https://web.dev/font-display/)
- [Keep request counts low and transfer sizes small](https://web.dev/resource-summary/)