正在努力改善您網站上最大內容繪製？ 或者不確定最大內容繪製是什麼意思，為什麼你甚至需要首先關心它？
無論你從哪裡開始，這篇文章都適合你，因為你將學習你需要知道的關於最大內容繪製的所有資訊。
什麼是最大內容繪製（LCP）？ 解釋最大內容繪製的含義
最大內容繪製是一個性能指標，用於衡量載入網頁主要內容所需的時間。
最大的內容繪製是 Google 的核心網頁指標指標以及累積佈局偏移 （CLS）和首次輸入延遲 （FID）。
在更技術性的層面上，最大內容繪製測量從用戶啟動頁面載入到在視口中呈現最大文本塊、圖像或視頻所花費的時間。
就LCP而言，「主要內容」是什麼意思？
好吧，主要內容將取決於所討論的實際頁面，但它可能是以下任何一項：
- 文本 – 更具體地說，包含文本節點或其他內聯級文本元素的任何塊級元素。
- 圖像 – <img> 元素內的元素或 <svg> 元素內的 <image> 元素。
- 視頻 – 任何<視頻>元素（它使用海報圖像）。
- 帶有背景圖像的元素 – 僅噹通過CSS url（） 函數（它不適用於 CSS 漸變）。
在這篇文章的後面，您將學習如何為您網站上的任何頁面找到確切的最大內容繪製元素。
最大的內容繪製與第一個內容豐富的繪製
您可能遇到的一個常見問題是，「最大內容繪製」與「第一個內容繪製」（另一個常見的性能指標）之間有什麼區別。
雖然這兩個術語相似，但主要區別在於，「最大內容繪製」測量頁面的“主要內容”載入所需的時間，而“第一個內容繪製”測量載入“第一個物件”所需的時間（無論它是否是主要內容）。
基本上：
- LCP = 僅主要內容
- FCP = 第一條內容，無論該內容是什麼
因此，您的 LCP 時間幾乎總是略高於您的 FCP 時間，因為“主要內容”元素通常不是第一個載入的元素。
為什麼您網站最大的內容繪製時間很重要？
您網站的「最大內容繪製時間」很重要有兩個主要原因：
- 用戶體驗
- 搜尋引擎優化
用戶體驗
您應該關心網站的最大內容繪製時間的最大原因是，該指標是瞭解用戶在網站性能方面的體驗的良好代理。
大多數使用者並不關心您的網站完全載入每個腳本和元素需要多長時間。 相反，他們關心他們需要多長時間才能開始從您的網站獲得價值。
最大的內容繪製通過查看載入主要內容需要多長時間來衡量「價值」時刻。
如果您優化您的網站以實現快速的最大內容繪製時間，您可以非常自信地為使用者提供了您網站上的可靠體驗，至少在性能方面（您還需要客戶友好型設計和良好的可用性）.
當然，這並不意味著您應該忽略其他性能指標。 我們總是推薦全面瞭解您網站的性能和瓶頸，這就是我們創建自己的原因應用程式性能監控 （APM） 工具如果您使用的是 Kinsta 託管，這是免費提供的 – 金斯塔 APM.
搜尋引擎優化
在搜尋引擎優化前面，最大的內容繪製是谷歌核心網路指標三重的一部分，谷歌開始使用它作為搜尋引擎優化排名因素在其 2022 年頁面體驗演算法更新中。
這意味著，「最大內容繪製」時間不佳可能會拖累您網站在 Google 搜尋結果中的表現。
雖然其他因素如內容品質/相關性反向連結仍然在以下方面發揮著更大的作用您的網站排名，重要的是要優化您網站的最大內容繪製時間，以確保您從 SEO 工作中獲得最大收益。
什麼會影響最大的內容繪畫分數？
兩種「主要」類型的問題可能會影響頁面的最大內容繪製時間：
- 伺服器使用初始 HTML 文件進行回應需要多長時間。
- 載入實際 LCP 資源所需的時間。
第一類問題涉及伺服器回應時間，也稱為到第一個字節的時間 （TTFB）.在使用者的瀏覽器考慮載入主要內容之前，它首先需要從伺服器獲得回應。
以下是影響此問題的一些常見問題：
- 不使用頁面緩存 – 不使用頁面緩存會強制伺服器在回應 HTML 文件之前執行更多“工作”。
- 慢速託管 – 無論您做什麼，慢速託管服務提供者將始終具有較慢的 TTFB。
- 不使用 CDN – a內容分發網路 （CDN）可以通過提供來自其全球網路的頁面來加快 TTFB 的速度，而不是要求使用者從您網站的源伺服器下載它們。
在您網站的伺服器交付初始 HTML 文件後，在載入實際的主要內容元素時可能會有進一步的瓶頸。
以下是影響此問題的一些常見問題：
- 渲染阻塞 JavaScript 或 CSS（或一般未優化/不必要的代碼）——如果使用者的瀏覽器需要下載和/或處理不必要的 JavaScript 或 CSS，然後才能載入主元素，這會減慢您的 LCP 速度。
- 未優化的圖像 – 如果 LCP 元素是圖像，使用未優化的圖像會減慢您的時間，因為較大的圖像需要更長的時間來下載。
- 未優化的字體載入 – 如果 LCP 元素是文字，則以未優化的方式載入自定義字體可能會使該文本顯示時間更長。
- 未壓縮的檔案 – 如果您不使用 Gzip 或 Brotli 等壓縮技術，這將使用戶的瀏覽器下載您網站的檔案需要更長的時間。
根據您的網站，您可能會在這兩個區域或僅其中一個區域遇到瓶頸。 您將在本文後面學習如何解決所有這些問題。
什麼是好的最大內容繪畫時間？
谷歌將「良好」的最大內容繪製時間定義為2.5秒以下。
如果您網頁的最大內容繪製時間在 2.5 到 4.0 秒之間，Google 會將其歸類為“需要改進”。 如果您的頁面時間超過 4.0 秒，Google 會將其定義為「差」。。
這是谷歌的一張圖片，直觀地顯示了這一點：
如何測量最大的塗料含量：最佳LCP測試工具
有許多可用於測試網站性能的工具對於最大的內容繪製 – 讓我們來看看一些最有用的…
頁面速度洞察
頁面速度洞察是評估最大內容繪製的最佳工具之一，因為它提供了四個有用的資訊：
- 您可以從 Chrome UX 報告中查看您網站與真實使用者的最大內容繪製時間（如果您的網站有足夠的流量包含在報告中）。
- 您可以執行模擬測試來查看網站的性能。
- Google 會告訴您它用於測試的實際 LCP 元素，讓您知道要優化的元素。
- Google 將提供有關如何縮短 LCP 時間的建議。
以下是使用它的方法：
- 轉到PageSpeed Insights網站.
- 輸入要測試的網頁的網址。
- 按兩下分析。
然後，Google將向您顯示行動裝置和桌面設備的結果 – 請務必同時檢查兩者。
要查找 Google 用於計算 LCP 的主要元素，您可以向下滾動到「診斷」部分，然後展開「最大的內容繪製」元素部分：
同樣，請確保同時檢查行動裝置和桌面設備，因為每個元素的 LCP 元素可能不同。
Chrome 開發者工具
您還可以直接從以下位置測試最大內容繪製時間 Chrome 開發者工具使用「性能」選項卡或其燈塔審核功能。 我們建議使用“性能”選項卡，因為它為您提供了更多資訊。
開始方法如下：
- 打開要測試的頁面。
- 打開 Chrome 開發者工具。
- 轉到“性能”選項卡。
- 確保選中「Web 指標」 框。
- 按兩下重新載入按鈕（如下所述）。
您現在應該看到對網站的完整分析。
如果將滑鼠懸停在「網路」選項卡中的 LCP 上，則可以看到時間：
如果你把滑鼠懸停在Timings標籤的LCP上，你可以看到實際的LCP元素。
Google Search Console
雖然Google Search Console不允許你測試單個頁面的Largest Contentful Paint時間，但它對於評估整個網站的性能確實非常有用。
你網站上的每個頁面都會有不同的LCP時間，所以你不能只測試你的主頁，然後就結束了。
通過谷歌搜索控制台，你可以看到你網站上的每個頁面在谷歌的 “好”、“需要改進 ”和 “差 ”分類中的位置。 性能數據來自Chrome使用者體驗報告，所以它是基於真實的用戶數據。
如果你還沒有這樣做，你首先需要用Google Search Console驗證你的網站。
一旦你這樣做了，下面是如何訪問LCP報告。
- 打開谷歌搜索控制台中你的網站
- 在 「經驗 」選項卡下進入 「核心網路生命力」。。
- 點擊移動或桌面圖表旁邊的 「打開報告」。
- 在 「為什麼URLs不被認為是好的 」部分尋找任何問題。 如果你點擊該問題，你可以看到更多關於哪些URL造成問題的資訊。
*確保同時檢查台式機和行動裝置的結果，因為兩者的數據可能不同。
WebPageTest
WebPageTest是運行類比效能測試的另一個方便的選擇。
與PageSpeed Insights不同，WebPageTest讓你完全定製各種測試指標，如測試地點、連接速度、設備等。 這是使用它比其他工具的主要好處 – 它讓你有更多選項來配置測試。
下面是如何運行測試。
- 到 WebPageTest.
- 添加你要測試的頁面URL。
- 展開高級配置選項，全面配置你的測試。
在結果頁面，你會看到LCP數據，以及大量其他性能指標（包括瀑布分析）。
如何找到最大的內容豐富的繪製元素
如果你想提高Largest Contentful Paint，確切地知道谷歌是用哪種元素來計算你的LCP時間，會非常有説明。
例如，如果你知道谷歌使用你的hero圖像作為你主頁上的LCP元素，你就知道，如果你想提高你主頁的LCP時間，你需要想辦法儘快提供該hero圖像。
正如我們前面提到的，你可以使用PageSpeed Insights或Chrome開發者工具找到你的Largest Contentful Paint元素。
請確保同時檢查移動和桌面的結果，因為你的LCP元素在不同的設備上可能是不同的。
如何在WordPress（或其他平臺）中改進最大的Contentful Paint？
現在你知道了關於Largest Contentful Paint的所有情況，讓我們進入一些可操作的提示，如何在WordPress中改進Largest Contentful Paint。
雖然我們將把重點放在WordPress的這些技巧上，但所有的技巧都是通用的，適用於其他類型的網站。
設置快取以提高伺服器回應時間
緩存可以改善伺服器的回應時間，因為它減少了你的伺服器在向訪問者的瀏覽器提供完整的HTML文檔之前所需要做的處理工作。
如果你在其他地方託管，你可以使用WP Super Cache這樣的免費外掛程式或WP Rocket這樣的付費外掛程式在你的網站上啟用緩存。
升級到更快的WordPress主機
雖然這個清單上的所有戰術都可以説明你提高你的LCP時間，但也不能拐彎抹角。
如果你使用慢的、未優化的WordPress主機，你的LCP時間總是會被你的主機的品質所限制。
你也許可以把事情做得更好一些，但如果你的主機很慢，你總是很難達到2.5秒以下的LCP時間。
如果你想用最簡單的方法來改善你的Largest Contentful Paint時間，你可以將你的網站遷移到Kinsta。 Kinsta不僅提供性能優化的主機基礎設施，而且我們也有內置的功能來處理這個清單中的許多其他優化。
這意味著你可以專注於發展你的網站，而不是亂七八糟地優化Largest Contentful Paint次數。
如果你還在猶豫不決–先試試這個清單上的其他提示。 但是，如果你在做了這個清單上的所有事情之後仍然在掙扎，你可能只是需要更好的主機。
使用內容交付網路（CDN）。
如果沒有CDN，你網站的所有訪問者都需要從你的主機伺服器上下載頁面的HTML和靜態資產。
如果你的訪問者位於你的伺服器附近，這通常不是一個問題。 但是，如果你的訪問者分佈在世界各地，由於訪問者和你的網站伺服器之間的物理距離，這可能會減慢你的網站。
有了CDN，你可以將你網站的靜態資產（甚至是你網站的成品HTML頁面）分發到CDN的全球網路。 這樣，訪問者就可以從CDN的最近位置下載檔，速度會快很多。
如果你在其他地方託管，你可以使用流行的CDN服務，如KeyCDN、Bunny、StackPath等，為你網站的靜態資產設置CDN。
避免渲染阻塞的JavaScript（推遲或刪除）。
阻止渲染的JavaScript是指在你的主LCP元素之前載入的JavaScript，儘管當時不需要它。
通過延遲載入LCP元素，它將減慢你的LCP載入時間。
為了解決這個問題，有幾個策略可以實施。
- 如果可能的話，刪除不必要的JavaScript。
- 推遲JavaScript，這樣它就不會阻礙你網站主要元素的載入。
- 延遲JavaScript，直到使用者與你的網站進行互動。
對大多數人來說，實現這一功能的最簡單方法是通過Autoptimize或WP Rocket等外掛程式。
避免渲染阻塞的CSS，優化CSS交付
正如未經優化的JavaScript會拖慢你的網站一樣，未經優化的CSS也會造成同樣的後果。
從本質上講，你想盡可能少地載入CSS。 對於你需要載入的CSS，你希望以最佳方式載入它。 通常情況下，這意味著你要儘早載入重要的CSS，而將非關鍵的CSS推遲到載入過程的後期。
如果你不是開發人員，實現這一目標的最簡單方法是使用Perfmatters、WP Rocket或FlyingPress等性能優化外掛程式。
例如，WP Rocket提供了內置功能，可以逐頁刪除未使用的CSS，並以最佳方式提供CSS。
簡化你的HTML、CSS和JavaScript
除了上述的代碼優化技術外，你還需要對你的網站的HTML、CSS和JavaScript進行最小化。
從本質上講，這從你的網站代碼中刪除了不必要的字元和空白空間，以縮小其大小。
你可以使用像Autoptimize這樣的免費外掛程式來簡化你的代碼，或者使用Perfmatters、WP Rocket或FlyingPress這樣的高級綜合外掛程式。
使用伺服器級別的壓縮（Gzip或Brotli）。
伺服器級壓縮讓你使用Gzip或Brotli等技術縮小網站的檔大小。
你可以使用GiftOfSpeed的这个免费工具来检查你的网站是否启用了Gzip或Brotli。
如果你使用Cloudflare为你的网站内容提供服务，Cloudflare也有一个内置设置来启用Brotli压缩。
- 在 Cloudflare 仪表板中打开您的网站。
- 转到侧栏菜单中的速度→优化。
- 启用Brotli开关。
壓縮和調整圖像大小
如果你的LCP元素是一張圖片，想辦法減少該圖片檔的大小將減少使用者的瀏覽器下載圖片的時間（從而加快你的LCP時間）。
為了減少圖片的大小，你應該把圖片的大小調整到你實際使用的尺寸，用有損或無損壓縮法進行壓縮，並以優化的格式（如WebP）提供。
這種方法只是一般的性能優化最佳做法– 它不是專門針對最大的Contentful Paint。
預裝最大內容的繪製圖像
如果你的LCP元素是一個圖像，另一個改善LCP的策略是預裝最大的內容豐富的油漆圖像。 這就是為什麼你可能會在PageSpeed Insights中看到 「預裝最大內容的繪畫圖像 」這樣的建議。
通過預載入，你可以告訴使用者的瀏覽器優先下載某些資源，例如作為你網站LCP元素的特定圖像。
預載入LCP圖片的最非技術性的方法是使用像Perfmatters這樣的外掛程式，它提供了一個專門的預載入關鍵圖片功能。 你所需要做的就是指定要預載多少張圖片–我們建議只從一張開始，因為預載太多的資產會產生負面影響。
在 WordPress.org 也有一些免費的外掛程式來實現這一點，如WPZOOM的預載入特色圖片外掛程式，以及其他高級外掛程式，如FlyingPress。
檢查懶惰載入問題
另一個可能觸發PageSpeed Insights中 「預載入最大內容的繪畫圖像 」信息的問題是你的WordPress網站如何懶惰地載入圖像的問題。
或者，這也會在PageSpeed Insights中觸發 「最大的Contentful Paint圖片被懶惰地載入 」的警告。
懶惰載入讓你通過等待載入某些資源（如圖片），直到用戶開始與你的網站互動，來加快你的網站的初始載入時間。
雖然這通常是一件好事，但如果你的網站試圖懶惰地載入作為你的LCP元素的圖像，它可能會減慢你的LCP時間。 出於這個原因，你要確保你的網站沒有懶惰地載入任何在初始窗口可見的圖像。
如果你使用WordPress在5.5版本中引入的本地瀏覽器懶惰載入功能，你應該不會遇到這個問題，因為從WordPress 5.9版本開始，WordPress已經自動排除了第一個內容中的圖片。
如果你想排除超過第一張圖片，你可以使用wp_omit_loading_attr_threshold函數（但大多數人不需要在這裡做什麼）。
但是，如果你使用的是一個由JavaScript驅動的懶惰載入外掛程式，你可能需要在外掛程式的設置中手動設置這種排除。 例如，Perfmatters外掛程式包括一個選項，讓你從懶惰載入中排除第一個 「X 」圖片。
如果你的懶人載入外掛程式不允許你設置這種類型的排除，你可以切換到一個不同的外掛程式。
用Font-Display優化字體載入。 可選的
如果你的LCP元素是文本，你的網站的字體載入過程可能會延遲文本的出現，這將減慢你的LCP時間。
通常情況下，這種情況發生在使用自定義字體時。 如果你的網站被配置為在載入自定義字體後才渲染任何文本，那麼如果自定義字體檔需要很長時間來載入，這將會使事情變得緩慢。
你可以用這個來修復： Font-Display： Optional CSS descriptor.
這告訴瀏覽器，如果自定義字體在一個小視窗內（通常在100毫秒或更短的時間內）無法載入，則使用一個後備字體。
用通俗的話說，這基本上意味著瀏覽器應該給自定義字體一個機會來載入。 但是，如果自定義字體的載入速度不夠快，瀏覽器就應該使用一個後備系統字體，以避免進一步延遲內容。
另外，你也可以使用Font-Display：Swap，它可以立即載入後備字體，然後在載入自定義字體後 「交換」到自定義字體。 然而，如果字體的大小不同，這種方法可能會導致累積布局轉移的問題，所以你要小心。
除非您的自定義字體對於您的網站設計來說是絕對必要的，否則使用Font-Display。 從Core Web Vitals的角度來看，通常是最好的選擇。
如果你願意直接使用CSS，你可以在你的子主題的樣式表中手動編輯Font-Display屬性。
如果你不想使用CSS，你也可以找到外掛程式來説明你做這件事，儘管它們中的大多數都專注於為谷歌字體進行優化。
Asset CleanUp – 支持免費的谷歌字體，專業版則支援自定義的本地字體。
Perfmatters – 為谷歌字體提供一個功能。
如果你使用 Elementor 設計你的網站，Elementor 也包括一個內置選項，讓你對用 Elementor 創建的頁面使用這個功能。
轉到 Elementor → 設置。
打開 「高級 」選項卡。
將谷歌字體載入下拉選項設為可選。
