最大的內容油漆解釋：如何改善你的時間

為如何改進您網站上的 Largest Contentful Paint 而苦惱？ 或者不確定 Largest Contentful Paint 的含義以及為什麼您一開始就需要關心它？

無論您從哪裡開始，這篇文章都適合您，因為您將學習關於 Largest Contentful Paint 的所有知識。

這包括 Largest Contentful Paint 的含義、重要性、衡量方式以及改進方式。

您可以使用下面的目錄根據您當前的知識水平跳轉到​​特定部分。 或者，繼續閱讀以從頭開始。

什麼是 Largest Contentful Paint (LCP)？ 解釋最大的內容繪畫意義

Largest Contentful Paint 是一種性能指標，用於衡量加載網頁主要內容所需的時間。

Largest Contentful Paint 是 Google Core Web Vitals 指標的一部分，還有 Cumulative Layout Shift (CLS) 和 First Input Delay (FID)。

在更技術層面上，Largest Contentful Paint 測量從用戶啟動頁面加載到最大文本塊、圖像或視頻在視口中呈現所需的時間。

就 LCP 而言，“主要內容”是什麼意思？

好吧，主要內容將取決於所討論的實際頁面，但它可以是以下任何一種：

• 文本——更具體地說，任何包含文本節點或其他行內文本元素的塊級元素。
• Image – <img> 元素內的元素或 <svg> 元素內的 <image> 元素。
• 視頻——任何 <video> 元素（它使用海報圖像）。
• 具有背景圖像的元素——僅當通過 CSS url() 函數加載時（它不適用於 CSS 漸變）。

在這篇文章的後面，您將學習如何為您網站上的任何頁面找到確切的 Largest Contentful Paint 元素。

Largest Contentful Paint 與 First Contentful Paint

您可能會遇到的一個常見問題是 Largest Contentful Paint 與 First Contentful Paint 之間的區別是什麼，這是另一個常見的性能指標。

雖然這兩個術語相似，但主要區別在於 Largest Contentful Paint 衡量頁面“主要內容”加載所需的時間，而 First Contentful Paint 衡量“第一個對象”加載所需的時間（無論是否這是主要內容）。

基本上：

• LCP = 僅主要內容
• FCP = 第一條內容，無論該內容是什麼

因此，您的 LCP 時間幾乎總是略高於 FCP 時間，因為“主要內容”元素通常不是最先加載的。

為什麼您網站的最大內容繪製時間很重要？

您網站的 Largest Contentful Paint 時間很重要的主要原因有兩個：

1. 用戶體驗
2. 搜索引擎優化

用戶體驗

您應該關心站點的 Largest Contentful Paint 時間的最大原因是該指標可以很好地代表了解用戶在站點性能方面的體驗。

大多數用戶不關心您的網站完全加載每個腳本和元素需要多長時間。 相反，他們關心他們需要多長時間才能開始從您的網站獲得價值。

Largest Contentful Paint 通過查看加載主要內容需要多長時間來很好地嘗試衡量“價值”時刻。

如果您優化您的站點以實現快速的 Largest Contentful Paint 時間，您可以非常自信地為用戶提供可靠的站點體驗，至少在性能方面（您還需要一個客戶友好的設計和良好的可用性）。

當然，這並不意味著您應該忽略其他性能指標。 我們始終建議全面了解您網站的性能和瓶頸，這就是我們創建自己的應用程序性能監控 (APM) 工具的原因，如果您使用 Kinsta 託管 – Kinsta APM，該工具可免費使用。

搜索引擎優化 (SEO)

在搜索引擎優化方面，Largest Contentful Paint 是谷歌核心網絡生命指標三重奏的一部分，谷歌開始在其 2022 年頁面體驗算法更新中將其用作 SEO 排名因素。

這意味著 Largest Contentful Paint 時間不佳可能會拖累您的網站在 Google 搜索結果中的表現。

雖然內容質量/相關性和反向鏈接等其他因素仍然在您的網站排名中發揮更大的作用，但重要的是要優化您網站的 Largest Contentful Paint 時間，以確保您從 SEO 工作中獲得最大收益。

