建站
咨詢
售后
建站咨詢
新聞中心
衡量一個 Web 頁面的體驗和質(zhì)量一直有非常多的工具和指標(biāo) ... 每次我們?nèi)リP(guān)注這些指標(biāo)的時候都會非常痛苦，因為這些指標(biāo)真的是又多又難理解，測量這些指標(biāo)的工具也非常多。
創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、平谷網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為平谷等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
當(dāng)看到最近發(fā)布的 Chrome 83 中又增加了幾個性能指標(biāo)的時候我頭都大了...
然而不要著急，這些指標(biāo)就是為了聚焦關(guān)注度和降低理解成本的，下面我們就來具體看一下，新增加的 Core Web Vitals 到底是什么東西？
如何衡量用戶體驗質(zhì)量？
優(yōu)化用戶體驗的質(zhì)量一直都是是每個 Web 站點長期成功的關(guān)鍵，衡量用戶體驗的質(zhì)量有很多方面。雖然用戶體驗的某些方面是需要基于特定于站點和上下文的，但是所有站點仍然有一組共同的指標(biāo)——Core Web Vitals，這些指標(biāo)包括加載體驗、交互性和頁面內(nèi)容的視覺穩(wěn)定性，他們構(gòu)成了 2020 年核心 Web 健康指標(biāo)的基礎(chǔ)。
多年來，Google 提供了很多工具：(Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console's Speed Report) 來衡量和報告性能。一些開發(fā)人員是使用這些工具的專家，而大部分其他人則發(fā)現(xiàn)大量的工具和衡量標(biāo)準(zhǔn)都很難學(xué)習(xí)和使用。
網(wǎng)站開發(fā)者不應(yīng)該為了理解他們交付給用戶的體驗的質(zhì)量指標(biāo)而成為性能專家。Web Vitals 計劃的目的就是簡化場景，降低學(xué)習(xí)成本，并幫助站點關(guān)注最重要的指標(biāo)，即 Core Web Vitals。
Core Web Vitals
Core Web Vitals 是應(yīng)用于所有 Web 頁面的 Web Vitals 的子集，所有的站點開發(fā)者都應(yīng)該關(guān)注一下，他們將在所有谷歌提供的性能測試工具中進行顯示。每個 Core Web Vitals 代表用戶體驗的一個不同方面，在該領(lǐng)域是可衡量的，并反映了以用戶為中心的關(guān)鍵結(jié)果的真實體驗。
網(wǎng)頁核心的性能指標(biāo)應(yīng)該是隨著時間的推移而不斷演變的。當(dāng)前 2020 年主要關(guān)注用戶體驗的三個方面——加載、交互性和視覺穩(wěn)定性:
- Largest Contentful Paint (LCP): 衡量加載體驗：為了提供良好的用戶體驗， LCP 應(yīng)該在頁面首次開始加載后的 2.5 秒內(nèi)發(fā)生。
- First Input Delay (FID): 衡量可交互性，為了提供良好的用戶體驗，頁面的 FID 應(yīng)當(dāng)小于 100毫秒。
- Cumulative Layout Shift (CLS):衡量視覺穩(wěn)定性，為了提供良好的用戶體驗，頁面的CLS應(yīng)保持小于 0.1。
下面我們來詳細介紹這三種性能指標(biāo)：
LCP
加載體驗的衡量
衡量 Web 頁主要內(nèi)容的加載速度是眾多開發(fā)者一直在關(guān)注的一個點，而且可衡量的指標(biāo)非常多。
比如最早的 load、DOMContentLoaded 事件，用這兩個事件來衡量頁面加載速度是非常糟糕的，因為它們不一定與用戶在屏幕上看到的內(nèi)容相對應(yīng)。
以用戶為中心的更新性能指標(biāo)（例如First Contentful Paint（FCP））它只能捕捉加載體驗的最開始。如果頁面最開始顯示的是一個 loading 動畫，那這個指標(biāo)就很難關(guān)注了。
后來，業(yè)界開始建議使用比如 First Meaningful Paint (FMP) 和 Speed Index (SI)（都可以在 Lighthouse 中獲取）等性能指標(biāo)來幫助捕獲初次渲染后的更多加載體驗，但是這些指標(biāo)非常復(fù)雜，難以解釋，而且誤報率也比較高。
什么是 LCP
Largest Contentful Paint (LCP) 用于衡量標(biāo)準(zhǔn)報告視口內(nèi)可見的最大內(nèi)容元素的渲染時間。為了提供良好的用戶體驗，網(wǎng)站應(yīng)努力在開始加載頁面的前 2.5 秒內(nèi)進行 最大內(nèi)容渲染 。
相比 FCP ，這個指標(biāo)就非常有價值了，因為這個值是根據(jù)頁面加載渲染不斷變化的，如果頁面有一個 lodaing 動畫，然后才渲染出具體內(nèi)容，那么這個指標(biāo)計算出來的就是具體內(nèi)容的加載速度，而非 lodaing 動畫的加載速度。
LCP 考慮哪些元素
LCP 目前并不會計算所有元素，因為這樣會使這個指標(biāo)變得非常復(fù)雜，它現(xiàn)在只關(guān)注下面的元素： 元素
-
元素內(nèi)的 - 通過 url() 函數(shù)加載背景圖片的元素
- 包含文本節(jié)點或其他內(nèi)聯(lián)文本元素子級的塊級元素。
為了在開始時保持簡單，將元素限制到這個有限的集合是有意的。隨著研究的深入，將來可能會添加更多的元素。
如何計算 LCP ?
頁面上最大的元素即繪制面積最大的元素，所謂繪制面積可以理解為每個元素在屏幕上的 “占地面積”，如果元素延伸到屏幕外，或者元素被裁切了一部分，被裁切的部分不算入在內(nèi)，只有真正顯示在屏幕里的才算數(shù)。
圖片元素的面積計算方式稍微有點不同，因為可以通過 CSS 將圖片擴大或縮小顯示，也就是說，圖片有兩個面積：“渲染面積”與“真實面積”。在 LCP 的計算中，圖片的繪制面積將獲取較小的數(shù)值。例如：當(dāng)“渲染面積”小于“真實面積”時，“繪制面積”為“渲染面積”，反之亦然。
頁面在加載過程中，是線性的，元素是一個一個渲染到屏幕上的，而不是一瞬間全渲染到屏幕上，所以“渲染面積”最大的元素隨時在發(fā)生變化。
如果元素被刪除，LCP算法將不再考慮該元素，如果被刪除的元素剛好是 “繪制面積” 最大的元素，則使用新的 “繪制面積” 最大的元素創(chuàng)建一個新的性能條目。
該過程將持續(xù)到用戶第一次滾動頁面或第一次用戶輸入（鼠標(biāo)點擊，鍵盤按鍵等），也就是說，一旦用戶與頁面開始產(chǎn)生交互，則停止報告新的性能指標(biāo)。
在以上兩個時間軸中，最大的元素隨內(nèi)容加載而變化。在第一個示例中，新內(nèi)容被添加到 DOM 中，并且更改了最大的元素。在第二個示例中，布局發(fā)生更改，以前最大的內(nèi)容從視口中刪除。通常情況下，延遲加載的內(nèi)容要大于頁面上已存在的內(nèi)容。
改善 LCP
LCP較差的最常見原因是：
- 服務(wù)器響應(yīng)時間慢
- 阻斷渲染的 Javascript 和 CSS
- 資源加載時間慢
- 客戶端渲染
所以我們從上面的角度去考慮改善 LCP：
優(yōu)化服務(wù)器
這個很好理解，瀏覽器從服務(wù)器接收內(nèi)容所需的時間越長，則在屏幕上呈現(xiàn)任何內(nèi)容所花費的時間就越長。更快的服務(wù)器響應(yīng)時間可以直接改善包括 LCP 在內(nèi)的所有頁面加載指標(biāo)。
衡量服務(wù)器相應(yīng)時間有一個專門的指標(biāo)：首字節(jié)相應(yīng)時間（TTFB）是最初的網(wǎng)絡(luò)請求被發(fā)起到從服務(wù)器接收到第一個字節(jié)這段時間，它包含了 TCP 連接時間，發(fā)送 HTTP 請求時間和獲得響應(yīng)消息第一個字節(jié)的時間。你可以嘗試在下面幾個方便優(yōu)化 TTFB ：
- 緩存 HTML 離線頁面，緩存頁面資源，減少瀏覽器對資源的請求。
- 盡量減小資源阻斷渲染：CSS 和 JavaScript 壓縮、合并、級聯(lián)、內(nèi)聯(lián)等等
- 對圖片進行優(yōu)化。轉(zhuǎn)化圖片的格式為 JPG 或者 WEBP 等等的格式，降低圖片的大小，以加快請求的速度。
- 對 HTML 重寫、壓縮空格、去除注釋等。減少 HTML 大小，加快速度。
- 使用 preconnect 盡快與服務(wù)器建立鏈接、使用 dns-prefetch 盡快進行 DNS 查找。
- 使用 CDN 加快請求速度
優(yōu)化阻斷渲染的資源
JavaScript 和 CSS 都是會阻斷頁面渲染的資源，需要盡可能的對 CSS 和 JavaScript 文件進行壓縮、延遲加載首屏無需使用的 JavaScript、內(nèi)聯(lián)關(guān)鍵的 CSS 等來減小阻斷時間。
優(yōu)化資源加載時間
剛才我們上面提到的這些資源，如果在首屏進行渲染，則加載這些元素所花費的時間將直接影響 LCP 。
-
元素
-
元素內(nèi)的 - 通過 url() 函數(shù)加載背景圖片的元素
- 包含文本節(jié)點或其他內(nèi)聯(lián)文本元素子級的塊級元素。
你可以使用下面的手段進行優(yōu)化：
- 對圖片進行優(yōu)化。轉(zhuǎn)化圖片的格式為 JPG 或者 WEBP 等等的格式，降低圖片的大小。
- 對重要的資源進行預(yù)加載，比如為 style 標(biāo)簽添加 rel="preload" 屬性
- 使用 Gzip 和 Brotli 壓縮頁面資源，降低傳輸時間
- 使用 service worker 緩存資源
服務(wù)端渲染
使用服務(wù)端渲染可以確保首先在服務(wù)器上呈現(xiàn)頁面內(nèi)容，可以有效改善 LCP，但是相比客戶端渲染的缺點是會加大頁面從而影響 TTFB、服務(wù)端渲染需要等待所有 js 執(zhí)行完畢后才能相應(yīng)用戶輸入，這會使交互體驗變差。
FID
第一印象
我們都知道留下一個好的第一印象是多么重要。在網(wǎng)絡(luò)上，一個好的第一印象可以決定一個人是不是可以成為一個網(wǎng)站的忠實的用戶，或者是離開以后再也不會回來。問題是，什么能給人留下好印象，你如何衡量你可能給用戶留下什么樣的印象?
在網(wǎng)絡(luò)上，第一印象可以有很多種不同的形式——我們對網(wǎng)站的設(shè)計和視覺吸引力有第一印象，對其速度和響應(yīng)能力也有第一印象。
開發(fā)者們使用 First Contentful Paint（FCP） 可以衡量對網(wǎng)站加載速度對第一印象 。但是，網(wǎng)站可以在屏幕上繪制像素的速度只是一部分，同樣重要的是用戶嘗試與這些像素進行交互時你的網(wǎng)站的響應(yīng)速度！
什么是 FID
FID（ First Input Delay） 即記錄用戶和頁面進行首次交互操作所花費的時間 。FID 指標(biāo)影響用戶對頁面交互性和響應(yīng)性的第一印象。 為了提供良好的用戶體驗，站點應(yīng)努力使首次輸入延遲小于 100 毫秒。
FID 發(fā)生在 FCP 和 TTI 之間，因為這個階段雖然頁面已經(jīng)顯示出部分內(nèi)容，但尚不具備完全的可交互性。這個階段用戶和頁面交互，往往會有較大延遲。
如上圖所示，瀏覽器接收到用戶輸入操作時，主線程正在忙于執(zhí)行一個耗時比較長的任務(wù)，只有當(dāng)這個任務(wù)執(zhí)行完成后，瀏覽器才能響應(yīng)用戶的輸入操作。它必須等待的時間就此頁面上該用戶的 FID 值。
例如，以下所有 HTML 元素都需要在響應(yīng)用戶交互之前等待主線程上正在進行的任務(wù)完成：
- 文本輸入框，復(fù)選框和單選按鈕（，