Lighthouse で Web Vitals を最適化する

• Core Web Vitals を測定する

• Largest Contentful Paint の要素を見つける

• LCP 改善のためにプリロードする

• Cumulative Layout Shift に影響を与える要素を見つける

→ サイズ指定のない画像

→ 広告

→ non-composited アニメーション

• First Input Delay / Total Blocking Time / Long Tasks をデバッグする

[alstjr7375]

関連する画像最適化の方法

https://smashingmagazine.com/2021/04/…

要約したツイート

https://twitter.com/addyosmani/status/1388031656355794945

[xguru]

Google、検索結果の順位にページ エクスペリエンス(Page Experience)指標を導入 https://ja.news.hada.io/topic?id=2197

• Core Web Vitals

→ LCP : Largest Contentful Paint

→ FID : First Input Delay

→ CLS : Cumulative Layout Shift

Lighthouse 6.0 リリース https://ja.news.hada.io/topic?id=2122

→ LCP、CLS、TBTメトリクスを追加

Cumulative Layout Shift (CLS) とは何か？ https://ja.news.hada.io/topic?id=1697

→ 画像/広告の遅い読み込み、非同期動作、動的なDOM変更などによって、Webページのレイアウトがどれだけ変化するかを測定

→ ユーザーの誤クリックを誘発しうる視覚的な不安定性をチェックする、ユーザー中心のパフォーマンス指標