建站
咨詢
售后
建站咨詢
新聞中心
每個(gè)網(wǎng)頁(yè)都由數(shù)十或數(shù)百個(gè)元素組成。其中包括文本、圖像、按鈕、小部件等等。每個(gè)元素的大小各不相同，最大的調(diào)用會(huì)告訴您很多關(guān)于使用稱為最大內(nèi)容繪制 (LCP) 的指標(biāo)優(yōu)化您的網(wǎng)站的情況。
在本文中，我們將解釋LCP（英文全稱Largest Contentful Paint）的概念。我們還將向您展示如何測(cè)量此數(shù)據(jù)點(diǎn)并解釋結(jié)果。最后，我們將討論如何優(yōu)化您的LCP分?jǐn)?shù)。
什么是最大內(nèi)容繪制 (LCP)？
在大多數(shù)網(wǎng)頁(yè)上，有一個(gè)元素因其大小和突出程度而與眾不同。例如，考慮這個(gè)著陸頁(yè)，其中巨無(wú)霸Banner部分在視口中占主導(dǎo)地位：
那個(gè)巨無(wú)霸Banner部分代表這個(gè)特定頁(yè)面的最大內(nèi)容繪制（LCP）。也就是說(shuō)，LCP是網(wǎng)站渲染包含最多內(nèi)容的元素所花費(fèi)的時(shí)間。
如果您想找出此頁(yè)面的LCP，您需要測(cè)量加載英雄部分所需的時(shí)間。理論上，如果您的LCP分?jǐn)?shù)較低，則意味著您的網(wǎng)站優(yōu)化得很好，并且可以為用戶快速加載。
重要的是要了解LCP分?jǐn)?shù)可能（并且希望會(huì)）與您網(wǎng)站的整體加載時(shí)間不同。您可能有一個(gè)頁(yè)面需要 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è)元素需要多長(zhǎng)時(shí)間 。結(jié)合使用這些指標(biāo)（或 Google的Core Web Vitals），您可以比整體加載時(shí)間更深入地了解網(wǎng)站的性能。
請(qǐng)記住，在衡量您網(wǎng)站的LCP時(shí)，Google不會(huì)考慮所有內(nèi)容。它將忽略可縮放矢量圖形 (SVG) 文件和視頻等元素，但這些元素可能會(huì)包含在Google的Core Web Vitals的未來(lái)更新中。
如何測(cè)量LCP
通常，確定您網(wǎng)站上最大的內(nèi)容元素是很容易的。您所要做的就是等待頁(yè)面完全加載并環(huán)顧四周。在大多數(shù)情況下，有一個(gè)部分或元素比其他部分或元素更突出。正如我們上面提到的，它可能是英雄部分，也可能是博客中的實(shí)際帖子內(nèi)容。
它通常是一個(gè)圖像或文本塊（例如上面的英雄部分或一般的博客內(nèi)容）。LCP也因用戶而異，因?yàn)樗谒麄兊囊暱冢ɑ蚴灼羶?nèi)容）。
LCP的真正訣竅在于測(cè)量特定元素加載所需的時(shí)間。（不是頁(yè)面本身。）幸運(yùn)的是，如果您曾經(jīng)使用過可以衡量加載時(shí)間的工具或服務(wù)，那么它很可能還包含詳細(xì)的指標(biāo)，例如FCP和LCP分?jǐn)?shù)。
例如，考慮PageSpeed Insights。您可以輸入任何URL，服務(wù)將對(duì)該頁(yè)面進(jìn)行完整的性能測(cè)試。在結(jié)果中，您將看到總體性能得分。實(shí)測(cè)數(shù)據(jù)部分下還有其他指標(biāo)的細(xì)分——包括LCP：
PageSpeed Insights收集來(lái)自多個(gè)用戶的真實(shí)性能數(shù)據(jù)，并使用它為您提供一段時(shí)間內(nèi)的匯總分?jǐn)?shù)。這種方法比使用單個(gè)測(cè)試來(lái)確定您網(wǎng)站的性能要精確得多。
此外，您可以獲得每個(gè)分?jǐn)?shù)的百分比細(xì)分。在上面的例子中，我們可以看到89%的頁(yè)面加載發(fā)生在1.5秒內(nèi)，這是一個(gè)了不起的分?jǐn)?shù)。但是，其余11%的頁(yè)面加載不在該范圍內(nèi)。這意味著對(duì)于某些用戶來(lái)說(shuō)，LCP需要更長(zhǎng)的時(shí)間來(lái)解決。
重要的是要了解，即使您的網(wǎng)站優(yōu)化得很好，加載時(shí)間也會(huì) 因用戶群而異。某些訪問者的Internet連接速度可能較慢或距離您的服務(wù)器太遠(yuǎn)。這些只是在某些情況下加載時(shí)間可能更長(zhǎng)的眾多原因中的兩個(gè)。這就是為什么有一個(gè)平均分?jǐn)?shù)作為參考至關(guān)重要。
如果您進(jìn)一步向下滾動(dòng)PageSpeed Insights結(jié)果頁(yè)面，您將看到實(shí)驗(yàn)室數(shù)據(jù)部分。在這里，Google為您提供了它剛剛在您的網(wǎng)頁(yè)上運(yùn)行的測(cè)試的精確結(jié)果：
PageSpeed Insights使用此實(shí)驗(yàn)室數(shù)據(jù)為您提供您在結(jié)果開始時(shí)看到的總分。實(shí)驗(yàn)室數(shù)據(jù)不能像匯總的實(shí)測(cè)數(shù)據(jù)信息那樣提供全面的信息。但是，它仍然可以讓您對(duì)網(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秒以下。在那之后，您通常會(huì)開始看到跳出率顯著增加。
根據(jù)我們的經(jīng)驗(yàn)，PageSpeed Insights 是您可以用來(lái)衡量LCP和整體加載時(shí)間的最佳工具。但是，如果您為您的網(wǎng)站設(shè)置了Search Console，您也可以訪問相同的信息，我們絕對(duì)推薦用于搜索引擎優(yōu)化 (SEO) 目的。
如果您想查看 Google 之外的內(nèi)容，您還可以使用瀏覽器的開發(fā)工具手動(dòng)測(cè)量LCP時(shí)間。大多數(shù)開發(fā)工具包使您能夠測(cè)量頁(yè)面加載時(shí)間，提供有關(guān)加載每個(gè)元素和處理每個(gè)請(qǐng)求所需時(shí)間的詳細(xì)信息。然而，這種手動(dòng)方法涉及到很多 比使用第三方服務(wù)更多的工作。
您還可以使用GT Metrix和Pingdom等速度測(cè)試服務(wù)來(lái)查看對(duì)LCP和其他頁(yè)面加載指標(biāo)的更多了解。
如何優(yōu)化網(wǎng)站LCP分?jǐn)?shù)
如果您可以識(shí)別頁(yè)面上最大的元素，則應(yīng)該能夠?qū)ζ溥M(jìn)行優(yōu)化。例如，如果該元素是圖像，您始終可以使用壓縮工具來(lái)減小其文件大小并提高LCP分?jǐn)?shù)。
但是，這種方法僅適用于您的網(wǎng)站沒有得到很好的優(yōu)化。如果您已經(jīng)采取措施提高網(wǎng)站的性能，那么您需要考慮不同的方法來(lái)優(yōu)化其LCP分?jǐn)?shù)。
根據(jù)我們的經(jīng)驗(yàn)，您可以通過以下最有效的優(yōu)化來(lái)提高網(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í)間仍然太長(zhǎng)，這可能是由于您的網(wǎng)絡(luò)主機(jī)。您可能使用的計(jì)劃跟不上您網(wǎng)站的受歡迎程度，或者您的虛擬主機(jī)可能無(wú)法提供您需要的性能。無(wú)論您在網(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可以通過切換為您完成此操作。
總的來(lái)說(shuō)，如果您正在以任何方式改善網(wǎng)站的性能，所有這些優(yōu)化方法都是標(biāo)準(zhǔn)建議。如果你花時(shí)間優(yōu)化你的網(wǎng)站，你的LCP分?jǐn)?shù)應(yīng)該會(huì)相應(yīng)地下降，你的用戶會(huì)因此而感到高興。
關(guān)于最大內(nèi)容繪制 (LCP) 的常見問題
理解像LCP這樣的概念比理解頁(yè)面的單個(gè)整體加載時(shí)間更不直觀。考慮到這一點(diǎn)，以下是我們看到的有關(guān)LCP分?jǐn)?shù)的一些最常見問題。
LCP如何影響我網(wǎng)站的性能？
在衡量您網(wǎng)站的性能時(shí)，單一的整體加載時(shí)間并不能讓您準(zhǔn)確了解您的頁(yè)面優(yōu)化的程度。專注于 LCP 等特定指標(biāo)可讓您更好地了解服務(wù)器的響應(yīng)方式。它還告訴您用戶完整查看您的網(wǎng)站需要多長(zhǎng)時(shí)間。專門針對(duì) LCP 或其他指標(biāo)只會(huì)提高您網(wǎng)站的整體性能，因?yàn)樗鼈兪歉笳w的一部分。
LCP與頁(yè)面加載時(shí)間相同嗎？
網(wǎng)站所有者通常會(huì)測(cè)試他們的頁(yè)面并查看每個(gè)頁(yè)面的加載時(shí)間。一些性能測(cè)量工具給你一個(gè)單一的數(shù)字，沒有別的。但是，LCP等個(gè)別指標(biāo)可幫助您更好地了解用戶訪問您的網(wǎng)站時(shí)實(shí)際發(fā)生的情況。
LCP很可能在整個(gè)頁(yè)面加載之前發(fā)生。并且一些元素可能會(huì)在它之后填充（更大的文件大小或圖像）。理想情況下，您的LCP時(shí)間將比您的整體頁(yè)面加載時(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)，它與用戶對(duì)頁(yè)面加載速度的看法更相關(guān)。
小結(jié)
在評(píng)估您網(wǎng)站的性能時(shí)，最好不要關(guān)注單個(gè)數(shù)字，例如加載主頁(yè)所需的時(shí)間。雖然這很重要，但 LCP 等個(gè)別指標(biāo)可以幫助您確定可能需要改進(jìn)的特定元素和領(lǐng)域。
每個(gè)頁(yè)面的最大內(nèi)容繪制讓您了解訪問者必須等待多長(zhǎng)時(shí)間，直到頁(yè)面加載到足以讓他們理解它。使用 FCP，它是查看頁(yè)面所需的時(shí)間。即便如此，他們也可能需要等待更長(zhǎng)的時(shí)間，直到它成為可交互的，這可能會(huì)在 LCP 之后出現(xiàn)。這個(gè)指標(biāo)是一個(gè)難題。但是，通過優(yōu)化此分?jǐn)?shù)，您可以在您的網(wǎng)站上提供更好的用戶體驗(yàn)。
新聞名稱：什么是最大內(nèi)容繪制(LCP)以及如何有效地優(yōu)化
文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/djegjhs.html