什麼會影響最大的內容繪畫分數？

兩種“主要”類型的問題會影響頁面的 Largest Contentful Paint 時間：

1. 服務器響應初始 HTML 文檔需要多長時間。
2. 加載實際 LCP 資源需要多長時間。

第一類問題涉及服務器響應時間，即首字節時間 (TTFB)。 在用戶的瀏覽器甚至可以考慮加載主要內容之前，它首先需要從服務器獲得響應。

以下是影響這一點的一些常見問題：

• 不使用頁面緩存——不使用頁面緩存會強制服務器在響應 HTML 文檔之前做更多的“工作”。
• 慢速託管——無論您做什麼，慢速託管服務提供商的 TTFB 總是很慢。
• 不使用 CDN – 內容分發網絡 (CDN) 可以通過從其全球網絡提供頁面來加速 TTFB，而不是要求用戶從您站點的原始服務器下載它們。

在您站點的服務器交付初始 HTML 文檔後，在加載實際主要內容元素時可能會出現進一步的瓶頸。

以下是影響這一點的一些常見問題：

• 呈現阻塞的 JavaScript 或 CSS（或一般未優化/不必要的代碼） ——如果用戶的瀏覽器在加載主要元素之前需要下載和/或處理不必要的 JavaScript 或 CSS，這將減慢您的 LCP。
• 未優化的圖像——如果 LCP 元素是圖像，使用未優化的圖像會減慢您的時間，因為較大的圖像需要更長的下載時間。
• 未優化的字體加載——如果 LCP 元素是文本，以未優化的方式加載自定義字體會使該文本顯示的時間更長。
• 未壓縮的文件——如果您沒有使用 Gzip 或 Brotli 等壓縮技術，這將使用戶的瀏覽器需要更長的時間來下載您網站的文件。

根據您的站點，您可能會在兩個領域或其中一個領域遇到瓶頸。 您稍後將在本文中了解如何解決所有這些問題。

什麼是良好的最大內容繪畫時間？

Google 將“良好”的最大內容繪製時間定義為低於 2.5 秒。

如果您頁面的 Largest Contentful Paint 時間在 2.5 到 4.0 秒之間，Google 會將其歸類為“需要改進”。 如果您的頁面時間超過 4.0 秒，Google 會將其定義為“差”。

這是來自 Google 的圖形，直觀地顯示了這一點：

如何測量最大含量的油漆：最好的 LCP 測試工具

您可以使用多種工具來測試您網站的 Largest Contentful Paint 性能——讓我們來看看一些最有用的……

PageSpeed 洞察力

PageSpeed Insights 是評估 Largest Contentful Paint 的最佳工具之一，因為它提供了四個有用的信息：

1. 您可以從 Chrome 用戶體驗報告（如果您的網站有足夠的流量可以包含在報告中）中看到您網站與真實用戶的最大內容繪製時間。
2. 您可以運行模擬測試來查看您的站點的性能。
3. Google 會告訴您它用於測試的實際 LCP 元素，這讓您知道要優化哪個元素。
4. Google 將提供有關如何改進 LCP 時間的建議。

下面是如何使用它：

1. 轉到 PageSpeed Insights 網站。
2. 輸入要測試的頁面的 URL。
3. 單擊分析。

然後，Google 會向您顯示移動設備和桌面設備的結果——請確保同時選中這兩項。

要找到 Google 用於計算 LCP 的主要元素，您可以向下滾動到Diagnostics部分並展開Largest Contentful Paint 元素部分：

同樣，確保檢查移動設備和桌面設備，因為每個設備的 LCP 元素可能不同。

Chrome 開發者工具

您還可以使用 Performance 選項卡或其 Lighthouse 審核功能直接從 Chrome 開發人員工具測試 Largest Contentful Paint 時間。 我們建議使用“性能”選項卡，因為它可以為您提供更多信息。

以下是如何開始：

