Umgang mit umfangreichen Anzeigeninterventionen

Rowan Merewood

Anzeigen, die eine unverhältnismäßig hohe Menge an Ressourcen auf einem Gerät verbrauchen die Nutzererfahrung beeinträchtigen – von den offensichtlichen Auswirkungen einer nachlassenden Leistung auf weniger sichtbare Folgen wie eine Belastung des Akkus oder eine Verlangsamung von Bandbreite. Zulagen. Diese Anzeigen reichen von aktiv schädlichen Inhalten wie Kryptowährungen bis hin zu echten Inhalten mit unbeabsichtigten Fehlern oder Leistungsproblemen.

Chrome legt Beschränkungen für die Ressourcen fest, die eine Anzeige nutzen darf, und entfernt diese Anzeige, wenn das Limits überschritten werden. Diese Ankündigung findest du im Chromium-Blog zu folgenden Themen: erhalten Sie weitere Informationen. Der Mechanismus, der zum Entladen von Anzeigen verwendet wird, ist Heavy Ad Intervention.

Kriterien für ressourcenintensive Anzeigen

Eine Anzeige gilt als „lastig“, wenn der Nutzer nicht damit interagiert hat (z. B. nicht darauf getippt oder angeklickt hat) und mindestens Kriterien:

• Der Hauptthread wird insgesamt länger als 60 Sekunden verwendet.
• Verwendet den Hauptthread in einem 30-Sekunden-Fenster mehr als 15 Sekunden lang
• Benötigt mehr als 4 Megabyte Netzwerkbandbreite

Alle von untergeordneten iFrames des Anzeigen-Frames verwendeten Ressourcen zählen Beschränkungen für das Eingreifen in diese Anzeige. Beachten Sie, dass der Hauptthread Zeitbeschränkungen entsprechen nicht der verstrichenen Zeit seit dem Laden der Anzeige. Limits wie lange die CPU benötigt, um den Anzeigencode auszuführen.

Intervention testen

Die Maßnahme wurde in Chrome 85 veröffentlicht, aber standardmäßig sind einige Unklarheiten und Die Schwellenwerte wurden um Schwankungen ergänzt, um den Datenschutz für Nutzer zu gewährleisten.

Wenn chrome://flags/#heavy-ad-privacy-mitigations auf Deaktiviert gesetzt ist, wird Folgendes entfernt: d. h., die Einschränkungen werden deterministisch angewendet, unter Einhaltung der Grenzen. Dies sollte das Debugging und das Testen vereinfachen.

Wenn die Aufforderung ausgelöst wird, sollten Sie den Inhalt im iFrame für Eine schwerfällige Anzeige wurde durch die Mitteilung Anzeige entfernt ersetzt. Wenn Sie die in der Details sehen Sie eine Meldung mit dem Hinweis: "In dieser Anzeige werden zu viele Ressourcen für Ihr Gerät, daher wurde es von Chrome entfernt."

Sie können die Maßnahme, die auf Beispielinhalte angewendet wurde, heavy-ads.glitch.me Sie können auch diesen Test verwenden eine beliebige URL laden, um den eigenen Content schnell zu testen.

Beim Testen kann es verschiedene Gründe geben, angewendete Maßnahme.

• Durch erneutes Laden derselben Anzeige auf derselben Seite wird diese Kombination von der der Maßnahme. Löschen Ihres Browserverlaufs und Öffnen der Seite in einem neuen -Tag kann hier hilfreich sein.
• Stellen Sie sicher, dass die Seite im Fokus bleibt - die Seite im Hintergrund (Wechsel zu in einem anderen Fenster) pausiert Aufgabenwarteschlangen für die Seite und löst daher keine die CPU-Intervention.
• Achten Sie darauf, dass Sie beim Testen nicht auf den Anzeigeninhalt tippen oder klicken. werden nicht auf Content angewendet, bei dem eine Nutzerinteraktion erfolgt.

Was muss ich tun?

Sie präsentieren auf Ihrer Website Anzeigen eines Drittanbieters.

Es sind keine Maßnahmen erforderlich. Nutzer sehen möglicherweise Anzeigen, die die Limits überschreiten. wenn Sie sich auf Ihrer Website befinden.

