La performance d’un site web est un enjeu de marketing digital : sa vitesse, sa qualité technique et éditoriale, son design comme son accessibilité sont des facteurs clés de son référencement et de son potentiel de conversion. Mais pas seulement puisque le SEO répond aussi à des objectifs de responsabilité sociale et environnementale…

Répondez à vos enjeux SEO et RSE en optimisant la performance de votre site WordPress

L’optimisation de la performance d’un site web est une course de fond qui requiert méthode et régularité dans une approche SEO : cet investissement en gain de performance doit au final améliorer la vitesse, l’expérience, l’accessibilité et le référencement des pages du site internet.

> Discutons de votre projet de création de site web SEO ou d’optimisation de site internet : je vous accompagne sur la stratégie, le développement, les contenus et la rédaction optimisée pour le référencement naturel.

I. Qu’est-ce que la performance de site web ?

– Les points-clés de l’efficacité d’un site internet

1. Performances de site web, un enjeu SEO

La performance d’un site web est liée à la vitesse de téléchargement et d’affichage des pages web.

De nombreux éléments peuvent ralentir un site internet, sur desktop et sur mobile : 

• Des médias (images, vidéos…) trop lourds ou surdimensionnés (c’est un problème majeur sur la plupart des sites que j’audite) ;
• Un hébergement de mauvaise qualité, limité en bande passante ;
• Un thème WordPress techniquement mal conçu, trop lourd ;
• Des extensions inutiles, trop lourdes, trop gourmandes en ressources ou qui pèsent sur la base de données ;
• Des typos trop nombreuses, des versions d’écriture originales qui s’ajoutent aux polices système ;
• Une absence de mise en cache générant des requêtes inutiles ;
• Des ressources externes trop nombreuses sur le site (Google Maps, flux RSS et widgets social media…) ;
• Trop de redirections ou des erreurs 404 qui consomment du budget crawl inutilement, etc.

En matière de performance de site web, on peut ajouter à la vitesse des notions de référencement, de sécurité, de qualité et d’accessibilité :

• La qualité éditoriale et le balisage des contenus facilitent la compréhension du site par les robots et répondent aux recherches des internautes.
• Un site sécurisé, notamment avec le protocole https, est un gage de confiance pour Google comme pour les visiteurs du site.
• La qualité du code HTML, une bonne gestion des ressources CSS et JS, ainsi qu’un parcours fluide participent de la performance du site web.

Un site internet bien codé et conçu pour l’utilisateur, un site léger et ergonomique permet infine d’améliorer son trafic et ses positions sur les moteurs de recherche.

L’optimisation d’un site web est bien plus qu’un enjeu business : en améliorant ses performances, vous répondez également à des enjeux RSE !

2. Le SEO, un levier de performance RSE

• SEO et impact environnemental

Les techniques SEO d’optimisation de la performance telles que la réduction du poids des médias et des pages ou la limitation des requêtes au serveur, réduisent notre facture énergétique et notre empreinte environnementale : moins de traitements numériques, moins de crawl et de chargements inutiles, c’est bon pour la planète 😊

Si nos contenus sont optimisés pour le SEO (pour le référencement naturel sur les moteurs de recherche) et si nos textes sont de qualité, il y a alors plus de chances qu’ils soient bien positionnés dans les résultats de recherche et qu’ils répondent aux questions des internautes : cela veut dire aussi moins de recherches, moins de crawl et moins d’énergie !

• SEO et impact sociétal

Quand on parle de performance de site web, on parle aussi accessibilité :

• L’accessibilité des pages web lors du passage des robots pour indexation et lors de la visite des internautes pour consultation. L’arborescence du site et une construction ergonomique doivent faciliter la navigation et la lisibilité pour une bonne expérience utilisateur (UX). Les pages doivent renvoyer un code 201 ; le crawl et le parcours utilisateur ne doivent pas être empêchés par des codes erreurs du type 404.

La démarche SEO, dans une dimension inclusive, peut aussi prendre une orientation RSE avec la prise en compte de tous les publics, dont ceux en situation de handicap.

• L’accessibilité des pages web pour les personnes en situation de handicap (déficience visuelle, daltonisme, …)

Un numérique responsable et inclusif permet à chacun de pouvoir accéder à l’information en ligne, sans discrimination. Nous disposons, pour nous guider dans sa mise en œuvre, de normes et de références.

Les critères RGAA (Référentiel général d’amélioration de l’accessibilité, relevant d’une loi de 2005) s’ajoutent aux règles du W3C (World Wide Web Consortium) – l’Initiative sur l’Accessibilité du web (Web Accessibility Initiative) et les WCAG (Web Content Accessibility Guidelines) – ainsi qu’aux Core Web Vitals (indicateurs de l’expérience utilisateur, à l’initiative du moteur Google) pour accroître l’accessibilité des contenus en ligne.

