什么是LCP
LCP是最大內(nèi)容繪制的簡稱厚满。LCP是用來測量感知加載速度。感知加載速度是以用戶為中心的重要指標(biāo)。因為該項指標(biāo)會在頁面的主要內(nèi)容基本加載完成時邦鲫，在頁面加載時間軸中標(biāo)記出相應(yīng)的點，迅捷的LCP有助于讓用戶確信頁面時有效的神汹。以前的指標(biāo)測量比如load(加載)或者DOMContentLoad(DOM內(nèi)容加載完畢)并不是很好庆捺，因為這些指標(biāo)并不一定與用戶看到的內(nèi)容相對應(yīng)。而向First Contentful Paint 首次內(nèi)容的繪制(FCP)這類以用戶為中心的新指標(biāo)只會捕獲加載最開始的部分屁魏。如果某個頁面顯示時一段啟動動畫或者加載之時滔以，那么這些時刻與用戶的關(guān)聯(lián)性并不大。First Meaningful Paint 首次有效繪制（FMP）和Speed Index速度指數(shù)（SI）氓拼，這些指標(biāo)能夠捕獲到更多初始后的加載速度你画，但是這些指標(biāo)復(fù)雜抵碟，難以理解，而且容易出錯坏匪。
LCP指標(biāo)會根據(jù)頁面首次開始加載的時間點來報告可視區(qū)域可見的最大圖像或者文本完成渲染的相對時間.良好的LCP的時間時2.5拟逮，較差的值為4.0s.最大內(nèi)容的繪制考量的元素類型為
- img元素
- 內(nèi)嵌套在svg元素內(nèi)的image元素
- video 元素（使用封面圖像）
- 通過url函數(shù)加載的背景圖片的元素
- 包含文本節(jié)點或者其他行內(nèi)級文本元素的子元素的塊級元素
如何確定一個元素的大小
報告給最大內(nèi)容繪制的元素大小通常時用戶在可視區(qū)域可見的大小，如果元素延伸到可視區(qū)域之外适滓，或者任何元素被剪裁或者包含不可見的溢出唱歧，那么這部分不計入元素的帶線啊哦。對于在原始尺寸之上經(jīng)過調(diào)整的圖像元素粒竖，報告給指標(biāo)的元素大小為可見尺寸或者原始尺寸颅崩。
何時報告最大內(nèi)容繪制
網(wǎng)頁通常時分階段加載的，因此蕊苗，頁面上最大元素也可能會發(fā)生變化沿后。為了應(yīng)對這種潛在的變化，瀏覽器會繪制第一幀立即發(fā)送一個largest-contentful-paint類型的PerformanceEntry朽砰，用于識別最大內(nèi)容元素尖滚，但是，在渲染后續(xù)幀之后瞧柔，瀏覽器會在最大內(nèi)容元素發(fā)生變化時候分發(fā)另一個PerfornacneFanceEntry漆弄。需要主要的是，一個元素只能在渲染完成并且對用戶可見之后才視為最大元素造锅，尚未加載點額元素不能視為渲染完成撼唾。在字體阻塞期使用網(wǎng)頁字體的文本節(jié)點也是這樣。在這種情況下哥蔚，較小的元素可能會被報告稱最大元素倒谷，但一旦更大的元素完成渲染，就會通過另外一個PerformanceEntry對象進(jìn)行報告
如何處理元素布局和元素大小的更改
為了使計算和分發(fā)新性能條目的性能開銷保持在較低的水平糙箍，對元素大小或者位置的更改不會生成新的LCP候選對象渤愁，只有元素在可視區(qū)域的初始化大小和位置會納入考量范圍。也就是說深夯，最初在屏幕外完成渲染抖格，然后過濾到屏幕上的圖像可能不會得到報告，這也意味著最初可視區(qū)域內(nèi)進(jìn)行渲染咕晋，然后被推出到可視區(qū)域外的元素人講報告其在可視區(qū)域的初始化大小
如何改進(jìn)LCP
LCP主要受四個因素影響
- 緩慢的服務(wù)器響應(yīng)速度
- Javascript和css渲染阻塞
- 資源加載速度
- 客戶端渲染
名詞解是
- FCP 最大內(nèi)容的渲染時間
- FMP 主要內(nèi)容的渲染時間
- SI 屏幕可視之后的渲染速度