Sie stellen eigene Anzeigen auf Ihrer Website bereit oder Sie stellen Anzeigen für Drittanbieter-Displayanzeigen bereit.

Lesen Sie weiter, um sicherzustellen, dass Sie das erforderliche Monitoring über die Reporting API bei intensiven Werbeeingriffen.

Sie erstellen Anzeigeninhalte oder betreiben ein Tool zum Erstellen von Anzeigeninhalten.

Lesen Sie weiter, damit Sie wissen, wie Sie Ihren Content für Leistung und Ressourcennutzung. Sie sollten auch die Anleitung zur auf den Werbeplattformen Ihrer Wahl, da dort zusätzliche technische Informationen angeboten werden. oder Einschränkungen finden Sie in den Richtlinien für Display-Creatives Erwägen Sie, konfigurierbare Grenzwerte direkt in Ihre Authoring-Tools zu integrieren, um verhindern, dass Anzeigen mit schlechter Leistung ausgeschieden werden.

Was passiert, wenn eine Anzeige entfernt wird?

Ein Eingriff in Chrome wird über den passend benannten Berichterstellungs-API mit dem Berichtstyp intervention. Sie können die Reporting API verwenden, um Benachrichtigungen zu erhalten zu Eingriffen entweder durch eine POST-Anfrage an einen Berichtsendpunkt JavaScript-Code.

Diese Berichte werden im Stamm-iFrame mit Anzeigen-Tagging ausgelöst, zusammen mit allen Nachfolgerelemente, d.h. jeden durch die Intervention entladenen Frame. Wenn also wenn eine Anzeige aus einer Drittanbieterquelle stammt, d.h. einem websiteübergreifenden iFrame, den Drittanbieter (z. B. der Anzeigenanbieter) für die Verarbeitung des Berichts verwenden.

Um die Seite für HTTP-Berichte zu konfigurieren, sollte die Antwort den Parameter Report-To-Header:

Report-To: { "url": "https://example.com/reports", "max_age": 86400 }

Die ausgelöste POST-Anfrage enthält einen Bericht wie den folgenden:

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 dem bei Eingriffen ein Callback ausgelöst werden kann. Dabei kann es sich um ist nützlich, wenn Sie dem Bericht zusätzliche Informationen hinzufügen möchten, Debugging.

// 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 Maßnahme jedoch dazu führt, dass die Seite iFrames verwenden, sollten Sie eine Sicherheitsmaßnahme hinzufügen, damit der Bericht definitiv bevor die Seite vollständig verschwunden ist. Beispiel: Eine Anzeige innerhalb 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);
});

Aus Gründen der Nutzerfreundlichkeit wird durch das Ereignis pagehide wie viel Arbeit darin erledigt werden kann. Wenn Sie z. B. versuchen, fetch() Anfrage mit den Berichten führt dazu, dass diese Anfrage storniert wird. Sie sollten navigator.sendBeacon() verwenden, um diesen Bericht zu senden. ist der beste Einsatz des Browsers und stellt keine Garantie dar.

Der resultierende JSON-Code aus dem JavaScript-Code ähnelt dem, der im POST gesendet wurde. Anfrage:

[
  {
    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 nur Webinhalte. Nutzen Sie daher Tools wie Lighthouse, um die Gesamtleistung Inhalte. Die daraus resultierenden Prüfungen bieten Inline-Leitlinien zu Verbesserungen. Sie können finden Sie auch in der Sammlung web.dev/fast.

Unter Umständen ist es sinnvoll, Ihre Anzeige in einem isolierteren Kontext zu testen. Sie können der benutzerdefinierten URL unter https://Heavy-ads.glitch.me testen, um dies mit einem vorgefertigten iFrames mit Anzeigen-Tags verwenden. Mit den Chrome-Entwicklertools kannst du Inhalte prüfen wurde als Anzeige gekennzeichnet. Gehen Sie im Bereich Rendering über die drei Punkt ⋮ und dann auf Weitere Tools > Rendering) Wählen Sie "Anzeige hervorheben" aus. Rahmen. Wenn Sie den Inhalt im obersten Fenster oder in einem anderen Kontext testen, nicht als Anzeige gekennzeichnet ist, wird die Aufforderung nicht ausgelöst. Sie können die Schwellenwerte manuell überprüfen.

Der Anzeigenstatus eines Frames wird auch im Bereich Elements angezeigt, in dem ein ad wird nach dem öffnenden <iframe>-Tag eingefügt. Dies ist auch sichtbar in im Bereich Frames im Bereich Anwendung, wo Frames mit Anzeigen-Tags enthält Ad Status .

Netzwerknutzung

Rufen Sie in den Chrome-Entwicklertools den Bereich Netzwerk auf, um das gesamte Netzwerk zu sehen. Aktivität für die Anzeige. Achte darauf, dass die Option Cache deaktivieren Option ist um bei wiederholten Ladevorgängen konsistente Ergebnisse zu erhalten.

</ph> <ph type="x-smartling-placeholder">

Der übertragene Wert unten auf der Seite gibt den Betrag an. für die gesamte Seite übertragen. Erwägen Sie die Verwendung des Filter damit die Anfragen nur auf diejenigen beschränkt werden, die sich auf die Anzeige beziehen.

Wenn Sie die ursprüngliche Anfrage für die Anzeige finden, z. B. die Quelle der iFrames verwenden, können Sie innerhalb der Anfrage auf dem Tab Initiator alle zugehörigen die Anfragen, die es auslöst.

</ph> <ph type="x-smartling-placeholder">

Das Sortieren der Gesamtliste der Anfragen nach Größe ist eine gute Möglichkeit, zu große Anfragen zu erkennen, Ressourcen. Häufig liegt dies an Bildern und Videos, die nicht optimiert werden.

</ph> <ph type="x-smartling-placeholder">

Außerdem kann das Sortieren nach Name eine gute Möglichkeit sein, wiederholte Anfragen zu erkennen. Es ist möglicherweise keine einzelne große Ressource, die die Maßnahme auslöst, 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. Die besteht der erste Schritt darin, Menü „Aufnahmeeinstellungen“: Verwenden Sie das Drop-down-Menü CPU, um die CPU so stark wie möglich zu verlangsamen. Die Eingriffe in Bezug auf die CPU werden auf Geräten mit geringerer Leistung weitaus häufiger ausgelöst als High-End-Entwicklungsmaschinen.

</ph> <ph type="x-smartling-placeholder">

Klicken Sie dann auf die Schaltfläche Aufzeichnen, um mit der Aufzeichnung zu beginnen. Vielleicht möchten Sie wie lange Sie aufnehmen sollten. Eine lange Spur kann ziemlich lange dauern. das Laden etwas dauert. Sobald die Aufzeichnung geladen ist, können Sie auf der oberen Zeitachse Wählen Sie einen Teil der Aufzeichnung aus. Konzentrieren Sie sich auf Bereiche im Diagramm, die durchgehend gelb, lila oder grün dargestellt sind, Scripting, Rendering und Painting.

</ph> <ph type="x-smartling-placeholder">

Entdecken Sie die Bottom-up Aufrufstruktur, und Ereignisprotokoll . Spalten nach Selbstzeit und Gesamtzeit sortieren können Sie Engpässe im Code identifizieren.

</ph> <ph type="x-smartling-placeholder">

Die zugehörige Quelldatei ist ebenfalls dort verlinkt, sodass Sie im Bereich Quellen die Kosten der einzelnen Zeilen.

</ph> <ph type="x-smartling-placeholder">

Häufige Probleme, auf die Sie achten sollten, schlecht optimierte Animationen die kontinuierliche Layout- und Paint-Erstellung oder kostspielige Vorgänge auslösen, die in einer enthaltenen Bibliothek verborgen sind.

Falsche Maßnahmen melden

Google Chrome Inhalte werden als Anzeige getaggt, indem Ressourcenanfragen mit einer Filterliste abgeglichen werden. Wenn nicht anzeigenbezogene Inhalte getaggt wurden, sollten Sie diesen Code ändern, um Übereinstimmungen zu vermeiden. die Filterregeln. Wenn Sie vermuten, dass eine Maßnahme fälschlicherweise angewendet haben, können Sie über diese Vorlage ein Problem melden. Bitte Sie müssen ein Beispiel für den Interventionsbericht erfassen. URL, unter der das Problem reproduziert werden kann.