Anzeigen, die unverhältnismäßig viele Ressourcen auf einem Gerät verbrauchen, wirken sich negativ auf die Nutzerfreundlichkeit aus. Das kann sich in einer offensichtlichen Leistungsminderung oder in weniger sichtbaren Folgen wie einem leeren Akku oder einem verbrauchten Bandbreitenkontingent äußern. Diese Anzeigen reichen von aktiv schädlichen Inhalten wie Cryptocurrency-Minern bis hin zu echten Inhalten mit unbeabsichtigten Fehlern oder Leistungsproblemen.
Chrome legt Limits für die Ressourcen fest, die eine Anzeige verwenden darf, und entlädt die Anzeige, wenn die Limits überschritten werden. Weitere Informationen finden Sie in der Ankündigung im Chromium-Blog. Der Mechanismus zum Entladen von Anzeigen ist die Intervention bei ressourcenintensiven Anzeigen.
Kriterien für umfangreiche Werbung
Eine Anzeige gilt als schwerwiegend, wenn der Nutzer nicht damit interagiert hat (z. B. nicht darauf getippt oder geklickt hat) und sie eines der folgenden Kriterien erfüllt:
- Der Hauptthread wird insgesamt länger als 60 Sekunden verwendet.
- Der Hauptthread wird in einem beliebigen 30-Sekunden-Zeitraum länger als 15 Sekunden verwendet.
- Mehr als 4 MB Netzwerkbandbreite
Alle Ressourcen, die von untergeordneten iFrames des Anzeigen-Frames verwendet werden, werden auf die Grenzwerte für das Eingreifen in diese Anzeige angerechnet. Die Zeitlimits für den Hauptthread sind nicht mit der seit dem Laden der Anzeige verstrichenen Zeit identisch. Die Grenzwerte beziehen sich darauf, wie lange die CPU für die Ausführung des Anzeigencodes benötigt.
Intervention testen
Die Intervention wurde in Chrome 85 eingeführt. Standardmäßig werden den Grenzwerten jedoch einige zufällige Variationen hinzugefügt, um den Datenschutz zu gewährleisten.
Wenn Sie chrome://flags/#heavy-ad-privacy-mitigations auf Deaktiviert setzen, werden diese Schutzmaßnahmen entfernt. Die Einschränkungen werden dann deterministisch und ausschließlich anhand der Limits angewendet. Das sollte die Fehlersuche und das Testen erleichtern.
Wenn die Intervention ausgelöst wird, sollte der Inhalt im iFrame für eine ressourcenintensive Anzeige durch die Meldung Anzeige entfernt ersetzt werden. Wenn Sie dem Link Details folgen, wird die Meldung Diese Werbeanzeige erfordert auf Ihrem Gerät zu viele Ressourcen. Darum hat Chrome sie entfernt. angezeigt.
Unter heavy-ads.glitch.me können Sie sich ansehen, wie die Intervention auf Beispielinhalte angewendet wird. Sie können diese Testwebsite auch verwenden, um eine beliebige URL zu laden und so Ihre eigenen Inhalte schnell zu testen.
Beachten Sie beim Testen, dass es eine Reihe von Gründen gibt, die verhindern können, dass eine Intervention angewendet wird.
- Wenn dieselbe Anzeige auf derselben Seite neu geladen wird, ist diese Kombination von der Maßnahme ausgenommen. Das Löschen des Browserverlaufs und das Öffnen der Seite in einem neuen Tab kann hier helfen.
- Die Seite muss im Fokus bleiben. Wenn Sie die Seite in den Hintergrund verschieben (zu einem anderen Fenster wechseln), werden die Aufgabenwarteschlangen für die Seite pausiert und die CPU-Intervention wird nicht ausgelöst.
- Tippen oder klicken Sie während des Tests nicht auf Anzeigeninhalte. Die Intervention wird nicht auf Inhalte angewendet, die Nutzerinteraktionen erhalten.
Was muss ich tun?
Sie schalten Anzeigen eines Drittanbieters auf Ihrer Website.
Sie müssen nichts unternehmen. Nutzer sehen auf Ihrer Website möglicherweise Anzeigen, die die entfernten Grenzwerte überschreiten.
Sie schalten eigene Anzeigen auf Ihrer Website oder stellen Anzeigen für die Auslieferung durch Dritte bereit.
Lesen Sie weiter, um sicherzustellen, dass Sie die erforderliche Überwachung über die Reporting API für Interventionen bei Heavy Ads implementieren.
Sie erstellen Anzeigeninhalte oder betreiben ein Tool zum Erstellen von Anzeigeninhalten.
Lesen Sie weiter, um zu erfahren, wie Sie Ihre Inhalte auf Leistungs- und Ressourcennutzungsprobleme testen können. Sie sollten sich auch die Richtlinien der von Ihnen ausgewählten Anzeigenplattformen ansehen, da diese möglicherweise zusätzliche technische Hinweise oder Einschränkungen enthalten. Weitere Informationen finden Sie beispielsweise in den Richtlinien für Display-Creatives von Google. Sie können konfigurierbare Grenzwerte direkt in Ihre Authoring-Tools einbauen, um zu verhindern, dass Anzeigen mit schlechter Leistung ausgeliefert werden.
Was passiert, wenn eine Anzeige entfernt wird?
Eine Intervention in Chrome wird über die Reporting API mit dem Berichtstyp intervention gemeldet. Mit der Reporting API können Sie sich über Interventionen benachrichtigen lassen. Dazu senden Sie entweder eine POST-Anfrage an einen Berichts-Endpunkt oder verwenden JavaScript.
Diese Berichte werden für das mit dem Anzeigen-Tag versehene Stamm-iFrame und alle untergeordneten Frames ausgelöst, d.h. für jeden Frame, der durch die Intervention entladen wird. Wenn eine Anzeige also von einer Drittanbieterquelle stammt, z. B. einem websiteübergreifenden iFrame, ist dieser Drittanbieter (z. B. der Anzeigenanbieter) für die Bearbeitung der Meldung verantwortlich.
Damit die Seite für HTTP-Berichte konfiguriert wird, muss die Antwort den Header Report-To enthalten:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
Die ausgelöste POST-Anfrage enthält einen Bericht wie diesen:
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"
}
}]
Die JavaScript API stellt für ReportingObserver eine observe()-Methode bereit, mit der ein bereitgestellter Callback für Interventionen ausgelöst werden kann. Das kann hilfreich sein, wenn Sie dem Bericht zusätzliche Informationen zur Fehlerbehebung hinzufügen möchten.
// 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();
Da die Intervention die Seite jedoch buchstäblich aus dem iFrame entfernt, sollten Sie eine Sicherheitsmaßnahme hinzufügen, um sicherzustellen, dass der Bericht erfasst wird, bevor die Seite vollständig verschwindet, z. B. eine Anzeige in einem iFrame. Dazu können Sie denselben Callback in das pagehide-Ereignis einbinden.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Zur Erinnerung: Das Ereignis pagehide schränkt die Menge an Arbeit ein, die darin ausgeführt werden kann, um die Nutzerfreundlichkeit zu schützen. Wenn Sie beispielsweise versuchen, eine fetch()-Anfrage mit den Berichten zu senden, wird diese Anfrage abgebrochen.
Sie sollten navigator.sendBeacon() verwenden, um diesen Bericht zu senden. Selbst dann ist dies jedoch nur ein Best-Effort-Versuch des Browsers und keine Garantie.
Das resultierende JSON aus dem JavaScript ähnelt dem, das bei der POST-Anfrage gesendet wird:
[
{
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',
},
},
];
Ursache einer Intervention diagnostizieren
Anzeigeninhalte sind nur Webinhalte. Verwenden Sie daher Tools wie Lighthouse, um die Gesamtleistung Ihrer Inhalte zu prüfen. Die resultierenden Audits enthalten Inline-Anleitungen zu Verbesserungen. Weitere Informationen finden Sie auch in der Sammlung web.dev/fast.
Es kann hilfreich sein, Ihre Anzeige in einem isolierteren Kontext zu testen. Sie können die Option für benutzerdefinierte URLs auf https://heavy-ads.glitch.me verwenden, um dies mit einem vorgefertigten, mit Anzeigen getaggten iFrame zu testen. Mit den Chrome-Entwicklertools können Sie prüfen, ob Inhalte als Anzeige gekennzeichnet wurden. Wählen Sie im Bereich Rendering (über das Dreipunkt-Menü ⋮ > Weitere Tools > Rendering) die Option Highlight Ad Frames (Anzeigenrahmen hervorheben) aus. Wenn Sie Inhalte im Fenster der obersten Ebene oder in einem anderen Kontext testen, in dem sie nicht als Anzeige gekennzeichnet sind, wird die Intervention nicht ausgelöst. Sie können die Grenzwerte aber weiterhin manuell prüfen.
Der Anzeigenstatus eines Frames wird auch im Bereich Elemente angezeigt. Dort wird nach dem öffnenden <iframe>-Tag die Anmerkung ad hinzugefügt. Das ist auch im Bereich Anwendung im Abschnitt Frames zu sehen. Frames mit Anzeigen-Tag enthalten das Attribut Anzeigenstatus.
Netzwerknutzung
Rufen Sie in den Chrome-Entwicklertools den Bereich Netzwerk auf, um die gesamte Netzwerkaktivität für die Anzeige zu sehen. Achten Sie darauf, dass die Option Cache deaktivieren aktiviert ist, damit Sie bei wiederholten Ladevorgängen konsistente Ergebnisse erhalten.
Der übertragene Wert unten auf der Seite gibt den für die gesamte Seite übertragenen Betrag an. Verwenden Sie die Filter-Eingabe oben, um die Anfragen auf die Anzeigenanfragen zu beschränken.
Wenn Sie die ursprüngliche Anfrage für die Anzeige finden, z. B. die Quelle für den iFrame, können Sie auch den Tab Initiator in der Anfrage verwenden, um alle Anfragen zu sehen, die dadurch ausgelöst werden.
Wenn Sie die Gesamtliste der Anfragen nach Größe sortieren, können Sie übermäßig große Ressourcen leichter erkennen. Häufige Ursachen sind Bilder und Videos, die nicht optimiert wurden.
Außerdem kann die Sortierung nach Name hilfreich sein, um wiederholte Anfragen zu erkennen. Möglicherweise ist nicht eine einzelne große Ressource der Auslöser für die Maßnahme, sondern eine große Anzahl wiederholter Anfragen, die das Limit nach und nach überschreiten.
CPU-Nutzung
Mit dem Bereich Leistung in DevTools können Sie Probleme mit der CPU-Auslastung diagnostizieren. Öffne zuerst das Menü „Aufnahmeeinstellungen“. Verwenden Sie das Drop-down-Menü CPU, um die CPU so weit wie möglich zu verlangsamen. Die Maßnahmen für die CPU werden auf Geräten mit geringerer Leistung viel häufiger ausgelöst als auf High-End-Entwicklermaschinen.
Klicken Sie dann auf die Schaltfläche Aufzeichnen, um mit der Aufzeichnung der Aktivität zu beginnen. Sie können ausprobieren, wann und wie lange Sie aufzeichnen, da das Laden eines langen Traces eine Weile dauern kann. Sobald die Aufzeichnung geladen ist, können Sie mit der oberen Zeitachse einen Teil der Aufzeichnung auswählen. Konzentrieren Sie sich auf Bereiche im Diagramm in durchgehend Gelb, Lila oder Grün, die für Scripting, Rendering und Painting stehen.
Sehen Sie sich die Tabs Bottom-Up, Call Tree und Event Log unten an. Wenn Sie diese Spalten nach Self Time (Selbstzeit) und Total Time (Gesamtzeit) sortieren, können Sie Engpässe im Code identifizieren.
Die zugehörige Quelldatei ist dort ebenfalls verlinkt. Sie können sie also bis zum Bereich Quellen verfolgen, um die Kosten der einzelnen Zeilen zu prüfen.
Häufige Probleme, nach denen Sie hier suchen sollten, sind schlecht optimierte Animationen, die kontinuierliches Layout und Rendering auslösen, oder kostspielige Vorgänge, die in einer enthaltenen Bibliothek verborgen sind.
Falsche Interventionen melden
Chrome kennzeichnet Inhalte als Anzeige, indem Ressourcenanfragen mit einer Filterliste abgeglichen werden. Wenn nicht werbebezogene Inhalte getaggt wurden, sollten Sie den Code ändern, damit er nicht den Filterregeln entspricht. Wenn Sie vermuten, dass eine Maßnahme fälschlicherweise angewendet wurde, können Sie über diese Vorlage ein Problem melden. Bitte stellen Sie sicher, dass Sie ein Beispiel für den Interventionsbericht und eine Beispiel-URL zum Reproduzieren des Problems haben.