處理重度廣告幹擾

Rowan Merewood

廣告在裝置上消耗過多資源，會對使用者體驗造成負面影響，包括明顯的效能降低，以及較不明顯的後果，例如耗盡電池電量或使用過多頻寬配額。這些廣告包括惡意廣告 (例如加密貨幣挖礦程式)，以及含有無意義錯誤或效能問題的內容。

Chrome 會為廣告可使用的資源設定限制，並在超過限制時卸載廣告。詳情請參閱 Chromium 網誌上的公告。卸載廣告的機制是重度耗資源廣告干涉機制。

重度耗資源廣告條件

系統會將廣告視為重廣告，如果使用者未與廣告互動 (例如未輕觸或點選廣告)，且廣告符合下列任一條件：

• 總共使用主執行緒超過 60 秒
• 在任何 30 秒的時間範圍內，主執行緒使用時間超過 15 秒
• 使用超過 4 兆位元網路頻寬

廣告框的所有子項 iFrame 使用的所有資源，都會計入對該廣告進行干預的限制。請注意，主執行緒的時間限制與載入廣告後經過的時間不同。這些限制是指 CPU 執行廣告程式碼所需的時間。

測試介入措施

這項措施已在 Chrome 85 中推出，但預設情況下，系統會在閾值中加入一些雜訊和變化，以保護使用者隱私。

如果將 chrome://flags/#heavy-ad-privacy-mitigations 設為「停用」，系統就會移除這些保護措施，也就是說，系統會根據限制條件，以確定性方式套用限制。這樣一來，偵錯和測試作業應該會更輕鬆。

注意：早期版本的 Chrome 包含 #heavy-ad-privacy-mitigations-opt-out 和 #enable-heavy-ad-intervention 標記，可用於初步測試。這些旗標已不再必要，因此已移除。

觸發干預措施後，您應該會看到 iframe 中的內容，其中重廣告已替換為「廣告已移除」訊息。點選畫面上的「Details」連結，您會看到以下說明訊息：「這個廣告使用太多裝置資源，因此 Chrome 已將其移除。」

您可以前往 heavy-ads.glitch.me 查看對樣本內容所採取的介入措施。您也可以使用這個測試網站載入任意網址，快速測試自己的內容。

測試時請注意，有許多原因可能會導致無法套用介入措施。

• 在同一個網頁中重新載入相同的廣告，即可免除該組合遭到干預。清除瀏覽記錄，並在新標籤中開啟網頁，這麼做有助於解決問題。
• 確保頁面仍處於焦點狀態 - 將頁面設為背景 (切換至另一個視窗) 會暫停該頁面的工作佇列，因此不會觸發 CPU 介入。
• 請務必在測試期間不要輕觸或點按廣告內容，因為系統不會對收到任何使用者互動的內容採取干預措施。

您需要做些什麼？

您在網站上顯示第三方供應商的廣告

您不需要採取任何行動，但請注意，使用者在您的網站上可能會看到超過限制的廣告。

您在網站上放送第一方廣告，或為第三方顯示廣告

請繼續閱讀，瞭解如何透過報表 API 實施必要的監控，以便進行廣告過量放送介入措施。

您建立廣告內容，或維護用於建立廣告內容的工具

請繼續閱讀，瞭解如何測試內容的成效和資源使用問題。您也應參考所選廣告平台的指南，因為這些指南可能會提供其他技術建議或限制，例如 Google 的多媒體廣告素材指南。建議您直接在製作工具中建立可設定的門檻，避免成效不佳的廣告流入實際環境。

廣告遭移除會有什麼影響？

在 Chrome 中，透過 Reporting API 以 intervention 報表類型回報介入事件。您可以使用 Reporting API 接收有關介入事件的通知，方法是傳送 POST 要求至回報端點，或是在 JavaScript 中傳送。

這些報表會在根廣告標記 iframe 和所有子項 (即介入事件卸載的每個影格) 上觸發。也就是說，如果廣告來自第三方來源 (例如跨網站 iframe)，則由該第三方 (例如廣告供應商) 處理回報。

如要設定 HTTP 報表的網頁，回應中應包含 Report-To 標頭：

Report-To: { "url": "https://example.com/reports", "max_age": 86400 }

觸發的 POST 要求會包含以下報表：

POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report

[{
 "type": "intervention",
 "age": 60,
 "url": "https://example.com/url/of/ad.html",
 "body": {
   "sourceFile": null,
   "lineNumber": null,
   "columnNumber": null,
   "id": "HeavyAdIntervention",
   "message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
 }
}]

注意：null 值為預期值。達到限制時，系統會觸發介入措施，但程式碼中的特定位置不一定是問題所在。

JavaScript API 會為 ReportingObserver 提供 observe() 方法，可用於觸發所提供的介入回呼。如果您想在報表中附加其他資訊以利偵錯，這項功能就很實用。

// callback that will handle intervention reports
function sendReports(reports) {
  for (let report of reports) {
    // Log the `report` json via your own reporting process
    navigator.sendBeacon('https://report.example/your-endpoint', report);
  }
}

