Le site Web relancé enregistre également une visibilité des annonces de plus de 75%, une diminution des taux de rebond de 50 % et une augmentation de 27 % des pages vues.
Lorsque Google a annoncé l'initiative Core Web Vitals, l'éditeur allemand Netzwelt a rapidement compris le potentiel de ces nouvelles métriques en termes d'expérience sur la page de qualité et d'amélioration de la monétisation basée sur la publicité. Elle a entrepris de relancer son site Web en appliquant les bonnes pratiques courantes pour améliorer les performances, tout en optimisant en parallèle les tags d'emplacement publicitaire et les emplacements. S'engager à proposer une expérience utilisateur de qualité et des pages rapides s'est avéré être un moyen d'optimiser l'engagement et les revenus publicitaires : le nombre de pages vues a augmenté de 27%, la visibilité des annonces de plus de 75 % et les revenus publicitaires de 18%.
27%
d'augmentation du nombre de pages vues
18%
d'augmentation des revenus publicitaires
75%
Visibilité des annonces
Problématique
Comme de nombreux autres éditeurs d'actualités, Netzwelt s'est efforcée de trouver le bon équilibre entre l'optimisation de l'expérience utilisateur et la vitesse de chargement des pages, tout en conservant des revenus publicitaires élevés. Voici les principaux défis qu'ils ont rencontrés:
- Cumulative Layout Shift (CLS) élevé en raison de décalages de mise en page déclenchés par les annonces, en particulier à partir des espaces publicitaires multitailles et des bannières supérieures.
- Le Largest Contentful Paint (LCP) arrive en retard du fait que les annonces représentent la plus grande quantité de peinture ou parce que la bande passante est consommée par le chargement de l'image héros.
- First Input Delay (FID) élevé causé par du code JavaScript tiers nécessaire à la publicité, aux enchères d'en-tête ("header bidding") et à d'autres fins
- Effets secondaires sur les Core Web Vitals provenant de boîtes de dialogue de consentement contrôlées par des fournisseurs tiers, qui ont également été ajoutés aux décalages de mise en page et peuvent être détectés comme les plus grands peints tardifs.
Optimiser un site Web d'actualités pour les Core Web Vitals
Lorsque l'équipe Netzwelt a commencé à travailler sur les Core Web Vitals, elle a rapidement remarqué que l'optimisation des Core Web Vitals ne devait pas avoir d'impact négatif sur la publicité, mais qu'elle peut servir à améliorer la visibilité des annonces. Par conséquent, l'équipe Netzwelt a optimisé les Core Web Vitals pour augmenter la visibilité des annonces de plus de 75% et attirer des publicités de plus grande valeur (la moyenne mondiale des annonces display est inférieure à 50%).
Optimiser le CLS
Les annonces se chargent souvent tardivement (parfois consciemment en raison d'un chargement différé), et leur taille réelle n'est souvent pas connue à l'avance en raison des emplacements d'annonces multitailles et fluides.
Le problème se divise en deux : les annonces diffusées au-dessus de la ligne de flottaison et dans la partie en dessous de la ligne de flottaison.
Les annonces au-dessus de la ligne de flottaison peuvent entraîner des sauts de page considérables en raison d'un retard de chargement avec des tailles inconnues. Bloquer le plus grand espace dont ils pourraient avoir besoin peut nuire à l'expérience utilisateur, tandis que demander aux annonceurs des tailles fixes peut réduire les revenus publicitaires. Pour remédier à ce problème, Netzwelt a décidé de fixer l'annonce en haut de la page et de supprimer certaines des plus grandes tailles de bannières autorisées. L'annonce superposée évite de déclencher des sauts de mise en page pour des annonces de différentes tailles. Bien que la réduction des tailles éligibles ait un impact sur les ventes d'annonces, une meilleure visibilité compense facilement ce phénomène.
Les données historiques et les tests A/B ont permis à Netzwelt de trouver la taille et le positionnement appropriés pour les différents appareils et tailles d'écran, ainsi que les règles multimédias CSS utilisées pour réserver de l'espace.
Les annonces en dessous de la ligne de flottaison peuvent être nettement améliorées:
- Une bannière qui n'est pas vue, mais qui est chargée affecte la visibilité de l'annonce et nuit à l'expérience sur la page.
- Une bannière chargée au moment où l'utilisateur fait défiler la page peut entraîner des sauts de contenu supplémentaires.
Pour garantir une bonne expérience sur la page et une visibilité des annonces élevée, Netzwelt a mis en œuvre le chargement différé et réservé l'espace correspondant au plus petit dénominateur commun. Dans une zone multitaille, les bannières demandées dans les tailles 300 x 250 à 300 x 600, réservées à une hauteur de 250 pixels. Cela a éliminé les décalages de mise en page pour les plus petites tailles, et les a considérablement réduits pour les bannières plus grandes. Cette approche n'est pas optimale, mais c'est un début et un bon compromis.
Pour optimiser davantage, Netzwelt a utilisé Intersection Observer et l'API Network Information pour contrôler l'emplacement des annonces et réduire les décalages de mise en page. Différentes positions d'annonces et stratégies de chargement différé sont utilisées en fonction de la position de défilement et de la qualité de la connexion réseau. Par ailleurs, les annonces peuvent passer de plusieurs tailles à des tailles fixes. L'objectif de l'algorithme est toujours de maximiser la visibilité des annonces tout en minimisant les décalages de mise en page. Les navigateurs qui ne sont pas compatibles avec l'API NetworkInfo utilisent une valeur de proxy basée sur une combinaison de type de réseau dérivé de l'adresse IP et de l'appareil. Cette stratégie de chargement adaptatif réduit particulièrement le CLS pour les utilisateurs dont la connexion Internet est lente.
Optimiser le FID
Le First Input Delay peut sembler être un problème pour les éditeurs d'actualités, car la publicité s'accompagne souvent de nombreuses bibliothèques JavaScript supplémentaires. Cela semble avoir un impact négatif sur les données de laboratoire, comme Lighthouse. Toutefois, en examinant les données réelles du 2020 Web Almanac, de nombreux sites Web ont une réponse suffisamment rapide. Cela est en partie dû au fait que l'annonce JavaScript se charge tardivement (après la première entrée), qu'elle est bien mise en cache (par exemple, si vous avez obtenu le traitement de la mise en cache du code v8) ou qu'elle est bien optimisée par les fournisseurs d'annonces. Les outils de suivi de la visibilité des fournisseurs s'assurent d'éviter les tâches longues. Ainsi, même lorsque la somme de l'environnement d'exécution est longue, le temps de blocage total (TBT, Total Blocking Time) et le FID ne sont pas affectés. Même si le FID n'a pas posé problème pour Netzwelt, il y avait encore quelques optimisations à faire:
- La réduction des scripts et des fournisseurs d'annonces, en se concentrant si possible sur une seule pile
- Chargement de tous les scripts avec "defer" ou "async".
- Utiliser le pack Webpack ou des technologies similaires pour le "swiking" et le dégroupement
- Utiliser des règles CSS simples de type BEM.
- Éviter les tâches de longue durée et utiliser le modèle inactif-until-urgent.
- Utilisez RequestAnimationFrame chaque fois que la mise en page est affectée.
Optimiser le LCP
Le Largest Contentful Paint peut être influencé par les publicités de deux manières : explicitement en reconnaissant une annonce comme le plus grand composant, et indirectement en encombrant la bande passante réseau ou en affectant le chemin critique afin que le plus grand tableau (par exemple, une image de héros) ne puisse pas se charger assez rapidement.
Netzwelt avait déjà supprimé les annonces au format rectangle moyen des espaces publicitaires situés en haut de l'écran tout en optimisant le CLS. En outre, les annonces n'étaient plus les éléments les plus importants.
Netzwelt applique un règlement strict pour donner la priorité au contenu aux annonces. Netzwelt a donné la priorité aux images et polices héros utilisées au-dessus de la ligne de flottaison, et a optimisé le chemin critique pour qu'il soit prioritaire sur les scripts publicitaires et les publicités. Cette priorisation a permis au LCP de ne pas être affecté par les annonces.
Outre ces optimisations, Netzwelt a suivi d'autres bonnes pratiques:
- CSS distinct pour le chemin critique du rendu et le placer dans l'en-tête.
- Les polices, scripts et images les plus importants ont été préchargés.
- Évitez le chargement différé des images dans la partie au-dessus de la ligne de flottaison.
- Utilisé
font-display="swap".
Consentement RGPD et Core Web Vitals
Les boîtes de dialogue de recueil du consentement ont souvent un impact négatif sur les métriques Core Web Vitals. Comme pour les annonces, une boîte de dialogue de recueil du consentement peut influencer les Core Web Vitals:
- explicitement, s'il est détecté comme le plus grand "peint" ou entraîne des décalages de mise en page ;
- Implicitement, en volant la bande passante de la peinture la plus grande, en bloquant le chemin critique vers le plus grand tableau ou en retardant les annonces jusqu'à ce que le consentement soit obtenu, ce qui peut, à son tour, déclencher des changements de mise en page.
Netzwelt collabore avec un fournisseur de consentement tiers qui a également implémenté des optimisations. Tout d'abord, Netzwelt a veillé à éviter les pièges simples suivants:
- Les scripts de consentement sont chargés de manière asynchrone, afin de ne pas bloquer les ressources critiques.
- Le consentement est mis en forme de sorte que les éléments volumineux ne soient pas éligibles en tant qu'élément le plus grand du LCP.
- La superposition de consentement utilise
position: fixedpour éviter les décalages. - Bien que les annonces ne soient diffusées qu'une fois le consentement obtenu, un espace blanc suffisant est conservé au préalable pour éviter les décalages de mise en page lors du chargement des annonces.
- Assurez-vous que l'affichage et le positionnement de la boîte de dialogue de recueil du consentement ne déclenchent pas de décalages de mise en page. Un problème détecté et résolu ici était l'option de verrouillage du défilement du fournisseur de services, qui désactive le défilement pendant l'affichage du consentement en déplaçant le contenu principal de l'article lors du défilement, ce qui entraîne des décalages de mise en page.
Après ce travail, il y avait encore d'importantes différences entre le CLS de terrain et celui de l'atelier. Alors que le CLS de l'atelier était proche de zéro, les valeurs des champs étaient nettement supérieures aux seuils. Après examen, le problème est dû aux décalages de mise en page dans l'iFrame de consentement, qui ne sont actuellement correctement capturés que dans les données de champ. Netzwelt continue de collaborer avec le fournisseur de consentement tiers pour résoudre ce problème.
Modèles d'abonnement aux actualités et Core Web Vitals
Les éditeurs d'actualités adoptent des modèles d'abonnement pour financer le journalisme. Ce modèle est pertinent pour les métriques Core Web Vitals, car les utilisateurs ne s'abonnent pas à des sites Web offrant une mauvaise expérience utilisateur. De plus, les abonnés ne s'attendent pas à voir des annonces dans le contenu payant, mais leur masquage peut entraîner des décalages de mise en page. Le site Web doit vérifier si les utilisateurs sont autorisés à consulter le contenu et s'ils peuvent diffuser des annonces. Ces vérifications peuvent entraîner des latences supplémentaires qui peuvent entraîner des décalages de contenu ou une mauvaise expérience utilisateur.
Netzwelt utilise un modèle où le contenu est toujours sans frais, mais les abonnés ne voient pas d'annonces. Elle a étudié différentes façons d'interroger et de stocker les droits d'accès afin de réduire les latences et les décalages de mise en page.
Une requête initiale de droits d'accès provoquait toujours des latences. Par conséquent, si l'interrogation des droits d'accès prend trop de temps, le site affiche le dernier état mis en cache. Pour les nouveaux abonnés, il y a un faible risque qu'un utilisateur payant ne voie les annonces qu'une seule fois. Les utilisateurs qui viennent de mettre fin à un abonnement peuvent voir un chargement sans annonces avant la mise à jour des droits stockés localement. Une fois les droits d'accès connus, ils sont stockés localement à l'aide de l'API LocalStorage, afin d'éviter des latences et des décalages de mise en page supplémentaires lors de la navigation ultérieure.
Résultats de l'optimisation
Les résultats des optimisations de Netzwelt parlent d'eux-mêmes. Leur score PageSpeed Insights est inégalé chez les éditeurs d'actualités du monde entier:
Ces optimisations ont permis d'améliorer l'expérience sur la page, mais elles ont été conçues pour améliorer l'expérience publicitaire, la visibilité des annonces et les revenus. Après avoir relancé la page optimisée, Netzwelt a constaté une augmentation du CPM de 20 à 30%, avec une visibilité des annonces supérieure à 75%. Toutefois, Netzwelt part du principe que l'augmentation globale des revenus sera encore plus élevée. Le trafic a augmenté depuis le redémarrage, probablement dû à un engagement utilisateur plus élevé et à des taux de rebond plus faibles grâce à l'amélioration de l'expérience utilisateur. Ces effets sont difficiles à quantifier et se définissent par rapport au redémarrage, car le trafic fluctue naturellement. Il existe également d'autres effets dus à la pandémie mondiale. Ces effets indirects sont l'une des raisons pour lesquelles Netzwelt tient toujours compte de tous les chiffres lorsqu'il examine son site, et pas seulement le CPM, ce qui peut être trompeur. Les métriques Core Web Vitals et les métriques de l'expérience utilisateur, combinées à toutes les métriques liées aux annonces, fournissent une image réelle.
Regarder vers l'avenir
Netzwelt est convaincue que, dans l'avenir, sans cookies tiers, le ciblage contextuel via le contenu, combiné à une bonne expérience utilisateur et à une bonne expérience sur la page (y compris la visibilité des annonces), sera la clé du succès en tant qu'éditeur d'actualités.
Par conséquent, Netzwelt ne se limite pas aux Core Web Vitals, mais va encore plus loin en implémentant de nombreuses fonctionnalités Web modernes telles que les progressive web apps (PWA), le contenu hors connexion, le mode sombre, l'API Web Share et Trusted Web Activity (TWA) à l'aide de la nouvelle API Digital Goods.