最大內(nèi)容繪制 (LCP) 是在視口中加載單個最大可見元素所需的時間。它代表正在視覺加載的網(wǎng)站，是 Google 用于衡量頁面體驗的三個 CWV指標之一。

? ? ? ? ?

用戶對您網(wǎng)站的第一印象是它的加載速度。

最大的元素通常是特色圖像或 <h1> 標簽。但它也可能是以下任何一個。

• <img> 元素

• <svg> 元素內(nèi)的 <image> 元素

• <video> 元素內(nèi)的圖像

• 使用 url() 函數(shù)加載背景圖像

• 文本塊

將來可能會添加 <svg> 和 <video>。

計算時，不會考慮視口之外的任何內(nèi)容或任何溢出。如果圖像占據(jù)整個視口，則不會考慮將其用于 LCP。

讓我們看看您的 LCP 應該有多快以及如何改進它。

? ? ? ? ? ?

目錄

l什么是良好的 LCP 值？

l如何測量 LCP

l如何提高LCP

什么是良好的 LCP 值？ ?

良好的 LCP 值應小于 2.5 秒，并且應基于 Chrome 用戶體驗報告 (CrUX) 數(shù)據(jù)。這是來自您網(wǎng)站上并選擇共享此信息的 Chrome 實際用戶的數(shù)據(jù)。您需要 75% 的頁面訪問在 2.5 秒或更短的時間內(nèi)加載。

? ? ? ? ?

您的頁面可能會被歸類為以下類別之一：

• 良好：<=2.5s

• 需要改進：>2.5s 且 <=4s

• 較差：>4s

  
  

? ? ? ? ?

LCP數(shù)據(jù)?? ?

截至 2023 年 4 月，57.1% 的站點處于良好的 LCP 范圍內(nèi)。這是整個站點的平均值。正如我們提到的，您需要 75% 的頁面訪問在 2.5 秒或更短的時間內(nèi)加載才能在此處顯示為“良好”。

? ? ? ? ?

LCP 是人們最努力改進的CWV。

? ? ? ? ?

當我們對 Core Web Vitals 進行研究時，我們發(fā)現(xiàn)與桌面設備相比，移動設備上的頁面不太可能具有良好的 LCP 值。

? ? ? ? ?

LCP 閾值似乎幾乎不可能在較慢的連接上傳遞。

如何測量 LCP ?

您需要了解幾種不同的 LCP 測量方法：現(xiàn)場數(shù)據(jù)和實驗室數(shù)據(jù)。?

? ? ? ? ?

現(xiàn)場數(shù)據(jù)來自Chrome 用戶體驗報告 (CrUX)，這是來自選擇共享數(shù)據(jù)的 Chrome 真實用戶的數(shù)據(jù)。這可以讓您更好地了解不同網(wǎng)絡條件、設備、緩存等情況下的真實 LCP 性能。這也是 Google 的Core Web Vitals實際衡量的內(nèi)容。?

? ? ? ? ?

實驗室數(shù)據(jù)基于相同條件下的測試，以使測試具有可重復性。Google 不會將其用于 Core Web Vitals，但它對于測試很有用，因為 CrUX/現(xiàn)場數(shù)據(jù)是 28 天的滾動平均值，因此需要一段時間才能看到更改的影響。

? ? ? ? ?

測量 LCP 的最佳工具取決于您想要的數(shù)據(jù)類型（實驗室/現(xiàn)場）以及您是否想要將其用于一個或多個 URL。

測量單個 URL 的 LCP ?

Pagespeed Insights會提取您無法在 CrUX 數(shù)據(jù)集中查詢的頁面級字段數(shù)據(jù)。它還基于Google Lighthouse為您運行實驗室測試，并為您提供原始數(shù)據(jù)，以便您可以將頁面性能與整個網(wǎng)站進行比較。

測量多個 URL 或整個站點的 LCP ?

您可以在 Google Search Console 中獲取 CrUX 數(shù)據(jù)，這些數(shù)據(jù)分為良好、需要改進和較差的類別。

? ? ? ? ?

? ? ? ? ?

單擊其中一個問題即可查看受影響的頁面組的詳細信息。這些組是具有相似值且可能使用相同模板的頁面。您在模板中進行一次更改，該更改將在組中的各個頁面上得到修復。

? ? ? ? ?

如果您想要大量的實驗室數(shù)據(jù)和現(xiàn)場數(shù)據(jù)，獲得這些數(shù)據(jù)的唯一方法是通過 PageSpeed Insights API。您可以通過 Ahrefs 的站點審核輕松連接到它，并獲取詳細說明您的績效的報告。

? ? ? ? ?

? ? ? ? ?

請注意，顯示的 Core Web Vitals 數(shù)據(jù)將由您在設置期間為爬網(wǎng)選擇的用戶代理確定。如果您從移動設備抓取，您將從 API 獲取移動 CWV 值。

如何提高LCP ?

