Anzeigen, die auf einem Gerät eine unverhältnismäßige Menge an Ressourcen verbrauchen, wirken sich negativ auf die Nutzererfahrung aus – von offensichtlichen Leistungseinbußen bis hin zu weniger sichtbaren Folgen wie einer Überlastung des Akkus oder der zulässigen Bandbreite. Diese Anzeigen reichen von aktiv schädlichen Inhalten wie Mining von Kryptowährungen bis hin zu echten Inhalten mit unbeabsichtigten Programmfehlern oder Leistungsproblemen.
Chrome legt Beschränkungen 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 Entfernen von Anzeigen ist das Programm für ressourcenintensive Anzeigen.
Kriterien für ressourcenintensive Anzeigen
Eine Anzeige gilt als schwerwiegend, wenn der Nutzer nicht mit ihr interagiert hat, also z. B. nicht darauf getippt oder geklickt hat und eines der folgenden Kriterien erfüllt:
- Verwendet den Hauptthread insgesamt mehr als 60 Sekunden
- Verwendet den Hauptthread mehr als 15 Sekunden in einem 30-Sekunden-Fenster
- Benötigt mehr als 4 MB Netzwerkbandbreite.
Alle Ressourcen, die von nachfolgenden iFrames des Anzeigenframes verwendet werden, werden auf die Limits angerechnet, die für die Intervention in dieser Anzeige gelten. Es ist wichtig zu beachten, dass die Zeitlimits für den Hauptthread nicht mit der verstrichenen Zeit seit dem Laden der Anzeige übereinstimmen. Die Limits bestimmen, wie lange die CPU benötigt, um den Anzeigencode der Anzeige auszuführen.
Intervention testen
Die Maßnahme wurde in Chrome 85 bereitgestellt. Aus Datenschutzgründen werden den Grenzwerten jedoch standardmäßig gewisse Verzerrungen und Abweichungen hinzugefügt.
Wenn Sie chrome://flags/#heavy-ad-privacy-mitigations auf Deaktiviert setzen, werden diese Schutzmaßnahmen entfernt. Das bedeutet, dass die Einschränkungen deterministisch und gemäß den Limits angewendet werden. Dies sollte Debugging und Tests vereinfachen.
Wenn die Aufforderung ausgelöst wird, sollte der Inhalt für eine schwere Anzeige im iFrame durch die Meldung Anzeige entfernt ersetzt werden. Wenn Sie auf den Link Details klicken, sehen Sie folgende Meldung: Diese Werbeanzeige beansprucht zu viele Ressourcen für Ihr Gerät. Daher wurde sie von Chrome entfernt.
Die Maßnahme wurde auf Beispielinhalte auf high-ads.glitch.me angewendet. Sie können diese Testwebsite auch verwenden, um eine beliebige URL zu laden, um schnell eigene Inhalte zu testen.
Bedenken Sie beim Testen, dass es eine Reihe von Gründen gibt, die verhindern können, dass ein Eingriff angewendet wird.
- Wenn Sie dieselbe Anzeige auf derselben Seite aktualisieren, wird diese Kombination von der Aufforderung 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 Hintergrund bleibt. Wenn Sie sie in den Hintergrund stellen (in ein anderes Fenster wechseln), werden die Aufgabenwarteschlangen für die Seite pausiert und somit der CPU-Eingriff nicht ausgelöst.
- Tippen oder klicken Sie während des Tests nicht auf Anzeigeninhalte, da die Aufforderung nicht auf Inhalte angewendet wird, bei denen Nutzerinteraktionen stattfinden.
Was muss ich tun?
Sie präsentieren auf Ihrer Website Anzeigen eines Drittanbieters.
Es sind keine Maßnahmen erforderlich. Es kann aber sein, dass Nutzer auf Ihrer Website Anzeigen sehen, die die entfernten Limits überschreiten.
Sie präsentieren auf Ihrer Website Erstanbieteranzeigen oder Anzeigen für Displayanzeigen von Drittanbietern.
Lesen Sie weiter, um sicherzustellen, dass Sie das notwendige Monitoring über die Reporting API für ressourcenintensive Anzeigeninteraktionen implementieren.
Sie erstellen Anzeigeninhalte oder verwenden ein Tool zum Erstellen von Anzeigeninhalten.
Lesen Sie weiter, damit Sie wissen, wie Sie Ihre Inhalte auf Leistungs- und Ressourcennutzungsprobleme testen können. Beachten Sie auch die Informationen zu den Werbeplattformen Ihrer Wahl. Dort finden Sie möglicherweise zusätzliche technische Hinweise oder Einschränkungen, beispielsweise die Richtlinien für Display-Creatives von Google. Ziehen Sie die Einbindung von konfigurierbaren Grenzwerten in Ihre Authoring-Tools in Betracht, um zu verhindern, dass Anzeigen mit schlechter Leistung veröffentlicht werden.
Was passiert, wenn eine Anzeige entfernt wird?
Ein Eingriff in Chrome wird über die entsprechend benannte Reporting API mit dem Berichtstyp intervention gemeldet. Mit der Reporting API können Sie sich entweder per POST-Anfrage an einen Berichtsendpunkt oder in Ihrem JavaScript über Eingriffe benachrichtigen lassen.
Diese Berichte werden zusammen mit allen Nachfolgerelementen im Stamm-iFrame mit Anzeigen-Tags ausgelöst, d.h. jedem Frame, der von der Intervention entladen wurde. Wenn also eine Anzeige aus einer Drittanbieterquelle stammt, also einem websiteübergreifenden iFrame, muss dieser Drittanbieter, z.B. der Anzeigenanbieter, den Bericht verarbeiten.
Um die Seite für HTTP-Berichte zu konfigurieren, sollte 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 dem ReportingObserver eine observe()-Methode zur Verfügung, mit der bei Aufforderungen ein bereitgestellter Callback ausgelöst werden kann. Dies kann nützlich sein, wenn Sie dem Bericht zusätzliche Informationen hinzufügen möchten, um das Debugging zu unterstützen.
// 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 jedoch buchstäblich aus dem iFrame entfernt wird, sollten Sie eine Sicherheitsmaßnahme hinzufügen, damit der Bericht definitiv erfasst wird, bevor die Seite vollständig gelöscht ist, 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);
});
Denken Sie daran, dass das pagehide-Ereignis zum Schutz der Nutzer den Arbeitsaufwand einschränkt, der darin ausgeführt werden kann. Wenn Sie beispielsweise versuchen, mit den Berichten eine fetch()-Anfrage zu senden, wird die Anfrage abgebrochen.
Sie sollten navigator.sendBeacon() verwenden, um diesen Bericht zu senden. Selbst dann ist dies nur Best-Effort-Versuch des Browsers, keine Garantie.
Die JSON-Datei aus dem JavaScript-Code ähnelt derjenigen, die in 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 Maßnahme diagnostizieren
Anzeigeninhalte sind ganz einfach Webinhalte. Verwenden Sie Tools wie Lighthouse, um die Gesamtleistung Ihres Contents zu prüfen. Die daraus resultierenden Prüfungen enthalten eine Inline-Anleitung für Verbesserungen. Sie können auch in der Sammlung web.dev/fast nachsehen.
Es kann hilfreich sein, die Anzeige in einem isolierten Kontext zu testen. Sie können die Option für benutzerdefinierte URLs unter https://high-ads.glitch.me verwenden, um dies mit einem vorgefertigten iFrame mit Anzeigen-Tags zu testen. Mit den Entwicklertools von Chrome können Sie prüfen, ob Inhalte als Anzeige getaggt wurden. Wählen Sie im Bereich Rendering die Option Frames hervorheben aus. Sie können auf das Dreipunkt-Menü ⋮ und dann auf Weitere Tools > Rendering klicken. Wenn Sie Inhalte im obersten Fenster oder in einem anderen Kontext testen, in dem sie nicht als Anzeige gekennzeichnet sind, wird die Aufforderung nicht ausgelöst. Sie können die Grenzwerte aber trotzdem manuell prüfen.
Der Anzeigenstatus eines Frames ist auch im Bereich Elemente zu sehen. Dort wird nach dem öffnenden <iframe>-Tag die Anmerkung ad hinzugefügt. Dies ist auch im Bereich Anwendung im Bereich Frames zu sehen. In diesem Fall enthalten Frames mit Anzeigen-Tags 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. Die Option Cache deaktivieren muss aktiviert sein, damit Sie auch bei wiederholten Ladevorgängen konsistente Ergebnisse erhalten.
Der übertragene Wert unten auf der Seite zeigt den für die gesamte Seite übertragenen Betrag an. Über die Eingabe Filter oben auf der Seite können Sie die Anfragen auf die jeweilige Anzeige beschränken.
Wenn Sie die ursprüngliche Anfrage für die Anzeige finden, z. B. die Quelle für den iFrame, können Sie in der Anfrage auch den Tab Initiator verwenden, um alle ausgelösten Anfragen zu sehen.
Wenn Sie die Gesamtliste der Anfragen nach Größe sortieren, können Sie übermäßig große Ressourcen gut erkennen. Die häufigsten Ursachen sind Bilder und Videos, die nicht optimiert wurden.
Darüber hinaus kann das Sortieren nach Name eine gute Möglichkeit sein, wiederholte Anfragen zu erkennen. Dabei kann es sich nicht um eine einzelne große Ressource handeln, die den Vorgang auslöst, sondern um eine große Anzahl wiederholter Anfragen, die das Limit schrittweise überschreiten.
CPU-Nutzung
Im Bereich Leistung in den Entwicklertools können Sie Probleme mit der CPU-Nutzung diagnostizieren. Dazu musst du zuerst das Menü „Aufnahmeeinstellungen“ öffnen. Verwenden Sie das Drop-down-Menü CPU, um die CPU so stark wie möglich zu verlangsamen. Die CPU-Eingriffe werden auf Geräten mit geringerer Leistung viel häufiger ausgelöst als auf High-End-Entwicklungsmaschinen.
Klicken Sie dann auf die Schaltfläche Aufzeichnen, um mit der Aufzeichnung der Aktivität zu beginnen. Sie können damit experimentieren, wann und wie lange Sie aufnehmen, da das Laden eines langen Trace recht lange dauern kann. Sobald die Aufzeichnung geladen ist, können Sie über die obere Zeitachse einen Teil der Aufnahme auswählen. Legen Sie den Fokus auf Bereiche in der Grafik in durchgängig gelb, lila oder grün, die Skripterstellung, Rendering und Painting darstellen.
Sehen Sie sich unten die Tabs Bottom-up, Aufrufbaum und Ereignisprotokoll an. Wenn Sie diese Spalten nach Self Time (Selbstzeit) und Total Time (Gesamtzeit) sortieren, können Sie Engpässe im Code leichter identifizieren.
Dort ist auch die zugehörige Quelldatei verlinkt, sodass Sie im Bereich Quellen die Kosten für die einzelnen Zeilen einsehen können.
Gängige Probleme sind hier schlecht optimierte Animationen, die kontinuierliche Layout- und Paint-Vorgänge oder kostspielige Vorgänge auslösen, die in einer enthaltenen Bibliothek verborgen sind.
Falsche Aufforderungen melden
In Chrome werden Inhalte als Anzeige gekennzeichnet, indem Ressourcenanfragen mit einer Filterliste abgeglichen werden. Wenn Tags vorhanden sind, die keine Anzeigen sind, sollten Sie den Code ändern, damit die Filterregeln nicht übereinstimmen. Wenn Sie vermuten, dass eine Maßnahme nicht korrekt angewendet wurde, können Sie über diese Vorlage ein Problem melden. Sie haben ein Beispiel für den Bericht und eine Beispiel-URL, um das Problem zu reproduzieren.