Optimising Largest Contentful Paint – CSS Wizardry

28 March, 2022 Optimising Largest Contentful Paint Written by Harry Roberts on CSS Wizardry. Table of Contents Solve Everything Beforehand Optimise Your LCP Candidate Avoid Image-Based LCPs Use the Best Candidate Demos <img> Elements <picture> and <source /> <image> in <svg> <video> Elements’ poster Attribute background-image: url(); Getting Around background-image Issues Summary Don’t Shoot Yours

[hc0001]

LCP を最適化するためにできること。初期ロードに関連する TTFB などの改善を尽くす。<img> 要素や <video> 要素の poster 属性、CSS の background-image: url(); 指定など、LCP の対象が画像になるのを避け、テキストで代替する。