Les bannières de cookies sont essentielles pour se conformer aux lois sur la protection de la vie privée. Il existe de nombreuses façons d'installer une bannière de cookies sur votre site WordPress, mais toutes ne sont pas optimales en termes de performances.
Dans ce guide, je vous montrerai comment publier une bannière de cookies et optimiser les performances de votre site WordPress en utilisant Termly et WP Rocket.
Principaux éléments d'une bannière de cookies conforme
Plusieurs lois sur la protection de la vie privée - comme le règlement général sur la protection des données (RGPD) et le California Consumer Privacy Act(CCPA)- exigent des entreprises qu'elles soient transparentes quant à l'utilisation des cookies sur leur site web et qu'elles permettent aux utilisateurs de les accepter ou de les refuser.
Selon le lieu de résidence de vos utilisateurs, vous devrez peut-être vous conformer à une ou plusieurs lois sur la protection de la vie privée qui régissent l'utilisation des cookies et des bannières de cookies.
Une bannière de cookies conforme devrait :
- Demander l'autorisation de l'utilisateur avant de stocker des cookies sur son appareil, avec un bouton d'appel à l'action clair pour obtenir le consentement.
- Fournir des informations détaillées sur la manière dont les cookies sont utilisés et sur les raisons pour lesquelles ils le sont.
- Inclure un lien vers la politique de cookies du site web, qui doit également informer les utilisateurs de leurs droits en matière de cookies Internet.
- Lien vers les paramètres de préférence en matière de cookies, permettant aux utilisateurs d'ajuster leurs choix en matière de cookies ou de se désengager, avec des instructions claires sur la manière de procéder.
Voici un exemple réel de bannière de cookies générée par Termly.
Comprendre les bannières de cookies et Core Web Vitals
Bien qu'elles soient nécessaires pour assurer la conformité, les bannières de cookies peuvent parfois affecter les "Core Web Vitals" de votre site web - des mesures que Google utilise pour évaluer l'expérience de l'utilisateur et les performances de la page, et qui se concentrent sur trois aspects clés :
- Le Largest Contentful Paint (LCP) indique la vitesse à laquelle l'élément de contenu le plus volumineux devient visible sur l'écran de l'utilisateur.
- Le tableau Interaction to Next Paint (INP) calcule le temps qui s'écoule entre chaque action, telle qu'un tapotement ou un clic, et le moment où une réponse à cette action apparaît à l'écran.
- Le décalage cumulatif de la mise en page (CLS) évalue la stabilité de la mise en page et vérifie s'il y a un décalage soudain de la mise en page au cours des cinq premières secondes.
Problèmes de performance courants
L'un des problèmes de performance les plus courants avec tout script que vous ajoutez à votre site - comme une bannière de cookies - est l'impact qu'il a sur la vitesse de chargement de la page.
Lighthouse (l'outil qui mesure Core Web Vitals) peut également signaler la bannière de cookies comme faisant partie du Largest Contentful Paint (LCP).
Adame Dahmani, chef de produit chez WP Rocket, explique :
"Si la bannière de consentement est le plus grand élément visible lors du chargement initial, elle devient l'élément LCP, ce qui a un impact sur les performances, même si elle se charge en dernier. Dans certains cas particuliers, elle peut être signalée comme LCP alors qu'elle n'est pas l'élément le plus volumineux en raison de la manière dont elle a été ajoutée. Dans ce cas, il est difficile, mais possible, de remédier au problème de performance".
Il ajoute : "Le fait d'indiquer que la bannière est l'élément LCP semble être une anomalie : "L'identification de la bannière comme élément LCP semble être une anomalie. Quelle que soit sa taille, elle ne rend pas le contenu de la page moins pertinent. Le contenu est accessible avec ou sans consentement, à l'exception des éléments intégrés par des tiers avec des traceurs".
Comment optimiser votre bannière de cookies avec WP Rocket et Termly
Vous pouvez minimiser l'impact d'une bannière de cookies sur les performances de votre site WordPress en combinant deux solutions puissantes : Termly et WP Rocket.
Avec WP Rocket optimisant la vitesse et Termly fournissant votre bannière de cookies, vous obtenez le meilleur des deux mondes : un site Web conforme qui reste rapide avec des Vitaux Web de base dans le vert.
Pourquoi un Termly?
Le gestionnaire deconsentement aux cookies de Termlyest le moyen le plus simple d'ajouter une bannière de cookies à votre site et d'obtenir le consentement de vos utilisateurs.
Vous pouvez configurer votre bannière pour qu'elle soit conforme aux lois qui s'appliquent à vous et qu'elle ne s'affiche que dans les régions où elle est nécessaire. Termly offre également de nombreuses autres fonctionnalités telles que la localisation des langues, des options de conception de bannières adaptées à votre site, des journaux de consentement, et bien plus encore.
Pour les entreprises utilisant WordPress, Termly propose un plugin qui simplifie l'ajout d'une bannière de cookies conforme à votre site WP.
Pourquoi WP Rocket?
Vous devez trouver un moyen de minimiser l'impact des scripts sur votre site afin d'éviter les problèmes de performance.
C'est là que le pluginWP Rocket entre en jeu !
Dès l'activation, WP Rocket améliore les performances de votre site et de votre Core Web Vitals en appliquant 80% des meilleures pratiques en matière de performances.
Les fonctions de performance automatisées de WP Rocketincluent
- Mise en cache
- Compression GZIP
- Rendu paresseux automatique
- Optimisation critique de l'image
- Minification CSS et JavaScript
Ces paramètres par défaut permettent de réduire le travail du thread principal et d'accélérer le chargement des fichiers JS, ce qui permet aux optimisations critiques de fonctionner dès le départ.
En outre, vous pouvez facilement activer des fonctions d'optimisation supplémentaires telles que le retardement et le report de JavaScript, ce qui est très pratique pour un site web utilisant une bannière de cookies basée sur JS et qui prolongera l'effort de réduction et d'optimisation de l'utilisation du fil d'Ariane principal.
WP Rocket s'assure que les sites WordPress maintiennent une haute performance et n'affectent pas négativement l'expérience de l'utilisateur ou Core Web Vitals.
Maintenant que vous savez quelles solutions nous allons utiliser, commençons par mettre en place votre bannière de cookies depuis Termly et configurer WP Rocket pour une performance maximale.
Un guide d'installation rapide et facile (+ test de performance)
Dans cette section, je vous guiderai pas à pas pour ajouter une bannière de consentement aux cookies avec Termly, puis j'installerai et configurerai WP Rocket pour affiner l'optimisation.
Étape 1 : Mise en place d'une bannière de consentement aux cookies avec Termly
1. Dans votre tableau de bord WordPress, allez dans Plugins > Ajouter un nouveau.
2. Rechercher "Termly" et cliquez sur Installer maintenantalors Activer le plugin.
3. Une fois installé, un Termly apparaîtra dans la barre de menu de WordPress. Cliquez dessus.
4. Scénario 1 : Vous avez déjà un compte Termly .
- Il vous suffit de vous connecter à votre compte Termly en utilisant votre clé API. (Dans votre tableau de bord Termly , sous Paramètres).
5. Scénario 2 : Vous n'avez pas de compte Termly .
- Cliquez sur S'inscrire et obtenir une clé API et suivez les instructions pour en créer une.
6. Après avoir saisi votre clé API, ouvrez le sous-menu Analyse du site et cliquez sur Analyser maintenant pour détecter les cookies sur votre site web.
7. Allez dans Gestion des cookies pour ajouter ou modifier vos cookies et catégories.
8. Allez dans les paramètres de la bannière pour activer ou désactiver la bannière de consentement sur votre site à l'aide de la bascule située dans la barre latérale droite.
Pour personnaliser la bannière de consentement, cliquez sur le bouton Personnaliser la bannière. Vous accéderez au tableau de bord intuitif de Termly .
Ci-dessous, vous pouvez voir à quoi ressemblent les paramètres de la bannière de contenu et le personnalisateur :
À partir de là, vous pouvez choisir le style d'affichage des couleurs (par exemple, pop-up ou bannière) et décider du bouton à inclure.
9. Allez dans Politiques pour générer gratuitement des documents juridiques et des politiques par Termly. (Comme cela ne peut pas être fait directement par WordPress, cliquez sur le bouton Gérer pour accéder au tableau de bord externe de Termly ).
Ci-dessous, vous pouvez voir à quoi ressemble le Générateur automatique depolitique de cookies dans le tableau de bord de Termly :
Votre bannière Termly consentement aux cookies est maintenant en ligne et prête à vous aider à vous conformer à la réglementation sur les cookies.
Étape 2 : Configurer WP Rocket pour une performance maximale
Avec WP Rocket, je peux améliorer les performances pour une meilleure expérience utilisateur.
Dans ce scénario, et conformément aux recommandations de PageSpeed Insights, WP Rocket aidera à éliminer les ressources bloquant le rendu, à mettre en place une mise en cache, à améliorer Largest Contentful Paint (un Core Web Vital), et à optimiser l'exécution de JavaScript.
Voici les fonctionnalités de WP Rocket que je vais utiliser pour améliorer mon Core Web Vitals et l'audit PageSpeed Insights :
- Minify JavaScript - Il supprime les caractères, commentaires et espaces inutiles des fichiers JavaScript, réduisant ainsi la taille du fichier pour un chargement plus rapide. Cette fonctionnalité est automatiquement activée lorsque vous activez WP Rocket.
- Charger JavaScript en différé - Cette option retarde le chargement des fichiers JavaScript jusqu'à ce que le contenu principal de la page soit chargé, ce qui permet aux visiteurs de voir le site plus rapidement. Cela évite que des fichiers JavaScript lourds ne bloquent le contenu le plus important.
- Retarder l'exécution de JavaScript - Cette option permet de retarder l'exécution des fichiers JavaScript jusqu'à l'interaction de l'utilisateur (par exemple, en cliquant sur le bouton " bannière de cookies ").
Et le meilleur ? Vous n'avez pas besoin de toucher manuellement au JavaScript.
Il suffit d'installer le pluginWP Rocket , d'aller dans Réglages > WP Rocket > Optimisation des fichiers, et d'activer toutes les fonctions d'optimisation JavaScript en un seul clic.
Principales performances et informations essentielles sur le Web
Maintenant que mon site est optimisé avec WP Rocket, regardons les résultats du test de performance :
Voici comment Adame Dahmani explique les résultats :
"Les fonctionnalités deWP Rocketpermettent au navigateur de donner la priorité aux éléments critiques, accélérant ainsi l'achèvement visuel du contenu au-dessus du pli. En réduisant le traitement du code et en reportant les éléments non critiques, WP Rocket libère le fil principal pour les tâches essentielles, telles que l'exécution du script de Termly. Cette optimisation est directement observable dans les captures d'écran des bandes de film, où la bannière de conformité apparaît tôt dans le processus de chargement de la page, comme indiqué ci-dessous :"
6 conseils sur la performance des sites web
Si vous souhaitez conserver un site rapide et une bonne vitalité Web, voici six techniques de performance que vous pouvez appliquer :
1. Optimisez la diffusion de votre CSS
Assurez-vous que les fichiers CSS sont chargés efficacement en intégrant les CSS critiques ou en reportant les styles non essentiels pour accélérer le rendu de la page. Le moyen le plus simple de supprimer les feuilles de style CSS inutilisées sans toucher au code est d'utiliser WP Rocket, qui propose une fonction en un clic.
2. Optimisez vos images
Compressez les images sans compromettre la qualité et utilisez des formats de nouvelle génération (comme WebP ou AVIF) pour un chargement plus rapide. Le moyen le plus simple et le plus rapide d'optimiser les images sans en altérer la qualité consiste à utiliser un plugin d'optimisation d'images tel que Imagify.
3. Utiliser un CDN (Content Delivery Network)
Un CDN stocke des copies des fichiers statiques de votre site web à plusieurs endroits dans le monde, ce qui réduit le temps de réponse du serveur et accélère la diffusion du contenu aux visiteurs.
4. Utiliser un hébergeur fiable, rapide et géré par WordPress
Choisissez un hébergeur spécialisé dans WordPress et offrant des performances optimisées, afin que votre site se charge rapidement et fonctionne sans problème.
5. Utiliser un thème WordPress léger
Optez pour des thèmes WordPress rapides et optimisés pour les performances, en évitant les options surchargées et gourmandes en ressources qui ralentissent votre site.
6. Utiliser Termly et WP Rocket
Combinez Termly pour la conformité et WP Rocket pour l'optimisation des performances afin d'obtenir de meilleurs scores sur PageSpeed Insights, de maintenir Core Web Vitals dans la zone verte et d'avoir un site web respectueux de la vie privée !
Résumé
Termly est plus qu'un simple plugin de bannière de consentement aux cookies - c'est une solution tout-en-un de respect de la vie privée pour les sites web et les applications. Il vous aide à vous conformer aux lois sur la protection de la vie privée comme le RGPD, le CCPA, et plus encore. Avec des modèles pré-faits créés par des avocats et des experts juridiques, Termly s'assure que vos politiques et votre gestion des consentements sont légalement solides.
Mais la conformité n'est qu'une partie de l'équation !
Pour offrir aux visiteurs la meilleure expérience possible, veillez à ce que votre site se charge rapidement grâce à un code optimisé. Un plugin d'optimisation des performances comme WP Rocket peut vous aider à accélérer votre site et à améliorer le Core Web Vitals sans que vous ayez à toucher au code.
L'association du respect de la vie privée et d'une performance de premier ordre créera une expérience sécurisée et digne de confiance pour les visiteurs.
En savoir plus sur l'auteur
Écrit par Marine Larmier
Marine a six ans d'expérience dans la rédaction et la production de contenus riches dans l'écosystème WordPress. Elle a travaillé à distance pendant quatre ans chez WPML tout en voyageant à travers le monde. Basée entre la France et la Nouvelle-Zélande, elle aime les voyages, le yoga, les couchers de soleil et les cuisines du monde.
En savoir plus sur l'auteur
Révisé par Adame Dahmani Chef de produit
