Werbung, die auf einem Gerät unverhältnismäßig viele Ressourcen verbraucht, wirkt sich negativ auf die Nutzerfreundlichkeit aus – von den offensichtlichen Auswirkungen wie einer Leistungsminderung bis hin zu weniger sichtbaren Folgen wie einem schnelleren Akkuverbrauch oder einer Überschreitung der Bandbreitenlimits. Diese Anzeigen reichen von aktiv schädlichen, z. B. Kryptowährungs-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. Das Entladen von Anzeigen erfolgt über die Eingriffsmaßnahme bei ressourcenintensiven Anzeigen.
Kriterien für umfangreiche Werbung
Eine Anzeige gilt als umfangreich, wenn der Nutzer nicht mit ihr 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 30-Sekunden-Fenster länger als 15 Sekunden verwendet.
- Mehr als 4 Megabyte Netzwerkbandbreite
Alle Ressourcen, die von untergeordneten Iframes des Anzeigenframes verwendet werden, werden auf die Limits für Maßnahmen bei dieser Anzeige angerechnet. Die Zeitlimits für den Hauptthread stimmen nicht mit der seit dem Laden der Anzeige verstrichenen Zeit überein. Die Limits beziehen sich darauf, wie lange die CPU für die Ausführung des Anzeigencodes benötigt.
Intervention testen
Die Maßnahme wurde in Chrome 85 eingeführt. Standardmäßig werden den Grenzwerten jedoch etwas Rauschen und Variabilität hinzugefügt, um den Datenschutz der Nutzer zu schützen.
Wenn Sie chrome://flags/#heavy-ad-privacy-mitigations auf Deaktiviert setzen, werden diese Schutzmaßnahmen aufgehoben. Das bedeutet, dass die Einschränkungen deterministisch und ausschließlich gemäß den Limits angewendet werden. Das sollte das Beheben von Fehlern und das Testen erleichtern.
Wenn die Intervention ausgelöst wird, sollte der Inhalt im Iframe für eine große Anzeige durch die Meldung Anzeige entfernt ersetzt werden. Wenn Sie auf den Link Details klicken, wird die folgende Meldung angezeigt: Diese Werbeanzeige erfordert auf Ihrem Gerät zu viele Ressourcen. Darum hat Chrome sie entfernt.
Die Intervention, die auf Beispielinhalte angewendet wird, können Sie unter heavy-ads.glitch.me sehen. Auf dieser Testwebsite können Sie auch eine beliebige URL laden, um 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 Sie dieselbe Anzeige auf derselben Seite neu laden, wird diese Kombination nicht mehr als Intervention eingestuft. Es kann helfen, den Browserverlauf zu löschen und die Seite in einem neuen Tag zu öffnen.
- Achten Sie darauf, dass die Seite im Fokus bleibt. Wenn Sie die Seite im Hintergrund öffnen (zu einem anderen Fenster wechseln), werden die Aufgabenwarteschlangen für die Seite pausiert und die CPU-Eingriffe werden nicht ausgelöst.
- Tippen oder klicken Sie während des Tests nicht auf Anzeigeninhalte. Die Intervention wird nicht auf Inhalte angewendet, die Nutzerinteraktionen auslösen.
Was muss ich tun?
Sie schalten auf Ihrer Website Anzeigen von Drittanbietern.
Es sind keine Maßnahmen erforderlich. Beachten Sie jedoch, dass Nutzer auf Ihrer Website möglicherweise Anzeigen sehen, die die entfernten Limits überschreiten.
Sie schalten selbst Anzeigen auf Ihrer Website oder stellen Anzeigen für die Anzeigenbereitstellung durch Drittanbieter bereit.
Lesen Sie weiter, um zu erfahren, wie Sie die erforderliche Überwachung über die Reporting API für Maßnahmen bei vielen Anzeigen implementieren.
Sie erstellen Anzeigeninhalte oder verwalten ein Tool zum Erstellen von Anzeigeninhalten.
Im Folgenden erfahren Sie, wie Sie Ihre Inhalte auf Probleme mit der Leistung und Ressourcennutzung testen. Lesen Sie sich auch die Richtlinien der von Ihnen verwendeten Werbeplattformen durch. Dort finden Sie möglicherweise zusätzliche technische Hinweise oder Einschränkungen. Weitere Informationen finden Sie in den Richtlinien für Display-Creatives von Google. Sie können konfigurierbare Grenzwerte direkt in Ihre Authoring-Tools einbinden, um zu verhindern, dass schlecht laufende Anzeigen ausgeliefert werden.
Was passiert, wenn eine Anzeige entfernt wird?
Eine Intervention in Chrome wird über die Reporting API mit dem Berichtstyp intervention gemeldet. Sie können die Reporting API verwenden, um über Interventionen benachrichtigt zu werden. Dazu können Sie entweder eine POST-Anfrage an einen Berichts-Endpunkt senden oder die Benachrichtigung in Ihrem JavaScript-Code einbinden.
Diese Berichte werden im übergeordneten iframe mit Anzeigen-Tags und allen untergeordneten Elementen ausgelöst, also in jedem Frame, der durch die Intervention entladen wird. Wenn eine Anzeige also von einer Drittanbieterquelle stammt, also einem websiteübergreifenden Iframe, ist es Sache des Drittanbieters (z.B. des Anzeigenanbieters), die Meldung zu bearbeiten.
Wenn Sie die Seite für HTTP-Berichte konfigurieren möchten, muss die Antwort den Report-To-Header 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 bietet dem ReportingObserver die Methode observe(), mit der ein bereitgestellter Callback bei 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 Seite durch die Intervention jedoch buchstäblich aus dem IFrame entfernt wird, sollten Sie einen Sicherheitsmechanismus hinzufügen, damit der Bericht auf jeden Fall erfasst wird, bevor die Seite vollständig verschwindet. Beispiel: eine Anzeige in einem IFrame. Dazu können Sie denselben Rückruf an das Ereignis pagehide binden.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Zur Verbesserung der Nutzerfreundlichkeit wird durch das Ereignis pagehide die Menge der Arbeit eingeschränkt, die darin ausgeführt werden kann. Wenn Sie beispielsweise versuchen, eine fetch()-Anfrage mit den Berichten zu senden, wird diese Anfrage storniert.
Sie sollten navigator.sendBeacon() verwenden, um diesen Bericht zu senden. Selbst dann ist dies nur ein Best-Effort-Versuch des Browsers und keine Garantie.
Die resultierende JSON-Datei aus dem JavaScript ähnelt der, die mit der POST-Anfrage gesendet wurde:
[
{
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
Werbeinhalte sind Webinhalte. Nutzen Sie daher Tools wie Lighthouse, um die Gesamtleistung Ihrer Inhalte zu prüfen. Die daraus resultierenden Analysen enthalten Inline-Empfehlungen für Verbesserungen. Weitere Informationen finden Sie auch in der Sammlung web.dev/fast.
Es kann hilfreich sein, Ihre Anzeige in einem weniger komplexen Kontext zu testen. Sie können die Option für benutzerdefinierte URLs unter https://heavy-ads.glitch.me verwenden, um dies mit einem vorgefertigten, mit Anzeigen getaggten Iframe zu testen. Mit den Chrome-Entwicklertools kannst du prüfen, ob Inhalte als Werbung getaggt wurden. Wählen Sie im Bereich Rendering (über das Dreipunkt-Menü ⋮ und dann Weitere Tools > Rendering) die Option Anzeigenframes hervorheben aus. Wenn Sie Inhalte im Fenster der obersten Ebene oder in einem anderen Kontext testen, in dem sie nicht als Anzeige getaggt sind, wird die Intervention nicht ausgelöst. Sie können die Grenzwerte aber manuell prüfen.
Der Anzeigenstatus eines Frames wird auch im Bereich Elemente angezeigt, wo nach dem öffnenden <iframe>-Tag eine ad-Anmerkung hinzugefügt wird. Dieser Status ist auch im Bereich Anwendung unter Frames zu sehen. Frames mit Anzeigen-Tags 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. Sie können oben die Eingabe Filter verwenden, um die Anfragen auf die Anfragen zu beschränken, die sich auf die Anzeige beziehen.
Wenn Sie die ursprüngliche Anfrage für die Anzeige finden, z. B. die Quelle für den Iframe, können Sie auf dem Tab Initiator alle Anfragen sehen, die dadurch ausgelöst werden.
Wenn Sie die Gesamtliste der Anfragen nach Größe sortieren, können Sie zu große Ressourcen leichter erkennen. Häufige Ursachen sind nicht optimierte Bilder und Videos.
Außerdem können Sie so wiederholte Anfragen leichter erkennen. Möglicherweise ist es nicht eine einzelne große Ressource, die die Maßnahme auslöst, sondern eine große Anzahl wiederholter Anfragen, die das Limit schrittweise überschreiten.
CPU-Nutzung
Im Bereich Leistung in den DevTools können Sie Probleme mit der CPU-Auslastung diagnostizieren. Öffnen Sie zuerst das Menü Aufnahmeeinstellungen. Verwende das Drop-down-Menü CPU, um die CPU so weit wie möglich zu verlangsamen. Die CPU-Interventionen werden viel häufiger auf Geräten mit geringerer Leistung als auf High-End-Entwicklungscomputern ausgelöst.
Klicken Sie dann auf die Schaltfläche Aufzeichnen, um mit der Aufzeichnung von Aktivitäten zu beginnen. Sie sollten ausprobieren, wann und wie lange Sie aufzeichnen, da das Laden eines langen Protokolls einige Zeit in Anspruch nehmen kann. Sobald die Aufzeichnung geladen ist, können Sie über die Zeitachse oben einen Teil der Aufzeichnung auswählen. Konzentrieren Sie sich auf die Bereiche im Diagramm, die in durchgehend Gelb, Lila oder Grün dargestellt sind und Scripting, Rendering und Painting repräsentieren.
Sehen Sie sich die Tabs Bottom-Up, Anrufbaum und Ereignisprotokoll unten an. Wenn Sie diese Spalten nach Self Time und Total Time sortieren, können Sie Engpässe im Code leichter erkennen.
Die zugehörige Quelldatei ist dort ebenfalls verlinkt. Sie können sie also über den Bereich Quellen aufrufen, um die Kosten für jede Zeile zu prüfen.
Häufige Probleme sind schlecht optimierte Animationen, die ein kontinuierliches Layout und Malen auslösen, oder kostspielige Vorgänge, die in einer enthaltenen Bibliothek versteckt sind.
Falsche Interventionen melden
Chrome kennt Inhalte als Werbung, indem Ressourcenanfragen mit einer Filterliste abgeglichen werden. Wenn Inhalte ohne Werbung getaggt wurden, solltest du diesen Code ändern, damit sie nicht den Filterregeln entsprechen. Wenn Sie der Meinung sind, dass eine Maßnahme fälschlicherweise angewendet wurde, können Sie über dieses Formular ein Problem melden. Bitte machen Sie ein Beispiel für den Bericht zur Intervention und haben Sie eine Beispiel-URL, um das Problem zu reproduzieren.