Lighthouse で Web Vitals を最適化する

<p>- Core Web Vitals を測定する<br /> - Largest Contentful Paint の要素を見つける <br /> - LCP 改善のためにプリロードする <br /> - Cumulative Layout Shift に影響を与える要素を見つける <br /> → サイズ指定のない画像<br /> → 広告<br /> → non-composited アニメーション <br /> - First Input Delay / Total Blocking Time / Long Tasks をデバッグする</p>

[alstjr7375]

<p>関連する画像最適化の方法<br /> https://smashingmagazine.com/2021/04/… /> <br /> 要約したツイート<br /> https://twitter.com/addyosmani/status/1388031656355794945</p>;

[xguru]

<p>Google、検索結果の順位にページ エクスペリエンス(Page Experience)指標を導入 https://ja.news.hada.io/topic?id=2197<br /> - Core Web Vitals<br /> → LCP : Largest Contentful Paint<br /> → FID : First Input Delay<br /> → CLS : Cumulative Layout Shift<br /> <br /> Lighthouse 6.0 リリース https://ja.news.hada.io/topic?id=2122<br /> → LCP、CLS、TBTメトリクスを追加<br /> <br /> Cumulative Layout Shift (CLS) とは何か？ https://ja.news.hada.io/topic?id=1697<br /> → 画像/広告の遅い読み込み、非同期動作、動的なDOM変更などによって、Webページのレイアウトがどれだけ変化するかを測定<br /> → ユーザーの誤クリックを誘発しうる視覚的な不安定性をチェックする、ユーザー中心のパフォーマンス指標</p>