如何令到網站更快更吸引?(三)

之前我們已經介紹兩個今年Google 新提出的網站性能基準, Largest Contentful Paint 最大內容繪製,和 First Input Delay 首次輸入延遲。這次就看看 Cumulative Layout Shift 累計版面配置轉移。

Google 經常更新網站性能的指標和工具,務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一:CLS — Cumulative Layout Shift 累計版面配置轉移。

之前我們已經介紹兩個今年Google 新提出的網站性能基準, Largest Contentful Paint 最大內容繪製,和 First Input Delay 首次輸入延遲。這次就看看 Cumulative Layout Shift 累計版面配置轉移。

你是否試過在開始閱讀一篇有趣的新聞文章時,因為所有文字突然向下移動而令你要重新找回剛才看到的部分?這種情況經常發生在不少網站,而這主要是因為那些內容周圍加載了不少廣告。

當用戶看到一個網站時,會自動把它分為各個視覺元素的部分。根據它們在頁面上的排列,用戶就能夠感知到它們之間的關係。這就是用戶如何確定相關內容的位置。而如果這些內容突然移動,例如在網站排版中加入新的元素,那麼用戶很有可能會因為要重新找回剛才理解中的內容而感到氣餒,甚至放棄再閱讀下去。或者更糟糕的是:用戶正要點擊一個鏈結或按鈕,但在手指按下前的一瞬間鏈結就移動了,最終點擊的其他不想按的部分。

大多數情況下,這類體驗只是令人討厭,但在某些情況下,它們會造成真正的傷害,而以往又難以用量化的方式來衡量優劣。不過,今次Google所提出的 Cumulative Layout Shift 就能夠解決這個問題。

什麼是Cumulative Layout Shift?

累計版面配置轉移是測量在頁面的整個生命週期中,發生的每個意外版面配置轉移其所有單個佈局轉移分數的總和。每當可見元素將其位置從一個渲染幀更改為下一幀時,都會發生版面配置偏移。這些元素包括:字體、圖像、影片、聯繫表單或是按鈕等,而CLS所顯示的數字自然越小越好。

根據Google官方說法,發生累計版面配置轉移的原因有五個:

  1. 缺少尺寸的圖片/影片;
  2. 缺少尺寸的廣告、內嵌元件(embed)以及 iframe 元件;
  3. 動態置入內容;
  4. 造成 FOIT (Flash Out Invisible Text) / FOUT (Flash Out of Style)的網站字體;
  5. 更新 DOM 前等待網路回應的動作;

如何改善累積版面配置轉移

對於大多數網站而言,跟從以下指引,就可以避免非預期的版面轉移:

  1. 確保在所有的圖片、影片元件上使用尺寸屬性,預留該元件所需要的空間這個方式能夠確保當圖片、影片還在下載時,瀏覽器可以預先分配正確的空間大小;
  2. 不要在既有內容上再置入內容,除非那是為了回應使用者的互動這可以確保版面配置轉移是在預期之內發生的;
  3. 盡量避免將廣告放置在頁面頂部附近,以免絕大部分的網頁內容會因為廣告的大小改變導致移位;

並非所有的版面轉移都是壞的,如果源自使用者互動(點擊連結、按下按鈕、打字進搜尋欄位),這是反而是正常不過的網頁特性。唯獨是非使用者預期的轉移,才會歸類在不好的頁面體驗。只要網頁設計者非常清楚在轉移發生是與使用者的互動有關,CLS的部分就能做好。

可以檢測實際環境和測試環境CLS的工具,有以下幾個:

Field tools

Lab tools

Ref:

https://web.dev/cls/
https://web.dev/optimize-cls/

ONEs Software 官網 :https://ones.software/hk

如何令到網站更快更吸引?(二)

Google 經常更新網站性能的指標和工具,務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一:FID — First Input Delay 首次輸入延遲吧。

Google 經常更新網站性能的指標和工具,務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一:FID — First Input Delay 首次輸入延遲吧。

相信大家都知道,給予客人良好的第一印象是多麼重要,其可以使訪客成為忠實用戶,願意在網頁上多作停留。但問題是,是什麼因素能夠建立良好印象,以及如何衡量網站可能對用戶產生何種印象?除了載入時間、視覺穩定性之外,網頁互動性亦相當重要。

在網頁上,第一印象可以以不同形式來展現,對於網站的設計、視覺上吸引力,以及對其速度和響應程度。用戶可以使用 First Paint(FP) 和 First Contentful Paint(FCP) 等指標,來衡量用戶對網站加載速度的第一印象 。不過,您的網頁在屏幕上完成內容繪製的速度只是其中一部分,但是同樣重要的,是用戶何時能夠開始與頁面內容進行互動。

針對用戶對網頁互動性和響應能力的衡量,Google 引入了一個名為First Input Delay的全新指標。

什麼是 FID ?

首次輸入延遲 (First input delay, FID) 測量從使用者第一次與你的網站互動(例如點擊連結、按鈕等等),瀏覽器實際上能夠回應此次互動的時間點。它是個在首次使用者於網頁互動,以及瀏覽器回應此互動的時間長度。

這個時間介於內容已經在頁面繪製完成 (FCP) ,以及所有功能都能夠回應使用者的互動時間。這通常取決於網站程式碼需要進行下載、剖析以及執行,而且受裝置速度的影響 (例如考慮到一些較低階的行動裝置)。延遲時間越長,使用者體驗就會越差。以下就是一些常見的延遲問題:

  • 點選連結或按鈕載入內容延遲
  • 文字對話框無法立即輸入文字
  • 打開下拉式選單畫面延遲
  • 無法勾選對話方塊

為什麼只考慮第一個輸入? 

雖然任何輸入的延遲都可能導致糟糕的用戶體驗,但Google主要建議測量第一次輸入延遲,原因有幾個:第一次輸入延遲將是用戶對你的網站響應速度的第一印象,而第一印象對於塑造在網站質量和可靠度的整體印象至為重要。

在網絡上看到的最大的互動性問題發生在頁面加載過程中。因此Google認為,最初專注於改善網站的首次用戶互動,將對提高網絡的整體互動性產生最大的影響。

如何改善FID?

為了改善用戶體驗,網頁管理者應努力讓其網頁的首次輸入延遲小於0.1秒。要注意的是FID僅在事件處理中測量「延遲」,不代表事件處理時間本身;所以若要具針對性的改善策,你的目標便是讓延遲時間縮短。而改善的方案可以是:

  • 減少JavaScript等網頁程式碼的運作時間
  • 減低網頁的請求數和檔案大小
  • 減少主執行緒的工作
  • 減低第三方程式碼的影響

Google為了鼓勵大家提升網頁速度 ,特別開發了能追蹤FID的Javascript程式庫,以便大家追蹤到的 FID 事件,也能透用追蹤碼傳送到Google Analytics作出檢視和分析。

ONEs Software 官網 :https://ones.software/hk

Ref:

https://developer.mozilla.org/zh-TW/docs/Glossary/First_input_delay

https://web.dev/fid/

https://web.dev/optimize-fid/