每個(gè)網(wǎng)頁都由數(shù)十或數(shù)百個(gè)元素組成。其中包括文本、圖像、按鈕、小部件等等。每個(gè)元素的大小各不相同，最大的調(diào)用會告訴您很多關(guān)于使用稱為最大內(nèi)容繪制 (LCP) 的指標(biāo)優(yōu)化您的網(wǎng)站的情況。

在本文中，我們將解釋LCP（英文全稱Largest Contentful Paint）的概念。我們還將向您展示如何測量此數(shù)據(jù)點(diǎn)并解釋結(jié)果。最后，我們將討論如何優(yōu)化您的LCP分?jǐn)?shù)。

什么是最大內(nèi)容繪制 (LCP)？

在大多數(shù)網(wǎng)頁上，有一個(gè)元素因其大小和突出程度而與眾不同。例如，考慮這個(gè)著陸頁，其中巨無霸Banner部分在視口中占主導(dǎo)地位：

那個(gè)巨無霸Banner部分代表這個(gè)特定頁面的最大內(nèi)容繪制（LCP）。也就是說，LCP是網(wǎng)站渲染包含最多內(nèi)容的元素所花費(fèi)的時(shí)間。

如果您想找出此頁面的LCP，您需要測量加載英雄部分所需的時(shí)間。理論上，如果您的LCP分?jǐn)?shù)較低，則意味著您的網(wǎng)站優(yōu)化得很好，并且可以為用戶快速加載。

重要的是要了解LCP分?jǐn)?shù)可能（并且希望會）與您網(wǎng)站的整體加載時(shí)間不同。您可能有一個(gè)頁面需要 3 秒才能完全加載，但它的LCP可能只有 2 秒。這是因?yàn)榇蠖鄶?shù)現(xiàn)代網(wǎng)站還在文本和媒體文件之上加載腳本。

通常，LCP與First Contentful Paint (FCP) 齊頭并進(jìn)。這是一個(gè)指標(biāo)，它告訴您當(dāng)有人訪問您的網(wǎng)站時(shí)，呈現(xiàn)任何內(nèi)容的第一個(gè)元素需要多長時(shí)間 。結(jié)合使用這些指標(biāo)（或 Google的Core Web Vitals），您可以比整體加載時(shí)間更深入地了解網(wǎng)站的性能。

請記住，在衡量您網(wǎng)站的LCP時(shí)，Google不會考慮所有內(nèi)容。它將忽略可縮放矢量圖形 (SVG) 文件和視頻等元素，但這些元素可能會包含在Google的Core Web Vitals的未來更新中。

如何測量LCP

通常，確定您網(wǎng)站上最大的內(nèi)容元素是很容易的。您所要做的就是等待頁面完全加載并環(huán)顧四周。在大多數(shù)情況下，有一個(gè)部分或元素比其他部分或元素更突出。正如我們上面提到的，它可能是英雄部分，也可能是博客中的實(shí)際帖子內(nèi)容。

它通常是一個(gè)圖像或文本塊（例如上面的英雄部分或一般的博客內(nèi)容）。LCP也因用戶而異，因?yàn)樗谒麄兊囊暱冢ɑ蚴灼羶?nèi)容）。

LCP的真正訣竅在于測量特定元素加載所需的時(shí)間。（不是頁面本身。）幸運(yùn)的是，如果您曾經(jīng)使用過可以衡量加載時(shí)間的工具或服務(wù)，那么它很可能還包含詳細(xì)的指標(biāo)，例如FCP和LCP分?jǐn)?shù)。

例如，考慮PageSpeed Insights。您可以輸入任何URL，服務(wù)將對該頁面進(jìn)行完整的性能測試。在結(jié)果中，您將看到總體性能得分。實(shí)測數(shù)據(jù)部分下還有其他指標(biāo)的細(xì)分——包括LCP：

PageSpeed Insights收集來自多個(gè)用戶的真實(shí)性能數(shù)據(jù)，并使用它為您提供一段時(shí)間內(nèi)的匯總分?jǐn)?shù)。這種方法比使用單個(gè)測試來確定您網(wǎng)站的性能要精確得多。

此外，您可以獲得每個(gè)分?jǐn)?shù)的百分比細(xì)分。在上面的例子中，我們可以看到89%的頁面加載發(fā)生在1.5秒內(nèi)，這是一個(gè)了不起的分?jǐn)?shù)。但是，其余11%的頁面加載不在該范圍內(nèi)。這意味著對于某些用戶來說，LCP需要更長的時(shí)間來解決。

