Les annonces qui consomment une quantité disproportionnée de ressources sur un appareil ont un impact négatif sur l'expérience utilisateur. Cela se traduit par une dégradation des performances, mais aussi par des conséquences moins visibles, comme une décharge de la batterie ou une consommation excessive de la bande passante. Ces annonces vont des annonces activement malveillantes, telles que les mineurs de cryptomonnaie, aux contenus authentiques présentant des bugs ou des problèmes de performances involontaires.
Chrome définit des limites pour les ressources qu'une annonce peut utiliser et décharge cette annonce si les limites sont dépassées. Pour en savoir plus, consultez l'annonce sur le blog Chromium. Le mécanisme utilisé pour décharger les annonces est l'intervention sur les annonces lourdes.
Critères pour les annonces gourmandes en ressources
Une annonce est considérée comme lourde si l'utilisateur n'a pas interagi avec elle (par exemple, s'il n'a pas appuyé dessus ni cliqué dessus) et si elle répond à l'un des critères suivants :
- Utilise le thread principal pendant plus de 60 secondes au total
- Utilise le thread principal pendant plus de 15 secondes dans une fenêtre de 30 secondes
- Utilise plus de 4 mégaoctets de bande passante réseau
Toutes les ressources utilisées par les iframes descendants du frame d'annonce sont comptabilisées dans les limites d'intervention sur cette annonce. Il est important de noter que les limites de temps du thread principal ne sont pas les mêmes que le temps écoulé depuis le chargement de l'annonce. Les limites concernent le temps nécessaire au processeur pour exécuter le code de l'annonce.
Tester l'intervention
L'intervention a été déployée dans Chrome 85, mais par défaut, du bruit et de la variabilité sont ajoutés aux seuils pour protéger la confidentialité des utilisateurs.
Si vous définissez chrome://flags/#heavy-ad-privacy-mitigations sur Désactivé, ces protections sont supprimées. Les restrictions sont alors appliquées de manière déterministe, uniquement en fonction des limites. Cela devrait faciliter le débogage et les tests.
Lorsque l'intervention est déclenchée, le contenu de l'iFrame pour une annonce lourde doit être remplacé par le message Annonce supprimée. Si vous cliquez sur le lien Détails inclus, le message suivant s'affiche : Cette annonce utilise trop de ressources pour votre appareil. Chrome l'a donc supprimée.
Vous pouvez voir l'intervention appliquée à un exemple de contenu sur heavy-ads.glitch.me. Vous pouvez également utiliser ce site de test pour charger une URL arbitraire et tester rapidement votre propre contenu.
Lors des tests, sachez que plusieurs raisons peuvent empêcher l'application d'une intervention.
- Si la même annonce est rechargée sur la même page, cette combinaison sera exemptée de l'intervention. Pour résoudre ce problème, vous pouvez effacer votre historique de navigation et ouvrir la page dans un nouvel onglet.
- Assurez-vous que la page reste au premier plan. Si vous la mettez en arrière-plan (en passant à une autre fenêtre), les files d'attente de tâches de la page seront mises en pause et l'intervention du processeur ne sera donc pas déclenchée.
- Assurez-vous de ne pas appuyer sur le contenu de l'annonce ni de cliquer dessus pendant les tests. L'intervention ne sera pas appliquée au contenu qui reçoit une interaction utilisateur.
Que devez-vous faire ?
Vous diffusez des annonces provenant d'un fournisseur tiers sur votre site.
Aucune action n'est requise. Sachez simplement que les utilisateurs peuvent voir des annonces qui dépassent les limites supprimées sur votre site.
Vous diffusez des annonces first party sur votre site ou vous fournissez des annonces display tierces.
Poursuivez votre lecture pour vous assurer d'implémenter la surveillance nécessaire via l'API Reporting pour les interventions sur les annonces lourdes.
Vous créez du contenu publicitaire ou vous gérez un outil de création de contenu publicitaire
Poursuivez votre lecture pour savoir comment tester les performances et l'utilisation des ressources de votre contenu. Vous devez également consulter les consignes des plates-formes publicitaires de votre choix, car elles peuvent fournir des conseils techniques ou des restrictions supplémentaires. Par exemple, consultez les Consignes de Google concernant les créations display. Envisagez d'intégrer des seuils configurables directement dans vos outils de création pour éviter que des annonces peu performantes ne soient diffusées.
Que se passe-t-il lorsqu'une annonce est supprimée ?
Une intervention dans Chrome est signalée via l'API Reporting, dont le nom est approprié, avec un type de rapport intervention. Vous pouvez utiliser l'API Reporting pour être averti des interventions, soit par une requête POST à un point de terminaison de reporting, soit dans votre code JavaScript.
Ces rapports sont déclenchés sur l'iframe racine taguée pour les annonces, ainsi que sur tous ses descendants, c'est-à-dire chaque frame déchargé par l'intervention. Cela signifie que si une annonce provient d'une source tierce, c'est-à-dire d'un iFrame multisite, il incombe à ce tiers (par exemple, le fournisseur d'annonces) de traiter le signalement.
Pour configurer la page pour les rapports HTTP, la réponse doit inclure l'en-tête Report-To :
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
La requête POST déclenchée inclura un rapport comme celui-ci :
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"
}
}]
L'API JavaScript fournit à ReportingObserver une méthode observe() qui peut être utilisée pour déclencher un rappel fourni sur les interventions. Cela peut être utile si vous souhaitez joindre des informations supplémentaires au rapport pour faciliter le débogage.
// 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();
Toutefois, comme l'intervention supprimera littéralement la page de l'iframe, vous devez ajouter un dispositif de sécurité pour vous assurer que le rapport est bien capturé avant que la page ne disparaisse complètement (par exemple, une annonce dans un iframe). Pour ce faire, vous pouvez associer le même rappel à l'événement pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
N'oubliez pas que, pour protéger l'expérience utilisateur, l'événement pagehide limite la quantité de travail qui peut y être effectuée. Par exemple, si vous essayez d'envoyer une requête fetch() avec les rapports, elle sera annulée.
Vous devez utiliser navigator.sendBeacon() pour envoyer ce rapport. Même dans ce cas, le navigateur ne fait que son possible, sans garantie.
Le JSON résultant du JavaScript est semblable à celui envoyé dans la requête POST :
[
{
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',
},
},
];
Diagnostiquer la cause d'une intervention
Le contenu des annonces n'est autre que du contenu Web. Utilisez donc des outils tels que Lighthouse pour auditer les performances globales de votre contenu. Les audits qui en résultent fournissent des conseils intégrés pour améliorer les performances. Vous pouvez également consulter la collection web.dev/fast.
Il peut être utile de tester votre annonce dans un contexte plus isolé. Vous pouvez utiliser l'option d'URL personnalisée sur https://heavy-ads.glitch.me pour tester cette fonctionnalité avec un iFrame prêt à l'emploi et tagué pour les annonces. Vous pouvez utiliser les outils pour les développeurs Chrome afin de vérifier que le contenu a été tagué comme annonce. Dans le panneau Rendu (accessible via le menu à trois points ⋮, puis Plus d'outils > Rendu), sélectionnez Mettre en surbrillance les cadres d'annonces. Si vous testez du contenu dans la fenêtre de premier niveau ou dans un autre contexte où il n'est pas tagué comme annonce, l'intervention ne sera pas déclenchée, mais vous pourrez toujours vérifier manuellement les seuils.
L'état des annonces d'un frame est également affiché dans le volet Éléments, où une annotation ad
est ajoutée après la balise d'ouverture <iframe>. Cette information est également visible dans le panneau Application, sous la section Frames, où les frames tagués comme des annonces incluent un attribut Ad Status (État de l'annonce).
Utilisation du réseau
Affichez le panneau Réseau dans les outils pour les développeurs Chrome pour voir l'activité réseau globale de l'annonce. Assurez-vous que l'option Désactiver le cache est cochée pour obtenir des résultats cohérents lors de chargements répétés.
La valeur transférée en bas de la page indique le montant transféré pour l'ensemble de la page. Pensez à utiliser le champ de saisie Filtre en haut de la page pour limiter les requêtes à celles liées à l'annonce.
Si vous trouvez la requête initiale pour l'annonce (par exemple, la source de l'iFrame), vous pouvez également utiliser l'onglet Initiateur de la requête pour afficher toutes les requêtes qu'elle déclenche.
Trier la liste globale des requêtes par taille est un bon moyen de repérer les ressources trop volumineuses. Les images et les vidéos qui n'ont pas été optimisées sont souvent en cause.
De plus, le tri par nom peut être un bon moyen de repérer les demandes répétées. Il peut s'agir d'une ressource volumineuse unique qui déclenche l'intervention, mais aussi d'un grand nombre de requêtes répétées qui dépassent progressivement la limite.
Utilisation du processeur
Le panneau Performances des outils de développement vous aidera à diagnostiquer les problèmes d'utilisation du processeur. La première étape consiste à ouvrir le menu des paramètres de capture. Utilisez le menu déroulant CPU pour ralentir le processeur autant que possible. Les interventions pour le processeur sont beaucoup plus susceptibles de se déclencher sur les appareils à faible puissance que sur les machines de développement haut de gamme.
Cliquez ensuite sur le bouton Enregistrer pour commencer à enregistrer l'activité. Vous pouvez tester le moment et la durée de l'enregistrement, car une longue trace peut mettre du temps à se charger. Une fois l'enregistrement chargé, vous pouvez utiliser la timeline en haut de l'écran pour sélectionner une partie de l'enregistrement. Concentrez-vous sur les zones du graphique en jaune, violet ou vert uni, qui représentent le scripting, le rendu et la peinture.
Explorez les onglets De bas en haut, Arborescence des appels et Journal des événements en bas de l'écran. Trier ces colonnes par Temps propre et Temps total peut vous aider à identifier les goulots d'étranglement dans le code.
Le fichier source associé est également disponible. Vous pouvez ainsi le suivre jusqu'au panneau Sources pour examiner le coût de chaque ligne.
Les problèmes courants à rechercher ici sont les animations mal optimisées qui déclenchent une mise en page et une peinture continues, ou les opérations coûteuses qui sont masquées dans une bibliothèque incluse.
Signaler des interventions incorrectes
Chrome identifie le contenu comme une annonce en comparant les demandes de ressources à une liste de filtres. Si du contenu non publicitaire a été tagué, envisagez de modifier ce code pour éviter de correspondre aux règles de filtrage. Si vous pensez qu'une intervention a été appliquée à tort, vous pouvez signaler le problème à l'aide de ce modèle. Veuillez vous assurer d'avoir capturé un exemple de rapport d'intervention et d'avoir un exemple d'URL pour reproduire le problème.