Dans le monde numérique d'aujourd'hui, la publicité en ligne constitue un élément essentiel du Web sans frais que nous apprécions tous. Toutefois, des annonces mal implémentées peuvent ralentir la navigation, frustrer les utilisateurs et réduire leur engagement. Découvrez comment charger efficacement les annonces sans affecter la vitesse de chargement de vos pages, offrir une expérience utilisateur fluide et maximiser les opportunités de revenus pour les propriétaires de sites Web.
Les sites Web comptent beaucoup sur la publicité en ligne comme principale source de revenus. Toutefois, la présence d'annonces sur les sites Web peut parfois se faire au détriment de l'expérience utilisateur et des performances globales des pages. Il est donc essentiel de trouver le juste équilibre entre la monétisation et les performances pour les propriétaires de sites Web et les annonceurs, ainsi que l'expérience utilisateur.
Prenons l'exemple d'un site Web qui diffuse de nombreuses annonces dans son contenu, l'objectif étant de générer des revenus élevés. Cependant, l'immense quantité d'annonces frustre les utilisateurs, ce qui se traduit par une expérience utilisateur médiocre et des taux de rebond élevés. Même si les annonces peuvent générer des revenus substantiels, l'abandon entrave sérieusement la réussite du site Web.
À l'autre extrémité, envisagez un site Web sans annonces. Cet environnement sans publicité attire de nombreux utilisateurs en raison de son temps de chargement rapide et de sa fluidité de navigation. Toutefois, en l'absence de stratégie de monétisation, le site Web a du mal à générer des revenus, ce qui peut nuire à sa viabilité et à sa croissance à long terme.
Les deux scénarios illustrent l'importance d'équilibrer la monétisation, les utilisateurs et les performances.
Exploiter les Core Web Vitals
La réussite du test Core Web Vitals est essentielle pour charger des annonces sans nuire à la vitesse de chargement des pages. Les Core Web Vitals, qui comprennent des métriques telles que Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) et Interaction to Next Paint (INP), sont des métriques d'expérience utilisateur qui mesurent la qualité de l'expérience utilisateur sur votre site Web.
Largest Contentful Paint (LCP)
Il est essentiel de se concentrer sur l'optimisation du LCP, car cette métrique mesure le temps nécessaire pour que le plus grand élément de contenu soit visible dans la fenêtre d'affichage. En réduisant le temps de chargement du contenu des annonces et en donnant la priorité aux techniques de chargement asynchrones, les propriétaires de sites Web peuvent réduire le LCP et le délai d'affichage des éléments les plus importants d'une page.
Interaction to Next Paint (INP)
Deuxièmement, l'amélioration de l'INP est essentielle pour offrir une expérience utilisateur responsive. INP mesure la latence de chaque clic, appui et interaction avec le clavier tout au long du cycle de vie d'une page. La valeur qui en résulte est le plus souvent l'interaction qui a pris le plus de temps et est représentative de la capacité globale de la page à répondre rapidement aux interactions des utilisateurs.
Les annonces qui retardent les interactions des utilisateurs ont un impact négatif sur l'INP. Cela peut frustrer les utilisateurs en créant des expériences qui leur semblent lentes, voire complètement défaillantes dans des cas extrêmes. L'implémentation du chargement différé pour les annonces et le report de l'exécution JavaScript non critique peuvent contribuer à réduire l'INP d'une page et donc à améliorer sa réactivité globale.
Cumulative Layout Shift (CLS)
Enfin, le CLS mesure la stabilité visuelle d'une page en mesurant la quantité de décalages de mise en page inattendus qui se produisent pendant le chargement de la page. Les annonces qui se chargent ou se redimensionnent dynamiquement peuvent entraîner une instabilité de la mise en page, ce qui nuit à l'expérience utilisateur : soit les utilisateurs ne savent plus où ils se trouvent sur la page, soit ils appuient involontairement sur les mauvais éléments en raison de décalages de mise en page inattendus. Pour limiter ce problème, les propriétaires de sites Web doivent optimiser le CLS afin de s'assurer que les annonces disposent d'un espace réservé pour éviter les décalages de mise en page. De plus, la taille des annonces doit être optimisée pour éviter les reflows soudains du contenu.
Structure de votre page Web en blocs de contenu distincts
En structurant votre page Web avec des blocs de contenu pour le texte, les images et le contenu des annonces, tout en utilisant également la propriété CSS content-visibility:, vous pouvez considérablement améliorer le délai d'affichage global dans les navigateurs modernes.
En appliquant la propriété content-visibility: de façon stratégique dans ces blocs de contenu, vous optimisez le processus d'affichage du texte, des images et du contenu des annonces. Ainsi, seul le contenu actuellement dans la fenêtre d'affichage s'affiche intégralement, ce qui accélère le chargement initial de la page et fluidifie les interactions utilisateur. Cette amélioration des performances est particulièrement utile lorsque vous traitez des annonces longues ou des pages comportant de nombreuses annonces.
Privilégiez les espaces publicitaires importants
Tous les espaces publicitaires ne se valent pas. Par exemple, les espaces publicitaires situés dans la partie au-dessus de la ligne de flottaison sont généralement plus rentables que ceux situés en dessous de la ligne de flottaison en termes de visibilité et de monétisation. En effet, les annonces situées dans la partie au-dessus de la ligne de flottaison sont plus susceptibles d'être vues par les utilisateurs, car elles sont visibles sans défilement dans la première fenêtre d'affichage. Les annonces situées dans la partie en dessous de la ligne de flottaison deviennent visibles lorsque l'internaute fait défiler la page suffisamment bas pour les voir.
Annonces dans la partie au-dessus de la ligne de flottaison
Les espaces publicitaires situés dans la partie au-dessus de la ligne de flottaison désignent la partie d'une page Web qui est visible sans défilement et qui représentent une valeur significative dans la publicité numérique. Ces emplacements de choix sont considérés comme intéressants pour plusieurs raisons:
- Les publicités placées dans la partie au-dessus de la ligne de flottaison sont immédiatement visibles dès le chargement d'une page Web. Les utilisateurs sont plus susceptibles de remarquer ces annonces et d'interagir avec elles, ce qui se traduit par des taux de clics plus élevés.
- Les annonceurs considèrent souvent la partie supérieure d'une page Web comme l'espace le plus précieux. Il s'agit de la première impression que les utilisateurs obtiennent lorsqu'ils visitent un site. Il s'agit donc d'un élément essentiel pour diffuser des annonces premium et à fort impact.
- Les annonces situées dans la partie au-dessus de la ligne de flottaison enregistrent les meilleurs taux de visibilité, car elles se trouvent dans le champ de vision direct de l'utilisateur. Ainsi, la majorité des internautes qui consultent la page verront ces annonces sans avoir à faire défiler la page vers le bas.
Toutefois, lorsque vous utilisez des espaces publicitaires situés dans la partie au-dessus de la ligne de flottaison dans la vue initiale, il est important de trouver le juste équilibre entre monétisation et expérience utilisateur. Voici quelques points importants à prendre en compte.
- Les espaces publicitaires de premier écran doivent se charger aussi rapidement que possible dans la fenêtre d'affichage initiale de l'utilisateur. Les annonces qui se chargent lentement peuvent avoir un impact négatif sur l'expérience utilisateur et augmenter les taux de rebond. L'optimisation du temps de chargement des annonces est essentielle pour assurer la fluidité de l'expérience utilisateur et de navigation.
- Même si les emplacements d'annonces situés dans la partie au-dessus de la ligne de flottaison sont intéressants, il est important de ne pas surcharger cet espace important avec un trop grand nombre d'annonces. Un nombre excessif d'annonces encombre la page, perturbe la lisibilité du contenu et nuise à l'expérience utilisateur. Efforcez-vous de trouver un équilibre entre monétisation et mise en page claire et conviviale.
- Assurez-vous que les espaces publicitaires situés dans la partie au-dessus de la ligne de flottaison sont compatibles avec différentes tailles d'écran et appareils. Les pratiques en matière de responsive design permettent de conserver une mise en page cohérente et visuellement attrayante, quelle que soit la taille de l'écran de l'utilisateur.
Annonces dans la partie en dessous de la ligne de flottaison
Les espaces publicitaires situés dans la partie en dessous de la ligne de flottaison (c'est-à-dire les annonces placées dans la partie d'une page Web qui n'est visible qu'après le défilement) ont également une valeur considérable dans le monde de la publicité numérique. Ces emplacements offrent des avantages uniques qui complètent les emplacements au-dessus de la ligne de flottaison.
Lorsque les utilisateurs font défiler la page vers le bas pour explorer davantage de contenu, les annonces situées dans la partie en dessous de la ligne de flottaison sont intéressantes. Ces emplacements attirent l'attention des utilisateurs engagés qui recherchent activement des informations supplémentaires, ce qui les rend intéressants pour les marques qui souhaitent transmettre des messages ou un storytelling plus complexes.
- Les espaces publicitaires qui ne sont pas visibles au départ peuvent s'aligner sur le contenu qui leur est associé, offrant ainsi une opportunité de pertinence contextuelle. Cet alignement peut accroître l'engagement des utilisateurs, car ceux-ci découvrent des annonces en rapport avec le contenu qu'ils explorent.
- Bien conçues, les annonces en dessous de la ligne de flottaison s'intègrent parfaitement au contenu environnant et nuisent moins aux utilisateurs. Cette intégration, également appelée publicité native, peut se traduire par une expérience utilisateur plus harmonieuse.
- Les emplacements d'annonces requis lors du défilement offrent davantage de flexibilité en termes de conception et de mise en forme des créations. Ils bénéficient également d'un vaste espace et d'une plus grande liberté de test. Les annonces vidéo, les éléments interactifs et les images de grande taille peuvent être chargés de façon différée pour capter l'attention des utilisateurs sans perturber leur expérience.
Cependant, vous devez tenir compte des considérations suivantes concernant les emplacements d'annonces situés en dessous de la ligne de flottaison:
- Bien que les emplacements d'annonces en dessous de la ligne de flottaison puissent être efficaces, il est essentiel de s'assurer que les utilisateurs sont encouragés à faire défiler la page vers le bas. Intégrer des repères visuels ou des accroches de contenu peut inciter les utilisateurs à explorer davantage, ce qui augmente la probabilité que les annonces soient visibles.
- Les emplacements d'annonces en dessous de la ligne de flottaison ne doivent pas compromettre la qualité ni la lisibilité du contenu. Équilibrer les annonces et le contenu pour ne pas submerger les utilisateurs et garantir une expérience utilisateur positive
- Contrairement aux emplacements d'annonces situés dans la partie au-dessus de la ligne de flottaison, les annonces situées dans la partie en dessous de la ligne de flottaison ne doivent pas nécessairement se charger immédiatement. Retarder le chargement de ces annonces jusqu'à ce qu'elles soient sur le point d'entrer dans la fenêtre d'affichage de l'utilisateur peut contribuer à améliorer la vitesse globale de chargement de la page et à réduire le délai d'affichage initial de la page.
Lorsqu'elles sont utilisées de façon stratégique, les annonces situées dans la partie en dessous de la ligne de flottaison peuvent compléter celles de la partie au-dessus de la ligne de flottaison. De plus, elles constituent une plate-forme pour les formats d'annonces créatifs et la pertinence en fonction du contexte. Toutefois, l'optimisation de la visibilité, l'équilibre du contenu et la gestion du temps de chargement des annonces sont des aspects essentiels pour garantir une expérience utilisateur positive.
Bonnes pratiques actuelles concernant les tags Google Publisher Tag (GPT) :
- Bonnes pratiques générales
- Bonnes pratiques concernant les annonces
- Réduire le décalage de mise en page
- Surveiller les performances
- Éviter les erreurs d'implémentation courantes
Annonces utilisant le chargement différé (le cas échéant)
Le chargement différé est une technique qui reporte le chargement des ressources non critiques jusqu'à ce qu'elles soient nécessaires. Appliquer un chargement différé aux annonces qui ne sont pas immédiatement visibles (c'est-à-dire dans la partie en dessous de la ligne de flottaison) garantit qu'elles ne sont chargées que lorsqu'elles sont visibles. Cela permet de préserver la bande passante et d'améliorer la vitesse globale des pages. Les navigateurs incluent désormais le chargement différé natif pour les iFrames avec un attribut loading=lazy simple.
Grâce au chargement différé, les annonces sont extraites de manière dynamique lorsqu'elles sont sur le point d'entrer dans la fenêtre d'affichage de l'utilisateur. Cela réduit le temps de chargement initial et le temps de blocage total (fortement corrélé avec l'INP) sur le thread principal lors de cette étape cruciale du cycle de vie de la page, ce qui réduit au maximum les répercussions négatives sur l'expérience utilisateur.
Actualiser les annonces sans actualiser la page
Une autre technique permettant d'équilibrer les performances de la page et le chargement des annonces consiste à actualiser les annonces toutes les 30 à 240 secondes1 sans recharger la totalité de la page. Cette approche permet de mettre à jour le contenu des annonces de manière dynamique, sans perturber la navigation de l'utilisateur ni causer de retards inutiles.
Sur les applications mobiles, actualiser les annonces dans les vues Web existantes offre de meilleures performances que l'actualisation de la page entière ou la recréation de WebViews. En effet, cela réduit les frais de données et de ressources, ce qui accélère les mises à jour du contenu et offre une expérience utilisateur plus fluide sans la latence associée à un démarrage de zéro.
Grâce à l'actualisation asynchrone des annonces, les propriétaires de sites Web peuvent conserver le contenu de leurs pages intact tout en le mettant à jour facilement et en temps réel. Cela permet non seulement d'améliorer la vitesse des pages en évitant d'avoir à actualiser la page entière, mais aussi de garantir que les annonces diffusées restent pertinentes et engageantes. Grâce à cette technique, les propriétaires de sites Web peuvent trouver un équilibre entre monétisation et performances, en diffusant des contenus d'annonces opportuns et engageants, tout en minimisant les effets négatifs sur l'expérience utilisateur.
L'actualisation des espaces publicitaires est particulièrement intéressante sur les pages sur lesquelles les utilisateurs ont tendance à rester plus longtemps, comme les pages de recettes, les tutoriels de bricolage ou d'autres sites Web riches en contenu. Par exemple, sur une page de travaux manuels où les utilisateurs peuvent passer beaucoup de temps à suivre les tutoriels, actualiser les espaces publicitaires de manière stratégique pendant les pauses entre les étapes ou lorsqu'ils consultent des galeries d'images peut améliorer à la fois l'expérience utilisateur et les revenus publicitaires. De même, sur une page de recettes, actualiser les espaces publicitaires après que les utilisateurs ont fait défiler la liste des ingrédients ou les instructions peut maintenir l'intérêt des utilisateurs.
Privilégier le chargement asynchrone
L'une des stratégies les plus efficaces pour améliorer la vitesse de chargement des pages lors de la diffusion d'annonces est le chargement asynchrone. Avec le chargement asynchrone, les annonces sont chargées indépendamment du contenu de la page Web principale. Ainsi, la page continue de s'afficher et devient interactive sans attendre que les annonces soient entièrement chargées. Cela réduit considérablement le temps de chargement perçu, ce qui améliore la satisfaction des utilisateurs.
Incluez l'attribut async dans la définition de la balise de script. Exemple :
AdSense:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
AdSense (annonces automatiques) :
<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Tag Google Publisher Tag:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
Optimiser la taille, la position et le format des annonces
La taille, la position et le format des annonces peuvent avoir un impact significatif sur la vitesse de chargement des pages. Les annonces de grande taille peuvent ralentir le chargement des pages, ce qui peut être frustré par l'utilisateur. Pour limiter ce problème, les propriétaires de sites Web doivent collaborer étroitement avec les annonceurs pour optimiser les tailles et formats d'annonces. Encourager l'utilisation de formats d'image compressés et concevoir des créations publicitaires efficaces permet de réduire la taille des fichiers sans compromettre la qualité visuelle. Ces optimisations améliorent non seulement la vitesse des pages, mais elles réduisent également la consommation de données pour les utilisateurs disposant d'une bande passante limitée.
Better Ads Standards
Il est essentiel de respecter les normes Better Ads Standards pour diffuser des annonces, car elles améliorent non seulement l'expérience utilisateur en réduisant les formats d'annonces intrusifs et perturbateurs, mais également la position de diffusion des annonces et le temps de chargement des pages.
En respectant ces normes, les annonces ont plus de chances d'être placées à des emplacements moins gênants et envahissants, ce qui peut se traduire par une augmentation de l'engagement utilisateur et des taux de clics.
En outre, le respect de ces consignes peut également réduire la vitesse de chargement des pages. En effet, les formats d'annonces plus légers et moins gourmands en ressources sont privilégiés, ce qui améliore les performances globales du site Web et la satisfaction des utilisateurs.
Évaluation stratégique des réseaux et fournisseurs publicitaires
Les réseaux publicitaires et les fournisseurs ne se valent pas tous en termes de performances. Pour optimiser la vitesse de leurs pages, les propriétaires de sites Web doivent évaluer méticuleusement les performances des différents réseaux publicitaires, de la mise en œuvre des enchères d'en-tête et des fournisseurs.
Établir des partenariats avec des fournisseurs qui privilégient la vitesse (et qui ont une longue expérience dans la diffusion efficace de contenus d'annonces légers) peut améliorer considérablement les performances des pages et améliorer l'expérience utilisateur.
Conclusion
Il est essentiel de trouver le juste équilibre entre monétisation et performances pour les propriétaires de sites Web qui souhaitent offrir une expérience utilisateur exceptionnelle tout en maximisant leurs revenus grâce à la publicité en ligne.
Grâce à des techniques telles que le chargement asynchrone, le chargement différé, l'optimisation des formats et des tailles d'annonces, la mise en cache intelligente et l'évaluation attentive des réseaux publicitaires, ainsi que les enchères et les fournisseurs d'en-tête, les propriétaires de sites Web peuvent relever les défis liés au chargement des annonces sans compromettre les performances de leurs pages. Privilégier une diffusion efficace des annonces permet en fin de compte de garantir une stratification des utilisateurs, un engagement accru et une génération de revenus durable.
Notes de bas de page
- Les serveurs publicitaires peuvent être soumis à des restrictions et à des exigences spécifiques. Par exemple, Ad Manager demande aux éditeurs de déclarer l'inventaire qui s'actualise dans l'interface utilisateur. Certains acheteurs exigent une déclaration d'actualisation de plus de 240 secondes. En général, plus l'intervalle entre les actualisations est long, plus votre inventaire est intéressant pour les acheteurs. En savoir plus