重要的是要了解，即使您的網(wǎng)站優(yōu)化得很好，加載時(shí)間也會 因用戶群而異。某些訪問者的Internet連接速度可能較慢或距離您的服務(wù)器太遠(yuǎn)。這些只是在某些情況下加載時(shí)間可能更長的眾多原因中的兩個(gè)。這就是為什么有一個(gè)平均分?jǐn)?shù)作為參考至關(guān)重要。

如果您進(jìn)一步向下滾動PageSpeed Insights結(jié)果頁面，您將看到實(shí)驗(yàn)室數(shù)據(jù)部分。在這里，Google為您提供了它剛剛在您的網(wǎng)頁上運(yùn)行的測試的精確結(jié)果：

PageSpeed Insights使用此實(shí)驗(yàn)室數(shù)據(jù)為您提供您在結(jié)果開始時(shí)看到的總分。實(shí)驗(yàn)室數(shù)據(jù)不能像匯總的實(shí)測數(shù)據(jù)信息那樣提供全面的信息。但是，它仍然可以讓您對網(wǎng)站的性能有一個(gè)很好的了解。

理想情況下，您的LCP分?jǐn)?shù)應(yīng)低于2.5秒（相比之下，F(xiàn)CP是理想的1.8秒）。這個(gè)時(shí)間越低越好。為了獲得最佳分?jǐn)?shù)和體驗(yàn)，您的整體加載時(shí)間應(yīng)保持在3秒以下。在那之后，您通常會開始看到跳出率顯著增加。

根據(jù)我們的經(jīng)驗(yàn)，PageSpeed Insights 是您可以用來衡量LCP和整體加載時(shí)間的最佳工具。但是，如果您為您的網(wǎng)站設(shè)置了Search Console，您也可以訪問相同的信息，我們絕對推薦用于搜索引擎優(yōu)化 (SEO) 目的。

如果您想查看 Google 之外的內(nèi)容，您還可以使用瀏覽器的開發(fā)工具手動測量LCP時(shí)間。大多數(shù)開發(fā)工具包使您能夠測量頁面加載時(shí)間，提供有關(guān)加載每個(gè)元素和處理每個(gè)請求所需時(shí)間的詳細(xì)信息。然而，這種手動方法涉及到很多 比使用第三方服務(wù)更多的工作。

您還可以使用GT Metrix和Pingdom等速度測試服務(wù)來查看對LCP和其他頁面加載指標(biāo)的更多了解。

如何優(yōu)化網(wǎng)站LCP分?jǐn)?shù)

如果您可以識別頁面上最大的元素，則應(yīng)該能夠?qū)ζ溥M(jìn)行優(yōu)化。例如，如果該元素是圖像，您始終可以使用壓縮工具來減小其文件大小并提高LCP分?jǐn)?shù)。

但是，這種方法僅適用于您的網(wǎng)站沒有得到很好的優(yōu)化。如果您已經(jīng)采取措施提高網(wǎng)站的性能，那么您需要考慮不同的方法來優(yōu)化其LCP分?jǐn)?shù)。

根據(jù)我們的經(jīng)驗(yàn)，您可以通過以下最有效的優(yōu)化來提高網(wǎng)站的LCP分?jǐn)?shù)：

• 調(diào)整大小和壓縮圖像。在大多數(shù)情況下，圖像將決定您的 LCP 分?jǐn)?shù)。根據(jù)經(jīng)驗(yàn)，您應(yīng)該調(diào)整和優(yōu)化上傳到網(wǎng)站的每張圖片（可以考慮圖片壓縮插件）。WordPress 5.8開始兼容WebP圖片，這可以幫助許多網(wǎng)站進(jìn)入LCP時(shí)代。
• 選擇更好的托管服務(wù)。如果您已經(jīng)努力優(yōu)化您的網(wǎng)站，但加載時(shí)間仍然太長，這可能是由于您的網(wǎng)絡(luò)主機(jī)。您可能使用的計(jì)劃跟不上您網(wǎng)站的受歡迎程度，或者您的虛擬主機(jī)可能無法提供您需要的性能。無論您在網(wǎng)站上投入多少工作，可靠的托管計(jì)劃都可以成敗。
• 使用內(nèi)容交付網(wǎng)絡(luò) (CDN)。 CDN可以在世界各地的服務(wù)器集群上緩存您網(wǎng)站的副本，并將其提供給訪問者。一些 CDN 還提供特定于圖像的服務(wù)，這有助于極大地降低 LCP 分?jǐn)?shù)。
• 消除渲染阻塞資源。如果資源在執(zhí)行之前停止加載您網(wǎng)站上的元素，則該資源是“渲染阻塞”的。通常，這些是您網(wǎng)站的關(guān)鍵結(jié)構(gòu)，例如HTML、CSS和JavaScript。根據(jù)經(jīng)驗(yàn)，您希望消除或推遲執(zhí)行此操作的元素，或者在其他所有內(nèi)容加載完成后強(qiáng)制它們運(yùn)行。許多插件，例如WP Rocket可以通過切換為您完成此操作。