在 PageSpeed Insights 中，LCP 元素將在“診斷”部分中指定。另請注意，有一個用于選擇 LCP 的選項卡，該選項卡僅顯示與 LCP 相關的問題。這些是您在實驗室測試中遇到的需要解決的問題。

? ? ? ? ?

? ? ? ? ?

有很多與 LCP 相關的問題，使其成為最難改進的指標。

? ? ? ? ?

一般理論聽起來很簡單。更快地給我最大的元素。但實際上，這可能會變得相當復雜。某些文件可能需要先加載其他文件，或者瀏覽器中可能存在優(yōu)先級沖突。您可能解決了很多問題，但實際上并沒有看到任何改進，這可能會令人沮喪。

? ? ? ? ?

如果您不太懂技術并且不想雇用某人，請為您使用的系統(tǒng)尋找性能或頁面速度優(yōu)化插件、模塊或軟件包。您可以使用以下信息作為您可能需要的功能的指南。

以下是改進 LCP 的幾種方法：

1. 找到您的 LCP 元素? ?

在 PageSpeed Insights 中，您可以單擊“診斷”部分中的“最大內(nèi)容繪制元素”，它將識別您的 LCP 元素。?

? ? ? ? ?

2. 優(yōu)先加載資源 ?

要通過 LCP 檢查，您應該優(yōu)先考慮如何在關鍵渲染路徑中加載資源。我的意思是您想要重新安排下載和處理資源的順序。?

? ? ? ? ?

您應該首先加載 LCP 元素所需的資源以及首屏內(nèi)容所需的任何其他資源。在為用戶加載最初可見的元素之后，然后加載其余的元素。

? ? ? ? ?

許多網(wǎng)站只需添加一些早期提示或預加載語句（例如主圖像以及必要的樣式表和字體）即可。讓我們看看如何優(yōu)化各種資源類型。

圖像：Fetchpriority=”high” ?

如果您不需要該圖像，最有效的解決方案就是刪除它。如果您必須擁有圖像，我建議優(yōu)化尺寸和質(zhì)量以使其盡可能小。

? ? ? ? ?

您還可以使用早期提示。Fetchpriority=”high” 可以用在 ?或 ? ? ? 標簽上，告訴瀏覽器盡早獲取圖像。這意味著它將提前一點顯示。

? ? ? ? ?

早期提示并不適用于所有瀏覽器，因此您可能還需要預加載圖像。這將提前一點開始下載該圖像，但不會早于 fetchpriority=“high”。?

? ? ? ? ?

響應式圖像的預加載語句如下所示：

<link rel="preload" as="image" href=“cat.jpg"imagesrcset=“cat_400px.jpg 400w,cat_800px.jpg 800w, cat_1600px.jpg 1600w"imagesizes="50vw">

您甚至可以同時使用 fetchpriority=”high” 和預加載！

圖像：loading="lazy"

您應該延遲加載不需要立即使用的任何圖像。這會在流程稍后或用戶即將看到圖像時加載圖像。你可以像這樣使用loading=“l(fā)azy”：

<img src=“cat.jpg" alt=“cat" loading="lazy">

不要延遲加載首屏圖像！

內(nèi)聯(lián)CSS

你應該縮小你擁有的所有 CSS。如果可能的話，也刪除所有未使用的 CSS。

您應該做的另一件主要事情是內(nèi)聯(lián)關鍵 CSS。其作用是獲取加載用戶立即看到的內(nèi)容所需的 CSS 部分，然后將其直接應用到 HTML 中。下載 HTML 后，加載用戶看到的內(nèi)容所需的所有 CSS 都已可用。

CSS：rel="preload"

對于任何不重要的額外 CSS，您將需要在此過程中稍后應用它。您可以繼續(xù)使用 preload 語句開始下載 CSS，但直到稍后使用 onload 事件才能應用 CSS。這看起來像：

字體

我將在這里給你幾個選擇：

1.好的選擇：預加載字體。如果您使用同一服務器來擺脫連接就更好了。

2.更好的選擇：Font-display: optional。這可以與預加載語句配對。這將為您的字體提供一小段加載時間。如果字體沒有及時加載，初始頁面加載將僅顯示默認字體。然后，您的自定義字體將被緩存并顯示在后續(xù)頁面加載中

3.最好的選擇：只使用系統(tǒng)字體。無需加載任何內(nèi)容，因此不會有任何延遲。

JavaScript：預渲染，內(nèi)聯(lián)，預加載

我們已經(jīng)討論過刪除未使用的 JavaScript 并縮小您擁有的內(nèi)容。如果您使用的是 JavaScript 框架，那么您可能需要預渲染或服務器端渲染 (SSR)頁面。

您還可以內(nèi)聯(lián)早期所需的 JavaScript。這與 CSS 部分中描述的方式相同，您可以從 JavaScript 文件中移動部分內(nèi)容，而不是使用 HTML 加載。

