處理重度廣告幹擾

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

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

重度耗資源廣告條件

如果使用者未與廣告互動 (例如未輕觸或點擊廣告),並且符合下列任一條件,系統就會將廣告視為大量廣告:

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

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

測試介入措施

雖然 Chrome 第 85 版是介入措施,但為保護使用者隱私,我們預設在門檻中加入了某些雜訊和變數。

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

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

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

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

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

您需要做些什麼?

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

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

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

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

由您製作廣告素材,或你有維護廣告內容的工具

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

廣告移除後會有什麼影響?

在 Chrome 中,透過 Reporting APIintervention 報表類型回報介入事件。您可以使用 Reporting API,向報表端點或 JavaScript 內部發出 POST 要求,接收介入措施的通知。

這些報表會在根廣告標記 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"
 }
}]

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() 傳送這份報表,但即使如此,這也只是瀏覽器盡力而為,並非保證。

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 註解。這項資訊也會顯示在「Frames」區段的「Application」面板中,其中含廣告代碼的頁框會包含「Ad Status」屬性。

網路用量

在 Chrome 開發人員工具中開啟「網路」面板,查看廣告的整體網路活動。建議您確保已勾選 [停用快取] 選項,以便在重複載入時取得一致的結果。

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

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

如果您找到廣告的初始請求 (例如 iframe 的來源),也可以使用要求中的「Initiator」分頁,查看其觸發的所有要求。

要求的啟動器分頁。
要求的「發起者」分頁。

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

依回應大小排序要求。
依回應大小排序要求。

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

CPU 使用率

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

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

接下來,按一下「Record」按鈕即可開始記錄活動。由於較長的追蹤記錄載入可能需要相當長的時間,因此建議您嘗試記錄資料的時間點和時間長度。載入記錄後,您可以使用頂端時間軸選取一段錄製內容。請將重點放在圖表中以實心黃色、紫色或綠色表示的區域,這些區域代表著指令碼、算繪和繪圖。

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

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

在「自底向上」分頁中,依「自時間」排序。
在「自下而上」分頁中按「按自助時間排序」。

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

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

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

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

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