Les bonnes pratiques à suivre pour un site web écoresposable

De nombreuses bonnes pratiques sont à respecter pour rendre votre site écoresponsable.

Dans cet article, vous trouverez les 21 principales recommandations (parmi plus de 115) élaborées par le collectif Green IT et disponibles sur le site ecoindex.fr.

Si vous n’êtes pas développeur ou n’avez que peu de connaissances techniques, il est tout de même intéressant de prendre connaissance de ces fondamentaux, ne serait-ce que pour pouvoir poser quelques questions ou établir un roadmap avec vos équipes ou votre agence.

En appliquant ces progressivement ces principes, votre site deviendra de plus en plus écoresponsable, c'est le cas pour cet article que vous lisez, qui ne génère que 1,15 g CO2, avec un score Ecoindex de A.

Ajouter des expires ou cache-control headers

Les en-têtes Expires et Cache-Control déterminent la durée pendant laquelle un navigateur doit conserver une ressource dans son cache. Vous devez donc les utiliser et les configurer correctement pour les feuilles de style CSS, les scripts JavaScript et les images. Idéalement, ces éléments doivent être conservés le plus longtemps possible pour que le navigateur ne les demande plus au serveur. Cela permet d'économiser les requêtes HTTP, la bande passante et l'alimentation du serveur.

Compresser les ressources (>= 95%)

Vous pouvez compresser le contenu des pages HTML pour réduire la consommation de bande passante entre le client et le serveur. Tous les navigateurs modernes (smartphones, tablettes, ordinateurs portables et ordinateurs de bureau) acceptent le format HTML compressé via gzip ou Deflate. Le moyen le plus simple consiste à configurer le serveur Web de manière à ce qu'il comprime le flux de données HTML, à la volée ou automatiquement, à la sortie du serveur. Cette pratique (compression à la volée) n’est bénéfique que pour un flux de données HTML, car il évolue constamment. Lorsque cela est possible, nous vous recommandons de compresser manuellement les ressources statiques (par exemple, les bibliothèques CSS et JavaScript) en une seule fois.

Limiter le nombre de domaines (<6)

Lorsqu'un site Web ou un service en ligne héberge les composants d'une page Web dans plusieurs domaines, le navigateur doit établir une connexion HTTP avec chacun d'entre eux. Une fois la page HTML récupérée, le navigateur appelle les sources lorsqu'il traverse le DOM (Document Object Model). Certaines ressources sont essentielles au bon fonctionnement de la page. S'ils sont hébergés sur un autre domaine qui est lent, cela peut augmenter le temps de rendu de la page. Vous devez donc, lorsque cela est possible, regrouper toutes les ressources sur un seul domaine. La seule exception à cette règle concerne les ressources statiques (feuilles de style, images, etc.), qui doivent être hébergées sur un domaine distinct afin d'éviter l'envoi d'un ou plusieurs cookies pour chaque requête HTTP du navigateur GET. Cela réduit le temps de réponse et la consommation inutile de bande passante.

Ne pas retailler les images dans le navigateur

Ne redimensionnez pas les images avec les attributs HTML height et width. Cela envoie des images dans leur taille originale, gaspillant de la bande passante et de la puissance du processeur. Une image PNG-24 de 350 x 300 px est de 41 KB. Si vous redimensionniez le même fichier image en HTML et que vous l’affichez sous forme de vignette de 70 x 60 px, il s’agirait toujours de 41 Ko, alors qu’il devrait en réalité ne pas dépasser 3 Ko! Signification 38 KB téléchargés pour rien. La meilleure solution consiste à redimensionner les images à l'aide d'un logiciel tel que Photoshop, sans utiliser HTML. Lorsque le contenu ajouté par les utilisateurs du site Web n’a pas de valeur ajoutée spécifique, il est préférable de les empêcher d’insérer des images à l’aide d’un éditeur WYSIWYG, par exemple CKEditor.

Externaliser les css et les js

Assurez-vous que les fichiers CSS et JS sont séparés du code HTML de la page. Si vous incluez du CSS ou du JS dans le corps du fichier HTML et qu'il est utilisé pour plusieurs pages (ou même pour l'ensemble du site Web), le code doit être envoyé pour chaque page demandée par l'utilisateur, augmentant ainsi le volume de données envoyées. Toutefois, si les CSS et JS se trouvent dans leurs propres fichiers distincts, le navigateur peut éviter de les redemander en les stockant dans son cache local.

Eviter les requêtes en erreur

Les requêtes en erreurs consomment inutilement des ressources.

Limiter le nombre de requêtes HTTP (<27)

