Gérer les interventions sur les annonces lourdes

Rowan Merewood
Rowan Merewood

Les annonces qui consomment une quantité disproportionnée de ressources sur un appareil ont un impact négatif sur l'expérience utilisateur, allant des effets évidents d'une dégradation des performances à des conséquences moins visibles telles que la décharge de la batterie ou l'utilisation abusive de la bande passante. Il peut s'agir d'annonces malveillantes, comme des mineurs de cryptomonnaies, ou de contenus authentiques comportant des bugs ou des problèmes de performances involontaires.

Chrome définit des limites sur les ressources qu'une annonce peut utiliser et la décharge si ces 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 d'annonces lourdes

Une annonce est considérée comme intensive si l'utilisateur n'a pas interagi avec elle (par exemple, s'il n'a pas appuyé dessus ou n'a pas cliqué dessus) et qu'elle répond à l'un des critères suivants:

  • Il utilise le thread principal pendant plus de 60 secondes au total.
  • Utilise le thread principal 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 iFrame descendants du frame de l'annonce sont prises en compte dans les limites d'intervention sur l'annonce en question. Il est important de noter que les limites de temps principales du thread ne sont pas identiques au 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é expédiée dans Chrome 85, mais des bruits et de la variabilité ont été ajoutés par défaut 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, ce qui signifie que les restrictions sont appliquées de manière déterministe, purement 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 d'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 à l'échantillon de contenu sur heavy-ads.glitch.me. Vous pouvez également utiliser ce site de test pour charger une URL arbitraire afin de tester rapidement votre propre contenu.

Lors des tests, soyez conscient que plusieurs raisons peuvent empêcher l'application d'une intervention.

  • Si vous rechargez la même annonce sur la même page, cette combinaison sera exemptée de l'intervention. Il peut être utile d'effacer votre historique de navigation et d'ouvrir la page dans une nouvelle balise.
  • Assurez-vous que la page reste active. L'arrière-plan de la page (en basculant vers une autre fenêtre) suspend les files d'attente de tâches pour la page et ne déclenche donc pas l'intervention du processeur.
  • Veillez à ne pas appuyer ou cliquer sur le contenu de l'annonce 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 de votre part. Sachez simplement que les utilisateurs qui consulteront votre site pourront voir des annonces qui dépassent les limites supprimées.

Vous diffusez des annonces propriétaires sur votre site ou des annonces display tierces

Poursuivez votre lecture afin de vous assurer que vous mettez en œuvre le contrôle nécessaire via l'API Reporting pour les interventions d'annonces gourmandes en ressources.

Vous créez du contenu d'annonce ou vous gérez un outil de création de contenu d'annonce

Poursuivez votre lecture pour vous assurer que vous savez comment tester les problèmes de performances et d'utilisation des ressources de votre contenu. Nous vous conseillons également de consulter les conseils relatifs aux 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 développement pour éviter que des annonces peu performantes ne s'échappent dans la nature.

Que se passe-t-il lorsqu'une annonce est supprimée ?

Une intervention dans Chrome est signalée via l'API Reporting bien nommée, avec un type de rapport intervention. Vous pouvez utiliser l'API Reporting pour être averti des interventions, soit par le biais d'une requête POST à un point de terminaison de création de rapports, soit dans votre code JavaScript.

Ces rapports sont déclenchés sur l'iFrame racine avec tag d'annonce, 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 un iFrame intersite, c'est ce tiers (par exemple, le fournisseur d'annonces) qui gère le rapport.

Pour configurer la page des 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 de ce type:

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 lors d'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 effectivement capturé avant que la page ne soit complètement supprimée (par exemple, une annonce dans un iFrame). Pour ce faire, vous pouvez rattacher votre 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, cette requête sera annulée. Vous devez utiliser navigator.sendBeacon() pour envoyer ce rapport. Même dans ce cas, il ne s'agit que d'une solution optimale du navigateur, et non d'une garantie.

Le fichier JSON résultant du JavaScript est semblable à celui envoyé sur 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 de l'annonce ne concerne que du contenu Web. Vous devez donc utiliser des outils tels que Lighthouse pour évaluer les performances globales de votre contenu. Les audits qui en résultent fournissent des conseils en ligne sur les améliorations à apporter. Vous pouvez également faire référence à 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 ce processus avec un iFrame prêt à l'emploi doté de tags d'emplacement publicitaire. Utilisez les outils pour les développeurs Chrome pour vérifier qu'un contenu a été tagué en tant qu'annonce. Dans le panneau Rendu (accessible via le menu à trois points , puis Plus d'outils > Affichage), sélectionnez Mettre en surbrillance les frames de l'annonce. Si vous testez du contenu dans la fenêtre de premier niveau ou dans un autre contexte où il n'est pas marqué en tant qu'annonce, l'intervention ne sera pas déclenchée, mais vous pouvez toujours vérifier manuellement les seuils.

