外貿(mào)網(wǎng)站服務(wù)全球，速度很重要，就算網(wǎng)站設(shè)計(jì)的很精美，如果速度不行也是白搭，這里介紹PageSpeed Insights的一個(gè)指標(biāo)最大內(nèi)容渲染時(shí)間LCP。

什么是?最大內(nèi)容渲染時(shí)間LCP？

Largest Contentful Paint (LCP) 是 Lighthouse 報(bào)告的效果部分跟蹤的指標(biāo)之一。每個(gè)指標(biāo)都會(huì)捕獲頁(yè)面加載速度的某個(gè)方面。

Lighthouse 會(huì)以秒為單位顯示 LCP。如下圖所示
 

LCP 衡量的內(nèi)容

LCP 衡量的是視口中最大內(nèi)容元素何時(shí)渲染到屏幕上。這大致表示網(wǎng)頁(yè)的主要內(nèi)容何時(shí)可供用戶查看。

如何確定您的 LCP 得分

如下表，移動(dòng)端和PC端標(biāo)準(zhǔn)不一樣：

如何提高 LCP 得分？

如果 LCP 是圖片，則時(shí)間可分為四個(gè)子部分。 了解哪些子部分耗時(shí)最長(zhǎng)有助于您優(yōu)化 LCP。Lighthouse 會(huì)在“Largest Contentful Paint 元素”診斷中顯示 LCP 元素以及子部分細(xì)分。

LCP 子部分 說明
到第一個(gè)字節(jié)的時(shí)間 (TTFB) 從用戶發(fā)起網(wǎng)頁(yè)加載到瀏覽器收到 HTML 文檔響應(yīng)的第一個(gè)字節(jié)所用的時(shí)間。詳細(xì)了解 TTFB。
加載延遲 TTFB 與瀏覽器開始加載 LCP 資源之間的差值。
加載時(shí)間 加載 LCP 資源本身所需的時(shí)間。
渲染延遲 LCP 資源完成加載到 LCP 元素完全呈現(xiàn)之間的時(shí)間差。


方維網(wǎng)絡(luò)根據(jù)多年網(wǎng)站開發(fā)經(jīng)驗(yàn)總結(jié)如下提高LCP的措施

1、由于圖片、視頻最影響加載速度，一定要用全球CDN加速、盡量壓縮視頻和圖片的大小、圖片使用webp格式，同時(shí)盡量減少首屏圖片的數(shù)量。
2、優(yōu)化CSS和JS代碼，去掉不用的代碼；
3、響應(yīng)式網(wǎng)站做到PC端的時(shí)候只有PC端的圖片，手機(jī)端的時(shí)候只有手機(jī)端圖片。非首屏圖片盡量進(jìn)行懶加載。
4、按照PageSpeed Insights的優(yōu)化建議盡量?jī)?yōu)化。
5、很多第三方代碼如流量統(tǒng)計(jì)、客服工具、隱私協(xié)議代碼都會(huì)影響評(píng)分。