每個網頁都由數十或數百個元素組成。其中包括文字、影象、按鈕、小工具等等。每個元素的大小各不相同，最大的呼叫會告訴您很多關於使用稱為最大內容繪製 (LCP) 的指標優化您的網站的情況。
在如何改善您的網站上的最大內容繪製方面感到困惑？或者不確定Largest Contentful Paint是什麼意思，以及為什麼你首先需要關心它？
無論你從哪裡開始，這篇文章都是為你準備的，因為你將瞭解到關於Largest Contentful Paint的所有知識。
這包括Largest Contentful Paint是什麼意思，為什麼它很重要，如何衡量它，以及如何改進它。
在本文中，我們將解釋LCP（英文全稱Largest Contentful Paint）的概念。我們還將向您展示如何測量此資料點並解釋結果。最後，我們將討論如何優化您的LCP分數。
什麼是最大內容繪製 (LCP)？
在大多數網頁上，有一個元素因其大小和突出程度而與眾不同。例如，考慮這個著陸頁，其中巨無霸Banner部分在視口中占主導地位：
那個巨無霸Banner部分代表這個特定頁面的最大內容繪製（LCP）。也就是說，LCP是網站渲染包含最多內容的元素所花費的時間。
如果您想找出此頁面的LCP，您需要測量載入英雄部分所需的時間。理論上，如果您的LCP分數較低，則意味著您的網站優化得很好，並且可以為使用者快速載入。
重要的是要了解LCP分數可能（並且希望會）與您網站的整體載入時間不同。您可能有一個頁面需要 3 秒才能完全載入，但它的LCP可能只有 2 秒。這是因為大多數現代網站還在文字和媒體檔案之上載入指令碼。
通常，LCP與First Contentful Paint (FCP) 齊頭並進。這是一個指標，它告訴您當有人訪問您的網站時，呈現任何內容的第一個元素需要多長時間 。結合使用這些指標（或 Google的Core Web Vitals），您可以比整體載入時間更深入地瞭解網站的效能。
請記住，在衡量您網站的LCP時，Google不會考慮所有內容。它將忽略可縮放向量圖形 (SVG) 檔案和視訊等元素，但這些元素可能會包含在Google的Core Web Vitals的未來更新中。
Largest Contentful Paint是一個效能指標，衡量網頁主要內容的載入時間。
Largest Contentful Paint與Cumulative Layout Shift（CLS）和First Input Delay（FID）一樣，都是谷歌核心網路指標的一部分。
在更多的技術層面上，”最大內容 “衡量從使用者開始載入頁面到視口內呈現最大文字塊、影象或視訊所需的時間。
在LCP方面，”主要內容 “是什麼意思？
好吧，主要內容將取決於有關的實際頁面，但它可能是以下任何一種：
- 文字–更具體地說，包含文字節點或其他內聯級文字元素的任何塊級元素。
- 影象–<img>元素內的元素或<svg>元素中的<Image>元素。
- 視訊–任何<Video>元素（它使用海報影象）。
具有背景影象的元素–僅當通過CSS url（）函式載入時（它不適用於CSS漸變）。
LCP vs FCP有何區別
您可能會有一個常見的問題，那就是Largest Contentful Paint與First Contentful Paint之間的區別，這是另一個常見效能指標。
雖然這兩個術語相似，但關鍵區別在於，Largest Contentful Paint度量載入頁面的“主要內容”所需的時間，而First Contentful Paint則度量載入“首個物件”所需時間（無論它是否是主要內容）。
基本上：
- LCP=僅主要內容
- FCP=第一部分內容，無論內容是什麼
因此，LCP時間幾乎總是略高於FCP時間，因為“主要內容”元素通常不是第一個載入的。
為什麼網站最大內容繪製時間很重要？
有兩個主要的原因，你的網站的Largest Contentful Paint時間很重要。
- 使用者體驗
- 搜尋引擎優化
使用者體驗
你應該關心你的網站的最大的Contentful Paint時間的最大原因是，當涉及到你的網站的效能時，這個指標是瞭解你的使用者體驗的一個很好的代理。
大多數使用者並不關心你的網站完全載入每一個指令碼和元素需要多長時間。相反，他們關心的是他們需要多長時間才能開始從你的網站獲得價值。
Largest Contentful Paint通過檢視主要內容的載入時間，很好地試圖衡量那個 “價值 “時刻。
如果你優化你的網站以達到快速的Largest Contentful Paint時間，你可以很有信心，你在你的網站上為使用者提供了堅實的體驗，至少在效能方面（你還希望有一個客戶友好的設計和良好的可用性）。
當然，這並不意味著你應該忽視其他效能指標，我們總是建議對你的網站效能和瓶頸進行全面的考察。
搜尋引擎優化(SEO)
在搜尋引擎優化方面，Largest Contentful Paint是谷歌核心網路指標三要素的一部分，谷歌在2022年的頁面體驗演算法更新中開始將其作為一個SEO排名因素。
這意味著，如果最大內容的繪畫時間不佳，會拖累你的網站在谷歌的搜尋結果中的表現。
雖然其他因素，如內容質量/相關性和反向連結，在你的網站排名中仍然發揮著更大的作用，但重要的是要優化你的網站的最大內容繪畫時間，以確保你從你的SEO努力中獲得最大的收益。
哪些因素會影響到LCP
兩種 “主要 “型別的問題會影響一個頁面的 “最大內容繪製 “時間。
- 你的伺服器需要多長時間來響應最初的HTML文件。
- 實際的LCP資源需要多長時間來載入。
第一類問題涉及伺服器響應時間，也就是首個位元組的時間（TTFB）。在使用者的瀏覽器能夠考慮載入主要內容之前，它首先需要從伺服器上得到一個響應。
以下是影響這一點的一些常見問題。
- 不使用頁面快取 – 不使用頁面快取迫使伺服器在響應HTML文件之前做更多的 “工作”。
- 緩慢的主機 – 緩慢的主機供應商將總是有一個緩慢的TTFB，無論你做什麼。
- 不使用CDN–內容交付網路（CDN）可以通過從其全球網路提供頁面，而不是要求使用者從你的網站原生伺服器下載頁面，從而加快TTFB。
在你的網站伺服器提供最初的HTML文件後，在載入實際的主要內容元素時可能會有進一步的瓶頸。
以下是影響這一點的一些常見的問題。
- 阻礙渲染的JavaScript或CSS（或一般的未優化/不必要的程式碼）–如果使用者的瀏覽器在載入主要元素之前需要下載和/或處理不必要的JavaScript或CSS，這將減慢你的LCP。
- 未經優化的影象 – 如果LCP元素是一個影象，使用未經優化的影象將減慢你的時間，因為較大的影象需要更長的時間來下載。
- 未經優化的字型載入 – 如果LCP元素是文字，以未經優化的方式載入自定義字型會使該文字出現的時間更長。
- 未壓縮的檔案 – 如果你沒有使用Gzip或Brotli等壓縮技術，這將使使用者的瀏覽器下載你的網站的檔案需要更長的時間。
根據你的網站，你可能在這兩個方面都遇到了瓶頸，或者只是其中一個方面。在這篇文章的後面，你將瞭解如何解決所有這些問題。
怎樣才算良好的LCP時間？
谷歌將 “良好 “的最大內容繪製時間定義為低於2.5秒。
如果你的頁面的最大內容繪製時間在2.5到4.0秒之間，谷歌將其歸類為 “需要改進”。而如果你的頁面的時間超過4.0秒，谷歌將其定義為 “差”。
下面是谷歌提供的一個圖形，直觀地顯示了這一點。 
來自谷歌的推薦LCP時間
如何測量LCP
通常，確定您網站上最大的內容元素是很容易的。您所要做的就是等待頁面完全載入並環顧四周。在大多數情況下，有一個部分或元素比其他部分或元素更突出。正如我們上面提到的，它可能是英雄部分，也可能是部落格中的實際文章內容。
它通常是一個影象或文字塊（例如上面的英雄部分或一般的部落格內容）。LCP也因使用者而異，因為它基於他們的視口（或首屏內容）。
LCP的真正訣竅在於測量特定元素載入所需的時間。（不是頁面本身。）幸運的是，如果您曾經使用過可以衡量載入時間的工具或服務，那麼它很可能還包含詳細的指標，例如FCP和LCP分數。
例如，考慮PageSpeed Insights。您可以輸入任何URL，服務將對該頁面進行完整的效能測試。在結果中，您將看到總體效能得分。實測資料部分下還有其他指標的細分——包括LCP：
PageSpeed Insights收集來自多個使用者的真實效能資料，並使用它為您提供一段時間內的彙總分數。這種方法比使用單個測試來確定您網站的效能要精確得多。
此外，您可以獲得每個分數的百分比細分。在上面的例子中，我們可以看到89%的頁面載入發生在1.5秒內，這是一個了不起的分數。但是，其餘11%的頁面載入不在該範圍內。這意味著對於某些使用者來說，LCP需要更長的時間來解決。
重要的是要了解，即使您的網站優化得很好，載入時間也會 因使用者群而異。某些訪問者的Internet連線速度可能較慢或距離您的伺服器太遠。這些只是在某些情況下載入時間可能更長的眾多原因中的兩個。這就是為什麼有一個平均分數作為參考至關重要。
如果您進一步向下滾動PageSpeed Insights結果頁面，您將看到實驗室資料部分。在這裡，Google為您提供了它剛剛在您的網頁上執行的測試的精確結果：
PageSpeed Insights使用此實驗室資料為您提供您在結果開始時看到的總分。實驗室資料不能像彙總的實測資料資訊那樣提供全面的資訊。但是，它仍然可以讓您對網站的效能有一個很好的瞭解。
理想情況下，您的LCP分數應低於2.5秒（相比之下，FCP是理想的1.8秒）。這個時間越低越好。為了獲得最佳分數和體驗，您的整體載入時間應保持在3秒以下。在那之後，您通常會開始看到跳出率顯著增加。
根據我們的經驗，PageSpeed Insights 是您可以用來衡量LCP和整體載入時間的最佳工具。但是，如果您為您的網站設定了Search Console，您也可以訪問相同的資訊，我們絕對推薦用於搜尋引擎優化 (SEO) 目的。
如果您想檢視 Google 之外的內容，您還可以使用瀏覽器的開發工具手動測量LCP時間。大多數開發工具包使您能夠測量頁面載入時間，提供有關載入每個元素和處理每個請求所需時間的詳細資訊。然而，這種手動方法涉及到很多 比使用第三方服務更多的工作。
您還可以使用GT Metrix和Pingdom等速度測試服務來檢視對LCP和其他頁面載入指標的更多瞭解。
Chrome Developer Tools
你也可以直接從Chrome開發者工具中使用效能選項卡或其Lighthouse審計功能來測試Largest Contentful Paint時間。我們建議使用 “Performance” 選項卡，因為它能為你提供更多資訊。
以下是開始的方法：
- 開啟你要測試的頁面。
- 開啟Chrome開發工具。
- 轉到 Performance 選項卡。
- 確保勾選 “Web Vitals” 框。
- 點選 Reload 按鈕（如下所述）。
如何在Chrome開發工具中執行一個效能測試
現在你應該看到你的網站的全面分析。
如果你把滑鼠懸停在Network標籤的LCP上，你可以看到時間：
如何在Chrome開發工具中檢視LCP時間
如果你把滑鼠懸停在Timings標籤的LCP上，你可以看到實際的LCP元素：
如何在Chrome開發工具中檢視LCP元素
Google Search Console
雖然Google Search Console不允許你測試單個頁面的Largest Contentful Paint時間，但它對於評估整個網站的效能非常有用。
你網站上的每個頁面都會有不同的LCP時間，所以你不能只測試你的主頁，然後就結束了。
通過谷歌搜尋控制檯，你可以看到你網站上的每個頁面在谷歌的 “好”、”需要改進”和 “差”分類中的位置。效能資料來自Chrome使用者體驗報告，所以它是基於真實的使用者資料。
下面是訪問LCP報告的方法。
- 為你的網站開啟Google Search Console。
- 在 “體驗” 選項卡下進入 “核心網頁指標“。
- 點選移動或桌面圖表旁邊的 “開啟報告“。
- 在 “網址未被視為良好網址的原因” 部分尋找任何問題。如果你點選該問題，你可以看到更多關於哪些URL造成問題的資訊。
*確保同時檢查桌面和移動的結果，因為每個人的資料可能不同。
如何在Google Search Console中看到LCP問題
WebPageTest
WebPageTest是執行模擬效能測試的另一個方便的選擇。
與PageSpeed Insights不同，WebPageTest讓你完全定製各種測試指標，如測試地點、連線速度、裝置等。這是使用它比其他工具的主要好處–它給你更多的選項來配置測試。
下面是如何執行一個測試：
- 轉到WebPageTest。
- 新增你要測試的頁面URL。
- 展開Advanced Configuration選項，全面配置你的測試。
如何用WebPageTest來測試LCP時間
在結果頁面，你會看到LCP資料，以及大量其他效能指標（包括瀑布分析）。
如何優化網站LCP分數
如果您可以識別頁面上最大的元素，則應該能夠對其進行優化。例如，如果該元素是影象，您始終可以使用壓縮工具來減小其檔案大小並提高LCP分數。
但是，這種方法僅適用於您的網站沒有得到很好的優化。如果您已經採取措施提高網站的效能，那麼您需要考慮不同的方法來優化其LCP分數。
根據我們的經驗，您可以通過以下最有效的優化來提高網站的LCP分數：
- 調整大小和壓縮影象。在大多數情況下，影象將決定您的 LCP 分數。根據經驗，您應該調整和優化上傳到網站的每張圖片（可以考慮圖片壓縮外掛）。WordPress 5.8開始相容WebP圖片，這可以幫助許多網站進入LCP時代。
- 選擇更好的託管服務。如果您已經努力優化您的網站，但載入時間仍然太長，這可能是由於您的網路主機。您可能使用的計劃跟不上您網站的受歡迎程度，或者您的虛擬主機可能無法提供您需要的效能。無論您在網站上投入多少工作，可靠的託管計劃都可以成敗。
- 使用內容交付網路 (CDN)。 CDN可以在世界各地的伺服器叢集上快取您網站的副本，並將其提供給訪問者。一些 CDN 還提供特定於影象的服務，這有助於極大地降低 LCP 分數。
- 消除渲染阻塞資源。如果資源在執行之前停止載入您網站上的元素，則該資源是“渲染阻塞”的。通常，這些是您網站的關鍵結構，例如HTML、CSS和JavaScript。根據經驗，您希望消除或推遲執行此操作的元素，或者在其他所有內容載入完成後強制它們執行。許多外掛，例如WP Rocket可以通過切換為您完成此操作。
現在你已經知道了關於Largest Contentful Paint的所有情況，讓我們進入一些可操作的提示，如何改進WordPress中的Largest Contentful Paint。
雖然我們將重點介紹WordPress的這些技巧，但所有的技巧都是通用的，適用於其他型別的網站。
設定快取以提高伺服器響應時間
快取可以通過減少你的伺服器在向訪問者的瀏覽器傳送完成的HTML文件之前需要做的處理工作來提高伺服器的響應時間。
你可以使用WP Super Cache這樣的免費外掛或WP Rocket這樣的付費外掛在你的網站上啟用快取。
如需更多選擇，請檢視我們的文章，其中有最好的WordPress快取外掛。
升級到更快的WordPress主機
雖然這個清單上的所有策略都可以幫助你改善你的LCP時間，但沒有什麼好繞彎子的。
如果你使用慢的、未優化的WordPress主機，你的LCP時間總是會被你的主機的質量所限制。
你也許可以把事情做得更好一些，但如果你的主機很慢，你總是很難達到2.5秒以下的LCP時間。
如果你想用最簡單的方法來提高你的Largest Contentful Paint時間，你可以把你的網站遷移到專門針對WordPress進行了優化的主機服務商。
這意味著你可以專注於發展你的網站，而不是在優化Largest Contentful Paint時間上瞎折騰。
如果你還在猶豫不決–先試試這個清單上的其他提示。但是，如果你在做了這個清單上的所有事情之後仍然在掙扎，你可能就需要更好的主機。
使用CDN加速
如果沒有CDN，你網站的所有訪問者都需要從你的主機伺服器下載頁面的HTML和靜態資產。
如果你的訪問者位於你的伺服器附近，這通常不是一個問題。但是，如果你的訪問者分佈在世界各地，由於訪問者和你的網站伺服器之間的物理距離，這可能會減慢你的網站。
有了CDN，你可以將你的網站的靜態資產（甚至是你的網站的成品HTML頁面）分發到CDN的全球網路。這樣一來，訪問者就可以從CDN的最近位置下載檔案，速度會快很多。
這意味著您網站的訪問者可以從最近的邊緣位置下載完整的頁面，這既加快了伺服器的響應時間，也加快了您的LCP資源的載入時間。
如果你在其他地方託管，你可以使用流行的CDN服務，如KeyCDN、Bunny、StackPath等，為你網站的靜態資產設定CDN。
避免渲染阻塞的JavaScript（延遲或刪除）
阻止渲染的JavaScript是指在你的主LCP元素之前載入的JavaScript，儘管當時不需要它。
通過延遲載入LCP元素，它將減慢你的LCP載入時間。
為了解決這個問題，有幾個策略可以實施：
- 如果可能的話，刪除不必要的JavaScript。
- Defer載入（主動）JavaScript，這樣它就不會阻礙你網站主要元素的載入。
- Delay載入（被動）JavaScript，直到使用者與你的網站進行互動。
對大多數人來說，實現這一功能的最簡單方法是通過Autoptimize或WP Rocket等外掛。
避免渲染阻塞的CSS和優化CSS交付
正如未經優化的JavaScript會減慢你的網站速度一樣，未經優化的CSS也會造成同樣的問題。
從本質上講，你希望儘可能少地載入CSS。對於你需要載入的CSS，你要以最佳方式載入它。通常情況下，這意味著你要儘早載入重要的CSS，而把非關鍵的CSS推遲到載入過程的後期。
如果您不是開發人員，最簡單的方法是使用Perfmatters、WP Rocket或FlyingPress等效能優化外掛來實現。
例如，WP Rocket提供了內建功能，可以逐頁刪除未使用的CSS，並以最佳方式提供CSS。
如果你想更深入地瞭解如何做到這一切，請檢視我們關於如何優化CSS的完整指南。
簡化HTML、CSS和JavaScript
除了上述的程式碼優化技術外，你還需要對你的網站的HTML、CSS和JavaScript進行最小化。
從本質上講，這是從你的網站程式碼中刪除不必要的字元和空白空間，以縮小其大小。
你可以使用像Autoptimize這樣的免費外掛來最小化你的程式碼，或者使用Perfmatters、WP Rocket或FlyingPress這樣的高階綜合外掛。
或者，檢視我們完整的程式碼最小化教程以瞭解更多。雖然該教程側重於JavaScript，但你也可以使用同樣的方法和外掛來簡化其他程式碼。
使用伺服器級別的壓縮（Gzip或Brotli）
伺服器級別的壓縮可以讓你使用Gzip或Brotli等技術縮小網站的檔案大小。
例如，下面示例網站使用的壓縮技術將主頁的檔案大小減少了85.82%。
用Gzip節省檔案大小的例子
你可以使用GiftOfSpeed的這個免費工具來檢查你的網站是否啟用了Gzip或Brotli。
如果你的網站沒有使用壓縮，你可以按照我們關於如何啟用Gzip壓縮的指南來設定它。
如果你使用Cloudflare為你的網站內容提供服務，Cloudflare也有一個內建設定來啟用Brotli壓縮：
- 在 Cloudflare 儀表板中開啟您的網站。
- 轉到側欄選單中的Speed → Optimization。
- 啟用Brotli開關。
如何在Cloudflare中啟用Brotli壓縮
壓縮和調整影象大小
如果你的LCP元素是一個影象，找到減少該影象檔案大小的方法將減少使用者的瀏覽器下載影象的時間（從而加快你的LCP時間）。
為了減少影象的大小，你應該把影象的大小調整到你實際使用的尺寸，用有損或無失真壓縮來壓縮它，並以優化的格式（如WebP）提供它。
這種方法只是一般的效能優化的最佳做法–它不是專門針對最大內容的繪畫。
要想了解更全面的情況，請檢視我們的網站影象優化的詳細指南。
預載入最大內容繪製圖
如果你的LCP元素是一個影象，另一個改善LCP的策略是預裝最大的內容豐富的油漆影象。這就是為什麼你可能會在PageSpeed Insights中看到 “預載入最大內容的繪畫影象 “這樣的建議。
通過預載入，你可以告訴使用者的瀏覽器優先下載某些資源，例如作為你網站LCP元素的特定影象。
預載入LCP影象的最非技術性的方法是使用像Perfmatters這樣的外掛，它提供了一個專門的預載入關鍵影象功能。你所需要做的就是指定要預載多少張圖片–我們建議只從一張開始，因為預載太多的資產會產生負面影響。
如何用Perfmatters預載LCP影象
在WordPress.org也有一些免費的外掛來實現這一點，如WPZOOM的預載入特色圖片外掛，以及其他高階外掛，如FlyingPress。
檢查懶載入問題
另一個可以在PageSpeed Insights中觸發 “預載入最大的Contentful Paint影象 “資訊的問題是，你的WordPress網站是如何懶載入影象。
或者，這也可以觸發PageSpeed Insights中的 “最大的內容繪製影象被懶載入 “警告。
懶惰載入讓你通過等待載入某些資源（如影象），直到使用者開始與你的網站互動，來加快你的網站的初始載入時間。
雖然這通常是一件好事，但如果你的網站試圖懶惰地載入作為你的LCP元素的影象，它可能會減慢你的LCP時間。出於這個原因，你要確保你的網站不懶惰地載入任何在初始視口可見的影象。
如果你使用WordPress在5.5版本中引入的本地瀏覽器懶惰載入功能，你應該不會遇到這個問題，因為WordPress已經自動排除了WordPress 5.9版本中的第一張內容圖片。
如果你想排除比第一張圖片更多的圖片，你可以使用wp_omit_loading_attr_threshold函式（但大多數人不需要在這裡做什麼）。
然而，如果你使用的是一個由JavaScript驅動的懶載入外掛，你可能需要在外掛的設定中手動設定這種排除法。例如，Perfmatters外掛包括一個選項，讓你從懶惰載入中排除第一個 “X “圖片。
如何在Perfmatters中從懶載入中排除領先的圖片
如果你的懶載入外掛不允許你設定這種型別的排除，你可以切換到一個不同的外掛，它可以。
使用Font-Display: Optional優化字型載入
如果你的LCP元素是文字，你的網站的字型載入過程可能會延遲文字的出現，這將減慢你的LCP時間。
通常情況下，這種情況發生在使用自定義字型時。如果你的網站被配置為等待渲染任何文字，直到自定義字型載入後，如果自定義字型檔案需要很長時間來載入，這將會減慢速度。
為了解決這個問題，你可以使用Font-Display: Optional CSS descriptor。
這告訴瀏覽器，如果自定義字型沒有在一個小視窗（通常在100毫秒或更短的時間內）內載入，就使用一個後備字型。
用通俗的話說，這基本上意味著瀏覽器應該給自定義字型一個載入的機會。但是，如果自定義字型的載入速度不夠快，瀏覽器就應該使用一個後備系統字型，以避免進一步延遲內容。
另外，你也可以使用Font-Display: Swap，它可以立即載入後備字型，然後在自定義字型載入後 “換 “入自定義字型。然而，如果字型的大小不同，這種方法可能會導致累積佈局偏移的問題，所以你要小心。
除非你的自定義字型對你的網站設計是絕對必要的，否則使用Font-Display.Optional通常是最好的選擇。從Core Web Vitals的角度來看，可選通常是最好的選擇。
如果你願意直接使用CSS，你可以在你的子主題的樣式表中手動編輯Font-Display屬性。
如果你不想使用CSS，你也可以找到外掛來幫助你這樣做，儘管它們中的大多數都專注於為谷歌字型進行優化。
- Asset CleanUp – 支援免費的谷歌字型和專業版的自定義本地字型。
- Perfmatters – 為谷歌字型提供功能。
如果你使用 Elementor 設計你的網站，Elementor 也包括一個內建選項，讓你對用 Elementor 建立的頁面使用這個。
- 進入Elementor → Settings.
- 開啟Advanced選項卡.
- 將Google Fonts Load下拉選單選為Optional.
在Elementor中如何設定Font-Display: Optional
總的來說，如果您正在以任何方式改善網站的效能，所有這些優化方法都是標準建議。如果你花時間優化你的網站，你的LCP分數應該會相應地下降，你的使用者會因此而感到高興。
關於最大內容繪製 (LCP) 的常見問題
理解像LCP這樣的概念比理解頁面的單個整體載入時間更不直觀。考慮到這一點，以下是我們看到的有關LCP分數的一些最常見問題。
LCP如何影響我網站的效能？
在衡量您網站的效能時，單一的整體載入時間並不能讓您準確瞭解您的頁面優化的程度。專注於 LCP 等特定指標可讓您更好地瞭解伺服器的響應方式。它還告訴您使用者完整檢視您的網站需要多長時間。專門針對 LCP 或其他指標只會提高您網站的整體效能，因為它們是更大整體的一部分。
LCP與頁面載入時間相同嗎？
網站所有者通常會測試他們的頁面並檢視每個頁面的載入時間。一些效能測量工具給你一個單一的數字，沒有別的。但是，LCP等個別指標可幫助您更好地瞭解使用者訪問您的網站時實際發生的情況。
LCP很可能在整個頁面載入之前發生。並且一些元素可能會在它之後填充（更大的檔案大小或影象）。理想情況下，您的LCP時間將比您的整體頁面載入時間更快。
除了LCP，還有哪些其他網頁核心指標？
當谷歌試圖確定一個網站是否能提供強大的使用者體驗（UX）時，其Core Web Vitals是衡量標準。
LCP只是其中之一。其他包括首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。您還可以檢查First Contentful Paint (FCP)，它與使用者對頁面載入速度的看法更相關。
小結
在評估您網站的效能時，最好不要關注單個數字，例如載入主頁所需的時間。雖然這很重要，但 LCP 等個別指標可以幫助您確定可能需要改進的特定元素和領域。
每個頁面的最大內容繪製讓您瞭解訪問者必須等待多長時間，直到頁面載入到足以讓他們理解它。使用 FCP，它是檢視頁面所需的時間。即便如此，他們也可能需要等待更長的時間，直到它成為可互動的，這可能會在 LCP 之後出現。這個指標是一個難題。但是，通過優化此分數，您可以在您的網站上提供更好的使用者體驗。
評論留言