Le site Web relancé enregistre également une visibilité des annonces de plus de 75%, une diminution de 50 % du taux de rebond et une augmentation de 27 % du nombre de 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 pour offrir une expérience optimale sur la page et améliorer la monétisation basée sur la publicité. Il a entrepris de relancer son site Web, en appliquant les bonnes pratiques courantes en matière de performances tout en optimisant les balises et les emplacements d'annonces en parallèle. S'engager à offrir 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 de manière conjointe. Le nombre de pages vues a augmenté de 27%, la visibilité des annonces a dépassé 75 % et les revenus publicitaires ont progressé de 18%.
27 %
Augmenter le 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 a eu du mal à trouver le bon équilibre entre l'optimisation de l'expérience utilisateur et la vitesse de chargement des pages, tout en maintenant des revenus publicitaires élevés. Voici les principaux défis auxquels ils ont été confrontés:
- CLS (Cumulative Layout Shift) élevé en raison des déplacements de mise en page déclenchés par les annonces, en particulier à partir des emplacements multitailles et des bannières en haut de l'écran.
- Le Largest Contentful Paint (LCP) arrive trop tard, car les annonces sont les plus grandes ou qu'elles utilisent la bande passante du chargement de l'image principale.
- First Input Delay (FID) élevé causé par le code JavaScript tiers nécessaire pour la publicité, les enchères d'en-tête et d'autres fins.
- Effets secondaires sur les Core Web Vitals des boîtes de dialogue de consentement contrôlées par des fournisseurs tiers, qui ont également contribué aux décalages de mise en page et peuvent être détectés comme des late largest paints.
Optimiser un site Web d'actualités pour les Core Web Vitals
Lorsque Netzwelt a commencé à travailler sur les Core Web Vitals, il a rapidement remarqué que l'optimisation de ces métriques n'avait pas besoin d'avoir un impact négatif sur la publicité, mais pouvait être utilisée pour améliorer la visibilité des annonces. L'équipe Netzwelt a donc optimisé les Core Web Vitals pour augmenter la visibilité des annonces au-dessus de 75% afin d'attirer des annonces plus intéressantes (la moyenne mondiale pour les annonces display est inférieure à 50%).
Optimiser le CLS
Les annonces se chargent souvent tardivement (parfois de manière consciente via le chargement paresseux), et leur taille réelle n'est souvent pas connue à l'avance en raison des emplacements d'annonces multitailles et fluides.
Le problème peut être divisé en deux : annonces au-dessus et en dessous de la ligne de flottaison.
Les annonces au-dessus de la ligne de flottaison peuvent entraîner des sauts de mise en page massifs en raison d'un chargement tardif avec des tailles inconnues. Bloquer l'espace le plus grand dont ils pourraient avoir besoin peut entraîner une mauvaise expérience utilisateur, tandis que demander aux annonceurs des tailles fixes peut réduire les revenus publicitaires. Netzwelt a résolu ce problème en rendant l'annonce supérieure persistante et en supprimant certaines des plus grandes tailles de bannière autorisées. L'annonce superposée évite de déclencher des sauts de mise en page pour les annonces de différentes tailles. Bien que la réduction des tailles éligibles ait un impact sur les ventes d'annonces, la meilleure visibilité compense facilement cet impact.
Les données historiques et les tests A/B ont permis à Netzwelt de trouver la taille et le positionnement adaptés à 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 améliorées de manière significative:
- Une bannière qui n'est pas visible, mais chargée, entraîne une mauvaise visibilité des annonces et une expérience de page dégradée.
- Une bannière chargée au moment où un utilisateur la fait défiler peut entraîner des sauts de contenu supplémentaires.
Pour maintenir une bonne expérience sur la page et une visibilité élevée des annonces, Netzwelt a implémenté le chargement différé et réservé de l'espace pour la taille du dénominateur commun le plus bas. Dans une zone multitaille, les bannières demandées dans les tailles 300x250 à 300x600 ont réservé 250 px de hauteur. Cela a éliminé les décalages de mise en page pour les tailles plus petites 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 les emplacements 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. 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 réduisant les changements de mise en page. Les navigateurs qui ne prennent pas en charge l'API NetworkInfo utilisent une valeur de proxy basée sur une combinaison d'appareil et de type de réseau dérivé de l'adresse IP. Cette stratégie de chargement adaptatif réduit particulièrement le CLS pour les utilisateurs disposant de connexions Internet lentes.
Optimiser le FID
Le délai de première saisie peut sembler être un problème pour les éditeurs d'actualités, car les annonces sont souvent accompagnées de nombreuses bibliothèques JavaScript supplémentaires. Il semble que cela ait un impact négatif lorsque l'on examine les données de laboratoire telles que Lighthouse. Toutefois, en examinant les données sur le terrain de l'Almanach Web 2020, de nombreux sites Web ont une réponse suffisamment rapide. Cela est dû en partie au chargement tardif du code JavaScript publicitaire (après la première saisie), à un bon cache (par exemple, en obtenant le traitement du cache de code v8) ou à une bonne optimisation par les fournisseurs d'annonces. Les outils de suivi de la visibilité des fournisseurs s'assurent d'éviter les tâches longues. Par conséquent, même lorsque la somme de la durée d'exécution est longue, le temps de blocage total (TBT) et le FID ne sont pas affectés. Bien que le FID ne soit pas un problème majeur pour Netzwelt, certaines optimisations étaient nécessaires:
- Réduire le nombre de scripts et de fournisseurs d'annonces, en se concentrant sur une seule pile si possible.
- Chargement de tous les scripts avec "defer" ou "async".
- Utilisation de webpack ou de technologies similaires pour le treeshaking et le dégroupement.
- à l'aide de règles CSS simples de type BEM.
- Éviter les tâches de longue durée et utiliser le modèle inactif jusqu'à l'urgence.
- Utilisation de RequestAnimationFrame partout où la mise en page est affectée.
Optimiser le LCP
La métrique "Largest Contentful Paint" peut être influencée par les annonces de deux manières : explicitement en reconnaissant une annonce comme la plus grande peinture, et indirectement en congestionnant la bande passante du réseau ou en affectant le chemin critique afin que la plus grande peinture réelle (par exemple, une image principale) ne puisse pas se charger assez rapidement.
Netzwelt avait déjà supprimé les annonces au format rectangle moyen des emplacements publicitaires supérieurs tout en optimisant pour le CLS. Cela a également l'avantage de ne pas faire des annonces l'élément le plus important.
Netzwelt suit une règle stricte qui consiste à donner la priorité au contenu par rapport aux annonces. Netzwelt a donné la priorité aux images et aux polices de titre utilisées au-dessus de la ligne de flottaison, et a optimisé le chemin critique pour qu'il prenne le pas sur les scripts et les annonces publicitaires. Cette hiérarchisation a permis de ne pas affecter le LCP par les annonces.
En plus de ces optimisations, Netzwelt a suivi d'autres bonnes pratiques:
- CSS distinct pour le chemin de rendu critique et placé dans l'en-tête.
- Préchargement des polices, scripts et images les plus importants.
- Évité le chargement paresseux des images au-dessus de la ligne de flottaison.
font-display="swap"utilisé.
Consentement RGPD et Core Web Vitals
Les boîtes de dialogue de consentement ont souvent un impact négatif sur les Core Web Vitals. Comme pour les annonces, une boîte de dialogue de consentement peut influencer les métriques Core Web Vitals de deux manières:
- De manière explicite s'il est détecté comme la plus grande peinture ou s'il provoque des décalages de mise en page.
- Implicitement, en volant de la bande passante à la plus grande peinture réelle, en bloquant le chemin critique vers la plus grande peinture 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 les plus évidents:
- Les scripts de consentement sont chargés de manière asynchrone afin de ne pas bloquer les ressources critiques.
- Le consentement est formaté de sorte que les éléments volumineux ne soient pas éligibles en tant que plus grand élément du LCP.
- La superposition de consentement utilise
position: fixedpour éviter les décalages. - Bien que les annonces ne soient diffusées qu'après obtention du consentement, un espace blanc adéquat est conservé à l'avance 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 consentement ne déclenchent pas de décalages de mise en page. Un problème a été détecté et corrigé ici : l'option de verrouillage du défilement du fournisseur de services, qui désactivait 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înait des décalages de mise en page.
Après ce travail, de grandes différences subsistaient entre les CLS sur le terrain et en laboratoire. Bien que le CLS de l'atelier soit proche de zéro, les valeurs des champs étaient nettement supérieures aux seuils. Après examen, le problème était lié 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 travailler avec le fournisseur tiers de consentement pour résoudre ce problème.
Modèles d'abonnement aux actualités et Core Web Vitals
Les éditeurs d'actualités passent aux modèles d'abonnement pour financer le journalisme. Ce modèle est pertinent pour les 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 le masquage des annonces peut entraîner des modifications de mise en page. Le site Web doit vérifier si les utilisateurs sont autorisés à consulter le contenu et s'il doit afficher des annonces. Ces vérifications peuvent entraîner des latences supplémentaires, ce qui peut entraîner des changements de contenu ou une mauvaise expérience utilisateur.
Netzwelt utilise un modèle selon lequel les contenus sont toujours sans frais, mais les abonnés ne voient pas d'annonces. Ils ont étudié différentes manières de 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 d'autorisation entraînait 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, cela signifie qu'il existe un faible risque qu'un utilisateur payant voit des annonces une fois. Les utilisateurs qui viennent de résilier un abonnement peuvent voir une seule page sans annonces avant que les droits d'accès stockés localement ne soient mis à jour. Une fois les droits d'accès connus, ils sont stockés localement à l'aide de l'API LocalStorage, afin d'éviter les latences et les décalages de mise en page supplémentaires lors des futures navigations.
Résultats d'optimisation
Les résultats des optimisations de Netzwelt parlent d'eux-mêmes. Son score PageSpeed Insights est inégalé parmi les éditeurs d'actualités du monde entier:
Les optimisations ont amélioré l'expérience sur la page, mais elles ont été effectuées en tenant compte de l'entreprise et ont amélioré l'expérience publicitaire, la visibilité des annonces et les revenus. Après avoir relancé la page optimisée, Netzwelt a constaté une augmentation de 20 à 30 % de son CPM, avec une visibilité des annonces supérieure à 75%. Toutefois, Netzwelt estime que l'augmentation globale des revenus est encore plus élevée. Le trafic a augmenté depuis le lancement, probablement en raison d'un engagement utilisateur plus élevé et de taux de rebond plus faibles grâce à une meilleure expérience utilisateur. Ces effets sont difficiles à quantifier et à établir en relation causale avec le lancement, car le trafic fluctue naturellement et la pandémie mondiale a également des effets. Ces effets indirects sont l'une des raisons pour lesquelles Netzwelt examine toujours tous les chiffres lorsqu'il évalue son site, et pas seulement le CPM, qui peut être trompeur. Les métriques "Signaux Web essentiels" et les métriques UX, combinées à toutes les métriques liées aux annonces, donnent une image réelle.
Regarder vers l'avenir
Netzwelt estime que, dans un 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), est la clé du succès en tant qu'éditeur d'actualités.
Netzwelt ne se contente donc pas des Core Web Vitals, mais va 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 les activités Web fiables (TWA) à l'aide de la nouvelle API Digital Goods.