運用實際使用者資料,讓基線資料可做為行動依據

發布日期:2025 年 2 月 10 日

您是否曾因為不確定使用者的瀏覽器是否支援新式網頁功能,而延遲導入這類功能?或是保留過多不必要的 polyfill?別擔心,這是很正常的情況。雖然 Baseline 可提供全球瀏覽器支援的明確信號,但仍缺少一項資訊:使用者實際支援的內容。

RUMvision 團隊解決這個問題的方法,是將基準資料與實際使用者監控 (RUM) 資料結合,結果非常有趣。團隊發現,他們可以比原先計畫提早數個月採用新功能,有些團隊則發現,他們維護的 polyfill 其實 97% 的使用者都不需要。其他人則發現,由於目標對象尚未準備好,因此延後實施新功能是明智的做法。

RUMvision 資訊主頁顯示有多少訪客支援基準。
主要 RUMvision 基準資訊主頁是以 2024 年 12 月的資料為依據,顯示使用者整體的基準功能支援情形,並依據推出年份排序。

基準和瀏覽器支援功能的運作方式

網路功能的支援服務與瀏覽器版本相關:瀏覽器發布功能後,使用者只要更新瀏覽器就能取得該功能。基準追蹤功能會追蹤所有主要瀏覽器 (Chrome、Edge、Firefox 和 Safari) 何時推出某項功能,並以藍色徽章標示,並將其設為「新推出」。30 個月後,這項狀態會更新為「廣泛提供」。

但使用者的更新模式可能與全球平均值大不相同。RUMvision 會追蹤使用者使用的實際瀏覽器版本,並顯示目標對象中支援各項功能的確切百分比。這可將基準值從一般指標轉變為實用工具,用於特定情況。

網路瀏覽器的採用率

RUMvision 分析不同市場 (2024 年 12 月) 的數百萬次網頁瀏覽次數後,發現使用者取得瀏覽器更新的方式有明確的模式:

  • Chrome、Edge 和 Firefox 更新的採用速度很快,通常在三個月內就會達到 95% 的支援率。
  • Safari 需要更長的時間,約 19 個月才能達到相同的等級,因為它與作業系統更新有關
  • Chrome 有其獨特的特性,它會快速達到 95-98%,但之後速度會放緩,最多需要 23 個月才能達到 99%。

雖然基準追蹤數百項功能,但您可能只想使用特定功能。等待時間取決於哪個瀏覽器最後支援該功能。

如果 Chrome 是功能達到基準值所需的最後一個瀏覽器,且您的目標對象大多使用 Chrome,他們可能會在幾個月內就達到基準值。不過,如果 Safari 是最後才加入支援功能的瀏覽器,即使其他瀏覽器早在多年前就已準備就緒,您可能還是得等待 19 個月,才能讓 Safari 使用者取得必要的作業系統更新。

每個人對真實世界的看法都不盡相同

我們的資料顯示,不同網站的支援情形有顯著差異 (2024 年 12 月):

  • 荷蘭居家用品零售商:
    • 2024 年基準功能:34% 支援
    • 2023 年基準功能:76% 支援
    • 廣泛支援的功能:95% 支援
  • 美國科技網誌:
    • 2024 年基準功能:59% 支援
    • 2023 年基準功能:89% 的支援
    • 廣泛提供的功能:100% 支援
  • 中東房地產網站:
    • 2024 年基準功能:39% 支援
    • 2023 年基準功能:74% 支援
    • 廣泛支援的功能:95% 支援

這些差異是因為訪客的身份和瀏覽方式不同:

  • 技術熟練的使用者通常會迅速更新,而一般觀眾通常會停留在舊版。
  • 不同年齡層和目標對象的瀏覽習慣和裝置都不同。
  • 行動裝置和電腦使用者存取網站的方式不同。
  • 有些地區偏好 iOS,有些則偏好 Android,這會影響功能的推出時間。

因此,同一個功能在幾個月內可能可安全地用於科技網誌,但在電子商務網站上需要再等一年才有備用方案。

將基準線整合至 RUMvision

RUMvision 團隊希望確保整合作業符合開發人員的期望,以及他們希望看到這類資訊的呈現方式。

他們從兩個角度進行研究:

  • 開發人員本身需要瞭解這項資訊。
  • 創作者為更廣大的開發人員社群打造內容。

