廣告在裝置上消耗過多資源,會對使用者體驗造成負面影響,包括明顯的效能降低,以及較不明顯的後果,例如耗盡電池電量或使用過多頻寬配額。這些廣告包括惡意廣告 (例如加密貨幣挖礦程式),以及含有無意義錯誤或效能問題的內容。
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 API 以 intervention
報表類型回報介入事件。您可以使用 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 開發人員工具中開啟「網路」面板,查看廣告的整體網路活動。建議您確保已勾選 [停用快取] 選項,以便在重複載入時取得一致的結果。
頁面底部的轉移值會顯示整個網頁的轉移金額。建議您使用頂端的篩選器輸入內容,將請求限制為與廣告相關的請求。
如果您找到廣告的初始請求 (例如 iframe 的來源),也可以使用要求中的「Initiator」分頁,查看其觸發的所有要求。
按照大小對整體要求清單排序,是找出過大資源的好方法。常見的罪魁禍首包括未經最佳化的圖片和影片。
此外,依名稱排序也是找出重複要求的好方法。這可能不是單一大型資源觸發的干預措施,而是大量重複的要求逐漸超過限制。
CPU 使用率
開發人員工具中的「效能」面板可協助您診斷 CPU 使用率問題。第一步是開啟「拍攝設定」選單。使用「CPU」下拉式選單,盡可能降低 CPU 的速度。與高階開發機器相比,CPU 介入處理在功能較低的裝置上更容易觸發。
接下來,按一下「Record」按鈕即可開始記錄活動。由於較長的追蹤記錄載入可能需要相當長的時間,因此建議您嘗試記錄資料的時間點和時間長度。載入記錄後,您可以使用頂端時間軸選取一段錄製內容。請將重點放在圖表中以實心黃色、紫色或綠色表示的區域,這些區域代表著指令碼、算繪和繪圖。
請探索底部的自下而上、呼叫樹狀圖和事件記錄分頁。依據「Self Time」和「Total Time」排序這些資料欄,有助於找出程式碼中的瓶頸。
相關聯的原始檔案也會連結至此,因此您可以前往「Sources」面板查看每個資料列的成本。
這裡要注意的常見問題包括未經過妥善最佳化的動畫,這些動畫會觸發持續的版面配置和繪製作業,或是隱藏在所附加程式庫中的耗用大量資源的作業。
如何回報不正確的介入措施
Chrome 會將資源要求與篩選器清單比對,並將內容標記為廣告。如果非廣告內容已標記,建議您變更該程式碼,避免符合篩選規則。如果您懷疑系統錯誤執行干預措施,可以透過這份範本提出問題。請確定您已擷取介入措施報告的例子,並擁有可重現該問題的範例網址。