1. 打開您要測試的頁面。
2. 打開 Chrome 開發者工具。
3. 轉到“性能”選項卡。
4. 確保選中Web Vitals框。
5. 單擊重新加載按鈕（如下所示）。

您現在應該看到對您網站的完整分析。

如果將鼠標懸停在網絡選項卡中的 LCP 上，您可以看到時間：

如果將鼠標懸停在Timings選項卡中的 LCP 上，您可以看到實際的 LCP 元素：

谷歌搜索控制台

雖然 Google Search Console 不允許您測試單個頁面的 Largest Contentful Paint 時間，但它對於評估整個網站的性能非常有用。

您網站上的每個頁面都有不同的 LCP 時間，因此您不能只測試您的主頁然後就此收工。

使用 Google Search Console，您將能夠看到您網站上的每個頁面在 Google 的“好”、“需要改進”和“差”分類中的位置。 性能數據來自 Chrome UX 報告，因此它基於真實的用戶數據。

如果您還沒有這樣做，您首先需要使用 Google Search Console 驗證您的網站。

完成後，以下是訪問 LCP 報告的方法：

1. 打開您網站的 Google Search Console。
2. 轉到“體驗”選項卡下的Core Web Vitals 。
3. 單擊移動或桌面圖表旁邊的打開報告。
4. 在為什麼 URL 不被認為是好的部分中查找任何問題。 如果單擊問題，您可以看到有關哪些 URL 導致問題的更多信息。

*確保同時檢查桌面和移動結果，因為每個結果中的數據可能不同。

網頁測試

WebPageTest 是運行模擬性能測試的另一個方便的選項。

與 PageSpeed Insights 不同，WebPageTest 允許您完全自定義各種測試指標，例如測試位置、連接速度、設備等。 這是與其他工具相比使用它的主要好處——它為您提供了更多配置測試的選項。

以下是運行測試的方法：

1. 轉到網頁測試。
2. 添加要測試的頁面 URL。
3. 展開高級配置選項以完全配置您的測試。

在結果頁面上，您將看到 LCP 數據以及大量其他性能指標（包括瀑布分析）。

如何找到最大的內容繪畫元素

如果您想改進 Largest Contentful Paint，準確了解 Google 正在使用哪個元素來計算您的 LCP 時間會很有幫助。

例如，如果您知道 Google 正在使用您的主頁圖片作為主頁上的 LCP 元素，您就會知道如果您想改善主頁的 LCP 時間，就需要找到盡快提供該主頁圖片的方法。

正如我們之前提到的，您可以使用 PageSpeed Insights 或 Chrome 開發者工具找到最大的 Contentful Paint 元素。

確保同時檢查移動和桌面結果，因為您的 LCP 元素在不同設備上可能會有所不同。

如何改進 WordPress（或其他平台）中最大的內容繪製

現在您已經了解了 Largest Contentful Paint 的全部內容，讓我們了解一些有關如何改進 WordPress 中 Largest Contentful Paint 的可行技巧。

雖然我們將重點關注 WordPress 的這些技巧，但所有技巧都是通用的，適用於其他類型的網站。

設置緩存以縮短服務器響應時間

緩存可以減少服務器在將完成的 HTML 文檔傳送到訪問者瀏覽器之前需要執行的處理工作，從而縮短服務器響應時間。

如果您使用 Kinsta 託管 WordPress 網站，則無需擔心配置緩存，因為 Kinsta 會自動為您實施優化的緩存。

如果您在其他地方託管，您可以使用 WP Super Cache 等免費插件或 WP Rocket 等付費插件在您的網站上啟用緩存。

有關更多選項，請查看我們關於最佳 WordPress 緩存插件的帖子。

升級到更快的 WordPress 託管

雖然此列表中的所有策略都可以幫助您縮短 LCP 時間，但絕非拐彎抹角：

如果您使用緩慢、未優化的 WordPress 託管，您的 LCP 時間總是會受到主機質量的限制。

您也許可以讓事情變得更好一些，但如果您的主機速度很慢，您將始終難以實現低於 2.5 秒的 LCP 時間。