和許多開發人員一樣,這個團隊經常使用 Can I Use 和 MDN 支援表格等工具,因此他們將整合方式調整為以一種能提升自身工作流程,同時滿足所有 RUMvision 使用者需求的方式呈現資訊。

合併多個資料來源

這項程序會從自動匯入新發布的網頁功能資料開始。接著,這些功能會在 RUMvision 使用者可搜尋及篩選的名單中顯示。

點選網頁功能後,畫面上會彈出模式視窗,顯示詳細的基準資訊和瀏覽器支援時間表。這個檢視畫面會提供額外的洞察資料

  • 資源:MDN、Can I Use、W3C 頁面、瀏覽器版本資訊、Chrome 狀態和 web.dev 文章的連結。
  • 基準採用時間表:顯示各瀏覽器實作功能支援的時間。
  • MDN 支援表:來自 browser-compat-data 的資料,顯示類似 MDN 標準支援表的詳細資訊。
  • 已知錯誤:從相同資料集擷取,用來補充可用的資源。
  • AI 輔助功能:協助解讀各大瀏覽器的支援統計資料。
說明文件:RUMVision 顯示的彈出式視窗內容可見度和瀏覽器支援資料。
這些螢幕截圖顯示了基準設定中所有功能的免費說明文件和支援資訊。

充分運用現代化功能

將基準資料與使用者資料結合,可發揮更強大的力量,並運用最新的網頁功能向前邁進。您可以查看每項功能的觀眾採用率,並追蹤其隨時間變化的情形。也就是說,您可以在適當的時機,以原生瀏覽器功能取代複雜的 JavaScript 解決方案。舉例來說,您可以從以下位置移動:

您不必等待 30 個月才能取得「廣泛可用」狀態,而是可以根據實際使用資料做出明智的決策。您將確切瞭解何時推出新功能,以及如何有效實作這些功能。

實際案例,實際影響

如需實際範例,請查看最近達到基準的功能,即 CSS content-visibility 屬性

  • 部分網站的支援率達到 99%,可立即導入。
  • 其他人則表示支援率為 82% 到 89%,建議使用備用方案。
  • 仍有少數已識別的特定使用者區隔使用舊版瀏覽器。
瀏覽器支援時間表。
content-visibility 美國科技網站與中東房地產網站的時間軸。

資料也顯示,從 2024 年 2 月到 2024 年 9 月,Safari 對這兩項功能的支援率約為 20%,這與從 2024 年 9 月開始部署的 iOS 18 相符,因為這項功能是從該版本開始推出。

客戶成功案例,使用自家的「廣泛可用」基準

您可以運用自有 RUM 資訊的洞察資料,自行建立基準,其中包含可供自有網站使用的四種狀態功能,以及篩選這些狀態的功能:

  • 已準備好出貨 (至少有 98% 的訪客支援)。
  • 看起來不錯 (支援涵蓋率介於 95% 到 98% 之間)。
  • 提醒 (涵蓋率介於 75% 和 95% 之間)。
  • 請謹慎操作 (涵蓋率低於 75%)。

內容瀏覽資訊

使用者只要將 RUM 資料與每項網頁功能的基準資訊結合,就能看到成功案例。Informatiebord.nl 發現 97% 的使用者已支援原生功能,因此移除了 30KB 的 JavaScript polyfill。開發人員凱文梅耶 (Kevin Meijer) 表示:

「有了基準線,我們就能做出策略性決定:是專注於為 97% 的訪客提供完美使用者體驗,同時不犧牲成效?還是放慢創新速度,以便滿足剩餘 3% 的使用者?我們有意識地選擇了第一個選項,因為為了這 3% 的使用者而額外付出努力,會對多數使用者的體驗造成負面影響。」

訊息指出 96.9% 的訪客支援離螢幕畫布。
客戶成功案例:informatibord.nl 根據實際使用者資料,從網站中自信地移除 polyfill。

為網路做出貢獻

結合基準資料和實際使用者洞察資料,有助於我們做出更明智的功能支援決策。何時要捨棄舊版程式碼、何時要採用新功能,這些選擇都取決於您瞭解使用者實際支援的內容。

RUMvision 會將瀏覽器採用模式的調查結果分享給 WebDX 社群群組,協助我們瞭解功能如何從「新推出」狀態轉為「廣泛推出」狀態。