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

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

最大的內(nèi)容是什么?

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

相對于其他指標(biāo)，查看LCP可能更有指導(dǎo)意義。例如，第一個(gè)內(nèi)容繪制(FCP)和視覺完整的書結(jié)束LCP。

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

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

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

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

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

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

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

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

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

如何提高最大內(nèi)容的油漆

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

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

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

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

減少圖像有效載荷

速度指數(shù)

最大的意旨油漆

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

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

ImageEngine如何改進(jìn)LCP

ImageEngine是一個(gè)圖像內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)服務(wù)，使圖像優(yōu)化簡單?；旧希瑢τ陧撁嫔系拿總€(gè)圖像，圖像CDN將:

檢測請求web頁面的設(shè)備模型;

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

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

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

最佳實(shí)踐:Preconnect

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

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

最佳實(shí)踐:最小化阻塞JavaScript和CSS

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

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

當(dāng)特別想要改進(jìn)LCP時(shí)，有一些實(shí)踐值得更深入地研究。

內(nèi)聯(lián)CSS關(guān)鍵

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

關(guān)鍵的CSS -瀏覽器需要的CSS來設(shè)置頁面上方折疊部分的結(jié)構(gòu)和重要樣式-應(yīng)該內(nèi)聯(lián)。這個(gè)內(nèi)聯(lián)的CSS也可以指背景圖像，當(dāng)然也應(yīng)該由圖像CDN提供。

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

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

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

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