發布日期:2025 年 2 月 10 日
您是否曾因為不確定使用者的瀏覽器是否支援新式網頁功能,而延遲導入這類功能?或是保留過多不必要的 polyfill?別擔心,這是很正常的情況。雖然 Baseline 可提供全球瀏覽器支援的明確信號,但仍缺少一項資訊:使用者實際支援的內容。
RUMvision 團隊解決這個問題的方法,是將基準資料與實際使用者監控 (RUM) 資料結合,結果非常有趣。團隊發現,他們可以比原先計畫提早數個月採用新功能,有些團隊則發現,他們維護的 polyfill 其實 97% 的使用者都不需要。其他人則發現,由於目標對象尚未準備好,因此延後實施新功能是明智的做法。

基準和瀏覽器支援功能的運作方式
網路功能的支援服務與瀏覽器版本相關:瀏覽器發布功能後,使用者只要更新瀏覽器就能取得該功能。基準追蹤功能會追蹤所有主要瀏覽器 (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 輔助功能:協助解讀各大瀏覽器的支援統計資料。

充分運用現代化功能
將基準資料與使用者資料結合,可發揮更強大的力量,並運用最新的網頁功能向前邁進。您可以查看每項功能的觀眾採用率,並追蹤其隨時間變化的情形。也就是說,您可以在適當的時機,以原生瀏覽器功能取代複雜的 JavaScript 解決方案。舉例來說,您可以從以下位置移動:
- 以 JavaScript 為基礎的回應式容器查詢元件。
- JavaScript 延遲載入程式庫會依賴 IntersectionObserver API 來原生延遲載入。
- 在 Popover API 中嵌入模態的架構 (例如 Bootstrap)。
您不必等待 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% 的使用者而額外付出努力,會對多數使用者的體驗造成負面影響。」

為網路做出貢獻
結合基準資料和實際使用者洞察資料,有助於我們做出更明智的功能支援決策。何時要捨棄舊版程式碼、何時要採用新功能,這些選擇都取決於您瞭解使用者實際支援的內容。
RUMvision 會將瀏覽器採用模式的調查結果分享給 WebDX 社群群組,協助我們瞭解功能如何從「新推出」狀態轉為「廣泛推出」狀態。