Lorsqu’il s’agit d’améliorer les performances d’un site Web, Google PageSpeed Insight est un outil inestimable. Mais qu’en est-il lorsque vous souhaitez monétiser votre site avec Google Ads ? Peut-on avoir le beurre et l’argent du beurre : un site rapide et des revenus publicitaires ? Heureusement, la réponse est oui. Dans cet article, nous aborderons des techniques éprouvées pour optimiser votre site Web tout en utilisant Google Ads, sans sacrifier les performances.
Le problème de la vitesse avec Google Ads
L’ajout de Google Ads sur votre site peut souvent entraîner une réduction de la vitesse de chargement. Ce retard est généralement dû au fait que les scripts publicitaires en javascript s’exécutent avant que votre contenu ne soit complètement chargé. Par conséquent, votre site peut devenir lent, ce qui peut avoir un impact négatif sur l’expérience utilisateur et, finalement, sur votre classement dans les moteurs de recherche.
La solution ? Il est essentiel d’optimiser les scripts et les fichiers liés à Google Ads. Non seulement cela améliorera l’expérience utilisateur, mais cela augmentera également vos chances d’un meilleur classement sur Google.
Pour y parvenir, plusieurs options s’offrent à vous, notamment l’utilisation de plugins et des modifications au niveau du code. Autoptimize est l’un de ces plugins qui peut vous aider à accélérer les choses en optimisant votre JavaScript.
Comment utiliser Autoptimize ?
La mise en place d’Autoptimize est une première étape cruciale pour améliorer la performance de votre site web. Après avoir activé le plugin et optimisé le JavaScript, vous pouvez passer à l’étape suivante pour une performance encore meilleure.
Optimisation CSS pour une vitesse accrue
Une fois l’option « Optimiser le JavaScript » cochée, il est temps de s’intéresser à vos fichiers CSS. Dans les paramètres d’Autoptimize, cochez également l’option « Optimiser le CSS ». Cette action réduit la taille des fichiers CSS de manière similaire à ce que vous avez fait pour JavaScript, en éliminant les espaces inutiles, les commentaires, et en combinant plusieurs fichiers en un seul. Cette consolidation diminue le nombre de requêtes HTTP nécessaires pour charger votre site, ce qui peut considérablement réduire le temps de chargement des pages.
- Réduction des requêtes HTTP : Chaque fichier CSS ou JavaScript supplémentaire qu’un navigateur doit télécharger peut augmenter le temps de chargement de votre site. En les combinant, Autoptimize réduit ces requêtes, accélérant ainsi l’affichage de votre site.
- Compression des fichiers : En plus de combiner les fichiers, Autoptimize les compresse, réduisant leur taille sans perdre en qualité ou en fonctionnalité.
- Gestion des polices de caractères : Une autre option intéressante est l’optimisation des polices de caractères. Sélectionner « Optimiser les polices de caractères » permet de charger les polices de manière plus efficace, réduisant ainsi les blocages du rendu.
- Chargement différé des images : Le chargement différé des images (Lazy Load) est une fonctionnalité qui ne charge les images que lorsque celles-ci entrent dans le champ de vision de l’utilisateur. Ceci permet d’accélérer le temps de chargement initial de la page.
Optimisation des images
Une autre étape clé pour améliorer la vitesse de votre site est l’optimisation des images. Bien qu’Autoptimize ne propose pas directement une option d’optimisation d’image, il est fortement recommandé d’utiliser un plugin complémentaire pour cela. Des images optimisées signifient des fichiers plus petits à charger, ce qui contribue grandement à la vitesse du site.
- Sélection du bon format : Utilisez des formats d’image modernes comme WebP, qui offre une qualité similaire aux formats traditionnels mais avec une taille de fichier considérablement réduite.
- Compression intelligente : Des outils comme Imagify ou ShortPixel peuvent compresser vos images sans perte significative de qualité, rendant le chargement de votre site plus rapide sans compromettre l’expérience visuelle.
- Redimensionnement des images : Assurez-vous que vos images ne sont pas plus grandes qu’elles ne doivent l’être. Des images redimensionnées pour s’adapter précisément à l’espace alloué réduisent le poids de la page.
Cache et CDN
Enfin, tirer parti du cache et des réseaux de distribution de contenu (CDN) peut réduire encore plus le temps de chargement de votre site. Autoptimize s’intègre bien avec des plugins de cache comme WP Rocket ou W3 Total Cache, qui stockent une version statique de vos pages pour les servir rapidement aux visiteurs récurrents. L’utilisation d’un CDN peut également distribuer votre contenu à partir de serveurs situés à proximité de vos visiteurs, réduisant ainsi les délais de chargement.
- Configuration du cache : Une bonne configuration cache permet de servir rapidement des pages préchargées à vos visiteurs, diminuant le travail nécessaire pour générer chaque page à la volée.
- Intégration CDN : Un CDN stocke des copies de votre site sur plusieurs serveurs à travers le monde, garantissant que les utilisateurs sont toujours proches d’une source de votre contenu.
En suivant ces étapes et en exploitant pleinement les capacités d’Autoptimize, vous pouvez considérablement améliorer la performance de votre site web, offrant ainsi une meilleure expérience à vos utilisateurs tout en améliorant votre SEO.
Modification du code : Une étape supplémentaire
Si vous êtes à l’aise avec le codage, une autre étape que vous pouvez prendre est d’ajouter des scripts personnalisés pour optimiser davantage le chargement de vos annonces Google Ads. En plaçant un certain code JavaScript juste au-dessus de la balise </body>, vous pouvez retarder le chargement des annonces jusqu’à ce que l’interaction de l’utilisateur soit détectée sur la page.
Pour commencer, quand vous utilisez le code de vos annonces Display (ou autre, tout sauf AUTO), le code fourni par Google à placer sur votre site, ressemble à cela :
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Pour commencer vous aller supprimer cette partie :
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>Pour ne garder donc, à l’endroit (aux endroits) où vous voulez voir votre ou vos annonces, que ce code :
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>La partie Javascript que vous avez supprimé est importante mais cela ne sert à rien de l’utiliser plusieurs fois en cas d’annonces multiples, aussi, il est nettement mieux de placer en bas de page, dans le fichier footer.php de votre template, juste au dessus de la balise </body>, vous gagnerez largement en performance mais ce n’est pas assez. Au lieu de copier directement de code en bas de page, je vais vous proposer une alternative encore plus puissante. Voici le code que vous copierez :
<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>
<script data-ad-client="ca-pub-3xxxxxxxxxx" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-type="lazy"></script>Code pour le chargement différé
Le script à ajouter est assez simple. Il utilise un ensemble d’événements d’interaction de l’utilisateur pour déclencher le chargement des scripts Google Ads. Cette méthode garantit que les annonces ne ralentissent pas le chargement initial de la page.
Le rôle de `data-type= »lazy »`
Le script utilise l’attribut data-type="lazy" pour identifier les scripts et les iframes qui doivent être chargés de manière différée. Lorsqu’un événement d’interaction est détecté, le script remplace l’attribut data-src par src, déclenchant ainsi le chargement du script ou de l’iframe.
Tableau récapitulatif des étapes
| Étape | Action | Outil/Code utilisé |
|---|---|---|
| 1 | Optimisation du JavaScript | Autoptimize |
| 2 | Agrégation des fichiers JS | Autoptimize |
| 3 | Ajout du code pour le chargement différé | Script personnalisé |
À ne pas oublier : Tester, tester, tester
Avant de déployer ces changements sur votre site en direct, assurez-vous de tester leur efficacité en utilisant Google PageSpeed Insight. Un bon score est un indicateur que vous êtes sur la bonne voie, mais n’oubliez pas de surveiller les métriques clés comme le temps de chargement et le taux de conversion.
Considérations pour le suivi des performances
Suivre régulièrement les performances de votre site vous donnera une idée claire de l’efficacité de ces optimisations. Utilisez des outils tels que Google Analytics en plus de Google PageSpeed Insights pour une évaluation complète.
Éviter les problèmes de compatibilité
Soyez conscient des problèmes potentiels de compatibilité lors de l’ajout de nouveaux plugins ou scripts. Toujours tester ces éléments dans un environnement de développement avant de les déployer sur le site en production.
Le suivi constant est la clé
En fin de compte, l’optimisation d’un site Web est un processus continu. Les méthodes que vous employez aujourd’hui peuvent ne pas être aussi efficaces demain en raison des changements constants dans les algorithmes des moteurs de recherche et des technologies Web.
Gardez un œil sur les performances de votre site et n’hésitez pas à ajuster votre stratégie en conséquence. Une meilleure vitesse de site n’est pas seulement bénéfique pour le classement SEO, mais elle contribue également à une meilleure expérience utilisateur, ce qui peut conduire à des taux de conversion plus élevés et, finalement, à plus de revenus.
Optimiser un site pour la vitesse tout en utilisant Google Ads peut sembler une tâche ardue, mais avec les bonnes techniques et outils, c’est tout à fait réalisable. Les étapes évoquées dans cet article devraient vous mettre sur la bonne voie pour un site Web à la fois rapide et rentable.
