重新推出的網站可視度超過 75%，跳出率降低 50%，網頁瀏覽次數則增加了 27%。
當 Google 宣布推出 Core Web Vitals 計畫時，德國發布商 Netzwelt 很快就意識到，這些新指標有助於提供優質的網頁體驗，並改善以廣告為基礎的營利方式。他們開始重新推出網站，並在同時採用常見的成效最佳做法，以及最佳化廣告代碼和刊登位置。致力於提供優質的使用者體驗和快速的網頁，確實是同時提升參與度和廣告收益的最佳途徑，網頁瀏覽量增加 27%，廣告可視率超過 75%，廣告收益則提高了 18%。
27%
網頁瀏覽次數增加
18%
廣告收益增加
75%
廣告可視度
難題
和許多其他新聞發布商一樣，Netzwelt 在改善使用者體驗和網頁速度的同時，也想維持高廣告收益，但難以取得平衡。他們遇到的主要挑戰包括：
- 廣告觸發的版面配置位移過高，尤其是來自多尺寸版位和頂端橫幅廣告。
- 最大內容繪製 (LCP) 延遲出現，是因為廣告是最大的繪製作業，或是佔用主圖片載入作業的頻寬。
- 廣告、標頭出價和其他用途所需的第三方 JavaScript 導致高 首次輸入延遲時間 (FID)。
- 第三方供應商控制的同意聲明對話方塊對 Core Web Vitals 的副作用，也會造成版面配置位移，並可能會偵測為延遲的最大繪製時間。
針對 Core Web Vitals 最佳化新聞網站
當 Netzwelt 開始著手改善網站使用體驗核心指標時，很快就發現只要改善網站使用體驗核心指標，不但不會對廣告造成負面影響，反而還能改善廣告可視度。因此，Netzwelt 團隊調整了網站體驗核心指標，將廣告可視度提升至 75% 以上，以吸引價值更高的廣告 (全球多媒體廣告的平均可視度為 不到 50%)。
改善 CLS
廣告通常會延遲載入 (有時會刻意透過延後載入)，而且由於廣告刊登位置會變動，因此通常無法事先得知廣告的實際大小。
這個問題可以分為兩個部分：上方和下方的廣告。
上方廣告可能會因為載入時間較晚且尺寸不明，導致版面跳躍。封鎖廣告客戶可能需要的最大版面可能會導致使用者體驗不佳，而要求廣告客戶使用固定大小則可能會降低廣告收益。Netzwelt 解決這個問題的方法是，將頂端廣告設為固定，並移除部分較大的可用橫幅廣告尺寸。重疊廣告可避免觸發不同大小廣告的版面配置跳躍問題。雖然可用的廣告尺寸減少會影響廣告銷售，但可視度提升的幅度足以彌補這項影響。
有了歷來資料和 A/B 測試，Netzwelt 就能為不同裝置和螢幕大小找到適當的大小和位置，以及用來保留空間的 CSS 媒體規則。
位於需捲動位置的廣告有很大的改善空間：
- 使用者看不到但已載入的橫幅廣告，會導致廣告可見度降低，並降低網頁體驗。
- 在使用者捲動橫幅時載入橫幅，可能會導致額外的內容跳轉。
為了維持良好的網頁體驗和高廣告可視度，Netzwelt 導入了延遲載入功能，並為最小公倍數的大小保留空間。在多尺寸區域中，請求大小為 300x250 到 300x600 的橫幅廣告，預留 250 像素的高度。這麼做可消除較小尺寸的版面配置位移，並大幅減少較大橫幅的版面配置位移。這並非最佳做法，但可以作為起點，也是不錯的折衷做法。
為了進一步提升效能，Netzwelt 使用了 Intersection Observer 和 Network Information API，以控制廣告刊登位置並減少版面配置變動。系統會根據捲動位置和網路連線品質，使用不同的廣告位置和延遲載入策略，且廣告可能會從多個變更為固定大小。演算法的目標一向是盡可能提高廣告可視度，同時盡量減少版面配置變動。不支援 NetworkInfo API 的瀏覽器會根據裝置和 IP 衍生網路類型的組合，使用 Proxy 值。這種自適應載入策略特別適用於網際網路連線速度較慢的使用者，可有效降低 CLS。
改善 FID
第一個輸入延遲對新聞發布商來說似乎是個問題，因為廣告通常會附帶許多額外的 JavaScript 程式庫。從 Lighthouse 等研究資料來看，這項功能確實會造成負面影響。不過，根據2020 年網路年鑑的實地資料顯示，許多網站的回應速度都相當快。這部分的原因是廣告 JavaScript 載入時間較晚 (在第一次輸入後)、快取效果良好 (例如取得 v8 代碼快取處理)，或是廣告供應商已妥善最佳化。供應商可視度追蹤器會確保避免長時間的作業，因此即使總執行時間很長，總阻斷時間 (TBT) 和 FID 也不會受到影響。雖然 Netzwelt 的 FID 並非大問題，但仍有部分需要進行最佳化：
- 減少廣告指令碼和供應商，盡可能專注於單一堆疊。
- 使用延遲或非同步方式載入所有指令碼。
- 使用 webpack 或類似技術進行樹狀圖移除和解除綁定。
- 使用簡單的 BEM 類似 CSS 規則。
- 避免長時間執行的工作，並使用閒置至緊急狀態模式。
- 在影響版面配置時使用 RequestAnimationFrame。
最佳化 LCP
廣告會以兩種方式影響最大內容繪製時間：明確將廣告視為最大繪製時間，以及間接造成網路頻寬壅塞或影響關鍵路徑，導致實際最大內容繪製時間 (例如主圖片) 無法快速載入。
Netzwelt 已從頂端廣告版位移除中型矩形廣告，並針對 CLS 進行最佳化。這樣一來，廣告就不會成為最大的元素。
Netzwelt 遵循嚴格政策，將內容優先於廣告。Netzwelt 將優先順序給予折疊上方的主圖片和字型，並將關鍵路徑最佳化，優先處理廣告指令碼和廣告。這項優先順序有助於避免廣告影響 LCP。
除了這些最佳化做法之外，Netzwelt 也遵循其他最佳做法：
- 將關鍵轉譯路徑的 CSS 分開，並放入標頭中。
- 預先載入最重要的字型、指令碼和圖片。
- 避免在頂端延遲載入圖片。
- 已使用
font-display="swap"。
GDPR 同意聲明和 Core Web Vitals
同意聲明對話方塊通常會對網站體驗核心指標造成負面影響。與廣告一樣，同意聲明對話方塊會影響 Core Web Vitals 的情形有兩種：
- 明確指出是否偵測到最大繪製作業，或是否導致版面配置移位。
- 隱含的做法是從實際最大的繪製作業竊取頻寬，阻斷前往最大繪製作業的關鍵路徑，或是延遲顯示廣告，直到取得同意聲明為止，這可能會觸發版面配置變更。
Netzwelt 與第三方同意聲明供應商合作，後者也實行了最佳化。首先，Netzwelt 確保避免了明顯的陷阱：
- 同意聲明指令碼會以非同步方式載入，以免封鎖重要資源。
- 同意書的格式為大型元素不符合 LCP 中最大元素的資格。
- 同意聲明疊加畫面會使用
position: fixed避免位移。 - 雖然廣告只會在取得同意聲明後才顯示，但我們會預先保留足夠的空白空間，避免廣告載入時版面配置產生位移。
- 確認同意聲明對話方塊的顯示和位置不會觸發版面配置變更。我們發現並修正了一個問題，即服務供應商的捲動鎖定選項，會在同意聲明顯示時停用捲動功能，並移動文章捲動時的主要內容，導致版面配置偏移。
完成這項工作後，實驗室和實地測試的 CLS 仍有很大差異。雖然實驗室的 CLS 接近零，但欄位值遠高於閾值。經過調查，我們發現問題出在同意聲明 iframe 中的版面配置變更，目前只有在欄位資料中正確擷取。Netzwelt 會繼續與第三方同意聲明供應商合作，改善這個問題。
新聞訂閱模式和 Core Web Vitals
新聞出版商正轉向訂閱模式，以便資助新聞產業。這項模型與 Core Web Vitals 相關，因為使用者不會訂閱使用體驗不佳的網站。此外，訂閱者不會在付費內容中看到廣告，但隱藏廣告可能會導致版面配置移位。網站需要檢查使用者是否有權查看內容，以及是否要顯示廣告。這些檢查可能會導致額外的延遲，導致內容轉移或使用者體驗不佳。
Netzwelt 採用的模式是內容一律免費，但訂閱者不會看到廣告。他們研究了不同的查詢和儲存授權方式，以減少延遲和版面配置變動。
初始授權查詢一向會造成延遲，因此如果查詢授權的時間過長，網站會顯示上次快取的狀態。對於新訂閱者而言，這代表付費使用者看到廣告的風險很小。剛取消訂閱的使用者，可能會在本機儲存的授權更新前，看到一次沒有廣告的載入畫面。一旦知道授權，系統就會使用 LocalStorage API 將授權儲存在本機，以免在日後導覽期間產生額外的延遲和版面配置變更。
最佳化結果
Netzwelt 最佳化後的成果不證自明。他們的 PageSpeed Insights 分數在全球新聞發布者中無人能出其右：
這些最佳化調整可改善網頁體驗，但我們在進行調整時也考量到業務需求，並且提升廣告體驗、廣告可視度和收益。重新推出經過最佳化的網頁後，Netzwelt 的千次曝光出價提高了 20% 至 30%，廣告可視度則超過 75%。不過，Netzwelt 認為整體收益提升幅度可能更高。重新推出後，流量有所增加，這可能是因為使用者參與度提高，且使用者體驗改善後，跳出率也隨之降低。這些影響很難量化，也難以與重新推出活動建立因果關係，因為流量會自然波動，而且也受到全球大流行的影響。這些間接影響是 Netzwelt 在審查網站時，除了 CPM 之外，也會一併查看所有數據的原因之一，因為 CPM 可能會誤導人。Core Web Vitals 和使用者體驗指標，搭配所有廣告相關指標，就能提供真實的情況。
展望未來
Netzwelt 認為，在沒有第三方 Cookie 的未來，透過內容進行內容指定，再搭配良好的使用者體驗和網頁體驗 (包括廣告可見度)，是新聞發布者成功的關鍵。
因此，Netzwelt 不只採用 Core Web Vitals，還進一步採用許多新式網路功能，例如使用新的 Digital Goods API 實作漸進式網路應用程式 (PWA)、離線內容、深色模式、Web Share API 和 Trusted Web Activities (TWA)。