瞭解業務決策者和非開發人員如何改善網站體驗核心指標。
簡介
經證實，網站使用者體驗對業務成果有直接影響。如果加快網站的載入和回應速度，讓使用者享有更優質的體驗，參與度與轉換率通常也會隨之提高。Core Web Vitals 計畫旨在量化網站的使用者體驗，並找出可改善之處。
不過，許多網站體驗核心指標文件是針對網站開發人員所設計，對於網站開發人員有深入的技術瞭解，並能完全控管程式碼。許多網站是由非開發人員使用「網站製作工具」平台建立，例如 WordPress、Shopify 和 Wix，或其他類似解決方案，而且通常沒有網站開發團隊。
即使有專門的團隊或網頁程式開發人員，他們並不是唯一負責的網頁效能。無論是內容與設計，還是製定廣告策略，都是為網站吸引更多流量，業務決策者對網站成效有極大影響。這些決策通常對網站效能有重大影響。
本指南旨在提供部分相關資訊，協助網站製作工具和擁有者盡可能瞭解並提升使用者體驗，而不必深入瞭解網頁開發的技術。
與此同時，許多效能問題都需要開發人員進行技術修正，而開發人員指南則可協助您解決這些問題。這並非完整指南，而是要介紹為業務決策者設立的網站體驗核心指標計畫，以及一些常見的非開發根本原因，導致網頁效能低落。除此之外，網頁程式開發人員可能需要投入更多心力，才能取得進一步的進展。
什麼是網站體驗核心指標？
網站體驗核心指標是一組指標，用於評估網頁使用者體驗，尤其是使用者瀏覽網頁的速度。每個路徑都有三個字母縮寫：
- 最大內容繪製 (LCP) 會評估載入效能：網頁開始載入後，最顯眼的內容需要多久時間 (以秒為單位)。
- 累計版面配置位移 (CLS) 會評估網頁的視覺化穩定性，也就是內容在載入時移動的程度。
- 與 Next Paint (INP) 的互動 (2024 年 3 月 12 日正式取代 FID) - 評估網頁的回應能力，也就是網頁回應點擊、輕觸和鍵盤互動的速度。
每項指標都評估不同的使用者體驗。Google 也會針對各項指標提供建議門檻，只要未達上述標準，使用者體驗就會判定為「良好」，如果高於「不良」，在這些門檻之間，系統會將網頁視為「需要改善」範圍。請謹記，評估這些指標時，數據越小越好。
網站體驗核心指標的評估方式為何？
網站體驗核心指標是由網站實際使用者評估，不同使用者的結果也會有所不同。這些演算法不是「Google 的想法」或「googlebot 的想法」，而是你網站實際使用者獲得的體驗。
部分使用者會使用更快的裝置和更快速的網路。但某些網路連線速度較慢或網路連線速度較慢。有些使用者造訪您網站時比較簡單、速度更快，有些網頁則較為複雜、速度較慢。然後匯總所有這類使用者體驗的結果，以全面評估網站的整體成效。
Google 會在 Chrome 使用者體驗報告 (CrUX) 中，向選擇加入計畫的 Chrome 使用者提供資料，這些報告會納入 PageSpeed Insights 和 Google Search Console 等多項 Google 工具中。
CrUX 會出現在數百萬個熱門網站上，但並非所有網站都使用 CrUX。其他實際使用者監控 (RUM) 工具也能為您的網站收集這些指標。
如何查看網站的網站體驗核心指標？
有許多工具可顯示 Google 和第三方提供的 Core Web Vitals 指標。本文將介紹兩項工具，方便您快速查看網站的網站體驗核心指標。如要深入瞭解其他 Google 工具，包括使用這些工具處理網站體驗核心指標的工作流程，請參閱「使用 Google 工具建構網站體驗核心指標工作流程」一文。
如果您的平台提供整合式 RUM 解決方案，就能針對網站上的網頁提供更詳細的資訊、深入查看特定網頁或區隔使用者，進而瞭解及找出問題。
PageSpeed Insights
如要快速查看不需要設定的項目，可以使用 PageSpeed Insights (PSI)。輸入網址，然後按一下「分析」。如果您的網站已納入 CrUX 系統，則應立即顯示「瞭解實際使用者體驗」部分：
這表示 Chrome 真人使用者在過去 28 天內造訪你的網站。畫面頂端會顯示三個網站體驗核心指標，以及其他支援指標 (包括待處理 INP 指標)。頁面頂端僅顯示「通過/失敗」整體評估中的 Core Web Vitals 指標，但其他指標有助於排解 Core Web Vitals 相關問題 (如下一節所示)。
您可以使用本節頂端的按鈕，在「行動裝置」和「電腦」檢視之間切換。您也可以使用右上方的切換按鈕，在「這個網址」和該來源的所有資料之間切換，因為兩者都有資料。
從這些數據中，你應該可以全面瞭解網站成效、哪些指標有待改善，以及哪些裝置類型需要改善。
Google Search Console
Google Search Console (GSC) 僅適用於網站擁有者，因此如要使用這項服務，必須先註冊並驗證網站擁有權。詳細解說了 Google 搜尋如何看待你的網站。
與 PageSpeed Insights 不同，GSC 會列出 Google 搜尋在你網站上發現的所有網頁，並提供網站體驗核心指標的詳細資料：
系統會將網頁歸類到網址群組，方便您查看特定類別的網頁 (例如產品詳細資料頁面、網誌網頁等) 是否出現 Core Web Vitals 問題。由於這類錯誤通常是建立在類似的技術或範本中，因此這些頁面可能會有共同問題。
網站製作工具適用的網站體驗核心指標常見問題
許多效能問題都需要開發人員進行技術修正，而開發人員重點指南可協助開發人員解決這個問題。在本節中，我們會討論業務決策者可協助改善這些指標的一些常見非開發人員問題。
當我們說「非開發人員」時，指的是使用網站製作工具平台的開發人員，因為他們對於網站是否實際編碼或業務決策者，可能有限，因為他們可能會決定要如何設計網站，或協助排定預算的優先順序。
最大內容繪製 (LCP) 問題
LCP 的目標是測量從使用者點選連結開始到瀏覽器中顯示最大內容 (通常是橫幅圖片或標題) 的時間，藉此測量網頁的載入速度。
為提供良好的網頁體驗，網頁應在使用者點選連結後的 2.5 秒內顯示內容。如果載入時間超過 4 秒，則視同「不佳」。
我們將在下一節說明一些會影響 LCP 的常見問題。
開始載入網頁時發生延遲
我們常考慮縮短網頁本身的載入時間，但在開始之前，通常都得先等候一段時間。LCP 低於 2.5 秒的門檻限制，即使該網站都沒有下載幾秒鐘也無妨！
首次位元組時間 (TTFB) 是指下載您網頁第一個部分所需的時間。如果 PageSpeed Insights 以紅色或琥珀色顯示大型 TTFB 診斷指標，請解決該關鍵點，對於 LCP 應該直接造成作用。
瞭解目標對象
面對 TTFB 問題，瞭解目標對象至關重要。如果您的網站位於某個國家/地區，但服務的目標對象為全球使用者，那麼網站使用者和網路伺服器之間的地理位置就會是網頁 TTFB 的一項因素。內容傳遞網路 (CDN) 可讓世界各地的使用者快取您網站的副本，進而拉近與使用者之間的距離。許多代管服務供應商的服務都包括 CDN，可自動處理上述事宜。確認網站代管位置是否屬於這種情況。某些平台會額外提供不同的服務層級，為較高的付費方案提供更多 CDN 位置。在這種情況下，全球企業應考慮使用更高的服務等級。
盡量減少重新導向次數
重新導向是 TTFB 速度緩慢的另一個常見原因。放送廣告活動或傳送電子郵件通訊時，請避免使用多個連結縮短器，或是加入需要重新導向的網址，藉此盡量減少重新導向次數。例如，在廣告活動中使用 example.com/blog，以便重新導向 www.example.com/blog，接著重新導向至 https://www.example.com/blog，為網頁的 TTFB 增加時間。確保行銷廣告活動盡可能使用最少的重新導向。
確認廣告活動鎖定正確的目標對象
此外，請確認您的廣告活動有效指定目標對象。如果有大量新流量來自世界各地 (但不能向外使用者供應產品) 的使用者，他們不但浪費了廣告支出，網站成效也會受到負面影響。
網址參數可能會影響網站效能
Urchin 流量監視器 (UTM) 參數等網址參數通常用於行銷廣告活動。這些方法可以降低基礎架構的快取成效，因為每個網址看起來像是不重複的網頁，但每次都會提供同一個網頁。如果您使用 Urchin 流量監視器 (UTM) 參數，請與您的 CDN 供應商或基礎架構團隊聯絡，確認他們的快取基礎架構會忽略這些網址參數，讓廣告活動能夠從已快取的網頁中受益。
媒體可能需要代價才能展現效能
請考量媒體對網頁的影響。圖片和影片 (例如圖片和影片) 通常比文字大上許多，因此下載的時間比文字長。這也可能拖慢網頁其他部分的載入速度。如果 LCP 元素是媒體而非文字，這一點特別重要。LCP 元素是約 80% 網頁上的圖片，因此請務必審慎考量媒體對你網站的影響。
此外，相較於文字重型網站，媒體素材資源也能為使用者帶來豐富的視覺體驗。因此，移除媒體不難，但應瞭解媒體成本，以及如何減少這種預算來降低任何效能問題。
避免使用輪轉介面
多張圖片的輪轉介面可能會影響網頁的整體載入時間，因為如果未以最佳方式導入，系統可能必須同時下載多張圖片。此外，儘管輪轉介面具有普及性，但輪轉介面通常無法提供良好的使用者體驗，因此在用於網站前，請先審慎考慮。
使用針對網路最佳化的圖片
以及媒體素材資源的大小。網路上有許多圖片的解析度過高。請確保媒體合作夥伴或設計代理商提供針對網頁最佳化的圖片，而非他們經常提供的原尺寸列印品質圖片。你可以先透過 TinyJPG 等服務，快速清除圖片中不必要的資料，然後再上傳。許多網路平台都會嘗試在上傳時自動將圖片最佳化，但由於他們不知道圖片的尺寸會顯示在使用者裝置上，因此如果一開始就提供較小的圖片，可以大幅增加收益。
請謹慎處理影片
使用影片時，請加深考量。影片是網站下載及顯示中最大型的內容之一，速度也最慢，因此請避免過度使用。請不要在網頁頂端使用，也不要將標題放在下一頁。如此一來，就能讓成本較低的內容快速載入，進而為使用者提供更優質的載入體驗，並確保您的 LCP 不受影響。
A/B 版本測試
許多商家都會進行 A/B 版本測試，以實驗修改網站的方式。這些實作方式會對 LCP 造成重大影響。
許多 A/B 測試解決方案會延遲網站首次向使用者顯示時，才會延遲到套用任何測試的變更。這樣可以避免顯示原始版本的網站，但代價是讓使用者無法看到網站。為避免延遲，其他解決方案是在伺服器端套用。請花點時間瞭解 A/B 測試的執行方式，以及是否發生這類延遲情形。此外，可以盡量改用伺服器端 A/B 測試解決方案。
A/B 測試可提供寶貴的意見回饋，然後再推出新的變更。不過，網頁效能的成本必須與這麼做帶來的任何可能好處相比較。
無論您的基礎架構為何，所有執行 A/B 測試都應一律謹記以下最佳做法：
- 限制 A/B 測試工具僅適用於參與測試的網頁，且不會延遲所有網頁，當大部分網頁在特定時間都沒有執行 A/B 測試時。
- 限制只對部分使用者進行 A/B 測試，以免影響大多數使用者。
- 限制 A/B 版本測試的執行時間最短，且必須維持產生明確結果所需的時間。A/B 測試的執行時間越長，使用者可能會遇到網頁效能不佳的問題。
- 最重要的是，別忘了不再需要移除 A/B 測試實驗。
累計版面配置位移 (CLS) 問題
CLS 會評估網頁的視覺化穩定性，也就是網頁內容在載入時移動了多少。如果使用者開始閱讀網頁，卻因缺乏內容或廣告版位而失去位置，使用者就可能分心。如果網頁版面配置過度移動，可能會導致使用者意外點選錯誤的內容。請特別小心，之後載入的動態內容，而且可能會移動部分初始網頁內容。
這個指標是使用數學公式計算，該公式計算內容轉移了多少，以及變更的內容多寡。並以 0.1 以下的無單位分數表示，系統會將其視為「good」，且值大於 0.25 為「poor」。
我們將在接下來的章節中說明一些會影響 CLS 的常見問題。
查看圖片在捲動頁面時如何載入
許多範本都避免在網頁較下方載入圖片，這樣在初次載入網頁時，就能給畫面上的圖片提供更多資源。當使用者向下捲動頁面時，圖片就會載入。這種圖片載入技術稱為「延遲載入」。
頁面範本應保留延遲載入圖片的空間，這樣一來，如果使用者在圖片載入前就捲動很快，周圍的內容就不會改變。如果您的範本或平台沒有這項功能，建議您改用支援這項功能的範本。
請謹慎放在內容中間的廣告
在內容中插入的廣告，可能會使內容下移，因為廣告載入時間往往較長，而且比上一節所述的圖片要長。將這類風險放在主要頁面的旁邊，是降低風險的常見方式。具體做法取決於您的平台，以及用於建立網站的範本。
避免在網頁頂端加上動態內容
避免在網頁載入後 (例如 Cookie 橫幅或特價優惠) 顯示快訊和橫幅。但如果選擇不要在主要內容上方疊加快訊和橫幅，網頁內容就無法改變。就像上一個章節，這裡的選項取決於您網頁使用的平台和範本。
與下一個繪製 (INP) 問題的互動
INP 會評估網頁的回應時間，評估網頁是否快速回應點擊、輕觸和鍵盤輸入等互動。如果沒有迅速地回應使用者輸入的網頁，往往會讓人覺得十分緩慢，而且會對使用者造成困擾。
INP 會評估網頁生命週期中每次符合條件的互動的整體情況，並回報發生率最差的互動。INP 的「良好」門檻為 200 毫秒，低門檻為 500 毫秒。INP 是強化 FID 的功能，並更妥善地評估回應速度，因此已將 FID 取代為 Core Web Vitals 來評估回應速度。
反應指標 (尤其是 INP) 是需要最佳化的棘手指標，尤其是 INP。如果這些指標處於「不良」門檻，通常是因為網頁嘗試執行太多動作而延遲互動，因此主要的解決方案包括移除不必要的程式碼，讓網頁看起來較淺。
我們將在接下來的章節中說明一些會影響 INP 的常見問題。
祝你有美好的一天！
檢查網站中加入的外掛程式和小工具，如果不再使用，請將其移除。新增外掛程式試用看看通常十分容易，但如果日後覺得不實用，也很容易忘記移除外掛程式。因為這樣會造成互動緩慢，但最佳化工作相對簡單許多。
同樣地，如果您使用代碼管理工具處理行銷廣告活動，請務必將舊廣告活動移除。即使系統不再觸發代碼，您還是需要在每個網頁下載及編譯過期的行銷廣告活動程式碼，這可能會減緩使用者在初始網頁載入期間的互動速度。
避免使用昂貴的小工具和外掛程式
高成本的小工具和外掛程式看起來可能很棒，但是否能夠改善使用者體驗，或者實際上是否更糟？在 PageSpeed Insights 的診斷效能/Lighthouse 報表中，您可以找出影響網站效能明顯影響的 JavaScript。
在理想情況下，建議您只在所需的頁面顯示小工具；如果只在「與我們聯絡」網頁上使用 Google 地圖嵌入，就無需在可能導致回應速度問題的每一個網頁上載入小工具。
考量廣告數量 (尤其是針對行動裝置的廣告數量)
廣告是許多商家都適用的營利策略，但廣告往往相當複雜，且耗費大量資源。廣告越多，就越容易乾擾網頁速度。在行動裝置上尤其如此，因為處理電力記憶體在電腦或筆電裝置上的效果往往不如電腦或筆電。
評估營利成效和成效之間的平衡。如果使用者因體驗不佳而提早放棄，這些多餘的廣告所帶來的收益可能比使用者增加的費用更高。
避免頁面過大
複雜的大型網頁需要更多處理時間。舉例來說，假設產品圖庫包含 1,000 種不同的產品，使用者的瀏覽器視窗中需要一些時間才會顯示。請考慮在何時為頁面分頁，以縮短此時間。
如何取得更多協助？
本文將列出業主可能影響成效的一般考量因素。此外，您可能需要諮詢網頁程式開發人員，進一步瞭解改善網站成效的方法。
平台專屬資訊
大多數平台都十分重視其網頁效能，因此可能會針對如何改善網站成效，給予特定平台的專屬建議。此外，您也可以聯絡專屬的網站成效團隊，由他們為您提供改善網站方面的建議。
Lighthouse 也可以使用 Stack Pack 功能呈現平台專屬資訊，能引導支援平台的使用者取得適當的建議。
隨著平台持續改進，許多平台目前都相當注重效能和網站體驗核心指標。確保平台維持最新狀態，取得開發人員平台的最新改善項目。
如果使用平台供應商會自動管理平台 (包括平台更新) 的代管平台，這個方法會最簡單。如果您是自行代管平台，例如將本機 WordPress 安裝在您自己的伺服器上，請務必定期更新平台，確保您的網站能受益於開發人員實作的平台改善措施。商家應優先處理這項問題，或選擇可代為處理這類事宜的服務。
吸引網頁程式開發人員參與
與企業擁有者相較，具備網站效能專業知識的網頁程式開發人員，或許能夠解決許多問題。你可能曾請網頁程式開發人員建立網站，例如初次建立網站、處理定期變更，或者僱用專屬的開發團隊，或請開發人員協助處理這類發展 (建議請開發人員具備網站效能專業知識)。
如果上述建議不足以解決網站效能問題，請向開發人員詢問。希望先前的例子也指出，您應該與開發人員合作，在業務優先事項和開發決策之間取得平衡，為網站打造合適的解決方案。
請注意，網頁效能很少是一次性的工作。如要維持網站正常運作，通常需要定期監控及維護，以確保網站不會在改善後無法迴歸。
結論
網站通常是顧客在接觸顧客的第一個入口，您希望網站提供良好的體驗。這適用於首次獲得商家第一印象的訪客，以及回頭客和忠實客戶。請盡可能提供流暢的體驗，最好是沒有使用或可能造成負面觀感的困擾。網站體驗核心指標是 Google 建議網站考量的使用者體驗之一。網路功能無所不包，如果在使用其他網站時感到困擾，便太容易上手。
此外，網站體驗核心指標只是網站的其中一項評估指標。商家必須決定自己該為網站投入多少資金，以及會帶來什麼投資報酬率。
特別銘謝
Carlos Muza 在 Unsplash 網站上提供的縮圖