善用Web Analytics發現網站變慢的原因,改善體驗並提升SEO

Cloudflare Web Analytics 提供基本的網路分析,例如您網站上表現最好的頁面和頂級引薦來源網址,免費提供給所有人,從用戶體驗加以改善您的網站。
2023-01-29
by 樂雲
Web Analytics 是 Cloudflare 以隱私為中心的真實用戶測量解決方案。它利用輕量級 JavaScript beacon,不使用任何客戶端狀態(例如 cookie 或 localStorage)來收集使用指標。它也不會通過 IP 地址、或任何其他數據對個人進行「指紋識別」。

Cloudflare Web Analytics 提供基本網路分析,例如您網站上表現最好的頁面和最多引薦來源網址,這是免費提供給所有人的功能,而且它變得比以往任何時候都更強大。

 

專注於性能


Cloudflare將 Web Analytics 與我們的 Browser Insights 產品合併,讓客戶能夠用 Cloudflare 代理他們的網站的同時,用網站核心指標 ( Core Web Vitals ) 如最大內容繪製 ( LCP ) 和首次輸入延遲 ( FID ) 等指標,評估造訪者在其網站資產上的體驗。
 

客戶網站從用戶體驗加以改善:


我們相信,為了向我們的用戶提供最大價值,客戶網站應該促進以下過程:

1. Measure:衡量真實的用戶體驗
2. Grad:給這次體驗打分—它令人滿意還是需要改進?
3. Improve:提供如何改善的指引—應該調整網頁的哪一部分來改善用戶體驗?
4. 再次重複以上步驟

 
這一切都始於今天開始推出的 Web Analytics Vitals Explorer。
 

Web Analytics Vitals Explorer 簡介


Vitals Explorer 使您能夠輕鬆查明頁面上的哪些元素對用戶影響最大,從造訪者的角度進行準確評估,並提供易於閱讀的影響分級。
為此,Cloudflare自動更新了 Web Analytics JavaScript 信標,以便於從瀏覽器收集相關的重要測量數據。一如既往,Cloudflare不會收集任何會侵犯造訪者隱私的資訊。

 

用法


您可以透過Web Analytics 上的 Core Web Vitals 頁面。進入該頁面時,您將看到三個圖表,分別針對最大內容繪製 ( LCP )、首次輸入延遲 ( FID ) 和累計版面配置轉移 ( CLS ) 對用戶體驗進行分級。在每張圖下方,您可以看到調試部分,其中包含對指標產生負面影響的前五個元素。最後,當單擊數據表中顯示的這些元素中的任何一個時,您將看到其影響和確切路徑,以便您可以輕鬆決定是否值得以當前格式將其保留在您的網站上。

針對三大評分指標做解釋:


1. 最大內容繪製LCP:最大内容繪製 (LCP) 是測量感知加載速度的一個以用户為中心的重要指標,因為該項指標會在頁面的主要内容基本加載完成時,在頁面加載时間軸中標記出相對應的點,迅捷的 LCP 有助於讓用戶確信頁面是有效的。

怎樣算是良好的 LCP 分數?為了提供良好的用户體驗,網站應該努力將最大内容繪製控制在2.5 秒或以内

 


2. 首次輸入延遲 (FID):用戶對您的網站加載速度的第一印象可以通過First Contentful Paint 首次内容繪製 (FCP)進行測量。但是,您的網站在螢幕上繪製像素的速度只是其中一部分,同樣重要的還有當用戶試圖與這些像素進行互動時,您的網站響應度多高!首次輸入延遲 (FID) 指標有助於於衡量您的用戶對網站交互性和響應度的第一印象。

怎樣算是良好的 FID 分數?為了提供良好的用戶體驗,網站應該努力將首次輸延遲設控制在100 毫秒或以内。

 
 
 

3.累計版面配置轉移 (CLS):頁面内容的意外移動通常是由於非同步加載資源,或者動態添加 DOM 元素到頁面現有内容的上方。罪魁禍首可能是未知尺寸的圖像或影片。累計版面配置轉移 (CLS) 指標是測量真實用戶體驗中發生偏移的頻率來幫助您解决這一問題。

怎樣算是良好的 CLS 分數?為了提供良好的用戶體驗,網站應該努力將 CLS 分數控制在0.1 或以下。

 


 


除了這個新的 Core Web Vitals 內容之外,我們還在頁面加載時間頁面中添加了 First Paint 和 First Contentful Paint。當您導航到此頁面時,您現在將看到頁面載入摘要和頁面載入時間的圖表。讓您能夠快速識別這些重要性能指標的變化。

 
 

測量細節


Core Web Vitals 的額外除錯資訊是在頁面的生命週期內測量的(直到用戶離開選項或關閉瀏覽器視窗,這會將visibilityState更新為隱藏狀態)。

Core Web Vitals 常用值-後臺上名詞解釋


1. Element:是表示 DOM 節點的 CSS 選擇器。使用此字符串,開發人員可以在其瀏覽器的開發控制台中使用“document.querySelector()”來找出哪個 DOM 節點對您的分數/值有負面影響。

2. Path:是捕獲 Core Web Vitals 時的 URL 路徑。

3. Value:是每個 Core Web Vitals 的指標值。對於 LCP 或 FID,此值以毫秒為單位,對於 CLS(累積版圖偏移)則為分數。


 

最大內容繪製 (Largest Contentful Paint)


1. URL 是來源 URL(例如圖像、文本、網路字體)。
2. Size 是來源對象的字節大小。

 

首次輸入延遲 (First Input Delay)


Name是事件的類型(例如 mousedown、keydown、pointerdown)。

 

累計版面配置轉移 (Cumulative Layout Shift)


版面資訊是一個 JSON 值,包括寬度、高度、x 軸位置、y 軸位置、左、右、上和下。您可以通過觀察這些值來觀察頁面上發生的佈局變化。
 

Paint Timings


此外,我們還添加了兩個重要的繪製時間

1. First Paint是導航和瀏覽器將第一個像素呈現到螢幕之間的時間。
2. First Contentful Paint 是瀏覽器從 DOM 渲染第一位內容的時間,屬於整個網頁的顯示。

透過Web Analytics,分別針對三個評比標準:最大內容繪製 ( LCP )、首次輸入延遲 ( FID ) 和累計版面配置轉移 ( CLS ) 對用戶體驗進行分級。來讓用戶參考,透過等級及分數來決定如何改善網站,調整CODE或是圖片大小及降低延遲性,以提升用戶網站體驗並強化SEO網站排名。

如果您想要了解更多細節,歡迎洽詢我們,樂雲將會盡快為您服務。