如果您想以最簡單的方式改善最大的內容繪畫時間，您可以將您的網站遷移到 Kinsta。 Kinsta 不僅提供性能優化的託管基礎設施，而且我們還有內置功能來處理此列表中的許多其他優化。

這意味著您可以專注於發展您的網站，而不是忙於優化 Largest Contentful Paint 時間。

如果您有興趣，Kinsta 將免費從任何主機遷移無限的網站——在此處了解有關免費遷移的更多信息。

如果您仍然猶豫不決——請先嘗試此列表中的其餘提示。 但是，如果您在完成此列表中的所有操作後仍在苦苦掙扎，那麼您可能只需要更好的託管服務。

使用內容分發網絡 (CDN)

如果沒有 CDN，您網站的所有訪問者都需要從您的託管服務器下載頁面的 HTML 和靜態資產。

如果您的訪問者靠近您的服務器，這通常不是問題。 但是，如果您的訪問者分佈在世界各地，那麼由於訪問者與您網站的服務器之間的物理距離，這可能會降低您的網站速度。

使用 CDN，您可以將站點的靜態資產（甚至站點的已完成 HTML 頁面）分發到 CDN 的全球網絡。 這樣，訪問者就可以從CDN最近的位置下載文件，速度會快很多。

如果您使用 Kinsta 託管，我們建議使用 Kinsta 的邊緣緩存功能以獲得最佳效果。

Kinsta 的邊緣緩存功能通過將您站點的完整 HTML 頁面和靜態資產緩存到 Cloudflare 的全球網絡（而不是像大多數 CDN 解決方案那樣只緩存靜態資產）來工作。

這意味著您網站的訪問者可以從最近的邊緣位置下載完整頁面，從而加快服務器響應時間和加載 LCP 資源所需的時間。

要啟用 Kinsta 的邊緣緩存，請轉到 MyKinsta 中站點儀表板中的邊緣緩存選項卡。

如果您在其他地方託管，您可以使用流行的 CDN 服務（例如 KeyCDN、Bunny、StackPath 等）為您站點的靜態資產設置 CDN。

避免渲染阻塞 JavaScript（延遲或刪除）

呈現阻塞 JavaScript 是在您的主要 LCP 元素之前加載的 JavaScript，即使當時不需要它。

通過延遲加載 LCP 元素，它會減慢您的 LCP 加載時間。

要解決此問題，您可以實施一些策略：

• 如果可能，刪除不必要的 JavaScript。
• 推遲 JavaScript，這樣它就不會阻止加載您網站的主要元素。
• 延遲 JavaScript，直到用戶與您的站點交互。

對於大多數人來說，實現此功能的最簡單方法是通過 Autoptimize 或 WP Rocket 等插件。

有關如何執行此操作的完整指南，我們有兩個非常詳細的帖子：

• 如何消除 WordPress 上的渲染阻塞資源
• 如何延遲 JavaScript 的解析

避免渲染阻塞 CSS 並優化 CSS 交付

正如未經優化的 JavaScript 會減慢您的網站速度一樣，未經優化的 CSS 也會造成同樣的後果。

本質上，您希望加載盡可能少的 CSS。 對於確實需要加載的 CSS，您希望以最佳方式加載它。 通常，這意味著您希望儘早加載重要的 CSS，同時將非關鍵 CSS 延遲到加載過程的後期。

如果您不是開發人員，實現此目的的最簡單方法是使用性能優化插件，如 Perfmatters、WP Rocket 或 FlyingPress。

例如，WP Rocket 提供了內置功能，可以逐頁刪除未使用的 CSS 並以最佳方式提供 CSS。

如果您想更深入地了解如何執行所有這些操作，請查看我們關於如何優化 CSS 的完整指南。

精簡 HTML、CSS 和 JavaScript

除了上述代碼優化技術之外，您還需要精簡網站的 HTML、CSS 和 JavaScript。

從本質上講，這會從您網站的代碼中刪除不必要的字符和空格以縮小其大小。

如果您使用 Kinsta 託管，Kinsta 可以通過我們的 Cloudflare 集成自動處理縮小。 以下是控制此功能的方法：