Une meilleure accessibilité des contenus en ligne passe notamment par l’amélioration de la lisibilité, de la stabilité visuelle et du contraste sur tout support numérique.

Les règles SEO appellent des mesures d’optimisation, d’accessibilité et d’expérience, allant dans le sens d’une responsabilisation sociétale et d’un impact positif. La réduction des requêtes et la bonne gestion des ressources, comme l’optimisation de l’expérience utilisateur et l’accessibilité des contenus numériques (notamment au travers du design et du graphisme), sont des points-clés du référencement naturel.

II. Pourquoi optimiser la performance de son site web ?

1. Performances SEO-UX : des enjeux commerciaux

L’objectif de Google et consorts est d’améliorer sans cesse l’expérience utilisateur et les résultats des moteurs de recherche, toujours plus qualitatifs. La vitesse de chargement des pages web est un critère majeur du référencement naturel, surtout depuis la mise à jour de Google Core Web Vitals et Page Experience en 2021. La vitesse d’un site web doit ainsi être considérée, particulièrement sur mobile (avec l’index mobile first, l’expérience sur mobile prime sur la navigation desktop), pour répondre aux exigences des robots et des internautes et, en fin de compte, pour optimiser le référencement naturel et atteindre les premières positions des résultats de recherche.

Limiter le temps de chargement d’une page web à 3 secondes maximum réduit le taux de rebond, permet d’augmenter le trafic et de retenir plus facilement votre audience, de générer des conversions et des ventes.

– Réalisez votre audit de site en 5 points et passez à l’action pour améliorer vos performances et réduire votre temps de chargement.

L’intégration de technologies et de designs sophistiqués ont alourdi nos pages dont le poids ne fait qu’augmenter.  Et pas forcément pour un résultat efficient ou pertinent… Ne serait-il pas venu le temps de la transition vers une sobriété numérique ?

2. Impact socio-environnemental du SEO : des enjeux RSE

L’impact écologique. On l’a vu plus haut : plus un site web est performant, moins il impacte nos émissions de gaz à effet de serre. Alors que le numérique est responsable, dans le monde, de 4% des émissions de GES et que cette part est croissante, les créateurs de site ont un rôle à jouer !

L’impact social et le cadre réglementaire. L’accessibilité web, en particulier pour les personnes en situation de handicap, est essentielle dans le domaine public et rendue obligatoire, pour les organismes d’intérêt général et les grandes entreprises privées, depuis la loi accessibilité numérique de 2018. Afin de vérifier l’accès aux informations publiques ou de confirmer l’accessibilité d’un support numérique de façon générale, on peut s’appuyer sur le référentiel RGAA par lequel ont été établies des normes permettant de répondre au cahier des charges d’un numérique (plus) responsable. D’autre part, cette amélioration de l’accessibilité d’un site web permet d’élargir son audience et son trafic.

Nous avons vu comment les critères de performance SEO rejoignent les enjeux RSE en impactant le volet écologique (réduction de l’impact carbone) et sociétal (amélioration de l’accessibilité). L’éco-conception de site web s’inscrit aussi dans une démarche de responsabilité environnementale.

Voyons maintenant comment optimiser la performance d’un site internet pour améliorer la vitesse, l’expérience et l’accessibilité.

III. Comment optimiser la performance de votre site WordPress ?

#1. Compresser vos médias (images, vidéos, documents)

C’est l’un des points critiques causant la lenteur de nombreux sites web : le poids des ressources médias. La bibliothèque médias WordPress – constituée de visuels, vidéos ou pdf – peut, si elle n’est pas optimisée, considérablement ralentir un site.

• Redimensionnez vos images à la taille nécessaire (par exemple, inutile d’avoir une photo de 4000 px de large si 900px sont suffisants) ;
• Privilégiez les formats Jpg ou WebP ;
• Compressez tous les médias autant que possible sans rogner sur la qualité. Une page web ne devrait pas dépasser les 2 Mo.

Outils en ligne : CompressJpg – iLovePDF – TinyPng

Extensions WordPress : Imagify (pour compresser les images importées sur le site) – EWWW Image Optimizer (pour compresser, optimiser le poids des visuels ou différer le chargement des images).

#2. Compresser vos fichiers : combiner, minifier le code HTML, CSS, JS

Pour diminuer le poids de vos pages web et les charger plus rapidement, activez la minification et la concaténation des ressources HTML/CSS/JS. Il est possible de compresser des ressources avant leur transfert du serveur au navigateur, en modifiant le fichier htaccess.

Combiner les fichiers CSS et Javascript permet aussi de réduire les requêtes Http.

