建站
咨詢
售后
建站咨詢
新聞中心
每個網(wǎng)頁都由數(shù)十或數(shù)百個元素組成。其中包括文本、圖像、按鈕、小部件等等。每個元素的大小各不相同，最大的調(diào)用會告訴您很多關于使用稱為最大內(nèi)容繪制 (LCP) 的指標優(yōu)化您的網(wǎng)站的情況。
在本文中，我們將解釋LCP（英文全稱Largest Contentful Paint）的概念。我們還將向您展示如何測量此數(shù)據(jù)點并解釋結果。最后，我們將討論如何優(yōu)化您的LCP分數(shù)。
什么是最大內(nèi)容繪制 (LCP)？
在大多數(shù)網(wǎng)頁上，有一個元素因其大小和突出程度而與眾不同。例如，考慮這個著陸頁，其中巨無霸Banner部分在視口中占主導地位：
那個巨無霸Banner部分代表這個特定頁面的最大內(nèi)容繪制（LCP）。也就是說，LCP是網(wǎng)站渲染包含最多內(nèi)容的元素所花費的時間。
如果您想找出此頁面的LCP，您需要測量加載英雄部分所需的時間。理論上，如果您的LCP分數(shù)較低，則意味著您的網(wǎng)站優(yōu)化得很好，并且可以為用戶快速加載。
重要的是要了解LCP分數(shù)可能（并且希望會）與您網(wǎng)站的整體加載時間不同。您可能有一個頁面需要 3 秒才能完全加載，但它的LCP可能只有 2 秒。這是因為大多數(shù)現(xiàn)代網(wǎng)站還在文本和媒體文件之上加載腳本。
通常，LCP與First Contentful Paint (FCP) 齊頭并進。這是一個指標，它告訴您當有人訪問您的網(wǎng)站時，呈現(xiàn)任何內(nèi)容的第一個元素需要多長時間 。結合使用這些指標（或 Google的Core Web Vitals），您可以比整體加載時間更深入地了解網(wǎng)站的性能。
請記住，在衡量您網(wǎng)站的LCP時，Google不會考慮所有內(nèi)容。它將忽略可縮放矢量圖形 (SVG) 文件和視頻等元素，但這些元素可能會包含在Google的Core Web Vitals的未來更新中。
如何測量LCP
通常，確定您網(wǎng)站上最大的內(nèi)容元素是很容易的。您所要做的就是等待頁面完全加載并環(huán)顧四周。在大多數(shù)情況下，有一個部分或元素比其他部分或元素更突出。正如我們上面提到的，它可能是英雄部分，也可能是博客中的實際帖子內(nèi)容。
它通常是一個圖像或文本塊（例如上面的英雄部分或一般的博客內(nèi)容）。LCP也因用戶而異，因為它基于他們的視口（或首屏內(nèi)容）。
LCP的真正訣竅在于測量特定元素加載所需的時間。（不是頁面本身。）幸運的是，如果您曾經(jīng)使用過可以衡量加載時間的工具或服務，那么它很可能還包含詳細的指標，例如FCP和LCP分數(shù)。
例如，考慮PageSpeed Insights。您可以輸入任何URL，服務將對該頁面進行完整的性能測試。在結果中，您將看到總體性能得分。實測數(shù)據(jù)部分下還有其他指標的細分——包括LCP：
PageSpeed Insights收集來自多個用戶的真實性能數(shù)據(jù)，并使用它為您提供一段時間內(nèi)的匯總分數(shù)。這種方法比使用單個測試來確定您網(wǎng)站的性能要精確得多。
此外，您可以獲得每個分數(shù)的百分比細分。在上面的例子中，我們可以看到89%的頁面加載發(fā)生在1.5秒內(nèi)，這是一個了不起的分數(shù)。但是，其余11%的頁面加載不在該范圍內(nèi)。這意味著對于某些用戶來說，LCP需要更長的時間來解決。
重要的是要了解，即使您的網(wǎng)站優(yōu)化得很好，加載時間也會 因用戶群而異。某些訪問者的Internet連接速度可能較慢或距離您的服務器太遠。這些只是在某些情況下加載時間可能更長的眾多原因中的兩個。這就是為什么有一個平均分數(shù)作為參考至關重要。
如果您進一步向下滾動PageSpeed Insights結果頁面，您將看到實驗室數(shù)據(jù)部分。在這里，Google為您提供了它剛剛在您的網(wǎng)頁上運行的測試的精確結果：
PageSpeed Insights使用此實驗室數(shù)據(jù)為您提供您在結果開始時看到的總分。實驗室數(shù)據(jù)不能像匯總的實測數(shù)據(jù)信息那樣提供全面的信息。但是，它仍然可以讓您對網(wǎng)站的性能有一個很好的了解。
理想情況下，您的LCP分數(shù)應低于2.5秒（相比之下，F(xiàn)CP是理想的1.8秒）。這個時間越低越好。為了獲得最佳分數(shù)和體驗，您的整體加載時間應保持在3秒以下。在那之后，您通常會開始看到跳出率顯著增加。
根據(jù)我們的經(jīng)驗，PageSpeed Insights 是您可以用來衡量LCP和整體加載時間的最佳工具。但是，如果您為您的網(wǎng)站設置了Search Console，您也可以訪問相同的信息，我們絕對推薦用于搜索引擎優(yōu)化 (SEO) 目的。
如果您想查看 Google 之外的內(nèi)容，您還可以使用瀏覽器的開發(fā)工具手動測量LCP時間。大多數(shù)開發(fā)工具包使您能夠測量頁面加載時間，提供有關加載每個元素和處理每個請求所需時間的詳細信息。然而，這種手動方法涉及到很多 比使用第三方服務更多的工作。
您還可以使用GT Metrix和Pingdom等速度測試服務來查看對LCP和其他頁面加載指標的更多了解。
如何優(yōu)化網(wǎng)站LCP分數(shù)
如果您可以識別頁面上最大的元素，則應該能夠?qū)ζ溥M行優(yōu)化。例如，如果該元素是圖像，您始終可以使用壓縮工具來減小其文件大小并提高LCP分數(shù)。
但是，這種方法僅適用于您的網(wǎng)站沒有得到很好的優(yōu)化。如果您已經(jīng)采取措施提高網(wǎng)站的性能，那么您需要考慮不同的方法來優(yōu)化其LCP分數(shù)。
根據(jù)我們的經(jīng)驗，您可以通過以下最有效的優(yōu)化來提高網(wǎng)站的LCP分數(shù)：
- 調(diào)整大小和壓縮圖像。在大多數(shù)情況下，圖像將決定您的 LCP 分數(shù)。根據(jù)經(jīng)驗，您應該調(diào)整和優(yōu)化上傳到網(wǎng)站的每張圖片（可以考慮圖片壓縮插件）。WordPress 5.8開始兼容WebP圖片，這可以幫助許多網(wǎng)站進入LCP時代。
- 選擇更好的托管服務。如果您已經(jīng)努力優(yōu)化您的網(wǎng)站，但加載時間仍然太長，這可能是由于您的網(wǎng)絡主機。您可能使用的計劃跟不上您網(wǎng)站的受歡迎程度，或者您的虛擬主機可能無法提供您需要的性能。無論您在網(wǎng)站上投入多少工作，可靠的托管計劃都可以成敗。
- 使用內(nèi)容交付網(wǎng)絡 (CDN)。 CDN可以在世界各地的服務器集群上緩存您網(wǎng)站的副本，并將其提供給訪問者。一些 CDN 還提供特定于圖像的服務，這有助于極大地降低 LCP 分數(shù)。
- 消除渲染阻塞資源。如果資源在執(zhí)行之前停止加載您網(wǎng)站上的元素，則該資源是“渲染阻塞”的。通常，這些是您網(wǎng)站的關鍵結構，例如HTML、CSS和JavaScript。根據(jù)經(jīng)驗，您希望消除或推遲執(zhí)行此操作的元素，或者在其他所有內(nèi)容加載完成后強制它們運行。許多插件，例如WP Rocket可以通過切換為您完成此操作。
總的來說，如果您正在以任何方式改善網(wǎng)站的性能，所有這些優(yōu)化方法都是標準建議。如果你花時間優(yōu)化你的網(wǎng)站，你的LCP分數(shù)應該會相應地下降，你的用戶會因此而感到高興。
關于最大內(nèi)容繪制 (LCP) 的常見問題
理解像LCP這樣的概念比理解頁面的單個整體加載時間更不直觀。考慮到這一點，以下是我們看到的有關LCP分數(shù)的一些最常見問題。
LCP如何影響我網(wǎng)站的性能？
在衡量您網(wǎng)站的性能時，單一的整體加載時間并不能讓您準確了解您的頁面優(yōu)化的程度。專注于 LCP 等特定指標可讓您更好地了解服務器的響應方式。它還告訴您用戶完整查看您的網(wǎng)站需要多長時間。專門針對 LCP 或其他指標只會提高您網(wǎng)站的整體性能，因為它們是更大整體的一部分。
LCP與頁面加載時間相同嗎？
網(wǎng)站所有者通常會測試他們的頁面并查看每個頁面的加載時間。一些性能測量工具給你一個單一的數(shù)字，沒有別的。但是，LCP等個別指標可幫助您更好地了解用戶訪問您的網(wǎng)站時實際發(fā)生的情況。
LCP很可能在整個頁面加載之前發(fā)生。并且一些元素可能會在它之后填充（更大的文件大小或圖像）。理想情況下，您的LCP時間將比您的整體頁面加載時間更快。
除了LCP，還有哪些其他Web核心要素？
當谷歌試圖確定一個網(wǎng)站是否能提供強大的用戶體驗（UX）時，其Core Web Vitals是衡量標準。
LCP只是其中之一。其他包括首次輸入延遲 (FID) 和累積布局偏移 (CLS)。您還可以檢查First Contentful Paint (FCP)，它與用戶對頁面加載速度的看法更相關。
小結
在評估您網(wǎng)站的性能時，最好不要關注單個數(shù)字，例如加載主頁所需的時間。雖然這很重要，但 LCP 等個別指標可以幫助您確定可能需要改進的特定元素和領域。
每個頁面的最大內(nèi)容繪制讓您了解訪問者必須等待多長時間，直到頁面加載到足以讓他們理解它。使用 FCP，它是查看頁面所需的時間。即便如此，他們也可能需要等待更長的時間，直到它成為可交互的，這可能會在 LCP 之后出現(xiàn)。這個指標是一個難題。但是，通過優(yōu)化此分數(shù)，您可以在您的網(wǎng)站上提供更好的用戶體驗。
文章標題：什么是最大內(nèi)容繪制(LCP)以及如何有效地優(yōu)化
文章地址：http://m.5511xx.com/article/djegjhs.html