1. 在 MyKinsta 中打開您網站的儀表板。
2. 轉到CDN選項卡。
3. 單擊圖像優化旁邊的設置。
4. 選中CSS和JS複選框並保存設置。

如果您在其他地方託管您的網站，您可以使用 Autoptimize 等免費插件來縮小您的代碼，或者使用 Perfmatters、WP Rocket 或 FlyingPress 等高級綜合插件之一。

或者，查看我們的完整代碼縮小教程以了解更多信息。 雖然本教程側重於 JavaScript，但您也可以使用相同的方法和插件來縮小其他代碼。

使用服務器級壓縮（Gzip 或 Brotli）

服務器級壓縮可讓您使用 Gzip 或 Brotli 等技術縮小站點文件的大小。

例如，我們對 Kinsta 網站使用的壓縮將 Kinsta 主頁的文件大小減少了 85.82%。

如果您使用 Kinsta 託管 WordPress 網站，則無需擔心這一點，因為 Kinsta 會自動為所有站點啟用 Brotli 壓縮。

如果您在其他地方託管您的網站，您可以使用 GiftOfSpeed 的這個免費工具來檢查您的網站是否啟用了 Gzip 或 Brotli。

如果您的網站沒有使用壓縮，您可以按照我們關於如何啟用 Gzip 壓縮的指南進行設置。

如果您使用 Cloudflare 來提供您網站的內容，Cloudflare 也有一個內置設置來啟用 Brotli 壓縮：

1. 在 Cloudflare 儀表板中打開您的站點。
2. 轉到側邊欄菜單中的速度 → 優化。
3. 啟用Brotli開關。

壓縮和調整圖像大小

如果您的 LCP 元素是圖像，找到減小該圖像文件大小的方法將減少用戶瀏覽器下載圖像所需的時間（從而加快您的 LCP 時間）。

要減小圖像的大小，您應該將圖像的大小調整為您實際使用它的尺寸，使用有損或無損壓縮對其進行壓縮，並以優化的格式（例如 WebP）提供它。

這種方法通常只是一種性能優化最佳實踐——它並不特定於 Largest Contentful Paint。

如需更全面的了解，請查看我們的網站圖像優化詳細指南。

哦，是的 - 如果您使用 Kinsta 託管您的 WordPress 網站，您無需擔心這一點，因為 Kinsta 提供了一個內置功能來自動優化您網站的圖像，而無需任何第三方工具。

以下是啟用此功能的方法：

1. 在 MyKinsta 中打開您網站的儀表板。
2. 轉到CDN選項卡。
3. 單擊圖像優化旁邊的設置。
4. 選擇您喜歡的圖像優化級別並保存設置 - 使用有損將提供最大的速度改進，儘管它可能對圖像質量影響很小。

預加載最大的內容繪畫圖像

如果您的 LCP 元素是圖像，另一個改進 LCP 的策略是預加載 Largest Contentful Paint 圖像。 這就是為什麼您可能會在 PageSpeed Insights 中看到“預加載最大的內容繪畫圖像”之類的建議。

通過預加載，您可以告訴用戶的瀏覽器優先下載某些資源，例如作為您站點的 LCP 元素的特定圖像。

預加載 LCP 圖像的最非技術性方法是使用像 Perfmatters 這樣的插件，它提供了專用的預加載關鍵圖像功能。 您需要做的就是指定要預加載的圖像數量——我們建議從一個開始，因為預加載太多資產會產生負面影響。

WordPress.org 上也有一些免費插件可以實現這一點，例如 WPZOOM 的 Preload Featured Images 插件，以及其他高級插件，例如 FlyingPress。

檢查延遲加載問題

另一個可以在 PageSpeed Insights 中觸發“Preload Largest Contentful Paint image”消息的問題是您的 WordPress 網站如何延遲加載圖像的問題。

或者，這也會在 PageSpeed Insights 中觸發“最大的 Contentful Paint 圖像被延遲加載”警告。

延遲加載讓您可以等待加載某些資源（如圖像）直到用戶開始與您的網站交互，從而加快網站的初始加載時間。

