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

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

最大的內容是什么?

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

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

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

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

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

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

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

如何最大的內容油漆影響燈塔分數和搜索引擎優化?

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

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

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

如何提高最大內容的油漆

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

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

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

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

減少圖像有效載荷

速度指數

最大的意旨油漆

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

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

ImageEngine如何改進LCP

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

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

優化圖像的大小，壓縮，圖像格式;

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

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

最佳實踐:Preconnect

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

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

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

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

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

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

內聯CSS關鍵

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

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

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

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

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

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