什麼是LCP？ Largest Contentful Paint 最大內容繪製(LCP)

最大內容繪製 (LCP) 是測量感知載入速度的一個以使用者為中心的重要指標，因為該指標會在頁面的主要內容基本載入完成時，在頁面載入時間軸中標記出對應的點，迅捷的LCP 有助於讓使用者確信頁面是有效的。

長久以來，對於網頁開發者來說，測量網頁主要內容的載入速度和內容對使用者的顯示速度一直是一個挑戰。

諸如load（載入）或DOMContentLoaded（DOM 內容載入完畢）這樣的舊有指標並不是很好，因為這些指標不一定與使用者在螢幕上看到的內容相對應。而像First Contentful Paint 首次內容繪製(FCP)這類以使用者為中心的較新效能指標只會捕捉載入體驗最開始的部分。如果某個頁面顯示的是一段啟動畫面或載入指示，那麼這些時刻與使用者的關聯性並不大。

我們以往推薦過一些性能指標，例如First Meaningful Paint 首次有效繪製(FMP)和Speed Index 速度指數(SI) （兩個指標都包含在燈塔工具中），這些指標有助於捕捉到更多初始繪製後的載入體驗，但這些指標十分複雜、難以解釋，而且常常出錯，也就意味著這些指標仍然無法識別出頁面主要內容加載完畢的時間點。

有時候簡勝於繁。根據W3C Web 效能工作小組的討論以及Google 進行的研究，我們發現更準確地測量頁面主要內容載入完畢的時間點的方法是查看最大元素完成渲染的時間點。

什麼是LCP？

最大內容繪製(LCP) 指標會根據頁面首次開始載入的時間點來報告可視區域內可見的最大圖像或文字區塊完成渲染的相對時間。

怎麼算是良好的LCP 分數？

為了提供良好的使用者體驗，網站應該努力將最大內容繪製控制在2.5 秒或以內。為了確保您能夠在大部分用戶的訪問期間達成建議目標值，一個良好的測量閾值為頁面加載的第75 個百分位數，且該閾值同時適用於行動和桌面設備

如需詳細了解這些建議值背後的研究和方法論，請參閱：定義核心Web 指標的指標閾值

哪些元素在考慮範圍內？

根據目前最大內容繪製API中的規定，最大內容繪製考量的元素類型為：

img元素
內嵌在svg元素內的image元素
video元素（使用封面圖片）
透過url()函數（而非使用CSS 漸變）載入的帶有背景圖像的元素
包含文字節點或其他行內級文字元素子元素的區塊級元素。

請注意，為了在初始階段保持簡潔，我們有意將元素限制在這幾個有限的類型中。隨著研究的深入，未來可能會添加其他元素（例如svg 、 video）。

如何決定一個元素的大小？

報告給最大內容繪製的元素大小通常是使用者在視覺區域內可見的大小。如果有元素延伸到可視區域之外，或者任何元素被剪裁或包含不可見的溢出，則這些部分不計入元素大小。

對於在原始尺寸上方經過調整的影像元素，報告給指標的元素大小為可見尺寸或原始尺寸，以尺寸較小者為準。例如，遠小於其原始尺寸的縮小影像將僅報告影像的顯示尺寸，而拉伸或放大成更大尺寸的影像將僅報告影像的原始尺寸。

對於文字元素，指標僅考慮其文字節點的大小（包含所有文字節點的最小矩形）。

對於所有元素，透過CSS 設定的任何邊距、填滿或邊框都不在考慮範圍內。

確定哪些文字節點屬於哪些元素有時會很棘手，尤其是對於子元素既包括行內元素和純文字節點，又包括區塊級元素的一部分元素。關鍵點在於每個文字節點都屬於（且僅屬於）其最近的區塊級祖先元素。用規範術語來解釋：每個文本節點都屬於生成其包含區塊的對應元素。

何時報告最大內容繪製？

網頁通常是分階段載入的，因此，頁面上的最大元素也可能會發生變化。

為了因應這種潛在的變化，瀏覽器會在繪製第一幀後立即分發一個largest-contentful-paint類型的PerformanceEntry，用於識別最大內容元素。但是，在渲染後續幀之後，瀏覽器會在最大內容元素變更時分發另一個PerformanceEntry。

例如，在一個帶有文字和首圖的網頁上，瀏覽器最初可能只渲染文字部分，並在此期間分發一個largest-contentful-paint條目，其element屬性通常會引用一個p或h1 。隨後，一旦首圖完成加載，瀏覽器就會分發第二個largest-contentful-paint條目，其element屬性將引用img 。

需要注意的是，一個元素只有在渲染完成並且對使用者可見後才能被視為最大內容元素。尚未載入的圖像不會被視為"渲染完成"。在字體阻塞期使用網頁字體的文字節點也是如此。在這種情況下，較小的元素可能會被報告為最大內容元素，但一旦更大的元素完成渲染，就會通過另一個PerformanceEntry對象進行報告。

除了延遲載入圖像和字體之外，頁面可能會在新內容可用時向DOM 添加新元素。如果有任何一個新元素大於先前的最大內容元素，則瀏覽器也會報告一個新的PerformanceEntry。

如果目前的最大內容元素從視覺區域移除（甚至從DOM 移除），那麼除非有一個更大的元素完成渲染，否則該元素將持續作為最大內容元素。