Pour minifier vos ressources et réduire leur poids, vous pouvez utiliser un plugin WordPress.

Extensions WordPress : WP Super Cache, W3 Total Cache, WP Rocket, WP-Optimize.

 >> Découvrez ma sélection de plugins SEO pour WordPress.

#3. Utiliser la mise en cache

Autre paramètre essentiel de votre performance en ligne : la mise en cache.

La mise en cache permet de conserver des éléments de page sur le navigateur du visiteur : une mémoire cache enregistre des copies de données du site temporairement, ceci afin de ne pas recharger inutilement des éléments statiques de page à chaque visite.

Les requêtes serveur sont ainsi réduites comme le volume de ressources utilisées, ce qui impacte le temps de chargement des pages web.

La mise en cache s’effectue soit par l’injection de code dans le fichier .htaccess, soit par l’utilisation d’un plugin WordPress.

Extensions WordPress pour activer le cache : WP Super Cache, W3 Total Cache, WP Rocket.

#4. Activer le « Lazy Loading »

Avec le lazy load, le chargement des images est différé : le visiteur visualise les éléments de page au fil du scroll. Une image en bas de page n’a pas besoin d’être chargée immédiatement ; ainsi les images sont téléchargées dans un second temps et affichées lorsque le visiteur fait défiler la page.

Ce chargement différé des ressources assure l’affichage au-dessus de la ligne de flottaison.

Activez le Lazy Loading via le paramétrage de votre thème WordPress ou grâce à un plugin de cache, tel que WP Rocket.

#5. Choisir un bon hébergeur

Un bon hébergeur va placer la performance au cœur de ses priorités : processeurs rapides, un tableau de bord complet avec des outils d’amélioration, des options de personnalisation du serveur mutualisé, un large choix de centres des données, des mesures de sécurité…

Hébergeurs : O2Switch, PlanetHoster , WPServeur , WP Engine , Hostinger

– Activer PHP7 sur votre hébergement

Utilisez idéalement la dernière version PHP, le langage de programmation de WordPress, pour améliorer la vitesse de votre site. Rendez-vous côté hébergeur (par exemple, O2Switch) et accédez à votre interface d’administration pour effectuer vos réglages et upgrader PHP. Pensez à faire des sauvegardes de vos données avant toute manipulation !

#6. Utiliser un CDN

En recourant à un CDN (Content Delivery Network), vous libérez de la bande passante en hébergeant vos fichiers sur un réseau de différents serveurs localisés aux quatre coins du monde. Si un visiteur consulte votre site web d’un pays étranger, son navigateur téléchargera les ressources (images, vidéos…) depuis le serveur le plus proche de chez lui. Ainsi vous améliorez le temps de chargement des pages web ! L’utilisation du CDN est idéal pour un site ayant un objectif de trafic international.

#7. Paramétrer et mettre à jour ses extensions/plugins

Mal configurer une extension peut consommer des ressources inutilement : paramétrez ses fonctionnalités selon vos besoins, pour limiter le traitement d’informations et le stockage de données.

Chaque extension comporte un certain nombre de fichiers ; elle enrichit (et charge) la base de données d’informations qu’il peut être bon de gérer et de supprimer.

Supprimez aussi les extensions inutiles, comme les plugins inactifs sous WordPress. Interrogez-vous sur l’intérêt des plugins inutilisés. Si possible, utilisez un plugin complet pour répondre à vos divers besoins, plutôt que plusieurs plugins consommateurs de ressources.

Actualisez vos extensions : les mises à jour améliorent généralement les performances du site internet.

#8. Optimiser, compresser, limiter les polices d’écriture

• Optimiser le poids de vos polices web

Les polices web ne sont pas pré-installées et doivent être téléchargées par le navigateur du visiteur du site, contrairement aux polices sécurisées pour le Web (web-safe). Souvent hébergées chez Google Fonts ou Adobe Fonts, elles génèrent aussi des requêtes et ralentissent l’affichage des pages. Ces ressources externes impactent naturellement la vitesse du site.

Si vous choisissez de conserver ces polices web, vous pouvez optimiser leur chargement :

• Soit en intégrant directement ces polices dans le thème WordPress
• Soit en utilisant un plugin WordPress, tel que Google Fonts for WordPress, pour ajouter des polices Google au site et réduire les requêtes externes.

• Préférez des polices sécurisées pour le Web (web-safe)

Ces polices courantes (Arial, Courier New, Helvetica, Calibri, Times New Roman…) sont pré-installées sur nos périphériques : l’internaute n’a pas besoin de les télécharger. Par conséquent, elles génèrent moins de requêtes, requièrent moins de ressources et contribuent à accélérer le chargement des pages web.

