瞭解業務決策者和非開發人員如何提升 Core Web Vitals。
簡介
經證實，網站使用者體驗對業務成果有直接影響。如果加快網站的載入和回應速度，讓使用者享有更優質的體驗，參與度與轉換率通常也會隨之提高。Core Web Vitals 計畫旨在量化網站的使用者體驗，協助商家找出可精進的部分。
不過，許多 Core Web Vitals 說明文件都是針對網頁程式開發人員撰寫，需要具備深厚的技術知識，並能完全掌控程式碼。許多網站是由非開發人員使用「網站製作工具」平台 (例如 WordPress、Shopify、Wix 或其他類似解決方案) 建立，通常沒有網頁程式開發人員團隊。
即使有專門的團隊或網頁程式開發人員，他們也不是唯一負責網頁效能的人。業務決策者對網站成效有很大的影響力，從決定內容和設計，到制定廣告策略，都是為了吸引更多流量到網站。這些決策通常會對網站成效產生重大影響。
本指南旨在為網站建構人員和擁有者提供相關資訊，協助他們盡可能瞭解並改善使用者體驗，而不必具備深厚的網頁程式開發技術知識。
同時，許多效能問題需要開發人員實作技術修正，而我們的開發人員指南可協助您完成這些工作。本文並非詳盡的指南，而是向業務決策者介紹 Core Web Vitals 計畫，並說明一些常見的非開發層面網頁效能不佳根本原因。此外，您可能需要網頁程式開發人員協助，才能進一步改善。
什麼是 Core Web Vitals？
Core Web Vitals 是一組由三項指標組成的指標，用於評估網頁的使用者體驗，尤其是使用者感受到的網頁速度。每個角色都有三個字母的縮寫：
- Largest Contentful Paint (LCP) 評估載入效能：網頁開始載入後，最顯眼的內容需要多久時間 (以秒為單位) 才會顯示。
- Cumulative Layout Shift (CLS) 評估網頁的視覺穩定性：內容在載入時的移動程度。
- Interaction to Next Paint (INP)：網頁對點擊、輕觸和鍵盤互動的回應速度。
每項指標都代表使用者體驗的不同面向，Google 也會提供各項指標的建議門檻，低於下限門檻的使用者體驗會視為良好，高於上限門檻的使用者體驗則視為不佳。介於這兩個門檻之間的網頁則屬於「需要改善」範圍。請注意，這些指標的數值越低越好。
如何評估 Core Web Vitals？
Core Web Vitals 是由網站的實際使用者測量，不同使用者會有不同的結果。這些資料並非「Google 的看法」或「Googlebot 的看法」，而是網站實際使用者的體驗。
部分使用者會使用速度較快的裝置和網路，有些使用者會使用速度較慢的裝置或網路。有些使用者會造訪網站上較簡單、載入速度較快的網頁，有些則會造訪較複雜、載入速度較慢的網頁。接著，系統會匯總所有使用者體驗的結果，提供整個網站的整體評估。
Google 會將選擇加入的 Chrome 使用者資料，提供給 Chrome 使用者體驗報告 (CrUX)，並將這些資料提供給許多 Google 工具，例如 PageSpeed Insights 和 Google Search Console。
CrUX 涵蓋數百萬個熱門網站，但並非所有網站都包含在內。其他真實使用者監控 (RUM) 工具也可以為網站收集這些指標。
如何查看網站的 Core Web Vitals？
許多工具都會顯示 Google 和第三方提供的 Core Web Vitals 指標。本文將介紹兩項工具，可讓您快速查看網站的 Core Web Vitals。如要進一步瞭解其他 Google 工具，包括如何使用這些工具處理 Core Web Vitals 的工作流程，請參閱「使用 Google 工具的 Core Web Vitals 工作流程」一文。
如果平台提供整合式 RUM 解決方案，就能提供更詳細的網站網頁資訊，或讓您深入分析特定網頁或區隔使用者，協助瞭解及找出問題。
PageSpeed Insights
如要快速查看，不需設定，可以使用 PageSpeed Insights (PSI)。輸入網址，然後點選「分析」。如果你的網站包含在 CrUX 中，你應該會很快看到「瞭解實際使用者的體驗」部分：
這項指標會顯示過去 28 天內，Chrome 使用者實際造訪網站的情形。您會在頂端看到三項 Core Web Vitals 指標，下方則有其他輔助指標 (包括待處理的 INP 指標)。只有 Core Web Vitals 會計入頁面頂端的整體通過或失敗評估，但其他指標有助於排解 Core Web Vitals 的問題，下一節將說明。
您可以使用這個部分頂端的按鈕，切換行動版和電腦版檢視畫面。如果兩者都有資料，您也可以使用右上方的切換鈕，在「這個網址」和該「來源」的所有資料之間切換。
這些數據可大致反映網站成效，以及哪些指標和裝置類型有改善空間。
Google Search Console
Google Search Console (GSC) 僅供網站擁有者使用，因此必須註冊並驗證網站擁有權才能使用。這份報表會詳細說明 Google 搜尋如何查看你的網站。
與 PageSpeed Insights 不同的是，GSC 會列出 Google 搜尋在您網站上找到的所有網頁，並提供所有網頁的 Core Web Vitals 詳細資料：
網頁會歸入網址群組，方便你查看特定類別的網頁 (例如產品詳細資料頁面、網誌頁面等) 是否有 Core Web Vitals 問題。由於這些網頁通常是以類似的技術或範本建構而成，因此這些網頁中的任何問題可能都有共同原因。
網站製作工具常見的 Core Web Vitals 問題
許多效能問題需要開發人員實施技術修正，而開發人員專用指南可協助開發人員完成這項工作。本節將討論一些常見的非開發人員問題，業務決策者可協助改善這些指標。
「非開發人員」是指使用網站製作工具平台，但對網站實際編碼方式控制權有限的使用者，或是決定網站設計或協助安排預算優先順序的業務決策者。
Largest Contentful Paint (LCP) 問題
LCP 旨在評估網頁的載入速度，方法是測量從點選連結到瀏覽器顯示最大內容 (通常是橫幅圖片或標題) 的時間。
為提供理想的網頁體驗，網頁應在使用者點選連結後的 2.5 秒內顯示內容。如果載入時間超過 4 秒，則視同使用體驗不佳。
下一節將介紹一些影響 LCP 的常見問題，這些問題是業務決策者可以影響的。
延遲開始載入網頁
我們通常會考慮縮短網頁本身的載入時間，但往往在開始載入前就會發生延遲。如果網站連下載都需要幾秒鐘，LCP 就不可能低於 2.5 秒的良好門檻！
Time to First Byte (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) 參數。這可能會降低基礎架構的快取成效，因為每個網址看起來都像是不重複的網頁，即使每次都提供相同的網頁也一樣。如果你使用 UTM 參數，請與 CDN 供應商或基礎架構團隊聯絡，確保快取基礎架構會忽略這些網址參數，讓廣告活動能從已快取的網頁中受益。
媒體可能會影響效能
請考量媒體對網頁的影響。圖片和影片等媒體通常較大，因此下載時間比文字長。這也可能導致網頁其他部分載入速度變慢。如果 LCP 元素是媒體而非文字，這點就特別重要。在約 80% 的網頁中，LCP 元素都是圖片，因此請務必考量媒體對網站的影響。
同時，媒體素材資源可為使用者提供豐富的視覺體驗，比文字繁多的網站更具吸引力。因此，移除媒體很少是可行的選項，但瞭解媒體的成本以及如何降低成本，可以盡量減少效能問題。
避免使用輪轉介面
如未以最佳方式導入包含多張圖片組成的輪轉介面，系統可能就需要同時下載多張圖片，連帶影響網頁整體載入時間。此外，儘管輪轉介面很常見，但通常無法提供良好的使用者體驗，因此在網站上使用前請仔細考慮。
使用網頁最佳化圖片
接著是媒體素材資源的大小。網路上許多圖片的解析度過高。請確保媒體合作夥伴或設計代理商提供專為網頁最佳化的圖片，而不是平時適合列印的原尺寸圖片。你可以先透過 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 測試實驗，請務必移除。
Cumulative Layout Shift (CLS) 問題
CLS 評估網頁的視覺穩定性，也就是網頁內容在載入時的位移程度。如果使用者開始閱讀網頁，但隨著更多內容或廣告版位載入而找不到原本閱讀的位置，可能會造成干擾。如果網頁版面配置大幅變動，也可能導致使用者不小心點選錯誤的內容。請特別留意稍後載入的動態內容，這類內容可能會移動部分初始網頁內容。
這項指標是透過數學公式計算，可算出有多少內容發生位移，以及位移的程度。這個值是以無單位的分數表示，0.1 以下視為良好，0.25 以上則視為不佳。
下一節將介紹一些影響 CLS 的常見問題，這些問題是業務決策者可以影響的。
檢查捲動頁面時圖片的載入方式
許多範本會避免載入頁面下方的圖片，以便在初始載入網頁期間，將更多資源分配給畫面上的圖片。使用者向下捲動時，系統才會載入圖片。這種圖片載入技術稱為「延遲載入」。
網頁範本應為延遲載入的圖片預留空間，這樣一來，如果使用者在圖片載入前快速捲動，圖片周圍的內容就不會移動。如果您的範本或平台不支援這項功能，建議您改用支援的範本或平台。
謹慎在內容中間安插廣告
在內容中間插入廣告，可能會導致內容向下移動，因為廣告載入時間通常較長，甚至比上一節所述的圖片還要長。將這些內容放在主要網頁內容旁邊，是降低這類風險的常見做法。實際做法取決於您使用的平台和網站範本。
避免在網頁頂端加入動態內容
避免在載入網頁後，於網頁頂端加入快訊和橫幅，例如 Cookie 通知橫幅或特價優惠。如果選擇在主要內容上方疊加警示和橫幅，就能避免網頁內容移位。與上一節類似，這裡的選項取決於網頁使用的平台和範本。
Interaction to Next Paint (INP) 問題
INP 評估的是網頁的回應速度，也就是網頁是否能快速回應點擊、輕觸和鍵盤輸入等互動。如果網頁無法快速回應使用者輸入內容，通常會讓人覺得反應遲鈍，可能造成使用者不悅。
INP 會評估網頁生命週期內每次符合條件的互動，並回報最差的互動。INP 的「良好」門檻為 200 毫秒，「不良」門檻為 500 毫秒。
回應指標 (尤其是 INP) 是很難最佳化的指標。如果這些指標處於「不佳」門檻，通常是因為網頁嘗試執行過多作業，導致互動延遲，因此主要解決方案是移除不必要的程式碼，讓網頁更輕量。
下一節將介紹一些影響 INP 的常見問題，這些問題是業務決策者可以影響的。
春季大掃除！
檢查網站上新增的外掛程式和小工具，並移除不再使用的項目。新增外掛程式來試用功能通常比較容易，但如果發現不實用，之後要記得移除就比較困難。這是互動速度緩慢的原因之一，但相較於許多其他最佳化作業，這項作業相對簡單。
同樣地，如果您使用代碼管理工具管理行銷廣告活動，請務必移除舊的廣告活動。即使這些程式碼不再觸發，系統仍需在每個網頁下載並編譯過期行銷廣告活動的程式碼，這可能會在初始網頁載入期間降低使用者互動速度。
避免使用昂貴的小工具和外掛程式
需要大量運算資源的小工具和外掛程式可能看起來很美觀，但真的能改善使用者體驗，還是反而讓體驗變差？PageSpeed Insights 的「診斷效能問題」報表由 Lighthouse 提供，可協助找出對網站效能有明顯影響的 JavaScript。
理想情況下，請只在需要的小工具頁面上加入小工具。舉例來說，如果您只在「聯絡我們」頁面上嵌入 Google 地圖，就不需要在每個頁面上載入地圖，以免造成回應速度問題。
考量廣告數量，尤其是行動裝置
對許多商家來說，廣告是很好的營利策略，但往往複雜且耗費資源。廣告越多，耗用的資源就越多，可能會影響網頁速度。在行動裝置上尤其如此，因為行動裝置的處理能力記憶體通常不如桌上型電腦或筆記型電腦。
在營利和成效之間取得平衡。如果使用者因體驗不佳而提早離開，這些額外廣告可能會導致收益減少，而非增加。
避免網頁過大
大型複雜網頁需要較多處理時間才能顯示。舉例來說，如果產品庫中有 1,000 種不同的產品，就需要一段時間才能在使用者瀏覽器視窗中顯示。請考慮何時要將網頁分頁，以縮短這段時間。
如何取得更多協助？
本文列出業主可考量的一些一般事項，這些事項可能會影響成效。此外，您可能需要諮詢網頁程式開發人員，進一步瞭解如何提升網站效能。
平台專屬資訊
大多數平台都非常重視網站效能，並可能提供專屬的平台建議，協助您改善效能。使用該平台時，您可能也會接觸到專門的網頁效能團隊，他們可以進一步提供改善網站的建議。
Lighthouse 也會使用堆疊套件功能顯示平台專屬資訊，引導支援平台的使用者取得適當建議。
平台會隨著時間不斷改進，目前許多平台都著重於效能和 Core Web Vitals。請務必將平台更新至最新版本，才能享有平台開發人員提供的最新改良功能。
如果您使用代管平台，平台供應商會自動管理平台 (包括平台更新)，因此最容易做到這一點。如果您自行託管平台 (例如在自己的伺服器上安裝本機 WordPress)，請務必定期更新平台，這樣網站才能受惠於平台開發人員實作的任何改善措施。企業應優先處理這項維護作業，或選擇由服務代為管理。
聘請網頁程式開發人員
網頁程式開發人員具備網頁效能方面的專業知識，因此能解決的問題可能比業主多。您可能已經聘請網頁程式開發人員來建構網站，或定期進行變更，也可能擁有專屬開發團隊，或需要尋找開發人員 (最好是具備網頁效能專業知識的人員)。
如果本文提供的建議不足以解決網站效能問題，請向開發人員尋求協助。不過，希望先前的例子也能說明，與開發人員合作，在業務優先事項與開發決策之間取得平衡，對於找出適合網站的解決方案至關重要。
請注意，網頁效能很少是一次性工作。如要維持良好的網站效能，通常需要定期監控及維護，確保網站不會在改善後退步。
結論
網站通常是商家與顧客接觸的第一個管道，因此你希望為他們提供優質體驗。這不僅適用於初次造訪、對商家留下第一印象的新訪客，也適用於回訪者和忠實顧客，他們應盡可能享有流暢的體驗，最好不要有任何可能留下負面印象的挫折感。Core Web Vitals 是 Google 建議網站考量的使用者體驗指標之一。網路上有許多選擇，如果使用者對您的網站感到不滿，他們可以 (也一定會！) 嘗試其他網站。
同時，Core Web Vitals 只是網站的其中一項評估指標。商家必須自行決定要對網站投入多少資源，以及這項投資能帶來多少報酬。