Home 技術文章 網站虛擬化的核心
Applications

About The Author

Outline

簡介

自2020年5月推出以來,Google的核心Web Vitals (CWV)套件已成爲衡量網站性能的重要指標。 鑑於Google將這些值視爲其頁面排名算法的一部分,因此,從CWV方面最大限度地提高您的網站性能不僅可以增強用戶的體驗,而且還可以提高搜尋引擎排名。 本文將探討幫助提高頁面分數,提高用戶滿意度和提高利潤的技巧和技巧。

什麼是Core Web Vitals?

與許多其他技術方面的東西一樣,Google的Web Vitals是一羣由三個字母組成的縮略詞,每個縮略詞都代表了網站性能的一些可衡量方面。 要設定階段,讓我們定義三個關鍵指標來定義核心Web虛擬化:

最大的Contentful Paint

最大Contentful Paint (LCP):通過集中注意在摺疊上方的可見內容載入所需的時間量來測量 感知的負載速度 。 爲了提供理想的用戶體驗,應在頁面載入時間線的2.5秒內觸發LCP。

首次輸入延遲

首次輸入延遲(FID):通過測量用戶操作和頁面響應之間的延遲來測量頁面 響應 。 爲了提供理想的用戶體驗,頁面的FID應小於或等於100毫秒。

累積佈局移動

累積佈局偏移(CLS):在頁面呈現時使用對佈局偏移的複合測量來測量 視覺穩定性 。 爲了提供理想的用戶體驗,頁面應保持0.1或更低的CLS;0.1至0.25之間的所有內容均視爲中等,大於0.25表示差。

… 爲什麼它們很重要?

對於許多企業而言,網站性能與業務成功有直接的關聯。 研究表明,與未獲得CWV分數的網站相比,其搜尋結果的可見性可能高達37%;而CWV分數的改進可以增加每位訪問者的收入和轉化率(Duong等人)。

使用時 AkiraEdgio是一家女性時尚精品店,能夠改進網站的CWV,使第一頁載入時間從5秒縮短到~1秒,改進了CWV測量,最終實現了有機流量增加30%,結賬啓動提高61%,轉換率提高37%。

簡單地說,更快的網站使搜尋引擎優化排名和更快樂的用戶-特別是在電子商務網站的上下文中;這些結合在一起,降低反彈率和提高轉化率。

那麼,我們如何改進它們呢?

首次輸入延遲

讓我們從低懸的水果開始:首次輸入延遲。 好消息是,網站有通過FID分數比不更頻繁,這是偉大的看到! 但是,如果情況並非如此,則通常罪魁禍首是網站生命週期早期載入的第三方腳本,這可能會阻止接收用戶輸入所需的主線程執行。 捕獲錯誤和執行顯示器錄製的工具是額外檢查的主要候選工具。

事實上,任何阻止主執行線程的行爲都會導致FID性能低下。 密切關注資源密集型或長期執行的JavaScript任務,並考慮將非UI相關代碼重構到Web工作者,以及使用懶惰載入和代碼拆分技術,以確保只載入所需的JavaScript並且只在需要時載入。

此外,雖然從技術上講不是CWV的核心要素,但值得一提的是另一個相關指標:與下一個油漆的交互(INP)。 INP測量與頁面交互和反映該交互的後續頁面更新之間的時間。 雖然INP和FID都測量整體頁面響應度,但INP關注的是所有頁面交互,而不是第一次交互,旨在確保頁面在整個會話期間保持響應,而不僅僅是前期交互。 INP跟蹤用戶體驗中最差的交互性能,並將其報告至關重要。 很可能,INP很快就會取代FID作爲衡量頁面響應速度的標準,因此值得關注。

最大的Contentful Paint

可以說,頁面性能最重要和最有影響力的指標是LCP。 可以預料到的是,最常見的最大Contentful Paint示例是“英雄”圖像——大圖像或影片,通常佔據“摺疊”上方視口的全寬。 儘管優化此元素的技術與任何其他頁面資源相同,但該資源呈現所需的時間極爲重要,因爲這是用戶將體驗到的第一個主要元素。

在隊列中等待
細分LCP元素的請求時間對於優化其性能非常有用。 瀏覽器發出的任何請求都從隊列開始。 隊列中花費的每一毫秒LCP請求都是一毫秒,這將導致LCP得分。因此,如果您發現這些元素在瀏覽器隊列中花費了大量時間,請先調查請求的內容以及原因。 並採取步驟確定LCP資源的優先級。 可能資源低於此範圍,或者其他腳本可能是懶惰載入或延遲的。 操作順序是關鍵。