D’après les Designers Ethiques, « En 2022, le poids moyen d’une police web représente 138 Ko, soit 6% du poids de la page. C’est plus du double du poids moyen des polices en 2010. »

Préférez les polices préinstallées sur les terminaux pour réduire votre impact carbone.

Cet ensemble de polices, appelé System font, est mis en cache par les navigateurs : ainsi il n’y a pas de requête inutile pour récupérer une ressource externe ; le site charge la police du navigateur, par défaut.

Le choix de polices web-safe est un critère d’eco-conception et un choix de sobriété numérique.

[Note pour un Numérique Responsable] Privilégiez des polices standards à des fins d’accessibilité

Les polices standards linéales (sans serif) sont recommandées pour des raisons d’accessibilité : en opposition aux polices cursives ou manuscrites, qui sont difficiles à lire pour des personnes en situation de handicap.

#9. Nettoyer la base de données

Faire le ménage dans sa base de données est une bonne pratique pour réduire sa consommation de ressources. Les révisions de pages, les brouillons d’articles comme les extensions inutilisées encombrent la base de données (WordPress conserve l’historique et les anciennes versions).

• • Utilisez un plugin WordPress tel que WP-Optimize pour optimiser les tables de la base de données.
  • Limitez la sauvegarde des révisions d’articles en modifiant le fichier wp-config.php de votre site. Par exemple, pour un maximum de 2 révisions par article, on ajoute le code suivant :  define(‘WP_POST_REVISIONS’, 2 );

#10. Optimiser son netlinking

Une arborescence et un maillage de liens mal conçus peuvent impacter les performances d’un site web en consommant du budget crawl et des ressources inutilement.

Le temps de passage des robots est limité, évitons de le gaspiller.

• En réparant les liens cassés : en corrigeant les erreurs 404, on optimise la ressource et on améliore l’expérience utilisateur.
• En réduisant le nombre de redirections, on peut améliorer la vitesse d’un site tout en réduisant l’impact environnemental !

L’autre point-clé de la performance, c’est l’accessibilité, facteur d’expérience optimale pour tous.

IV. Comment renforcer la performance de site web du point de vue de l’accessibilité (pour un numérique responsable) ?

Nous pouvons améliorer l’accessibilité de nos supports numériques en adaptant nos sites web aux handicaps et aux besoins des personnes déficientes visuelles, par l’application de normes d’accessibilité précisées dans le RGAA :

• L’ajout d’une alternative textuelle aux images pour mieux les décrypter
• Un contraste élevé entre la couleur du texte et la couleur de son arrière-plan
• Des polices lisibles : les polices standards du navigateur requièrent moins de requêtes, moins d’énergie et permettent d’optimiser la vitesse de chargement d’une page
• Des boutons assez grands pour être cliquables : un design ergonomique et des CTA (Call To Action) visibles améliorent l’accessibilité web et l’expérience utilisateur de façon générale
• La transcription textuelle ou une audiodescription de chaque media : dans la même logique que l’optimisation du référencement naturel, la description des médias (images, vidéos, documents…) est un prérequis de l’accessibilité et permet la compréhension du support numérique par les robots comme par les personnes en situation de handicap !
• Des scripts compatibles avec les technologies d’assistance
• Des labels sur les formulaires, des attributs ARIA
• Un titre de page et un attribut ALT (des règles appliquées en SEO !) , etc.

• Extensions WordPress: One Click Accessibility, WP Accessibility, AccessiBe

• Des outils en ligne qui permettent de vérifier le contraste des couleurs et de valider la lisibilité du contenu en cas de déficience visuelle ou daltonisme :
  

1. Contrast Ratio
   
2. Adobe color
   
3. Contrast Finder
   

Ces outils indiquent les bons contrastes de couleurs, selon les directives d’accessibilité du contenu Web (WCAG ou Web Content Accessibility Guidelines en anglais) et selon le niveau d’accessibilité souhaité (AA ou AAA).

Avec Contrast Finder on détermine un ratio (trois valeurs possibles : 3, 4.5 et 7), selon le niveau d’accessibilité souhaité : AA ou AAA. Le score d’accessibilité obtenu dépend du niveau de contraste des couleurs, de la taille et de la graisse (ou pas) du texte.

Pour conclure…

Nous avons vu comment l’optimisation des ressources techniques pouvait augmenter la vitesse de chargement d’un site. Ces points d’optimisation répondent également à des nécessités écologiques et s’appuient sur des règles d’éco-conception, à savoir :

• La réduction du nombre de requêtes et du traitement d’informations
• La limitation des données échangées en ligne
• La diminution du volume et du poids des ressources hébergées
• L’arbitrage entre design – SEO/UX et sobriété
  

Le critère d’accessibilité est aussi fondamental, pour un web éthique et responsable !