Anzeigen, die eine unverhältnismäßig große Menge an Ressourcen auf einem Gerät verbrauchen, beeinträchtigen die Nutzererfahrung. Sie reichen von offensichtlichen Auswirkungen einer Leistungsverschlechterung bis hin zu weniger sichtbaren Folgen wie einer Belastung des Akkus oder der Überschreitung von Bandbreitenbeschränkungen. Diese Anzeigen reichen von aktiv schädlichen Inhalten wie Kryptomining-Programmen bis hin zu echten Inhalten mit unbeabsichtigten Fehlern oder Leistungsproblemen.
Chrome legt Limits für die Ressourcen fest, die eine Anzeige verwenden kann, und entfernt 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 nachfolgenden iFrames des Anzeigen-Frames verwendet werden, werden auf die Limits für das Eingreifen in diese 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. Dies sollte das Debugging und das Testen vereinfachen.
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 Meldung Diese Werbeanzeige erfordert auf Ihrem Gerät zu viele Ressourcen. Darum hat Chrome sie entfernt angezeigt.
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 von der Maßnahme ausgenommen. Hier kann es hilfreich sein, 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 sicherzustellen, dass Sie die erforderliche Überwachung über die Reporting API für intensive Anzeigeneingriffe implementieren.
Sie erstellen Anzeigeninhalte oder betreiben 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 Anzeigen mit schlechter Leistung übersehen werden.
Was passiert, wenn eine Anzeige entfernt wird?
Ein Eingriff in Chrome wird über die entsprechend benannte 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 also eine Anzeige aus einer Drittanbieterquelle stammt, d. h. einem websiteübergreifenden iFrame, ist der Drittanbieter (z. B. der Anzeigenanbieter) für die Verarbeitung des Berichts verantwortlich.
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"
}
}]
Über die JavaScript API wird dem ReportingObserver eine observe()-Methode bereitgestellt, mit der bei Eingriffen ein Callback 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);
});
Denken Sie daran, dass das Ereignis pagehide aus Gründen der Nutzerfreundlichkeit den Arbeitsumfang begrenzt, der 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 Prüfungen bieten Inline-Leitlinien zu Verbesserungen. Sie können auch die Sammlung web.dev/fast verwenden.
Es kann hilfreich sein, Ihre Anzeige in einem weniger komplexen Kontext zu testen. Sie können die Option für benutzerdefinierte URLs auf https://Heavy-ads.glitch.me verwenden, um dies mit einem vorgefertigten iFrame mit Anzeigen-Tag zu testen. Mit den Chrome-Entwicklertools können Sie 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 auch bei wiederholten Ladevorgängen konsistente Ergebnisse erhalten.
Der übertragene Wert unten auf der Seite gibt den Betrag an, der für die gesamte Seite übertragen wurde. 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 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 Bereiche im Diagramm, die durchgehend gelb, lila oder grün dargestellt sind, die Skripterstellung, Rendering und Malerei darstellen.
Sehen Sie sich unten die Tabs Bottom-up, Call Tree und Ereignisprotokoll 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 zum Bereich Quellen weiterverfolgen, 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 nicht werbliche Inhalte 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.