// create the observer with the callback
const observer = new ReportingObserver(
  (reports, observer) => {
    sendReports(reports);
  },
  { buffered: true }
);

// start watching for interventions
observer.observe();

不過，由於介入措施會從 iframe 中移除頁面，因此您應加入安全措施，確保在頁面完全消失前，一定會擷取報表，例如 iframe 中的廣告。為此，您可以將相同的回呼鉤掛至 pagehide 事件。

window.addEventListener('pagehide', (event) => {
  // pull all pending reports from the queue
  let reports = observer.takeRecords();
  sendReports(reports);
});

請注意，為了保護使用者體驗，pagehide 事件會限制在該事件中執行的工作量。舉例來說，如果嘗試傳送含有報表的 fetch() 要求，系統會取消該要求。您應使用 navigator.sendBeacon() 傳送這份報表，但即使如此，這也只是瀏覽器盡力而為，並非保證。

注意： 請勿在此使用 unload 和 beforeunload 事件。這會對多個瀏覽器的網頁快取和效能造成負面影響。

JavaScript 產生的 JSON 結果與 POST 要求傳送的結果類似：

[
  {
    type: 'intervention',
    url: 'https://example.com/url/of/ad.html',
    body: {
      sourceFile: null,
      lineNumber: null,
      columnNumber: null,
      id: 'HeavyAdIntervention',
      message:
        'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
    },
  },
];

診斷干預的原因

廣告內容只是網頁內容，因此請使用 Lighthouse 等工具審核內容的整體成效。產生的稽核結果會提供改善建議。您也可以參考 web.dev/fast 集合。

在更單純的環境中測試廣告可能會更有幫助。您可以使用 https://heavy-ads.glitch.me 上的自訂網址選項，透過現成的廣告標記 iframe 進行測試。您可以使用 Chrome 開發人員工具驗證內容是否已標記為廣告。在「算繪」面板中 (可透過三點 ⋮ 選單，然後依序選取「更多工具」>「算繪」) 選取「醒目顯示廣告框」。如果在頂層視窗或其他未標示為廣告的內容情境中進行測試，系統就不會觸發干預措施，但您仍可手動檢查門檻。

畫面的廣告狀態也會顯示在「Elements」窗格中，在開頭的 <iframe> 標記後方會新增 ad 註解。您也可以在「應用程式」面板的「影格」部分中查看這項資訊，其中標記廣告的框架會包含「廣告狀態」屬性。

網路用量

在 Chrome 開發人員工具中開啟「網路」面板，查看廣告的整體網路活動。請務必勾選「Disable cache」選項，以便在重複載入時取得一致的結果。

開發人員工具中的「Network」面板。

頁面底部的轉移值會顯示整個網頁的轉移金額。建議您使用頂端的篩選器輸入內容，將請求限制為與廣告相關的請求。

如果您找到廣告的初始要求，例如 iframe 的來源，也可以在要求中使用「啟動者」分頁，查看該要求觸發的所有要求。

要求的發起者分頁。

依大小排序整體要求清單，是找出過大資源的好方法。常見的罪魁禍首包括未經最佳化的圖片和影片。

依回應大小排序要求。

此外，依名稱排序也是找出重複要求的好方法。這可能不是單一大型資源觸發的干預措施，而是大量重複的要求逐漸超過限制。

CPU 使用率

開發人員工具中的「效能」面板可協助您診斷 CPU 使用率問題。第一步是開啟「拍攝設定」選單。使用「CPU」下拉式選單，盡可能降低 CPU 速度。相較於高階開發機器，CPU 的介入措施更有可能在效能較低的裝置上觸發。

在「效能」面板中啟用網路和 CPU 節流功能。

接著，按一下「錄影」按鈕，即可開始錄製活動。您可能需要嘗試錄製的時間和長度，因為長時間的追蹤記錄可能需要一段時間才能載入。錄音檔載入後，您可以使用頂端時間軸選取錄音檔的部分內容。請將重點放在圖表中以黃色、紫色或綠色標示的區域，這些區域代表著指令碼、算繪和繪圖。

「Performance」面板中的追蹤記錄摘要。

請探索底部的「由下而上」、「呼叫樹狀圖」和「事件記錄」分頁。依據「Self Time」和「Total Time」排序這些資料欄，有助於找出程式碼中的瓶頸。

在「自下而上」分頁中按「按自用時間排序」。

相關聯的原始檔案也會連結至此，因此您可以前往「Sources」面板查看每個資料列的成本。

「來源」面板中顯示的執行時間。

注意：如果影格已卸載，DevTools 不一定會顯示時間資訊，因此建議您在隔離廣告或停用介入措施的情況下擷取追蹤記錄。

這裡要注意的常見問題包括未經過最佳化的動畫，這些動畫會觸發持續版面配置和繪製作業，或是隱藏在所附加程式庫中的耗用大量資源的作業。

如何回報不正確的介入措施

Chrome 會將資源要求與篩選器清單比對，並將內容標記為廣告。如果非廣告內容已標記，建議您變更該程式碼，避免符合篩選規則。如果您懷疑系統錯誤套用干預措施，可以透過這份範本提出問題。請務必擷取介入報表的示例，並提供可重現問題的範例網址。