PubTech' 同意聲明管理平台將客戶網站的 INP 減少多達 64%，同時使廣告可視度提升多達 1.5%

PubConsent CMP 如何使用瀏覽器的 Scheduler API 修正透過 Chrome 開發人員工具找到的回應速度問題，進而使用收益開發策略降低客戶 INP 最多達 64% 的影響。

Marco Prontera

Gilberto Cocchi

同意聲明管理平台 (CMP) 工具會向使用者取得 Cookie 和追蹤技術的使用同意聲明，協助網站遵守隱私權法規。除了確保遵守法規的主要目標外，CMP 做為第三方指令碼，也應幾乎不會影響成效和使用者體驗。

PubConsent CMP 是 PubTech 推出的最新產品。PubConsent CMP 是以效能為主要考量，在設計上兼顧輕量級，能確保最佳使用者體驗，並幾乎不會影響網站整體效能。

導入「與下一個顯示內容互動 (INP)」指標後，PubTech 就能找出我們 CMP 回應速度的問題。在本個案研究中，PubTech 說明瞭他們如何解決 PubConsent CMP 平台的回應速度，以及 INP 在 2024 年 3 月成為 Core Web Vitals 之一前如何改善相關問題。這證明瞭他們一直堅持在 CMP 產品中提供最佳效能的承諾。

PubTech 關心效能的原因為何？

Pub/Consent CMP 與多數 CMP 一樣，提供同意聲明管理功能，會以第三方指令碼的形式導入網站網頁上的第三方指令碼。想要減輕 CMP 產品的效能影響 (包括回應速度)，是確保 CMP 成功整合的關鍵。

網站擁有者可以優先提升執行效能，並採用輕量化的 PubConsent CMP 指令碼，在兼顧使用者體驗的同時，謹慎整合有價值的同意聲明管理功能。

考量到 CMP 提供功能的重要性，以及其對成效的影響，PubTech 已設定下列目標：

1. 盡量減少 PubConsent CMP 產品對 INP 的影響。
2. 減少可歸因於 CMP 產品的長時間工作。
3. 縮短總封鎖時間 (TBT)，可能會對網頁的 INP 造成負面影響。

INP 的評估方式

PubTech 使用 Chrome 開發人員工具進行初步分析，並手動診斷出速度緩慢的互動情形。透過這項工作流程，PubTech 得以找出影響網頁回應速度的特定問題。舉例來說，CMP 產品中的點擊互動會接受所有 Cookie，但之後關閉 Cookie 同意聲明對話方塊，導致長時間工作延遲顯示更新使用者介面。如下圖所示，使用者介面不會更新，顯示對話方塊在長時間工作完成後才關閉。

如同接受所有 Cookie 的按鈕，拒絕所有 Cookie 或自訂 Cookie 偏好設定的按鈕，全都遵循 PubConsent CMP 架構的相同工作流程。因此，本個案研究中詳述的改善，也影響了 CMP 產品中的一系列使用者互動。

導致面板在工作期間呈現鎖定狀態的視覺觀感。很長一段時間都封鎖轉譯更新功能，導致網頁的 INP 受到負面影響。

PubTech 如何最佳化按鈕和連結的 INP

為改善 INP，PubConsent CMP 採用了不同的收益策略。

執行高優先順序的工作

以下程式碼片段中顯示的 yieldToMainUiBlocking 方法旨在透過產生 scheduler.yield (如果有的話) 來最佳化高優先順序 JavaScript 工作，但如果 postTask 可用，則會改回使用 user-blocking (高) 優先順序的 postTask，且最終會改回無任何內容。

這裡並未使用 setTimeout，因為 yieldToMainUiBlocking 方法專門用來處理內部 CMP 設定作業，以及應在獲得成效時保留這類優先順序的高優先順序工作。這表示「確實」表示只有實作這些排程 API (目前只能在編寫期間採用 Chromium 式瀏覽器) 的瀏覽器，受惠於本個案研究所述的改善措施。即使如此，針對這些高優先順序工作，這種做法依然被視為可接受的漸進式強化。

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

中型和背景任務收益