在Chrome 88 之前，已移除的元素不會被視為最大內容元素，而移除目前候選對象時會觸發瀏覽器分發一個新的largest-contentful-paint條目。但是，該項指標已針對流行的使用者介面模式（例如經常將DOM 元素移除的圖像輪播）進行了更新，進而更準確地反映用戶體驗。請參閱更新日誌，了解更多詳情。

當使用者與頁面互動（透過輕觸、捲動或按鍵）時，瀏覽器將立刻停止報告新條目，因為使用者互動通常會改變使用者可見的內容（滾動操作時尤其如此）。

出於分析目的，您應該僅向您的分析服務報告最近一次分發的PerformanceEntry。

由於使用者可以在背景標籤中開啟頁面，而使用者聚焦該標籤的時間點可能遠遠晚於第一次載入頁面的時間點，因此在使用者對焦該標籤之前可能不會進行最大內容繪製。

載入時間vs. 渲染時間

出於安全考慮，對於缺少Timing-Allow-Origin標頭的跨域影像來說，影像的渲染時間戳不會被公開。相反，只有圖像的載入時間會被公開（因為載入時間已經透過其他許多網頁API 得到了公開）。

下方的使用範例說明如何處理渲染時間不可用的元素。但是，我們始終建議您在可能的情況下設定好Timing-Allow-Origin標頭，從而使您的指標更加準確。

如何處理元素佈局和元素大小變更？

為了使計算和分發新效能條目的效能開銷保持較低的水平，對元素大小或位置的變更不會產生新的LCP 候選物件。只有元素在可視區域內的初始大小和位置會被納入考慮範圍。

也就是說，最初在螢幕外完成渲染，然後過渡到螢幕上的圖像可能不會得到報告。這也意味著最初在可視區域內進行渲染，然後被推出可視區域外的元素仍將報告其在可視區域內的初始大小。

範例

以下範例展示了一些熱門網站上出現最大內容繪製的時間點：

在上方的兩個時間軸中，最大元素會隨內容載入而變化。在第一個範例中，新內容被加進DOM，並因此使最大元素發生了變化。在第二個範例中，由於佈局的改變，先前的最大內容從可視區域中被移除。

雖然延遲載入的內容通常比頁面上已有的內容更大，但實際情況並非一定如此。接下來的兩個範例顯示了在頁面完全載入之前出現的最大內容繪製。

在第一個範例中，Instagram 標誌載入得相對較早，即使其他內容隨後陸續顯示，但標誌始終是最大元素。在Google 搜尋結果頁面範例中，最大元素是一段文本，這段文本在所有圖像或標誌完成載入之前就顯示了出來。由於所有單一圖像都小於這段文字，因此這段文字在整個載入過程中始終是最大元素。

在Instagram 時間軸的第一幀中，您可能注意到了相機標誌的周圍沒有綠框框出。這是因為該標誌是一個svg元素，而svg元素目前不被視為LCP 候選對象。首個LCP 候選對像是第二幀中的文字。

如何測量LCP

LCP 可以進行實驗室測量或實際測量，並且可以在以下工具中使用：

實測工具

實驗室工具

在JavaScript 中測量LCP

要在JavaScript 中測量LCP，您可以使用最大內容繪製API 。以下範例說明如何建立一個PerformanceObserver來偵聽largest-contentful-paint條目並記錄在控制台中。

new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP candidate:', entry.startTime, entry); } }).observe({type: 'largest-contentful-paint', buffered: true});

上述程式碼說明如何將largest-contentful-paint條目記錄在控制台中，但在JavaScript 中測量LCP 要更為複雜。詳情請見下文：

在上方的範例中，每筆記錄在案的largest-contentful-paint條目代表目前的LCP 候選對象。通常情況下，最近條目發射的startTime值就是LCP 值，但情況並非總是如此。並不是所有的largest-contentful-paint條目都能夠用來測量LCP。

以下部分列出了API 報告的內容與指標計算方式的差異。

指標和API 之間的差異

API 會為在背景標籤中載入的頁面分發largest-contentful-paint條目，但在計算LCP 時應忽略這些頁面。
API 在頁面轉移到後台後，會繼續分發largest-contentful-paint條目，但在計算LCP 時應忽略這些條目（只有當頁面始終處於前台時才考慮元素）。
當頁面透過往返緩存恢復時，API 不會報告largest-contentful-paint條目，但在這些情況下應該測量LCP，因為這對使用者來說是多次不同的頁面存取體驗。
API 不考慮iframe 中的元素，但要正確測量LCP，您應該考慮這些元素。子框架可以使用API 將這些元素的largest-contentful-paint條目報告給父框架來進行聚合。

開發者不必記住所有這些細微差異，而是可以使用web-vitals JavaScript 函式庫來測量LCP，庫會自行處理這些差異（在可能的情況下）：

import {getLCP} from 'web-vitals'; // 當LCP 可用時立即進行測量和記錄。 getLCP(console.log);

您可以參考getLCP()的原始程式碼，以了解如何在JavaScript 中測量LCP 的完整範例。

在某些情況下（例如跨域iframe），LCP 無法在JavaScript 中進行測量。詳情請參閱web-vitals庫的限制部分。