你能所學(xué)到的知識(shí)點(diǎn)前置知識(shí)點(diǎn)視口、渲染阻塞資源、瀏覽器級(jí)圖片懶加載LCP 是個(gè)啥如何測(cè)量 LCP優(yōu)化 LCP 的 10 種方式前置知識(shí)點(diǎn)在深入了解 LCP 之前我們先快速過(guò)幾個(gè)前置概念。視口Viewport視口是指瀏覽器中用于顯示網(wǎng)頁(yè)內(nèi)容的可見(jiàn)區(qū)域簡(jiǎn)單來(lái)說(shuō)就是用戶屏幕上實(shí)際能看到的網(wǎng)頁(yè)部分。視口大小取決于用戶設(shè)備的屏幕尺寸和瀏覽器窗口的大小——手機(jī)上視口較小臺(tái)式機(jī)上則較大。在開發(fā)中我們可以使用 CSS 視口單位來(lái)設(shè)置元素尺寸vw視口寬度的百分比vh視口高度的百分比vmin視口寬度和高度中較小值的百分比vmax視口寬度和高度中較大值的百分比通過(guò)meta標(biāo)簽可以控制視口行為metanameviewportcontentwidthdevice-width, initial-scale1.0widthdevice-width頁(yè)面寬度與設(shè)備屏幕寬度一致initial-scale1.0初始縮放級(jí)別為 1渲染阻塞資源某些資源如 CSS、JavaScript會(huì)阻塞頁(yè)面的首次渲染理解它們對(duì)優(yōu)化 LCP 至關(guān)重要。這部分內(nèi)容在之前的「瀏覽器之資源獲取優(yōu)先級(jí)」文章中有詳細(xì)介紹。瀏覽器級(jí)圖片懶加載圖片是大多數(shù)網(wǎng)站最常請(qǐng)求的資源類型在 90% 分位點(diǎn)上網(wǎng)站在桌面和移動(dòng)設(shè)備上發(fā)送的圖像超過(guò) 5MB。以前實(shí)現(xiàn)懶加載有兩種方式使用Intersection Observer API使用scroll、resize或orientationchange事件處理程序現(xiàn)在瀏覽器原生支持懶加載不需要外部庫(kù)了imgsrcimage.jpgloadinglazyalt描述loading屬性支持的值lazy推遲加載直到元素離視口足夠近eager瀏覽器默認(rèn)行為立即加載LCP 是啥LCP 是 Largest Contentful Paint 的縮寫中文名稱叫「最大內(nèi)容繪制」。在大多數(shù)網(wǎng)頁(yè)上總有一個(gè)元素因?yàn)槠浯笮『屯怀鲂远裢怙@眼——比如很多公司官網(wǎng)首頁(yè)的輪播圖或主視覺(jué)區(qū)域它就是該頁(yè)面的LCP 元素。換句話說(shuō)LCP 衡量的是網(wǎng)站呈現(xiàn)包含「最大數(shù)量?jī)?nèi)容」的元素所需的時(shí)間。LCP 得分越低說(shuō)明網(wǎng)站運(yùn)行越流暢用戶體驗(yàn)越好。需要注意的是LCP 得分與頁(yè)面「整體加載時(shí)間」可能不同。比如一個(gè)頁(yè)面需要 3 秒才能完全加載但 LCP 可能只有 2 秒——因?yàn)楝F(xiàn)代網(wǎng)站除了文本和媒體文件外還會(huì)加載很多腳本資源。通常情況下LCP 與 FCP 是相關(guān)的。FCP 測(cè)量的是「第一個(gè)帶有任何內(nèi)容的元素繪制所需的時(shí)間」。另外需要特別注意在測(cè)量 LCP 時(shí)SVG 文件和 video 等元素也需要納入考量。如何測(cè)量 LCP確定網(wǎng)站上的最大內(nèi)容元素其實(shí)不難——等頁(yè)面完全加載后大致瀏覽一下那個(gè)最突出的「顯眼包」元素就是了。通常情況下它會(huì)是一張圖片或一個(gè)文本塊。真正的技巧在于測(cè)量特定元素加載所需的時(shí)間而不是頁(yè)面本身。使用 PageSpeed Insights最流行的 LCP 測(cè)量工具之一是 Google 的PageSpeed Insights它是一個(gè)免費(fèi)工具可以幫助分析和診斷網(wǎng)頁(yè)性能。操作步驟將網(wǎng)站 URL 輸入搜索欄點(diǎn)擊「分析」按鈕分析完成后在「真實(shí)用戶的體驗(yàn)」部分查看 LCP 等指標(biāo)的詳細(xì)信息PageSpeed Insights 從多個(gè)用戶收集實(shí)際性能數(shù)據(jù)比單次測(cè)試更精確每個(gè)得分都有百分比展示——例如 89% 的頁(yè)面加載在 1.5 秒內(nèi)完成檢查「診斷性能問(wèn)題」部分獲得改進(jìn)建議實(shí)驗(yàn)數(shù)據(jù)提供總體得分雖不如真實(shí)用戶體驗(yàn)精確但也能反映大致情況還可以查看 LCP、FCP、CLS 等更多指標(biāo)點(diǎn)擊「展開視圖」可閱讀簡(jiǎn)要解釋重要提示即使網(wǎng)站優(yōu)化得很好加載時(shí)間也會(huì)因用戶而異——有人網(wǎng)速慢有人離服務(wù)器遠(yuǎn)。這就是為什么擁有一個(gè)平均分?jǐn)?shù)作為參考至關(guān)重要。除了 PageSpeed Insights還可以使用Lighthouse和Search Console對(duì)網(wǎng)站做一次全面「體檢」。LCP 得分標(biāo)準(zhǔn)得分范圍評(píng)價(jià)0 - 2.5 秒優(yōu)秀2.5 - 4 秒良好4 - 7.5 秒需改進(jìn)超過(guò) 7.5 秒不佳理想情況下LCP 得分應(yīng)低于 2.5 秒。整體加載時(shí)間應(yīng)保持在 3 秒以下超過(guò)這個(gè)時(shí)間點(diǎn)跳出率會(huì)顯著增加。LCP 測(cè)量的是哪些元素LCP 僅測(cè)量頁(yè)面能夠在視口內(nèi)加載最大元素的速度。觸發(fā) LCP 記錄的元素包括圖像元素包括 SVG 元素內(nèi)的圖像視頻元素使用url()函數(shù)加載背景圖像的元素塊級(jí)元素內(nèi)的文本節(jié)點(diǎn)大小計(jì)算規(guī)則對(duì)于圖像元素報(bào)告可見(jiàn)大小和固有大小中較小的那個(gè)對(duì)于文本元素僅考慮文本節(jié)點(diǎn)的大小不計(jì)算任何邊距margin、填充padding或邊框border優(yōu)化 LCP 的 10 種方式LCP 是網(wǎng)站頁(yè)面加載速度的重要指標(biāo)較差的 LCP 得分會(huì)導(dǎo)致用戶體驗(yàn)不佳。造成 LCP 差的常見(jiàn)原因服務(wù)器響應(yīng)時(shí)間和資源加載時(shí)間過(guò)慢客戶端渲染Client-side rendering阻塞渲染的資源Render-blocking resources下面是 10 種干貨滿滿的優(yōu)化方式 1. 利用 CDN內(nèi)容分發(fā)網(wǎng)絡(luò)CDN是提升網(wǎng)站流量管理的優(yōu)秀工具。CDN 通過(guò)額外服務(wù)器分擔(dān)負(fù)載訪問(wèn)者的請(qǐng)求不需要在同一服務(wù)器中排隊(duì)從而改善 LCP 得分。CDN 還可以與圖像 CDN 等軟件結(jié)合實(shí)時(shí)優(yōu)化和轉(zhuǎn)換圖像大小。推薦Cloudflare 提供全球 120 中心節(jié)點(diǎn)有免費(fèi)計(jì)劃且配置簡(jiǎn)單。2. 確保正確的圖像尺寸圖像很可能成為 LCP 的最大元素因此確保網(wǎng)頁(yè)使用響應(yīng)式圖像至關(guān)重要。關(guān)鍵在于根據(jù)用戶設(shè)備提供正確的圖像尺寸——桌面版用大圖移動(dòng)版用中等尺寸。常見(jiàn)的圖像尺寸規(guī)范縮略圖150 像素正方形中等尺寸最大 300 像素正方形大尺寸最大 1024 像素正方形原始尺寸指原始圖像尺寸圖像報(bào)告的是其最小元素尺寸——壓縮圖像報(bào)告可見(jiàn)尺寸放大圖像報(bào)告原始尺寸。3. 優(yōu)化圖像除了尺寸之外壓縮圖像也是改善加載時(shí)間的重要手段。推薦工具TinyPNGImagifyKraken付費(fèi)優(yōu)化圖像不僅能提高 LCP 得分還能節(jié)省存儲(chǔ)空間、改善 SEO 性能。4. 提高服務(wù)器響應(yīng)時(shí)間頁(yè)面加載時(shí)間與 Web 服務(wù)器的響應(yīng)時(shí)間密切相關(guān)。用戶瀏覽器請(qǐng)求和服務(wù)器響應(yīng)之間的往返時(shí)間RTT是影響加載速度的主要因素。改善方法實(shí)施服務(wù)器端緩存通常在托管配置中可用升級(jí)服務(wù)器規(guī)格更好的 CPU 和更大的存儲(chǔ)容量?jī)?yōu)化應(yīng)用程序代碼如數(shù)據(jù)庫(kù)查詢優(yōu)化刪除非關(guān)鍵 CSS5. 實(shí)施緩存緩存是指將頁(yè)面的靜態(tài)資源存儲(chǔ)在臨時(shí)存儲(chǔ)中通過(guò)減少初始呈現(xiàn)過(guò)程中的數(shù)據(jù)傳輸量來(lái)實(shí)現(xiàn)更快的頁(yè)面加載。兩種主要緩存方式瀏覽器緩存訪問(wèn)者將緩存存儲(chǔ)在本地再次訪問(wèn)時(shí)無(wú)需重新下載。服務(wù)器端緩存將預(yù)先制作的網(wǎng)頁(yè)版本存儲(chǔ)在原始服務(wù)器中用戶再次訪問(wèn)時(shí)無(wú)需從數(shù)據(jù)庫(kù)重新構(gòu)建。推薦工具LiteSpeed具有先進(jìn)的緩存功能、動(dòng)態(tài)內(nèi)容優(yōu)化和 HTTP 負(fù)載均衡器。6. 修復(fù)延遲加載問(wèn)題延遲加載是一種推遲非關(guān)鍵資源加載的技術(shù)專注于先加載視口上方的內(nèi)容。首屏內(nèi)容如 Logo立即顯示視口外的元素如視頻縮略圖用占位圖替代直到用戶滾動(dòng)到它們。?? 潛在問(wèn)題延遲加載有時(shí)會(huì)惡化 LCP 得分。解決方案對(duì)可能成為 LCP 元素的主圖使用loadingeager使其立即渲染在首屏上方的圖像上禁用延遲加載7. 縮小 JS、CSS 和 HTML 文件文件縮小通過(guò)減少代碼行數(shù)來(lái)減小文件大小。CSS、JavaScript 和 HTML 代碼中常常包含大量不必要的空格積累起來(lái)會(huì)嚴(yán)重影響性能。8. 消除阻塞渲染的 JavaScript 和 CSS第一步識(shí)別關(guān)鍵資源使用 Chrome DevTools 中的Coverage 選項(xiàng)卡來(lái)識(shí)別非關(guān)鍵的 CSS 和 JS 文件。綠色關(guān)鍵首次繪制必需的樣式頁(yè)面核心功能的關(guān)鍵代碼紅色非關(guān)鍵不立即可見(jiàn)內(nèi)容的樣式未使用的代碼減少阻塞渲染的 JS將關(guān)鍵代碼從阻塞渲染的 URL 移到 HTML 頁(yè)面的內(nèi)聯(lián) script 標(biāo)簽中非關(guān)鍵代碼保留在 URL 中使用async或defer屬性標(biāo)記減少阻塞渲染的 CSS類似于 JS 的處理方式將關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 中總結(jié)LCP 是衡量用戶體驗(yàn)的核心性能指標(biāo)之一直接關(guān)系到用戶對(duì)網(wǎng)站的第一印象。通過(guò)本文介紹的 10 種優(yōu)化方式——從 CDN 加速、圖像優(yōu)化、服務(wù)器響應(yīng)提速到緩存策略、延遲加載修復(fù)和代碼精簡(jiǎn)——我們可以系統(tǒng)地改善 LCP 得分讓網(wǎng)站跑得更快、用戶體驗(yàn)更絲滑。記住LCP 低于 2.5 秒是優(yōu)秀的目標(biāo)整體加載時(shí)間控制在 3 秒以內(nèi)才能有效降低跳出率。