L'état de l'annonce d'un frame est également affiché dans le volet Elements (Éléments), où une annotation ad est ajoutée après la balise d'ouverture <iframe>. Cela est également visible dans le panneau Application, sous la section Frames, où les frames avec tags d'annonce incluront un attribut État de l'annonce.

Utilisation du réseau

Affichez le panneau Network (Réseau) dans les outils pour les développeurs Chrome afin d'afficher 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 pour les chargements répétés.

Panneau &quot;Network&quot; (Réseau) dans les Outils de développement
Panneau "Network" (Réseau) dans les outils de développement.

La valeur transférée en bas de la page indique le montant transféré pour l'ensemble de la page. Pensez à utiliser l'entrée Filtrer en haut pour limiter les requêtes à celles associées à l'annonce.

Si vous trouvez la demande initiale de l'annonce (par exemple, la source de l'iFrame), vous pouvez également utiliser l'onglet Initiator dans la requête pour afficher toutes les requêtes qu'elle déclenche.

Onglet de l&#39;initiateur d&#39;une requête.
Onglet de lancement d'une requête.

Le tri de la liste globale des requêtes par taille est un bon moyen d'identifier les ressources trop volumineuses. Les problèmes courants incluent les images et les vidéos qui n'ont pas été optimisées.

Triez les requêtes par taille de réponse.
Triez les requêtes par taille de réponse.

De plus, le tri par nom peut être un bon moyen de repérer les requêtes répétées. Il ne s'agit peut-être pas d'une seule grande ressource qui déclenche l'intervention, mais 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 Capture Settings (Paramètres de capture). Utilisez la liste déroulante Processeur pour ralentir le plus possible le processeur. Les interventions liées au processeur sont bien plus susceptibles de se déclencher sur les appareils moins puissants que sur les ordinateurs de développement haut de gamme.

Activez la limitation du réseau et du processeur dans le panneau &quot;Performances&quot;.
Activez la limitation du réseau et du processeur dans le panneau "Performances".

Cliquez ensuite sur le bouton Record (Enregistrer) pour commencer à enregistrer l'activité. Vous pouvez tester la durée et le moment d'enregistrement, car le chargement d'une trace longue peut prendre un certain temps. Une fois l'enregistrement chargé, vous pouvez utiliser la chronologie supérieure pour sélectionner une partie de l'enregistrement. Concentrez-vous sur les zones du graphique en jaune, violet ou vert unis qui représentent les scripts, le rendu et la peinture.

Résumé d&#39;une trace dans le panneau &quot;Performances&quot;.
Résumé d'une trace dans le panneau "Performances".

Explorez les onglets Bottom-Up, Call Tree et Event Log en bas de l'écran. Le tri de ces colonnes par Temps propre et Temps total peut aider à identifier les goulots d'étranglement dans le code.

Trier par temps propre dans l&#39;onglet Ascendant.
Trier par temps propre dans l'onglet ascendant

Le fichier source associé y est également associé. Vous pouvez donc le suivre jusqu'au panneau Sources pour examiner le coût de chaque ligne.

Temps d&#39;exécution affiché dans le panneau &quot;Sources&quot;.
Temps d'exécution affiché dans le panneau "Sources".

Les problèmes courants à rechercher ici sont des animations mal optimisées qui déclenchent une mise en page et un peinture continues, ou des opérations coûteuses cachées dans une bibliothèque incluse.

Signaler des interventions incorrectes

Chrome tague le contenu en tant qu'annonce en mettant en correspondance les demandes de ressources avec une liste de filtres. Si vous avez ajouté des tags à du contenu qui n'est pas une annonce, vous pouvez modifier ce code pour éviter qu'il ne corresponde aux règles de filtrage. Si vous pensez qu'une intervention a été appliquée de manière incorrecte, vous pouvez signaler un problème à l'aide de ce modèle. Assurez-vous d'avoir capturé un exemple de rapport d'intervention et de disposer d'un exemple d'URL pour reproduire le problème.