提升網頁速度通過Google核心網頁指標評估的策略

什麼是核心網頁指標?

Google的核心網頁關鍵指標(Core Web Vitals,簡稱CWV)旨在衡量網站品質和用戶體驗</a>。為此,他們開發了數個新的衡量標準,這些數據可以通過Chrome瀏覽器來收集。其中三項指標構成了核心網頁關鍵指標:最大內容</a>渲染畫面(Largest Contentful Paint)、互動到下一次繪製(Interaction to Next Paint)以及累積版面偏移(Cumulative Layout Shift)。<br/><br/>

最大內容繪製(LCP)

最大內容</a>繪製(LCP)指標用於衡量當訪客打開一個頁面後,頁面上最大塊內容</a>展現的速度。例如,在DebugBear的渲染速度連環圖中可以看到LCP示例,它展示了在不同時間點使用者能看見的內容</a>。這裡的內容</a>在僅僅1.27秒後就開始出現。<br/><br/>然而,位於右側的圖像被Chrome識別為LCP元素,該圖像在導航後2.3</a>3</a>秒才展現。最大內容</a>繪製與另外兩個Web Vitals指標密切相關,但它們不屬於核心Web Vitals:首字節時間和首次内容繪製。 首字節時間(TTFB)測量服務器對請求加載頁面開始時HTML</a>文檔的響應快度。<br/><br/>沒有這份HTML</a>文檔,瀏覽器無法顯示任何內容</a>或開始加載其他資源。首次内容繪製(FCP)則關注頁面上任何內容</a>出現的早晚。這裡所說的“內容</a>”通常是指文字或圖片。<br/><br/>然而,在達到此里程碑時,大部分內容</a>可能仍對訪客不可見。FCP必須要在TTFB之後才會發生。因此,最大内容绹画永遠等於或大於首次内容绹画。<br/><br/> 這意味着TTFB和FCP給LCP設定了下限;觀察這兩個指標能幫助你理解你的網站加載行爲。

交互到下一次繪製(INP)

「互動到下一次繪製(Interaction to Next Paint, INP)」是衡量網站對用戶輸入反應速度的指標。它主要關注用戶在網頁上遭遇的最慢速互動。INP追蹤並報告在頁面交互期間,從兩個時間點之間所流逝的時長:一是用戶輸入,比如點擊或按鍵;二是下一次視覺更新(也就是“繪製”),無論內容</a>是否有變化都會計算在內。<br/><br/> 舉例來說,這串影像帶展示了某個「查看詳情」按鈕被點擊的情形。點擊動作由頁面上的 JavaScript 代碼處理,而執行這段代碼需要花費一些時間。當點擊正在處理中時,網站界面會暫時無法操作。<br/><br/>待CPU處理完成後,瀏覽器才渲染出新內容</a>。 技術上來說,互動到下一次繪製目前還不屬於核心Web生命指數(Core Web Vitals)之列,但谷歌已宣布,在2024年3</a>月INP將取代早期的首次輸入延遲(First Input Delay)指標。

累積布局偏移(CLS)

「累積版面配置偏移(CLS)指標是用來評估網頁內容</a>在顯示後的視覺穩定性。一個不穩定的使用者介面會使使用者感到困惑,並可能導致非預期的網頁互動行為。這張截圖展現了在頁面加載過程中發生的版面配置變動實例。<br/><br/>起初,畫面右上角的圖片還未出現,因為瀏覽器仍在下載中。當圖片載入後,圖片元素的大小就會更新。在此情況下,元素變大了,因此推擠了頁面下方原有的內容</a>。<br/><br/>之所以稱之為「累積」版面配置偏移,是因為它將不同偏移造成的影響全部加起來計算。最初這涵蓋打開頁面時整段時間,但這對長時間運行單頁應用程序而言評價過於苛刻。谷歌目前已轉而使用窗口化CLS定義,只考量高達五秒內的時間窗口期間發生的變化。<br/><br/>」

Google的核心網頁指標評估是什麼?

Google 對你的網站進行核心網頁指標</a>(Core Web Vitals)評估,並將評估結果作為搜索排名</a>的信號之一。如果你的網站沒有達到核心網頁指標</a>的標準,在各種工具</a>中都會收到警告,比如在「Page Speed Insights」中出現的「核心網頁指標</a>評估:未通過」提示。這些用於核心網頁指標</a>評估的數據來自 Chrome 使用者體驗</a>報告(CrUX),它從使用 Chrome 的用戶那裡收集真實使用數據。<br/><br/>除了 PageSpeed Insights 外,Google 搜索控制台也會對你的網站健康指標進行檢查,並明確哪些 URL 沒有被認定為「良好」。

