Dans le monde numérique actuel, la publicité en ligne est un élément essentiel du Web sans frais que nous apprécions tous. Toutefois, des annonces mal intégrées peuvent ralentir la navigation, frustrer les internautes et diminuer l'engagement. Découvrez comment charger efficacement des annonces sans nuire à la vitesse de chargement de vos pages, pour offrir une expérience utilisateur fluide et maximiser les opportunités de revenus pour les propriétaires de sites Web.
Les sites Web misent fortement sur la publicité en ligne comme principale source de revenus. Cependant, la présence d'annonces sur les sites Web peut parfois avoir un impact sur l'expérience utilisateur et les performances globales des pages. Il est donc essentiel de trouver un équilibre entre la monétisation et les performances pour les propriétaires de sites Web et les annonceurs, et l'expérience utilisateur.
Prenons l'exemple d'un site Web qui diffuse beaucoup d'annonces dans son contenu, dans le but de générer des revenus élevés. Cependant, le nombre écrasant d'annonces frustre les utilisateurs, ce qui entraîne une mauvaise expérience utilisateur et des taux de rebond élevés. Même si les annonces peuvent générer des revenus importants, l'abandon affecte considérablement le succès du site Web.
À l'inverse, pensez à un site Web sans publicité. Cet environnement sans publicité attire un grand nombre d'utilisateurs en raison de son temps de chargement rapide et de sa navigation fluide. Cependant, sans stratégie de monétisation en place, le site Web rencontre des difficultés pour générer des revenus, ce qui peut entraver 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 métriques Core Web Vitals
Réussir les Core Web Vitals est essentiel 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 l'élément le plus volumineux soit visible dans la fenêtre d'affichage. En réduisant le temps de chargement du contenu des annonces et en privilégiant les techniques de chargement asynchrone, les propriétaires de sites Web peuvent réduire le LCP ainsi que le délai d'affichage des éléments les plus visibles sur une page.
Interaction to Next Paint (INP, Interaction to Next Paint)
Deuxièmement, améliorer INP est crucial pour offrir une expérience utilisateur réactive. INP mesure la latence pour chaque clic, appui et interaction avec le clavier qui ont lieu tout au long de la vie d'une page. La valeur qui en résulte correspond le plus souvent à l'interaction qui a pris le plus de temps. Elle est représentative de la capacité globale d'une 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 se sentent lentes, voire complètement défectueuses dans des cas extrêmes. La mise en œuvre 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 lors du chargement de la page. Les annonces qui se chargent ou se redimensionnent de manière dynamique peuvent entraîner une instabilité de la mise en page et nuire à l'expérience utilisateur. Les utilisateurs perdent alors la trace de leur position sur la page ou appuient sur les mauvais éléments en raison de décalages 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é afin d'éviter les décalages de mise en page. De plus, les tailles des annonces doivent être optimisées pour éviter les reflows soudains du contenu.
Structurer 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 la propriété CSS content-visibility:, vous pouvez considérablement améliorer le délai d'affichage global dans les navigateurs récents.
En appliquant de manière stratégique la propriété content-visibility: dans ces blocs de contenu, vous optimisez le processus d'affichage du texte, des images et du contenu des annonces. Ainsi, seul le contenu de la fenêtre d'affichage s'affiche entièrement, ce qui accélère le chargement initial de la page et améliore la fluidité des interactions utilisateur. Cette amélioration des performances est particulièrement utile lorsque vous traitez des pages contenant de longues annonces ou qui comportent de nombreuses annonces.
Prioriser 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 intéressants que ceux situés en dessous en termes de visibilité et de monétisation. En effet, les annonces situées dans la partie au-dessus de la ligne de flottaison ont plus de chances 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 en dessous de la ligne de flottaison deviennent visibles lorsque l'utilisateur a fait défiler la page suffisamment loin pour les voir.
Annonces dans la partie au-dessus de la ligne de flottaison
Les espaces publicitaires dans la partie au-dessus de la ligne de flottaison font référence à la partie d'une page Web qui est visible sans défilement et qui présentent une valeur significative dans le domaine de la publicité numérique. Ces emplacements de premier 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 pour les utilisateurs dès le chargement de la 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'une zone cruciale pour la diffusion d'annonces premium et à fort impact.
- Les annonces situées dans la partie au-dessus de la ligne de flottaison enregistrent les taux de visibilité les plus élevés, car elles se trouvent dans la zone de vue directe de l'utilisateur. Ainsi, la majorité des utilisateurs qui consultent la page verront ces annonces sans avoir à faire défiler la page.
Toutefois, il est important de trouver un équilibre entre monétisation et expérience utilisateur lorsque vous utilisez des espaces publicitaires au-dessus de la ligne de flottaison dans la vue initiale. Voici quelques considérations clés.
- Les espaces publicitaires du premier écran doivent se charger aussi rapidement que possible dans la fenêtre d'affichage initiale de l'utilisateur. Un chargement lent des annonces peut avoir un impact négatif sur l'expérience utilisateur et augmenter les taux de rebond. L'optimisation des temps de chargement des annonces est essentielle pour garantir une expérience utilisateur et de navigation fluide.
- Si les emplacements d'annonces au-dessus de la ligne de flottaison sont utiles, il est important de ne pas surcharger cet espace de choix avec un trop grand nombre d'annonces. Un trop grand nombre d'annonces encombrent la page, perturbent la lisibilité du contenu et nuisent à l'expérience utilisateur. Efforcez-vous de trouver un équilibre entre monétisation et présentation 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 de conception réactive peuvent vous aider à maintenir une mise en page cohérente et visuellement attrayante, quelle que soit la taille de l'écran de l'utilisateur.
Annonces en dessous de la ligne de flottaison
Les espaces publicitaires 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 avoir fait défiler la page, présentent également une valeur considérable dans le monde de la publicité numérique. Ces emplacements offrent des avantages uniques qui complètent les emplacements dans la partie au-dessus de la ligne de flottaison.
Les annonces situées en dessous de la ligne de flottaison bénéficient des utilisateurs qui font défiler la page pour explorer plus de contenu. Ces emplacements attirent l'attention des utilisateurs engagés qui recherchent activement des informations supplémentaires. Ils sont donc 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 situé à côté, offrant ainsi une meilleure pertinence d'un point de vue contextuel. Cet alignement peut permettre d'augmenter l'engagement des utilisateurs, car ceux-ci découvrent des annonces en rapport avec le contenu qu'ils explorent.
- Lorsqu'elles sont conçues avec soin, les annonces situées en dessous de la ligne de flottaison s'intègrent parfaitement au contenu environnant, pour paraître moins gênantes pour les utilisateurs. Cette intégration, également appelée publicité native, peut améliorer l'expérience utilisateur.
- Les emplacements d'annonces nécessitant un défilement offrent davantage de flexibilité en termes de conception créative et de format, avec un vaste espace et une grande liberté de test. Les annonces vidéo, les éléments interactifs et les images plus grandes peuvent être chargés en différé afin d'attirer l'attention des utilisateurs sans perturber leur expérience.
Vous devez toutefois tenir compte des considérations suivantes concernant les emplacements d'annonces situés dans la partie en dessous de la ligne de flottaison:
- Même si les emplacements d'annonces situés en dessous de la ligne de flottaison peuvent s'avérer efficaces, il est essentiel de s'assurer que les utilisateurs sont encouragés à faire défiler la page pour les voir. La mise en place de repères visuels ou d'accroches de contenu peut inciter les utilisateurs à poursuivre l'exploration, ce qui augmente la visibilité de l'annonce.
- Le positionnement des annonces en dessous de la ligne de flottaison ne doit pas compromettre la qualité ni la lisibilité du contenu. Maintenir un équilibre entre les annonces et le contenu pour éviter de submerger les utilisateurs et garantir une expérience positive.
- Contrairement aux emplacements d'annonces dans la partie au-dessus de la ligne de flottaison, les annonces en dessous de la ligne de flottaison ne doivent pas nécessairement se charger immédiatement. Si vous retardez le chargement de ces annonces jusqu'à ce qu'elles soient sur le point d'entrer dans la fenêtre d'affichage de l'utilisateur, vous pouvez améliorer la vitesse de chargement globale 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 en dessous de la ligne de flottaison peuvent compléter celles diffusées dans la partie au-dessus de la ligne de flottaison. Elles offrent une plate-forme pour les formats d'annonces créatifs et la pertinence contextuelle. Toutefois, il est essentiel d'optimiser la visibilité, d'équilibrer le contenu et de gérer le temps de chargement des annonces 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
Chargement différé des annonces, 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. En appliquant le 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), vous vous assurez qu'elles ne sont chargées que lorsqu'elles s'affichent. Cela permet d'économiser la bande passante et d'améliorer la vitesse globale de la page. Les navigateurs incluent désormais le chargement différé natif pour les iFrames avec un attribut loading=lazy.
Grâce au chargement différé, les annonces sont récupérées de manière dynamique lorsqu'elles sont sur le point d'entrer dans la fenêtre d'affichage de l'utilisateur. Cela permet de réduire le temps de chargement initial et le temps de blocage total (TBT) (qui est fortement corrélé à l'INP) sur le thread principal à cette étape cruciale du cycle de vie de la page, ce qui minimise ainsi les conséquences 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 avec le chargement des annonces est la possibilité d'actualiser les annonces toutes les 30 à 240 secondes1 sans recharger l'intégralité de la page. Cette approche permet d'effectuer des mises à jour dynamiques du contenu des annonces sans perturber l'expérience de navigation de l'utilisateur ni provoquer de retard inutilement.
Dans les applications mobiles, l'actualisation des annonces dans les vues Web existantes offre de meilleures performances que d'actualiser toute la page ou de recréer des WebViews. En effet, elle minimise les frais liés aux données et aux ressources, ce qui accélère les mises à jour du contenu et améliore l'expérience utilisateur 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 la page intact tout en le mettant à jour de façon transparente en temps réel et sur place. Cela permet non seulement d'améliorer la vitesse de chargement de la page, car il n'est plus nécessaire d'actualiser toute la page, mais aussi de s'assurer que les annonces affichées restent pertinentes et attrayantes. Grâce à cette technique, les propriétaires de sites Web peuvent trouver un équilibre entre monétisation et performances, afin de diffuser des annonces opportunes et engageantes tout en minimisant les effets négatifs sur l'expérience utilisateur.
L'actualisation des espaces publicitaires est particulièrement utile sur les pages où les utilisateurs ont tendance à rester plus longtemps, comme les pages de recettes, de tutoriels de bricolage ou d'autres sites Web riches en contenu. Par exemple, sur une page de DIY où les utilisateurs peuvent passer beaucoup de temps à suivre les tutoriels, actualiser stratégiquement les espaces publicitaires 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 recette, actualiser les espaces publicitaires après que les utilisateurs ont fait défiler la liste des ingrédients ou les instructions peut maintenir leur intérêt.
Prioriser le chargement asynchrone
Le chargement asynchrone est l'une des stratégies les plus efficaces pour améliorer la vitesse de chargement des pages lors de la diffusion des annonces. Avec le chargement asynchrone des annonces, indépendamment du contenu de la page Web principale, la page continue de s'afficher et devient interactive sans attendre que les annonces soient entièrement chargées. Cela permet de réduire considérablement le temps de chargement perçu, ce qui améliore la satisfaction des utilisateurs.
Incluez l'attribut async dans la définition du tag 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>
Optimisez les tailles, la position et les formats 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 génère de la frustration chez les utilisateurs. Pour limiter ce problème, les propriétaires de sites Web doivent travailler en étroite collaboration avec les annonceurs afin d'optimiser les tailles et les formats d'annonces. Encourager l'utilisation de formats d'images compressés et la conception efficace des créations publicitaires permet de réduire la taille des fichiers sans compromettre la qualité visuelle. Ces optimisations permettent non seulement d'améliorer la vitesse des pages, mais également de réduire la consommation de données pour les utilisateurs dont la bande passante est limitée.
Better Ads Standards
Il est essentiel de respecter les normes Better Ads Standards, car elles permettent non seulement d'améliorer l'expérience utilisateur en réduisant les formats d'annonces intrusifs et gênants, mais elles ont également un impact positif sur la position de diffusion des annonces et le temps de chargement de la page.
Si vous respectez ces normes, les annonces ont plus de chances d'être placées à des positions moins gênantes et moins intrusives, ce qui peut augmenter l'engagement utilisateur et les taux de clics.
En outre, le respect de ces consignes peut également accélérer le chargement des pages, car 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
Tous les réseaux et fournisseurs publicitaires ne se valent pas en termes de performances. Pour garantir une vitesse de page optimale, les propriétaires de sites Web doivent évaluer méticuleusement les performances des différents réseaux publicitaires, implémentation des enchères d'en-tête et fournisseurs.
En établissant des partenariats avec des fournisseurs qui privilégient la rapidité et qui ont déjà l'habitude de diffuser efficacement des contenus publicitaires légers, vous pouvez augmenter considérablement les performances de vos pages et améliorer l'expérience utilisateur.
Conclusion
Il est primordial de trouver un é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, l'évaluation minutieuse des réseaux publicitaires, les enchères d'en-tête et les fournisseurs, les propriétaires de sites Web peuvent relever les défis liés au chargement des annonces sans compromettre les performances des pages. En fin de compte, la diffusion efficace des annonces garantit la stratification des utilisateurs, l'augmentation de l'engagement et la génération de revenus durables.
Notes de bas de page
- Les ad servers peuvent être soumis à des restrictions et des exigences. Par exemple, Ad Manager demande aux éditeurs de déclarer leur inventaire avec actualisation dans l'interface utilisateur. Certains acheteurs exigent une déclaration d'actualisation d'une durée supérieure ou égale à 240 secondes. En règle générale, plus l'intervalle entre les actualisations est long, plus votre inventaire est intéressant pour les acheteurs. lire la suite