Largest Contentful Paint(LCP)指的是首屏最大內(nèi)容版塊的渲染時(shí)間,它是一個(gè)核心的網(wǎng)站性能指標(biāo),用于測(cè)量顯示器首屏中最大的內(nèi)容元素何時(shí)可見。

導(dǎo)致LCP差的常見原因是服務(wù)器響應(yīng)時(shí)間長。

一個(gè)網(wǎng)頁上的內(nèi)容各有各的格式,在加載過程中它們通常是分階段加載的,所以導(dǎo)致了Largest Contentful Paint元素可能會(huì)發(fā)生變化。

為了處理這種潛在的變化,瀏覽器在繪制第一幀后立即派出一個(gè)performanceEntry類型,Largest Contentful Paint將該類型標(biāo)識(shí)為最大的內(nèi)容元素。

但是,在染后續(xù)幀內(nèi)容之后,它將performanceEntny在最大的內(nèi)容元素發(fā)生更改的時(shí)候再次調(diào)度另外一個(gè)幀。

例如,在具有文本和圖像的頁面上,瀏覽器最初可能只是渲染文本,此時(shí),瀏覽器將調(diào)度一個(gè)Largest Contentful Paint條目,該條目的Element屬性可能引用<p>或<h1>。

一旦圖片加載完成,Largest Contentful Paint便會(huì)分派第二個(gè)條目,并且其Element屬性將引用<img>。

注意,一個(gè)元素一旦在頁面上呈現(xiàn)并對(duì)用戶可見,就只能被認(rèn)為是最大的內(nèi)容元素。

尚未加載的圖像則不被視為“已渲染”。

在字體塊加載期間,文本節(jié)點(diǎn)也不使用Web字體。

在這種情況下,較小的元素可能會(huì)報(bào)告為最大的內(nèi)容元素,但是較大的元素一旦完成渲染,就會(huì)通過另一個(gè)PerformanceEntry對(duì)象進(jìn)行報(bào)告。

除了延遲加載圖像和字體外,頁面可能會(huì)在新內(nèi)容可用時(shí)向DOM添加新元素。

如果這些新元素中的任何一個(gè)大于先前最大的有爭議元素,那么PerformanceEntny還將報(bào)告一個(gè)新元素。

如果當(dāng)前認(rèn)為的最大內(nèi)容元素從視口中刪除(甚至從DOM中刪除),除非呈現(xiàn)較大的元素,否則它將仍然是最大內(nèi)容元素。