總的來說，如果您正在以任何方式改善網(wǎng)站的性能，所有這些優(yōu)化方法都是標(biāo)準(zhǔn)建議。如果你花時(shí)間優(yōu)化你的網(wǎng)站，你的LCP分?jǐn)?shù)應(yīng)該會相應(yīng)地下降，你的用戶會因此而感到高興。

關(guān)于最大內(nèi)容繪制 (LCP) 的常見問題

理解像LCP這樣的概念比理解頁面的單個(gè)整體加載時(shí)間更不直觀?？紤]到這一點(diǎn)，以下是我們看到的有關(guān)LCP分?jǐn)?shù)的一些最常見問題。

LCP如何影響我網(wǎng)站的性能？

在衡量您網(wǎng)站的性能時(shí)，單一的整體加載時(shí)間并不能讓您準(zhǔn)確了解您的頁面優(yōu)化的程度。專注于 LCP 等特定指標(biāo)可讓您更好地了解服務(wù)器的響應(yīng)方式。它還告訴您用戶完整查看您的網(wǎng)站需要多長時(shí)間。專門針對 LCP 或其他指標(biāo)只會提高您網(wǎng)站的整體性能，因?yàn)樗鼈兪歉笳w的一部分。

LCP與頁面加載時(shí)間相同嗎？

網(wǎng)站所有者通常會測試他們的頁面并查看每個(gè)頁面的加載時(shí)間。一些性能測量工具給你一個(gè)單一的數(shù)字，沒有別的。但是，LCP等個(gè)別指標(biāo)可幫助您更好地了解用戶訪問您的網(wǎng)站時(shí)實(shí)際發(fā)生的情況。

LCP很可能在整個(gè)頁面加載之前發(fā)生。并且一些元素可能會在它之后填充（更大的文件大小或圖像）。理想情況下，您的LCP時(shí)間將比您的整體頁面加載時(shí)間更快。

除了LCP，還有哪些其他Web核心要素？

當(dāng)谷歌試圖確定一個(gè)網(wǎng)站是否能提供強(qiáng)大的用戶體驗(yàn)（UX）時(shí)，其Core Web Vitals是衡量標(biāo)準(zhǔn)。

LCP只是其中之一。其他包括首次輸入延遲 (FID) 和累積布局偏移 (CLS)。您還可以檢查First Contentful Paint (FCP)，它與用戶對頁面加載速度的看法更相關(guān)。

小結(jié)

在評估您網(wǎng)站的性能時(shí)，最好不要關(guān)注單個(gè)數(shù)字，例如加載主頁所需的時(shí)間。雖然這很重要，但 LCP 等個(gè)別指標(biāo)可以幫助您確定可能需要改進(jìn)的特定元素和領(lǐng)域。

每個(gè)頁面的最大內(nèi)容繪制讓您了解訪問者必須等待多長時(shí)間，直到頁面加載到足以讓他們理解它。使用 FCP，它是查看頁面所需的時(shí)間。即便如此，他們也可能需要等待更長的時(shí)間，直到它成為可交互的，這可能會在 LCP 之后出現(xiàn)。這個(gè)指標(biāo)是一個(gè)難題。但是，通過優(yōu)化此分?jǐn)?shù)，您可以在您的網(wǎng)站上提供更好的用戶體驗(yàn)。

當(dāng)前文章：什么是最大內(nèi)容繪制(LCP)以及如何有效地優(yōu)化
URL鏈接：http://uogjgqi.cn/article/djegjhs.html