另一種選擇是預加載 JavaScript 文件，以便您更早地獲取它們。僅當加載首屏內(nèi)容所需的資產(chǎn)或某些功能依賴于此 JavaScript 時才應執(zhí)行此操作。

JavaScript：Defer, Async

任何不需要立即使用的 JavaScript 都應該稍后加載。有兩種主要方法可以做到這一點——延遲(Defer)和異步(Async)屬性。這些屬性可以添加到您的腳本標簽中。

通常，正在下載的腳本在下載和執(zhí)行時會阻塞解析器。Async(異步)將使解析和下載同時發(fā)生，但在腳本執(zhí)行期間仍然阻止解析。Defer(Defer)?在下載過程中不會阻止解析，只會在 HTML 解析完成后執(zhí)行。

你應該使用哪個？我傾向于異步。

例如，我傾向于在分析標簽上使用異步，以便記錄更多用戶。您需要將不需要的任何內(nèi)容推遲到以后或沒有依賴項。添加屬性非常容易。

看看這些例子：

普通的：

<script src="https://www.domain.com/file.js"></script>

異步：

<script src="https://www.domain.com/file.js" async></script>

延遲：

<script src="https://www.domain.com/file.js" defer></script>

3. 縮小文件大小

如果您可以刪除任何文件或減小其大小，那么您的頁面加載速度將會更快。這意味著您可能想要刪除任何未使用的文件或未使用的部分代碼。

如何進行此操作在很大程度上取決于您的設置，但刪除文件不需要的部分的過程通常稱為tree shake。

這通常是通過使用 Webpack 或帶有 JavaScript 框架的 Grunt 或有時甚至是 WordPress 等系統(tǒng)的自動化流程來完成的，但大多數(shù)常見的 CMS 系統(tǒng)可能不支持這一點。

您可能想跳過此步驟或查看是否有任何插件為您的系統(tǒng)提供此選項。

為了使文件更小，您通常需要壓縮它們。

幾乎用于構(gòu)建網(wǎng)站的每種文件類型都可以壓縮，包括 CSS、JavaScript、圖像和 HTML。此外，幾乎每個系統(tǒng)和服務器都支持壓縮。

它通常在服務器或 CDN 級別完成，但有些插件支持此功能，例如 WordPress 的 WP Rocket。

4. 為文件提供更貼近用戶的服務

信息的傳播需要時間。距離服務器越遠，傳輸數(shù)據(jù)所需的時間就越長。除非您服務的地理區(qū)域較小，否則擁有CDN是個好主意。

CDN 為您提供了一種更貼近用戶的方式來連接和服務您的網(wǎng)站。這就像在世界各地的不同地點擁有服務器的副本一樣。

5. 將資源托管在同一臺服務器上

當您第一次連接到服務器時，有一個過程會導航網(wǎng)絡并在您和服務器之間建立安全連接。

這需要一些時間，并且您需要建立的每個新連接在經(jīng)歷相同的過程時都會增加額外的延遲。如果您將資源托管在同一臺服務器上，則可以消除這些額外的延遲。

如果您無法使用同一服務器，您可能需要使用預連接或DNS 預取來提前啟動連接。瀏覽器通常會在開始連接之前等待 HTML 完成下載。但通過預連接或 DNS 預取，它會比正常情況更早開始。請注意，DNS 預取比預連接有更好的支持。

對于您想要盡早獲取的每個資源，您可以添加一個新語句，例如：

<link rel="preconnect" ><link rel="dns-prefetch"  />

6.?使用緩存

當您緩存資源時，系統(tǒng)會在第一次頁面視圖時下載這些資源，但在后續(xù)頁面視圖時不需要下載這些資源。有了可用的資源，額外的頁面加載將會快得多。

在下面的瀑布圖中查看第二頁加載時下載的文件數(shù)量。

頁面首次加載：

第二次加載頁面：

如果可以的話，也可以在 CDN 上緩存。您的緩存時間應該是您覺得舒服的時間。

理想的設置是緩存很長一段時間，但在對頁面進行更改時清除緩存。

7. 其他

您可能還需要了解一些其他技術來幫助提高性能。其中包括推測性預渲染、簽名交換和HTTP/3。

最后的想法

有沒有更好的指標來衡量可見負載？目前我沒有看到任何新的東西出現(xiàn)。我們已經(jīng)看到了一些嘗試測量負載的演變。

Load 和 DOMContentLoaded 并不能真正告訴您用戶看到的內(nèi)容。First Contentful Paint (FCP) 是加載體驗的開始。第一含義繪制 (FMP) 和速度指數(shù) (SI) 很復雜，并且不能真正識別主要內(nèi)容何時加載。

翻譯作品，原作者：Patrick Stox

更多文章：

Google SEO: 如何使用 PageSpeed Insights

Google SEO: 首次輸入延遲 (FID) – 定義、測量和修復方法

Google SEO: 累積布局偏移 (CLS) – 定義、測量以及如何修復

Core Web Vitals ：頁面速度現(xiàn)在對 SEO 更為重要