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