Advertenties die onevenredig veel resources van een apparaat verbruiken, hebben een negatieve invloed op de gebruikerservaring. Dit varieert van de voor de hand liggende gevolgen van verminderde prestaties tot minder zichtbare consequenties zoals een lege batterij of een overmatig dataverbruik. Deze advertenties variëren van opzettelijk kwaadaardige advertenties, zoals advertenties van cryptominers, tot legitieme content met onbedoelde bugs of prestatieproblemen.
Chrome stelt limieten aan het gebruik van resources door een advertentie en verwijdert de advertentie als deze limieten worden overschreden. Meer informatie hierover is te vinden op de Chromium-blog . Het mechanisme dat wordt gebruikt om advertenties te verwijderen, heet Heavy Ad Intervention .
Zware advertentiecriteria
Een advertentie wordt als 'zwaar' beschouwd als de gebruiker er geen interactie mee heeft gehad (bijvoorbeeld door er niet op te tikken of te klikken) en als deze aan een van de volgende criteria voldoet:
- Gebruikt de hoofdthread gedurende meer dan 60 seconden in totaal.
- Gebruikt de hoofdthread langer dan 15 seconden binnen een tijdsvenster van 30 seconden.
- Gebruikt meer dan 4 megabyte aan netwerkbandbreedte.
Alle resources die worden gebruikt door de onderliggende iframes van het advertentieframe tellen mee voor de limieten voor het ingrijpen op die advertentie. Het is belangrijk om te weten dat de tijdslimieten voor de hoofdthread niet hetzelfde zijn als de verstreken tijd sinds het laden van de advertentie. De limieten hebben betrekking op de tijd die de CPU nodig heeft om de code van de advertentie uit te voeren.
Het testen van de interventie
De interventie werd geïntroduceerd in Chrome 85, maar standaard wordt er wat ruis en variabiliteit toegevoegd aan de drempelwaarden om de privacy van gebruikers te beschermen.
Door chrome://flags/#heavy-ad-privacy-mitigations op ' Disabled' te zetten, worden deze beschermingen uitgeschakeld. Dit betekent dat de beperkingen deterministisch worden toegepast, puur op basis van de ingestelde limieten. Dit zou het debuggen en testen moeten vereenvoudigen.
Wanneer de interventie wordt geactiveerd, wordt de inhoud van de iframe voor een advertentie met te veel resources vervangen door een bericht 'Advertentie verwijderd' . Als u op de link 'Details' klikt, ziet u een bericht met de uitleg: " Deze advertentie gebruikt te veel resources voor uw apparaat, daarom heeft Chrome deze verwijderd. "
Je kunt de toegepaste interventie bekijken op voorbeeldcontent op heavy-ads.glitch.me. Je kunt deze testsite ook gebruiken om een willekeurige URL te laden als snelle manier om je eigen content te testen.
Houd er bij het testen rekening mee dat er verschillende redenen kunnen zijn waarom een interventie niet kan worden toegepast.
- Het opnieuw laden van dezelfde advertentie op dezelfde pagina zorgt ervoor dat die combinatie niet wordt geblokkeerd. Het wissen van je browsegeschiedenis en het openen van de pagina in een nieuw tabblad kan hierbij helpen.
- Zorg ervoor dat de pagina actief blijft - als u de pagina naar de achtergrond verplaatst (door naar een ander venster te schakelen), worden de taakwachtrijen voor die pagina gepauzeerd, waardoor de CPU niet meer wordt belast.
- Ensure you do not tap or click ad content while testing - the intervention will not be applied to content that receives any user interaction.
Wat moet je doen?
Je toont advertenties van een externe aanbieder op je website.
U hoeft niets te doen, maar houd er rekening mee dat gebruikers op uw site mogelijk advertenties zien die de verwijderde limieten overschrijden.
U toont eigen advertenties op uw site of u levert advertenties aan derden voor weergave.
Continue reading to ensure you implement the necessary monitoring via the Reporting API for Heavy Ad interventions.
Je maakt advertentiecontent of je beheert een tool voor het maken van advertentiecontent.
Continue reading to ensure that you are aware of how to test your content for performance and resource usage issues. You should also refer to the guidance on the ad platforms of your choice as they may provide additional technical advice or restrictions, for example, see the Google Guidelines for display creatives . Consider building configurable thresholds directly into your authoring tools to prevent poor performing ads escaping into the wild.
Wat gebeurt er als een advertentie wordt verwijderd?
Een interventie in Chrome wordt gerapporteerd via de toepasselijk genaamde Reporting API met een intervention . Je kunt de Reporting API gebruiken om op de hoogte te worden gehouden van interventies, hetzij via een POST verzoek naar een rapportage-eindpunt, hetzij vanuit je JavaScript.
Deze rapporten worden geactiveerd voor het hoofd-iframe met advertentietag en al zijn afstammelingen, oftewel elk frame dat door de interventie wordt verwijderd. Dit betekent dat als een advertentie afkomstig is van een externe bron, bijvoorbeeld een cross-site iframe, het aan die externe partij (bijvoorbeeld de advertentieaanbieder) is om het rapport af te handelen.
Om de pagina te configureren voor HTTP-rapporten, moet het antwoord de Report-To header bevatten:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
Het uitgevoerde POST-verzoek zal een rapport bevatten dat er als volgt uitziet:
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"
}
}]
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 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();
Omdat de ingreep de pagina echter letterlijk uit de iframe verwijdert, moet u een vangnet toevoegen om ervoor te zorgen dat het rapport zeker wordt vastgelegd voordat de pagina volledig verdwijnt, bijvoorbeeld een advertentie in een iframe. Hiervoor kunt u dezelfde callback koppelen aan de pagehide gebeurtenis.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Houd er rekening mee dat de pagehide gebeurtenis, om de gebruikerservaring te beschermen, de hoeveelheid werk die erin kan plaatsvinden beperkt. Als u bijvoorbeeld een fetch() verzoek probeert te verzenden met de rapporten, wordt dat verzoek geannuleerd. U moet navigator.sendBeacon() gebruiken om dat rapport te verzenden, maar zelfs dan is dit slechts een poging van de browser en geen garantie.
The resulting JSON from the JavaScript is similar to that sent on the POST request:
[
{
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',
},
},
];
De oorzaak van een interventie vaststellen
Advertentiecontent is gewoon webcontent, dus gebruik tools zoals Lighthouse om de algehele prestaties van je content te controleren. De resultaten van de audits geven direct inzicht in mogelijke verbeteringen. Je kunt ook de web.dev/fast-collectie raadplegen.
Het kan handig zijn om uw advertentie in een meer geïsoleerde context te testen. U kunt de optie voor een aangepaste URL op https://heavy-ads.glitch.me gebruiken om dit te testen met een kant-en-klaar iframe met advertentietags. U kunt Chrome DevTools gebruiken om te controleren of de inhoud als advertentie is gemarkeerd. Selecteer in het paneel 'Rendering' (toegankelijk via het menu met de drie puntjes ⋮ en vervolgens 'Meer tools ' > 'Rendering ') de optie ' Advertentieframes markeren '. Als u inhoud test in het hoofdvenster of een andere context waar deze niet als advertentie is gemarkeerd, wordt de interventie niet geactiveerd, maar u kunt de drempelwaarden nog steeds handmatig controleren.
De advertentiestatus van een frame wordt ook weergegeven in het deelvenster Elementen , waar een ad annotatie wordt toegevoegd na de openings- <iframe> -tag. Dit is ook zichtbaar in het toepassingspaneel onder het gedeelte Frames , waar frames met een advertentie-annotatie een attribuut " Advertentiestatus " bevatten.
Netwerkgebruik
Open het netwerkpaneel in Chrome DevTools om de algehele netwerkactiviteit voor de advertentie te bekijken. Zorg ervoor dat de optie ' Cache uitschakelen ' is aangevinkt voor consistente resultaten bij herhaaldelijk laden.
De overgedragen waarde onderaan de pagina toont het totale bedrag dat voor de hele pagina is overgemaakt. Gebruik eventueel het filter bovenaan om de zoekresultaten te beperken tot alleen de verzoeken die betrekking hebben op de advertentie.
Als je bijvoorbeeld het oorspronkelijke verzoek voor de advertentie vindt, de bron voor de iframe, kun je ook het tabblad 'Initiator' binnen het verzoek gebruiken om alle verzoeken te bekijken die het heeft geactiveerd.
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. De eerste stap is het openen van 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?
Chrome markeert content als advertentie door resourceverzoeken te vergelijken met een filterlijst . Als niet-advertentiecontent is gemarkeerd, overweeg dan om de code aan te passen zodat deze niet langer aan de filterregels voldoet. Als u vermoedt dat een interventie onterecht is toegepast, kunt u een probleem melden via dit sjabloon . Zorg ervoor dat u een voorbeeld van het interventierapport hebt vastgelegd en een voorbeeld-URL hebt om het probleem te reproduceren.