雖然這通常是一件好事，但如果您的站點試圖延遲加載作為 LCP 元素的圖像，它可能會減慢您的 LCP 時間。 出於這個原因，您需要確保您的網站沒有延遲加載任何在初始視口中可見的圖像。

如果您使用的是 WordPress 在 WordPress 5.5 中引入的本機瀏覽器延遲加載功能，您應該不會遇到此問題，因為從 WordPress 5.9 開始，WordPress 已經自動排除了第一個內容圖像。

如果你想排除的不僅僅是第一張圖片，你可以使用 wp_omit_loading_attr_threshold 函數（但大多數人不需要在這裡做任何事情）。

但是，如果您使用的是 JavaScript 驅動的延遲加載插件，則可能需要在插件設置中手動設置此排除項。 例如，Perfmatters 插件包含一個選項，可讓您從延遲加載中排除第一個“X”圖像。

如果您的延遲加載插件不允許您設置這種類型的排除，您可以切換到可以設置的其他插件。

使用字體顯示優化字體加載：可選

如果您的 LCP 元素是文本，您網站的字體加載過程可能會延遲文本的顯示，這會減慢您的 LCP 時間。

通常，在使用自定義字體時會發生這種情況。 如果您的站點配置為等待在自定義字體加載後呈現任何文本，如果自定義字體文件需要很長時間加載，這將減慢速度。

要解決此問題，您可以使用 Font-Display: Optional CSS 描述符。

如果自定義字體沒有在小窗口（通常大約 100 毫秒或更短）內加載，這會告訴瀏覽器使用後備字體。

用簡單的語言來說，這基本上意味著瀏覽器應該給自定義字體一個加載的機會。 但是，如果自定義字體加載速度不夠快，瀏覽器應該只使用後備系統字體以避免進一步延遲內容。

或者，您也可以使用 Font-Display: Swap，它會立即加載後備字體，然後在自定義字體加載後“交換”自定義字體。 但是，如果字體大小不同，這種方法可能會導致 Cumulative Layout Shift 出現問題，因此您需要小心。

除非您的自定義字體對您的網站設計絕對必要，否則從 Core Web Vitals 的角度來看，使用 Font-Display: Optional 通常是最佳選擇。

如果您習慣於直接使用 CSS，您可以在子主題的樣式表中手動編輯 Font-Display 屬性。

如果你不想使用 CSS，你也可以找到插件來幫助你做到這一點，儘管它們中的大多數都專注於優化谷歌字體：

• Asset CleanUp – 支持免費的 Google Fonts 和 Pro 版本的自定義本地字體。
• Perfmatters – 為谷歌字體提供一個功能。

如果您使用 Elementor 來設計您的網站，Elementor 還包含一個內置選項，讓您可以將其用於您使用 Elementor 創建的頁面：

1. 轉到Elementor → 設置。
2. 打開高級選項卡。
3. 將Google Fonts Load下拉菜單設置為Optional 。

概括

學習如何改進 Largest Contentful Paint 對於改進網站的用戶體驗和最大化搜索引擎排名非常重要。

改進 Largest Contentful Paint 通常有兩個部分 - 加快服務器響應時間，然後優化站點代碼以盡快呈現 LCP 元素。

如果您不想擔心服務器響應時間變慢，您可以將您的 WordPress 網站移至 Kinsta。 Kinsta 的性能優化架構專為盡快交付您的網站而設計。

此外，借助 Kinsta 的邊緣緩存功能，您可以將您網站的頁面緩存到 Cloudflare 的全球網絡，這意味著來自世界各地的訪問者將享受閃電般快速的服務器響應時間（以及閃電般快速的 LCP 時間）。

如果您想了解更多信息，可以查看這些頁面以獲取有關 Kinsta 的託管 WordPress 託管或 Kinsta 的託管 WooCommerce 託管的更多信息。

如果您希望專業人士幫助您進行一些自定義 LCP 性能優化，您還可以在 Kinsta Agency Directory 中找到提供商。