6 bonnes pratiques pour un site WordPress éco-conçu
Dernière mise à jour :
22/10/2024
Je ne vous apprends rien : la réduction de notre empreinte carbone est l’un des enjeux majeurs de notre siècle.
Le numérique 2,5% de l'empreinte carbone mondiale. Si internet était un pays, il serait le 3e plus gros consommateur d’électricité mondial.
On dit souvent “créer son site nécessite peu ou pas de connaissances du web”… C’est bien sûr possible sans être expert du sujet. Cependant, j’ai trop souvent vu se répéter les mêmes erreurs qui finissent par coûter cher, non seulement littéralement, mais aussi en termes d’impact environnemental.
Ainsi, on se retrouve avec une myriade de sites lents, non responsive, avec beaucoup d’extensions superflues et donc : qui utilisent beaucoup trop de ressources pour rien.
Donc voici quelques conseils et bonnes pratiques pour un site éco-conçu.
1. Prenez le temps de la réflexion
Beaucoup de porteurs de projets qui viennent vers moi souhaitent un site, sans plus avoir poussé la réflexion.
Certes, je suis là pour vous aider, cependant je ne peux choisir pour vous l’identité de votre marque, choisir le ton et rédiger tout votre contenu… Tout en n’ayant pour seule indication “Merci de veiller à ce que le site soit esthétiquement agréable” (oui, oui, on m’a vraiment donné cette seule indication un jour…).
Créer un site web est un projet en soi. La réflexion en amont est donc indispensable. Posez-vous des questions comme :
- Quel est mon marché ? - Quelle est ma cible ? - Comment mes concurrents ont inséré leur site dans leur funnel de vente ? - Quels sont mes objectifs pour ce site ? - Que chercheront mes futurs utilisateurs sur mon site ? - Quelles pages je souhaite créer ? Quel contenu ? - Quel parcours utilisateur je dois mettre en place pour le mener où je souhaite ? (à l’achat, à effectuer un don, à me contacter, à s’abonner à ma newsletter, à télécharger mes e-book ?…)
Plus votre projet de site sera approfondi et concret, plus vous connaitrez les fonctionnalités incontournables qu’il vous faudra.
Vous éviterez ainsi d’installer des plugins superflus, de créer des pages pour ensuite les supprimer, d’importer des images qu’au final, vous n’utiliserez pas, d’acheter un page builder dont vous n’utiliserez qu’1% des capacités, etc.
Idéalement, il s’agirait de créer une maquette de votre site avant tout travail sur WordPress. Que ce soit avec un outil en ligne (type Figma, PenPot) ou simplement avec une feuille et un stylo, cela vous permet d’avoir une idée plus concrète du projet et si oui ou non, vous devez faire appel à un prestataire spécialisé.
2. Un design minimaliste
Un design minimaliste privilégie la simplicité, ce qui réduit la quantité de ressources nécessaires pour charger les pages. Moins d'éléments visuels et fonctionnels signifient moins de demandes serveur, donc une consommation d'énergie réduite.
De plus, vous serez dans la tendance actuelle qui se veut justement minimaliste.
1- Le choix des polices
Moins vous aurez de polices différentes, mieux ce sera (less is better). Vous pouvez par exemple avoir une police pour les titres, une autre pour le reste.
Des sites comme FontJoy ou Fontpair sont parfaits pour tester l’association de différentes polices.
Privilégiez aussi les polices déjà disponibles dans le navigateur. Cela permet d’éviter de pousser le navigateur du client à télécharger des fichiers supplémentaires.
Unes fois vos polices sélectionnées, recherchez-la sur Google Font pour voir si elle est disponible dans le navigateur ou non.
2- Limitez le nombre de couleurs
Choisissez par exemple 1 couleur principale et restez sur des couleurs neutres (blanc, noir) comme couleur secondaire.
Bref, comme les polices, less is better : limitez-vous à 3-4 couleurs (et ses variantes) maximum.
Beaucoup de générateurs de palettes en ligne existent pour vous simplifier la vie comme Coolors.co, MyColor.space, fffuel
3- Évitez les animations superflues
Limitez l'utilisation d'animations complexes et de scripts JavaScript, qui peuvent ralentir le chargement des pages.
Posez-vous la question : est-ce réellement pertinent pour atteindre mes objectifs ? Si oui, utilisez des transitions CSS simples plutôt que des animations JavaScript coûteuses.
4- Privilégiez les icons aux images quand c’est possible
Les icons étant naturellement plus légers que les images.
3. Choisir un hébergeur
Bien sélectionner les serveurs sur lesquels seront stockés les données de votre site est très important.
Il s’agit donc de se poser les bonnes questions avant de choisir son hébergeur :
- Fournit-il des indicateurs d'impacts environnementaux liés à son activité ? - Quelle est l’origine de l’électricité qu’il utilise ? (ie énergies renouvelables) - La localisation de ses serveurs est-elle proche de mes utilisateurs actuels ? - L’hébergeur propose-t-il une solution de cache dans son offre ?
De plus, il existe plusieurs labels et certifications pouvant attester qu’un hébergeur soit plus ou moins “vert” :
- EU Code of Conduct for Data Centres : Encourage et guide les opérateurs de centres de données à réduire leur consommation d'énergie ; - ISO 14001 : norme internationale pour les systèmes de management environnemental. - ISO 50001 : norme pour les systèmes de gestion de l'énergie ; - Energy Star : programme de certification pour l'efficacité énergétique des équipements ; - Green Cloud Provider Certification : spécifique aux fournisseurs de services cloud, cette certification valide les pratiques écologiques.
4. Page Builder tiers ou Gutemberg ?
Les page builders sont des outils qui facilitent la création de pages web sans nécessiter de compétences en codage.
L'éditeur de blocs natif de WordPress, appelé Gutenberg, est conçu pour être léger et rapide. Couplé à un thème léger et optimisé, il est la solution la moins énergivore pour un site web.
Utiliser Gutenberg permet d’éviter d’ajouter une couche supplémentaire de code souvent introduite par les page builder tiers.
Cependant, beaucoup font le choix d’utiliser des page builder tiers. Ils disposent de beaucoup d’avantages non négligeables par rapport à l’éditeur de blocs :
- Leur grande collection de templates permet de déployer un site rapidement sans trop se casser la tête sur l’aspect responsive ou design ; - Ils permettent de personnaliser beaucoup plus de paramètres d’un élément (toujours en No code) ; - Leur interface est plus agréable et ergonomique (ce dernier point est totalement personnel).
Bien que rajoutant une couche supplémentaire de code, il est tout de même possible d’obtenir d’excellents résultats en termes d’impact environnemental. Cependant, au même titre qu’un hébergeur, il est nécessaire de bien le choisir.
Ne voulant pas rentrer dans le fameux débat sans fin Divi Vs Elementor Vs que sais-je, je vais me contenter d’évoquer mon préféré et qui, selon mon expérience, est le meilleur en termes de performances : Oxygen.
Oxygen Builder
Ses avantages :
Déjà le prix : pas de système d’abonnement.
On ne le paye qu’une seule fois, pour un nombre illimité de sites. 149$ maximum (en fonction de vos besoins). Certes, cela peut sembler cher dit comme ça, mais en comparaison à la concurrence, je trouve que c’est le meilleur rapport qualité / prix à mon sens.
Un code propre
Certains page builder très connus génèrent énormément de div imbriquées non nécessaires, ce qui augmente l’énergie nécessaire pour générer vos pages. Bien qu’officiellement, cela n’impacte pas le SEO, Lighthouse (l’outil de mesure de la performance de Google) teste et met aussi en garde contre un trop grand “DOM”.
Seule les Google Fonts sont disponibles
Autrement dit, Oxygen force l'utilisation des polices disponibles dans le navigateur, réduisant ainsi le nombre de fichiers de polices qui doivent être téléchargés pour afficher votre site.
Il écrase totalement le thème.
C’est dans Oxygen que tout se passe. L’installation d’un thème étant obligatoire, vous pouvez installer celui qui est le plus léger du marché pour éviter qu’il ne prenne trop de place sur votre site et ne plus vous en occuper par la suite !
Ses Inconvénients :
Interface uniquement disponible en Anglais
Chose qui peut poser problème pour les “Franco-français”. Cependant, si on s’en sort un minimum en Anglais, à mon sens ce problème est rapidement résolu.
La prise en main pour les absolus débutants
Comme tout page builder, Oxygen permet une grande personnalisation des blocs pré-construits. Cependant, pour une totale prise en main, des bases en CSS sont nécessaires. Sans aller jusqu’à être un expert CSS, savoir ce que sont les class et les div est un requis nécessaire.
5. Compressez vos images
Les images et vidéos non compressées peuvent considérablement ralentir un site web et augmenter sa consommation de bande passante. La compression permet de réduire la taille des fichiers tout en conservant une qualité acceptable.
2 éléments sont à prendre en compte : la dimension et le format.
1- La dimension
La dimension d’une image est tout simplement sa taille, exprimée en pixel, longueur x largeur.
Il faut savoir que la résolution moyenne d’un écran de bureau correspond à 1920 px (en largeur). Avoir des images de plus de 2000px est donc inutile pour un site web.
La plupart des images d’un site n’étant pas utilisé en plein écran, se limiter à une taille de 600px peut largement être suffisant dans la plupart des cas.
2- Le format
Il en existe beaucoup, mais certains sont plus connus que d’autres :
- Le JPEG : il est l’un des formats d’image numérique les plus populaires et les plus largement utilisés. Cependant, aujourd’hui, il n’est plus le choix le plus adapté pour le web. - Le PNG : utilisé pour les images en haute résolution, son intérêt est surtout pour les images avec des zones transparentes (contrairement au JPEG qui ne le prend pas en compte). Il n’est pas adapté pour le web : ce format reste beaucoup trop lourd pour une telle utilisation. - Le SVG : format pour les images vectorielles (illustrations, icon, logo…), il permet de redimensionner les images sans perte de qualité. - Le WEBP : développé par Google, il est le format par excellence pour le web car très léger et adapté aux images avec de la transparence. C’est LE format à privilégier si vous souhaitez réduire au maximum le poids de vos images.
Il existe beaucoup de plugin pour compresser vos images (Imagify, Smush…), mais je n’en recommanderai aucun. Certes, cela peut sembler la solution facile et rapide.
Cependant, non seulement ça vous fait installer un plugin supplémentaire, mais surtout, l’image originale est tout de même stockée sur votre site. Vous utilisez donc des ressources supplémentaires que vous pourriez éviter.
Mon conseil : convertissez systématiquement vos images avant de les ajouter sur votre site. Cela vous rajoute certes une étape dans la conception de votre site web, mais ça vous assure de ne pas gaspiller de ressources inutilement. De nombreux outils en lignes existent, dont : - FreeConvert, dont la version gratuite vous permet de convertir 30 fichiers par jours ; - TinyPNG, qui vous permet d’en compresser 20 en même temps.
Un site web est comme une maison : il faut le garder un minimum propre. → Vous avez des extensions que vous n’utilisez pas ? → D'anciennes photos plus en ligne depuis 1873 ? → Plusieurs thèmes inactifs que vous gardez en “back-up” (oui oui, on m'a déjà dit ça…) ? SUP-PRIMEZ TOUT !
Qui dit extension, dit stockage, dit ressources utilisées, dans ce cas, inutilement.
53% des gaz à effet de serre du numérique sont générés par les data center et infrastructures réseaux.
Nettoyer la base de données
Une base de données encombrée et des fichiers inutiles peuvent ralentir le site et consommer des ressources serveur. Il est important de supprimer régulièrement les éléments obsolètes pour maintenir des performances optimales.
Beaucoup d’informations peuvent être automatiquement stockées dans la base de données sans qu’on ne s’en rende compte.
Par exemple, chez certains hébergeurs, les tentatives de connexion à votre site web sont toutes stockées directement sur votre base de données.
C’est ainsi que chez l’un de mes clients, je me suis retrouvée avec une table de plus de 40 000 lignes de données qui avaient complètement saturé l’espace de stockage qu’il avait (le nettoyage a divisé par 2 son temps de chargement, en passant).
Il est donc important de faire un tour sur sa base de données de temps à autre pour contrôler ce qui est stocké, et nettoyer ce qui peut être supprimé.
Bonus : évaluer l’impact environnemental de son site
Que ce soit en amont de la démarche d’éco-conception ou une fois ces règles appliquées, un certain nombre d’outils en ligne vous permettent de tester l’impact de votre site.
-Page Speed Insight : le plus connu des outils de test (créé par Google), il vous permet de tester les performances, le SEO et l’accessibilité de votre site. - GT Metrics: il fait la même chose que l'outil de Google, mais l'analyse sera plus poussée encore - GreenIT-Analysis : extension vous permettant de tester les performances de n’importe quel site - Ecoindex : il donne une “note” environnemental de votre site, les bonnes pratiques et les axes d’amélioration. Il vous permet aussi d’insérer cette note sur votre site via un script.
Ecoindex sera moins précis en termes d’axes d’amélioration techniques à effectuer. A contrario, les 3 autres peuvent se révéler “trop” techniques en cas de gros problèmes pour des non-initiés (il va falloir lire des articles pour comprendre…)
Ces bonnes pratiques sont assez basiques et ne sont pas si complexes à mettre en œuvre. Elles sont plus de l’ordre du bon sens.
Elles servent non seulement à diminuer votre empreinte carbone, mais aussi votre business, vu qu’elles permettent aussi d’optimiser votre référencement naturel (SEO).
Ce site utilise des cookies nécessaires à son bon fonctionnement. Vous pouvez les accepter tous ou cliquer sur “en savoir plus” pour choisir les cookies que vous acceptez ou non.
Lire les politique de confidentialité
Nos cookies
Voici la liste des cookies nécessaires au bon fonctionnement du site, vous ne pouvez pas les désactiver, mais nous devons vous les indiquer.
Google Analytics
?
Nous permet d'analyser les statistiques de consultation de notre site
Nos cookies
Sur ce site, nous faisons usage de cookies dans le but d'analyser notre trafic et de maintenir une relation de qualité avec vous. Vous avez la possibilité de choisir ici ceux que vous acceptez de conserver.
