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

Lighthouseの公式ドキュメントを読んで ~ Performance編 ~

目次

1. 記事作成の背景
2. 公式ドキュメント
3. 概要
4. 各項目の詳細

記事作成の背景

Lighthouseを使ってみて、Performanceの数字が変動するのが気になったので調べることにした

公式ドキュメント

今回はweb.dev内のLighthouseカテゴリの中から特にPerformance auditsを取り上げる。
また機会があれば、PWAなど他の項目もまとめるかも。

概要

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

1. Performance audit scoring
2. Metrics
3. Opportunities
4. 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のスペック
• ネットワークのリクエストに影響を与える拡張機能
• ウイルスソフト
  これらを深く見るなら→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とCumulative Layout Shiftの重みが大きくなっている

How metric scores are determined

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

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

Metrics

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

• First Contentful Paint
• First Meaningful Paint
• Speed Index
• First CPU Idle
• Time to Interactive
• Max Potential First Input Delay
• Total Blocking Time
• Largest Contentful Paint

Opportunities

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

• Eliminate render-blocking resources
• Properly size images
• Defer offscreen images
• Minify CSS
• Minify JavaScript
• Remove unused CSS
• Efficiently encode images
• Serve images in modern formats
• Enable text compression
• Preconnect to required origins
• Reduce server response times (TTFB)
• Avoid multiple page redirects
• Preload key requests
• Use video formats for animated content
• Reduce the impact of third-party code
• Avoid non-composited animations
• Lazy load third-party resources with facades

Diagnostics

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

• Avoid enormous network payloads
• Serve static assets with an efficient cache policy
• Avoid an excessive DOM size
• Avoid chaining critical requests
• User Timing marks and measures
• Reduce JavaScript execution time
• Minimize main thread work
• Ensure text remains visible during webfont load
• Keep request counts low and transfer sizes small