如何加快最大內容繪製(LCP)的速度

要提升你的網站大型內容</a>繪製(LCP)性能,關鍵是加快網站主要內容</a>的載入速度。透過免費</a>的網站速度</a>檢測工具</a>,了解哪些因素正拖慢你網頁主要內容</a>的呈現。審視由影像條帶與高階效能指標所提供的深入見解,找出接下來改進的方向。<br/><br/>利用這些洞察來優化頁面</a>載入速度。 若想對特定指標深究,可在測試結果中點選「最大內容</a>繪製」(Largest Contentful Paint, LCP)指標名稱。弄清楚是哪一個頁面元素導致了最大內容</a>繪製時間延長。<br/><br/>如果LCP是一張圖片,需要確認該圖片的URL地址以及瀏覽器使用了何種請求優先級。此外還需查看該圖片文件依賴於哪些其他請求。 請求串流圖展示了哪些資源通過網絡加載及各自所需的時間長度。<br/><br/>以目前情況來看,聚焦於LCP圖片局部的請求串流圖顯示出,在該圖片加載之前必須先加載一個龐大的JavaScript文件。這是一個普遍問題,建議直接從HTML</a>文檔加載LCP圖像。 DebugBear測試結果同時還提供眾多自動化建議並按預期影響程度排序排列它們,幫助你精準改善性能表現。<br/><br/>

如何改善交互到下一次繪製(INP)的表現

目前只有64%的移動網站提供了良好的INP(交互性能指標)體驗,這使得它成為一個重要的優化指標。由於INP取決於無法輕易測試的用戶互動,所以進行調試可能相當棘手。你可以手動測試頁面上的互動並使用Chrome開發者工具</a>中的性能分析功能來衡量這些互動。<br/><br/>如果你知道用戶通常會與哪些頁面元素互動,那麽此方法效果尤佳。一旦確定出現了速度緩慢的互動,DevTools也非常有幫助,因爲Chrome開發者工具</a>會準確告訴你在該次互動過程中瀏覽器花費時間在什麽地方。INP調試工具</a>同樣很實用,因爲它會自動模擬與不同頁面元素的交互作用。<br/><br/>你需要做的僅僅是輸入一個網站URL即可。然而,INP調試器無法識別所有交互特別是那些屬於更長用戶流程的部分。 這時候收集真實使用者監控(RUM)數據就顯得格外有用了,因爲它讓你能夠把優化工作集中在最關键之處。<br/><br/>有了RUM數據後,你可以明确知道大多數用户正在與哪些页面元素进行交互以及他们是否经历了交互延迟。此外,还可以将RUM数据细分为不同组成部分:输入延迟、处理时间和展示延迟。 输入延迟指从用户进行操作到浏览器开始处理输入之间所经过的时间长短;高输入延迟表明背景任务或先前事件处理程序正阻塞用户操作。<br/><br/> 处理时间则衡量实际花费于处理用户输入信号上所需时间;如果这个过程缓慢,则开发人员需要审视响应于该交云操作运行何种代码以及如何</a>优化这段代码。 展示延迟测量从事件被处理到下一个图像绘制完成之间所耗费时长;如果页面渲染复杂或者其他CPU处理任务在交涉操作期间排队等待,则该数值可能会较高。

如何減少累積布局偏移

像是INP(互動至下一畫面)的情況一樣,累積版面偏移(Cumulative Layout Shift, CLS)也可能難以修復,因為這通常發生在用戶向下滾動頁面或在用戶點擊某個介面元素後額外內容</a>出現時。如果版面偏移是在頁面最初加載期間發生的話,可以透過以下方式輕易識別:執行一次頁速測試;點擊「累積版面偏移」指標的標題來查看哪些頁面元素有所改變;修復導致位移的那個元素。例如,在這裡,加載了額外內容</a>導致布局發生變化。<br/><br/>

如何修復布局偏移問題

為了解決版面配置的突變問題,如果某些內容</a>在頁面加載過程中後期才出現,請確保放置合適大小的佔位符。你還可以努力確保其他內容</a>更早加載—如果當頁面開始渲染時內容</a>已準備就緒,那麼就不會發生版面配置的突變。如果你發現</a>累積布局偏移(CLS)得分難以復現,可以利用DebugBear真實用戶監控來觀察是什麼導致了真正用戶的版面配置改變。<br/><br/>除了查看高層級的分佈情況外,你也可以深入了解個別用戶的體驗以及是什麼造成了他們遭受版面配置的突變。