正在等待伺服器
啓動網路請求後,瀏覽器客戶端必須等待伺服器接收,處理和響應該請求。 此度量稱爲第一位元組時間(TTFB)。 如果伺服器響應請求的速度較慢,您的LCP得分將會受到影響。 這是擁有CDN可以顯著影響速度的領域之一,因爲CDN可以將資源的暫存副本保存在靠近最終用戶的地理位置,並比單個應用程式伺服器更快地對該資源作出響應。 使用CDN的其他重要方面包括內置的安全性WAF和響應大流量峯值的能力。 如果您想提高速度,則應該使用CDN。

線上寬
此時,希望瀏覽器在頁面生命週期的早期就會請求LCP資源,伺服器應該快速響應這些資源。 下一個要考慮的因素是所請求資源的總體大小。 每個必須“通過線纜”傳輸到瀏覽器的位元組都需要一段時間,而這些位元組中的位元組越多,完成請求所需的時間就越長。 因此,應注意確保資源儘可能小,以儘量減少轉移資源所花費的時間。 這可能包括使用第三方映像優化和託管服務(如kraken.io或imgix.com),它們可以優化和提供“NextGen”格式(如WebP)的媒體文件,從而進一步減小了其大小。

幫助瀏覽器退出
除了大小優化之外,請考慮使用 <圖片> 標籤,這將使瀏覽器能夠更智能地選擇合適的資源來請求設備。 桌面瀏覽器可能有大量的顯示器空間來顯示更高解析度的圖像;但是,這些相同的資源將會在顯示器較小的移動設備上向下滾動。 使用優化的資源和CSS媒體查詢,您可以確保瀏覽器爲其設備類型請求正確的資源,並減少將位元組從伺服器傳輸到客戶端所花費的時間。

此外,您可以要求瀏覽器預載入LCP資源並指定獲取優先級,從而爲瀏覽器提供幫助。 這將爲瀏覽器提供線索,使關鍵資源優先於不太重要的資源。 進入瀏覽器的速度越快,渲染速度越快,LCP的執行速度越快,效果就越好。

累積佈局移動

我們一直都看到。 在發送您的瀏覽器提取網站後,頁面開始載入; 當頁面構建時,您會看到您感興趣的內容,並在整個頁面突然移動時移動到單擊它,而您認爲您要單擊的鏈接突然出現在其他位置! 這種現象稱爲佈局偏移。 這對每個人來說都很煩人,通常是自我造成的,我們應該爲了人類的利益而努力將它減少到最低限度。

通常的嫌疑人
CLS得分較高的典型罪魁禍首是:

  • 粘滯標題
  • 載入並呈現客戶端的促銷或“英雄”橫幅
  • 新聞稿,優惠券和GPDR通知
  • 動態注入頁面的其他第三方集成

設定一些邊界
記住 <我們在討論LCP時引用的圖片> 要素? 不要忘記爲其中包含的各種元素添加尺寸。 在指導瀏覽器如何渲染這些元素時,忽略這些值將使您離開駕駛員的座位。 通過定義尺寸,瀏覽器可以將圖像繪製到的正確空間量留在一邊,從而減少偏移。

對於可能動態添加到頁面的任何內容,情況也是如此。 廣告, <iframe>或其他動態添加的內容可以對CLS產生影響。 通過提前爲這些項目預留空間,頁面內容的移動將減少。 此外,請避免在現有頁面內容上方添加內容,因爲這會導致整個頁面在下方移動。

幫助瀏覽器提前劃分空間將減少CLS,但在用戶等待空白頁的這些部分填充有用內容時,可能會犧牲整體用戶體驗。 作爲中間的一種方法,實現 元素載入框架 是一種有用的技術,可以向用戶傳達即將出現的更多資訊,從而給人一種更快的體驗,而瀏覽器則執行其他繁重的工作來協調其他頁面內容。 更重要的是,這些可以而且應該使用CSS動畫而不是動畫GIF來實現,這意味着只需使用幾行CSS就可以在整個網站上實施這種技術。

總結

從表面上看,Core Web Vitas可能看起來像是谷歌的最新傳說和陰影算法,用於確定搜尋結果中的頁面排名——在某種程度上,這可能是正確的。 但是,更重要的是,核心Web虛擬化代表了一個更具體的框架,用於衡量頁面性能並建立一個基線,用於描述用戶體驗方面的重要內容。 儘管上述技術並非詳盡無遺,但在排除故障和優化網站性能的同時,上述技術將有助於爲您提供更好的服務,希望能夠改善用戶體驗,頁面排名和收入。