Gepubliceerd: 22 september 2025, Laatst bijgewerkt: 7 januari 2026
Voor gebruikers is er weinig zo frustrerend als een webpagina die plotseling tergend traag wordt, de batterij leegtrekt of het maandelijkse dataverbruik opslokt. Soms is de boosdoener niet de inhoud waarvoor ze gekomen zijn, maar een advertentie die op de achtergrond draait.
Om de gebruikerservaring te beschermen, legt Chrome limieten op aan het resourcegebruik van een advertentie. Wanneer een advertentie deze limieten overschrijdt – en dus te zwaar wordt – verwijdert Chrome de advertentie om de resources van het apparaat vrij te maken.
Deze documentatie legt uit hoe deze interventie werkt, welke specifieke drempelwaarden erbij betrokken zijn en welke best practices u kunt gebruiken om ervoor te zorgen dat advertenties soepel presteren.
Wat is een zware reclame-interventie?
De functie 'zware advertentie-interventie' is een mechanisme in Chrome dat het resourcegebruik van advertentieframes monitort. Als een advertentie onevenredig veel bandbreedte of CPU-kracht verbruikt, zal Chrome dat specifieke advertentieframe sluiten.
In plaats van de advertentie ziet de gebruiker een grijs vak met de melding 'Advertentie verwijderd', meestal vergezeld van een link naar 'Details' waarin wordt uitgelegd dat de advertentie te veel systeembronnen verbruikte.
Wanneer wordt een advertentie als 'zwaar' beschouwd?
Chrome bepaalt of een advertentie 'zwaar' is op basis van drie specifieke drempelwaarden. Als de gebruiker niet met een advertentie heeft gecommuniceerd en deze aan een van de volgende criteria voldoet, wordt de advertentie verwijderd:
- Netwerkgebruik: De advertentie verbruikt meer dan vier megabyte aan netwerkbandbreedte.
- Maximaal CPU-gebruik: De advertentie gebruikt de hoofdthread gedurende meer dan 15 seconden binnen een tijdsvenster van 30 seconden.
- Totaal CPU-gebruik: De advertentie gebruikt de hoofdthread gedurende meer dan 60 seconden. Alle resources die worden gebruikt door alle onderliggende iframes van het advertentieframe tellen mee voor de limieten voor de interventie op die advertentie.
Wat zijn enkele veelvoorkomende aanleidingen voor deze interventie?
Bepaalde soorten advertentiegedrag leiden eerder tot dergelijke interventies dan andere. Veelvoorkomende boosdoeners zijn onder andere:
- Niet-gecomprimeerde media: Extreem grote, slecht gecomprimeerde afbeeldingen worden geladen.
- Intensief JavaScript: Het uitvoeren van uitgebreide bewerkingen, zoals het decoderen van videobestanden met behulp van JavaScript.
- Zware berekeningen: Complexe berekeningen uitvoeren op de achtergrond.
- Videocontent zonder gebaren: Het laden van grote videobestanden voordat een gebruiker interactie heeft met een advertentie.
Wat gebeurt er als een advertentie wordt verwijderd?
Wanneer Chrome detecteert dat een advertentie de drempelwaarden voor zware advertenties overschrijdt, neemt het direct maatregelen om de systeembronnen van de gebruiker te beschermen.
De gebruikerservaring
Vanuit het perspectief van de gebruiker wordt de advertentie direct verwijderd. In plaats daarvan toont Chrome een grijs vak met de melding: 'Advertentie verwijderd' . Als de gebruiker op ' Details' in het vak klikt, krijgt hij of zij een specifieke uitleg te zien.
De ontwikkelaarservaring
Chrome genereert ook een interventierapport met de Reporting API, zodat u precies weet wat er is gebeurd. Voorheen werden deze rapporten alleen naar het advertentieframe zelf en de frames die daarvan afstammen verzonden. Uitgevers hadden echter vaak geen manier om te weten dat advertenties op hun eigen pagina's werden verwijderd. Om dit probleem op te lossen, heeft Chrome het rapportagemechanisme uitgebreid. Interventierapporten worden nu niet alleen naar het advertentieframe zelf, maar ook naar het embeddingframe (het bovenliggende frame van het hoofdadvertentieframe) verzonden. Rapporten die naar het embeddingframe worden verzonden, bevatten de ID van het onderliggende frame en de URL van het advertentieframe.
Om de pagina te configureren voor HTTP-rapporten, moet het antwoord de Report-To header bevatten:
Reporting-Endpoints: default="https://example.com/reports"
Het verzonden bericht zal een rapport bevatten zoals dit:
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?utm_source=devtools"
}
}]
Het ingesloten frame ontvangt een soortgelijk rapport, gericht aan de URL van het ingesloten frame, maar het bericht bevat daarnaast de ID van het onderliggende frame en de specifieke URL van dat frame:
...
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools (id=123;url=http://example2.com/pre-redirect-ad-url.html)"
...
De JavaScript API biedt de ReportingObserver een observe() methode die kan worden gebruikt om een opgegeven callback te activeren bij interventies. Dit kan handig zijn als u extra informatie aan het rapport wilt toevoegen om het debuggen te vergemakkelijken.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json using 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();
Aangezien de interventie de iframe-pagina sluit (bijvoorbeeld een advertentie), gebruik dan de pagehide gebeurtenis om ervoor te zorgen dat de rapportagecallback het interventierapport vastlegt voordat de pagina verdwijnt.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
De JSON die door de JavaScript-code wordt gegenereerd, is vergelijkbaar met de JSON die bij het POST verzoek is verzonden:
[
{
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',
},
},
];
Beste werkwijzen voor ontwikkelaars
Om te voorkomen dat uw advertenties onder de grote advertentiebanner vallen, kunt u de volgende best practices overwegen:
- Vereis gebruikersinteractie voor zware content: De interventiecriteria gelden voor advertenties waarmee de gebruiker nog niet heeft geïnteracteerd. Als een gebruiker op uw advertentie klikt of tikt, zijn de resourcebeperkingen niet langer van toepassing. Wacht bij video- of rich media-ervaringen op een gebruikersactie (zoals 'klikken om af te spelen') voordat zware bestanden worden geladen.
- Optimaliseer afbeeldingen en video's: Zorg ervoor dat afbeeldingen gecomprimeerd zijn en video's geoptimaliseerd voor het web. Vermijd het automatisch laden van grote videobestanden; gebruik in plaats daarvan lichte placeholders totdat de gebruiker de video bekijkt.
- Controleer het CPU-gebruik: Complexe animaties of JavaScript-bewerkingen die continu lay-out- en tekenprocessen activeren, kunnen het CPU-gebruik flink verhogen. Gebruik tools om knelpunten in uw code te identificeren die de hoofdthread gedurende lange perioden bezig kunnen houden.
- Houd de onderliggende frames in de gaten: Onthoud dat het resourcegebruik alles binnen het iframe van uw advertentie omvat. Als uw advertentie trackingpixels of subframes van derden laadt, telt hun resourcegebruik mee voor uw limiet.
- Niet-advertentiecontent isoleren: Scheid frames met niet-advertentiecontent in verschillende domeinen of herkenbare patronen die waarschijnlijk niet als advertentiedomeinen worden beschouwd door het beleid van de filterlijstaanbieder .
Hoe kun je de oorzaak van een interventie achterhalen en diagnosticeren?
Om problemen met overmatige advertentie-interventies effectief op te lossen, moet u eerst begrijpen hoe Chrome content als advertentie identificeert en vervolgens de ingebouwde ontwikkelaarstools gebruiken om de specifieke triggers te controleren die tot de verwijdering hebben geleid.
Hoe detecteert Chrome de aanwezigheid van een advertentie?
Chrome markeert content als advertentie door resourceaanvragen te vergelijken met een filterlijst . Deze detectielogica is van toepassing op content binnen iframes. Het hoofdframe van de pagina wordt nooit als advertentiegerelateerd beschouwd, zelfs niet als het advertentiescripts bevat. Houd er rekening mee dat een iframe dat wordt geladen vanuit een resource die overeenkomt met de filterlijst, als advertentie wordt beschouwd, zelfs als er ook andere, niet-advertentiecontent vanuit dat frame wordt geladen. Een voorbeeld hiervan is een videospeler die wordt geladen in een iframe dat als advertentie is gemarkeerd; deze kan dan ook niet-advertentiecontent laden.
Hoe kan ik de detectie van advertenties verifiëren?
Als ontwikkelaar kun je met behulp van Chrome DevTools visueel controleren of Chrome je content correct als advertentie heeft herkend.
- Advertentiekaders markeren: Selecteer in het paneel Weergave de optie Advertentiekaders markeren . Hierdoor worden gedetecteerde advertentiekaders rood op het scherm weergegeven.
- Elementannotatie: In het paneel Elementen wordt bij gedetecteerde advertentie-iframes een advertentieannotatie weergegeven naast de openings-tag
<iframe>. - Netwerkactiviteit: Filter in het paneel Netwerk verzoeken op basis van de booleaanse waarde
Is ad-related'. - Advertentiestatus: In het toepassingspaneel, onder het gedeelte 'Frames' , bevatten frames met advertentietags een attribuut
Ad Status.
Hoe stel je de oorzaak van een interventie vast?
Chrome biedt tools om de kwaliteit en prestaties van webpagina's te controleren en te verbeteren. Gebruik Lighthouse in Chrome DevTools om rapporten te krijgen over de prestaties van uw pagina. U kunt ook de web.dev/fast-collectie raadplegen voor meer informatie over Web Vitals .
Netwerkgebruik
Open het netwerkpaneel in Chrome DevTools om de algehele netwerkactiviteit voor de advertentie te bekijken. Schakel de optie 'Cache uitschakelen' in voor consistente resultaten bij herhaaldelijk laden.
De overgedragen waarde onderaan de pagina toont het totale bedrag dat voor de hele pagina is overgemaakt. Om de verzoeken te beperken tot alleen de verzoeken die betrekking hebben op de advertentie, gebruikt u het filter bovenaan de pagina.
Als je bijvoorbeeld het oorspronkelijke verzoek voor de advertentie vindt, de bron voor de iframe, gebruik dan het tabblad 'Initiator' binnen het verzoek om alle verzoeken te bekijken die daaruit voortvloeien.
Het sorteren van de volledige lijst met verzoeken op grootte is een goede manier om te grote bestanden te identificeren. Veelvoorkomende boosdoeners zijn afbeeldingen en video's die niet geoptimaliseerd zijn.
Daarnaast kan sorteren op naam een goede manier zijn om herhaalde verzoeken op te sporen. Het hoeft niet per se één grote bron te zijn die de interventie veroorzaakt, maar een groot aantal herhaalde verzoeken die de limiet geleidelijk overschrijden.
CPU-gebruik
Het prestatiepaneel in DevTools helpt bij het diagnosticeren van problemen met het CPU-gebruik. Open het menu 'Opname-instellingen' . Gebruik het vervolgkeuzemenu 'CPU' om de CPU zoveel mogelijk te vertragen. De interventies voor de CPU worden veel vaker geactiveerd op minder krachtige apparaten dan op krachtige ontwikkelmachines.
Klik vervolgens op de knop 'Opnemen' om de opname te starten. Experimenteer gerust met de duur en het tijdstip van de opname, aangezien het laden van een lange opname enige tijd kan duren. Zodra de opname is geladen, kunt u de tijdlijn bovenaan gebruiken om een gedeelte van de opname te selecteren . Concentreer u op de gebieden in de grafiek die geel, paars of groen zijn gekleurd en die scripting, rendering en schilderen vertegenwoordigen.
Verken de tabbladen Bottom-Up , Call Tree en Event Log onderaan. Door deze kolommen te sorteren op Self Time en Total Time kunt u knelpunten in de code opsporen.
Het bijbehorende bronbestand is daar ook te vinden, zodat u via het link naar het paneel 'Bronnen ' de kosten van elke regel kunt bekijken.
Veelvoorkomende problemen om op te letten zijn slecht geoptimaliseerde animaties die continu lay-out- en tekenprocessen activeren, of kostbare bewerkingen die verborgen zitten in een meegeleverde bibliotheek.
Hoe meld ik onjuiste interventies?
Als niet-advertentiecontent als zodanig is getagd, overweeg dan de code aan te passen om te voorkomen dat deze aan de filterregels voldoet, of neem rechtstreeks contact op met de beheerders van EasyList om de filterregels te wijzigen. Houd er rekening mee dat de interventie met zware advertenties geen invloed heeft op frames met gebruikersgebaren, dus video kan worden uitgesloten door te vereisen dat er op een afspeelknop wordt geklikt voordat de content wordt geladen. Als EasyList niet overeenkomt met uw content en Chrome de content om de een of andere reden ten onrechte als advertentiegerelateerd heeft geclassificeerd, kunt u een probleem melden bij Chrome met behulp van dit sjabloon . Voeg bij uw melding een voorbeeld van het interventierapport en een voorbeeld-URL toe om het probleem te reproduceren.