<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    2. 

    <del id="afajh"><form id="afajh"></form></del>
    

    5. 

        1. <th id="afajh"><progress id="afajh"></progress></th>

          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>
          解讀新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)
          共
                7981字，需瀏覽
                    16分鐘
                
           ·
          2020-05-27 23:24
          



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

          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            2. 

            <del id="afajh"><form id="afajh"></form></del>
            

            5. 

                1. <th id="afajh"><progress id="afajh"></progress></th>

                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  

日韩免费无码电影
|
黄色电影免费观看a
|
91麻豆成人视频
|
蜜桃97夜夜做亚洲欧美
|
天堂91
|