Le temps de téléchargement d’une page côté client est directement corrélé au nombre et à la taille des fichiers que le navigateur doit télécharger. Pour chaque fichier, le navigateur envoie un HTTP GET au serveur. Il attend la réponse, puis télécharge la ressource dès qu'elle est disponible. Selon le type de serveur Web que vous utilisez, plus le nombre de demandes par page est élevé, moins le serveur peut gérer de pages. La réduction du nombre de requêtes par page est essentielle pour réduire le nombre de serveurs HTTP nécessaires à l'exécution du site Web et, partant, son impact sur l'environnement.

Ne pas télécharger des images inutilement

Télécharger des images qui ne seront pas nécessairement visibles consomme inutilement des ressources. Il s'agit par exemple d'images qui sont affichées uniquement suite à une action utilisateur.

Valider le javascript

JSLint est un outil de contrôle de qualité du code qui vérifie que la syntaxe JavaScript utilisée sera comprise par tous les navigateurs. Le code produit est donc conforme aux règles de codage qui permettent aux interpréteurs d’exécuter le code rapidement et facilement. Le processeur est donc utilisé pour un temps plus court.

Taille maximum des cookies par domaine(<512 Octets)

La longueur du cookie doit être réduite car il est envoyé à chaque requête.

Minifier les css et js

Utilisez un outil tel que YUI Compressor pour supprimer les espaces et les sauts de ligne inutiles. Apache mod_pagespeed de Google peut également automatiser cette opération.

Pas de cookie pour les ressources statiques

Pour les ressources statiques, un cookie est inutile, cela consomme donc inutilement de la bande passante. Pour éviter cela, on peut utiliser un domaine différent pour les ressources statiques ou restreindre la portée des cookies créés.

Éviter les redirections

Les redirections doivent être évitées autant que possible car elles ralentissent la réponse et consomment inutilement des ressources.

Optimiser les images bitmap

Les images bitmap constituent souvent la plupart des octets téléchargés, juste devant les bibliothèques CSS et JavaScript. Leur optimisation a donc un impact considérable sur la bande passante consommée.

Optimiser les images svg

Les images svg sont moins lourdes que les images bitmap, elles peuvent cependant être optimisées et minifiées via des outils (par exemple svgo)

Ne pas utiliser de plugins

Évitez d’utiliser des plug-ins (machines virtuelles Flash Player, Java et Silverlight, etc.), car ils peuvent entraîner une lourde charge de ressources (processeur et RAM). C’est particulièrement vrai avec le lecteur Adobe, à tel point qu’Apple a décidé de ne pas installer la technologie sur ses appareils mobiles afin de maximiser la durée de vie de la batterie. Privilégiez les technologies standard telles que HTML5 et ECMAScript

Fournir une print css

Outre les avantages pour l’utilisateur, cette feuille de style réduit le nombre de pages imprimées et donc réduit indirectement l’empreinte écologique du site Web. Elle doit être aussi simple que possible et utiliser une police de caractères à l'encre claire, par exemple Siècle gothique. Envisagez également de masquer l'en-tête, le pied de page, le menu et la barre latérale, ainsi que de supprimer toutes les images, à l'exception de celles nécessaires au contenu. Cette feuille de style d'impression permet d'obtenir une impression plus nette en réduisant ce qui est affiché à l'écran.

N'utilisez pas les boutons standards des réseaux sociaux

Les réseaux sociaux tels que Facebook, Twiter, Pinterest, etc. fournissent des plugins à installer sur une page WEB pour y afficher un bouton partager et un compteur de j'aime. Ces plugins consomme des ressources inutilement, il est mieux de mettre des liens directs

Limiter le nombre de fichiers css (<=10)

Réduisez le nombre de fichiers CSS pour réduire le nombre de requêtes HTTP. Si plusieurs feuilles de style sont utilisées sur toutes les pages du site Web, concaténez-les dans un seul fichier. Certains CMS et frameworks offrent des moyens d'effectuer cette optimisation automatiquement.

Privilégier HTTP/2 à HTTP/1

HTTP/2 est plus efficace que HTTP/1 via en particulier l'utilisation du multiplexage (utilisation d'une seule connexion TCP pour plusieurs requêtes HTTP)

Utiliser des polices de caractères standards

Utilisez des polices standards telles qu’elles existent déjà sur l’ordinateur de l’utilisateur et n’ont donc pas besoin d’être téléchargées. Cela économise de la bande passante et améliore le temps de rendu du site Web.

Chez CODIXIS, nous développons des sites et applications web performantes et écoresponsables depuis 2015. Vous souhaitez être accompagné pour transformer votre site web et le rendre plus écoresponsable; Contactez-nous !