下列程式碼片段中顯示的 yieldToMainBackground 方法是用來中斷優先順序為 user-visible (中) 或 background 的長時間工作。如果有邏輯的話，邏輯會實作 scheduler.yield()，但此邏輯不會太過使用具有中優先順序的 postTask，最後在非 Chromium 瀏覽器中改回 setTimeout。

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};

PubTech 如何透過轉譯版面配置最佳化功能進一步降低 TBT 時間

套用收益策略後，我們發現 CMP 的 INP 有顯著改善。事實上，大幅縮短事件處理常式的處理時間後，發現「關閉 UI」動作對下一幅繪製作業有進一步的轉譯表現。這個動作原先設計為從 DOM 移除元素。這會造成一些挑戰，尤其是對具有大量 DOM 節點的網站而言，導致轉譯工作意外增加。

為了處理從 DOM 移除元素所需的轉譯工作量，Google 推出了名為「延遲反算繪」的解決方案，這個方法會先在使用者表示同意隱藏後，將 display: none CSS 規則套用到 CMP 同意聲明對話方塊。接著，使用 requestIdleCallback 移除與 CMP 對話方塊相關聯的 DOM 節點，會改為在瀏覽器閒置的時間點移除。這個方法能在使用者關閉同意聲明對話方塊時移除 DOM 節點，更快。

PubTech 改善 IAB TCF 程式庫，進一步降低了 INP

成功解決大部分的 CMP 回應問題後，我們發現其中一個主要依附元件是 IAB 資訊公開和同意聲明架構 (TCF) 程式庫，能找出更多改善機會。

這個程式庫中最昂貴的元件是「建構字串」和「調度同意聲明」這些元件是 IAB 資訊公開和同意聲明架構程式庫的必要部分。下列元件的最佳化設定是在專屬的獨立分支中套用，以滿足 PubTech 的需求：

1. 重複使用計算的結果進行解碼，對每個需要讀取使用者同意聲明的第三方回呼都會執行此程序。
2. 避免及減少發布商限制編碼程序中不必要的迴圈，這會在使用者提供同意聲明時執行。

第一項最佳化方法可減少 CMP 於每個掛鉤至 IAB 資訊公開和同意聲明架構程式庫的第三方回呼上所花費的時間。第二次最佳化方式可以減少「建構字串」產生的處理時間長度元件。事實上，這項最佳化功能可減少在每次使用者表示同意時，最多執行迴圈 60% 的迴圈。

結果

根據之前創造的策略和新的顯示版面配置最佳化功能，CMP 的 INP 提升了高達 65%。結果，PubConsent CMP 的使用者體驗回應速度大幅提升，某些廣告的可視度甚至可提升 1.5%。

除了這些改善措施外，在 IAB 資訊公開和同意聲明架構的程式庫中，由於已 TCF 帶來的長時間工作減少了 85%，在 IAB 的資訊公開和同意聲明架構中，對受影響的客戶而言，INP 提升了高達 77%。此做法可大幅減少在網頁生命週期內，每個第三方回呼所產生的負擔。

使用 PubConsent CMP 時傳遞 INP 的來源數量增加超過 400%，在行動裝置上則從 13% 提升至 55%。受到 PubTech SDK 最佳化後，部分客戶的 INP 網頁 INP 減少了一半以上，從 470 毫秒縮短到 230 毫秒。

，瞭解如何調查及移除這項存取權。

結論

PubTech 的客戶很快就發現最佳化措施帶來的正面 INP 成效和業務指標結果，並考慮進一步改善 PubConsent CMP 的效能，並運用客戶提供的寶貴即時使用者監控 (RUM) 資料。這項資料能密切追蹤迴歸和進展，協助 PubTech 持續精進改善工作。

此外，PubTech 也成為第三方合作夥伴，他們發現自己有機會大規模提升網站效能、加快回應速度，同時避免對業務 KPI 造成負面影響。立即開始導入這類改善措施，是件好事！

在此特別感謝：內容技術技術長 Luca Coppola 為支援這項創新工作，以及 Google 團隊的 Jeremy Wagner、Michal Mocny 和 Rick Viscomi。