意旨;韋氏詞典將“contentful”一詞定義為“未找到”。顯然是有人編造了這個詞，但這并不一定是壞事。

用戶體驗度量的世界正在快速發(fā)展，因此需要新的術語。最大內容繪制(LCP)是衡量網(wǎng)頁內容渲染時間的眾多指標之一。

最大的內容是什么?

谷歌將LCP定義為“在視口內可見的最大內容元素的呈現(xiàn)時間”。對于我們在這個博客中討論的內容，我們將把“內容”看作是圖像，通常是JPEG或PNG文件。在大多數(shù)情況下，“最大”指的是一個“在折疊上方”的英雄形象，它是人們在加載頁面時最先注意到的形象之一。對這個最大的內容進行優(yōu)化對于改進LCP至關重要。

相對于其他指標，查看LCP可能更有指導意義。例如，第一個內容繪制(FCP)和視覺完整的書結束LCP。

第一次內容繪制(FCP):測量從頁面開始加載到頁面內容的任何部分呈現(xiàn)在屏幕上的時間。(實驗室、字段)

最大內容繪制(LCP):測量從頁面開始加載到最大文本塊或圖像元素呈現(xiàn)在屏幕上的時間。(實驗室、字段)

視覺完整:測量客戶認為網(wǎng)頁看起來完整的時間。

每種度量標準都有其優(yōu)缺點，但LCP是一種令人滿意的折中方法。LCP標志著web頁面加載開始對用戶體驗產生實質性影響。

在谷歌看來，為了提供良好的用戶體驗，LCP應該在頁面首次開始加載的2.5秒內發(fā)生。差值是大于4秒的值。

如何最大的內容油漆影響燈塔分數(shù)和搜索引擎優(yōu)化?

LCP現(xiàn)在是幾個“核心網(wǎng)絡生命”分數(shù)的一部分，谷歌將在其排名算法中衡量。每一個核心Web要素代表了用戶體驗的一個不同方面，是可測量的領域，并反映了一個關鍵的以用戶為中心的結果的真實世界的體驗。

在整體谷歌Lighthouse評分的情況下，LCP在Lighthouse 6.0版本的性能評分中占25%的權重。這使得LCP成為決定性能分數(shù)的最重要的核心Web指標。

雖然谷歌表示，內容仍然是SEO排名中最重要的因素，但更好的用戶體驗(以核心Web Vitals衡量)將在擁擠的領域產生更高的排名。如果有很多網(wǎng)站在競爭搜索引擎的位置，那么最大的內容繪制將發(fā)揮關鍵因素的排名。

如何提高最大內容的油漆

既然您知道LCP很重要，那么如何通過加快內容加載速度來改進它呢?谷歌提供了許多建議，但最有效的技術是為請求內容的設備優(yōu)化內容。

例如，一個網(wǎng)站包含一個800kb的JPEG圖像，用于高分辨率桌面。在智能手機上，這將被優(yōu)化到小于100kb，對質量沒有明顯的影響。通過這一次優(yōu)化，LCP可以提高60%以上——或者幾秒鐘。

通過使用圖像速度測試找到最大內容的油漆節(jié)省

圖像速度測試是ImageEngine提供的一個很好的工具。提供LCP改進機會分析的io。只需粘貼您感興趣的優(yōu)化網(wǎng)頁的URL，測試將顯示:

減少圖像有效載荷

速度指數(shù)

最大的意旨油漆

頁面加載時間(視覺完成)

它還提供了網(wǎng)頁加載的視頻，無論是否進行了優(yōu)化。最后，它分析每個映像以提供有效負載節(jié)省的估計。在本例中，頁面上的“最大內容”是這張圖片。通過優(yōu)化，圖像有效載荷減少了94%。這給LCP帶來了巨大的改進。

ImageEngine如何改進LCP

ImageEngine是一個圖像內容分發(fā)網(wǎng)絡(CDN)服務，使圖像優(yōu)化簡單。基本上，對于頁面上的每個圖像，圖像CDN將:

檢測請求web頁面的設備模型;

優(yōu)化圖像的大小，壓縮，圖像格式;

通過地理上離用戶最近的CDN邊緣服務器交付。

ImageEngine為頁面上的每個圖像(包括最大的圖像)改進web性能。你可以在這里了解更多關于ImageEngine的信息，也可以注冊免費試用。

最佳實踐:Preconnect

除了使用像ImageEngine這樣的映像CDN之外，還有一些其他的最佳實踐可以改進LCP。使用資源提示為您的內容提供預連接可以簡化下載過程。

例如，在HTML中放置下面的link語句將加速下載過程。link聲明將使瀏覽器盡早連接到第三方，這樣下載就可以盡早開始。ImageEngine的優(yōu)化使每個圖像下載更小更快，但預先連接節(jié)省了連接階段的時間。

最佳實踐:最小化阻塞JavaScript和CSS

當JavaScript或CSS被“阻塞”時，這意味著瀏覽器需要解析和執(zhí)行CSS和JavaScript，以便在視窗中繪制頁面的最終狀態(tài)。

現(xiàn)在任何網(wǎng)站都嚴重依賴JavaScript和CSS，這意味著幾乎不可能避免一些渲染阻塞資源。一般來說，要注意元素中引用的CSS和JavaScript的類型。確保在中只加載嚴格必要的資源。其余的可以延遲或異步加載。

當特別想要改進LCP時，有一些實踐值得更深入地研究。

內聯(lián)CSS關鍵

這不是一項簡單的任務，但是如果瀏覽器能夠避免請求獲得渲染頁面關鍵部分(通常是“折疊上方”部分)所需的CSS，那么LCP很可能會更早出現(xiàn)。此外，您還可以避免內容的移動，甚至可以避免無風格內容的閃光(FOUC)。

關鍵的CSS -瀏覽器需要的CSS來設置頁面上方折疊部分的結構和重要樣式-應該內聯(lián)。這個內聯(lián)的CSS也可以指背景圖像，當然也應該由圖像CDN提供。

不使用JAVASCRIPT(惰性)加載圖像

許多現(xiàn)代瀏覽器本身就支持延遲加載，而不使用JavaScript。由于圖像通常與LCP的性能密切相關，因此最佳實踐是將圖像加載留給瀏覽器，并避免添加JavaScript來延遲加載圖像。

如果瀏覽器首先必須加載和解析JavaScript，然后等待它執(zhí)行，然后呈現(xiàn)圖像，那么由JavaScript驅動的延遲加載會增加額外的延遲。這種做法還會破壞瀏覽器中的預解析器。

如果使用圖像CDN來優(yōu)化圖像，那么延遲加載的好處就會變得小得多。特別是那些在頁面上方的大英雄圖片會對LCP產生很大的影響，并且不會從JavaScript的延遲加載中受益。最好不要讓JavaScript成為渲染圖像的阻塞問題，而是依靠瀏覽器自己的能力來選擇哪些圖像應該延遲加載。