Qu'est-ce que la conception Web durable et comment y parvenir
Publié: 2022-12-01
"Je veux vraiment une voiture électrique, mais je ne peux tout simplement pas me le permettre", a déclaré un de mes amis avec remords il y a quelques mois. Lui et moi parlions du changement climatique et des changements que nous avions tous les deux apportés à nos habitudes.
J'ai ri.
"Vous savez qu'ils consomment aussi de l'énergie, et si vous ne rechargez pas votre voiture électrique sur une prise qui utilise des énergies renouvelables, vous polluez quand même pas mal, n'est-ce pas ?"
Il a dit qu'il le savait, mais qu'il avait toujours le sentiment que lui et sa VW de 20 ans étaient une gifle face à tous ses efforts pour mener une vie plus durable et plus respectueuse de l'environnement.
"Que diriez-vous de cela - je peux vous dire comment réduire vos émissions de carbone grâce à votre monde numérique", ai-je suggéré. Il m'a jeté un regard déconcerté. Je lui ai alors dit que selon certaines statistiques, l'internaute moyen génère à peu près la même quantité de CO2 qu'en parcourant 1000 km avec une voiture ordinaire et qu'il existe diverses activités qui y contribuent.
Il a combattu cette idée pendant près de dix minutes jusqu'à ce que je retire les données de mon téléphone. Honnêtement, je ne lui en voulais pas car je me souviens que j'avais eu la même réaction le jour où j'ai réalisé que chaque page Web que je visitais avait un coût caché - celui de l'énergie utilisée pour la maintenir.
Le sale secret d'Internet, pour ainsi dire.
Selon Website Carbon Calculator, un site Web moyen produit environ 0,5 gramme de CO2 par page vue, donc pour un site Web avec 100 000 vues mensuelles, cela représente 500 kg par an. Gardez à l'esprit que c'est par site Web!
Pour référence, une voiture moyenne émet 1200 kg de CO2 aux 1000 km, vous pouvez donc voir comment Internet a un effet très palpable sur le changement climatique et le réchauffement climatique en raison de son immense empreinte carbone.
La question se pose donc : que pouvez-vous faire en tant que propriétaire de site Web pour réduire l'impact de votre site sur notre environnement ?
Conception de sites Web durables, bien sûr.
Chez Kualo, nous sommes si intrinsèquement liés au concept de durabilité que nous avons pensé qu'il serait naturel d'explorer ce sujet. Dans cet article, nous apprendrons :
Nous voulons vous fournir les plans exacts qui vous aideront à minimiser l'empreinte carbone de votre site Web, alors sans plus tarder, plongeons-y !
C'est ce que l'on peut lire sur le Sustainable Web Design Manifesto, le site Web expliquant brièvement ce que ce credo engloberait. Passons rapidement sur les 6 points :
Si vous considérez tous les points soulevés ci-dessus, vous constaterez peut-être que ce que ce manifeste réclame n'est pas seulement une conception Web durable, mais constitue en effet le fondement de pratiques commerciales durables et d'une économie durable. Pour avoir un avenir meilleur, nous avons besoin d'entreprises qui fournissent des services et des produits significatifs et utiles qui ont un impact négatif minimal sur l'environnement et les personnes.
En d'autres termes, si vous optez pour une conception Web durable, vous devez :
Maintenant, pour en revenir à ce que j'ai dit au début de cet article (et à notre infographie sur l'impact environnemental d'Internet), nous savons qu'il s'agit essentiellement d'un trou noir énergétique en constante augmentation. D'autre part, nous savons également qu'Internet est essentiel pour de nombreuses personnes, et ce n'est pas comme si elles pouvaient l'échanger contre sa version plus économe en énergie, comme vous le feriez avec une voiture ou un ordinateur portable.
Mais tu sais ce qu'on peut échanger ?
Notre conception de site Web, bien sûr.
Si le point principal est que la taille de votre site Web et la façon dont il est construit ont un impact direct sur la quantité de CO2 qu'il générera, alors c'est ce que nous devons aborder en tant que propriétaires de sites Web.
Mais y a-t-il un avantage supplémentaire à changer nos habitudes en matière de conception de sites Web ?
Je dirais absolument oui.
En tant que marketeur, j'ai l'habitude de considérer tous les angles de mes efforts numériques et leur impact sur mes projets. Je peux vous dire tout de suite que même à titre personnel, il est bien préférable de déployer un site Web qui suit une démarche conception de sites Web et voici quelques-unes des raisons pour lesquelles :
Pour des raisons évidentes, les parcours utilisateurs plus courts sont privilégiés par les utilisateurs, car ils ne perdent pas leur temps. Outre l'expérience client, ils visiteront également moins de pages pour trouver ce dont ils ont besoin et réduiront ainsi les émissions de carbone de leur visite.
(crédit image : https://www.appcues.com/blog/user-journey-map)
C'est une bonne idée de mieux vous familiariser avec la notion de parcours utilisateurs puis, une fois que vous pouvez concevoir librement vos cartes de parcours utilisateurs, d'y adapter votre design web.
Une bonne expérience utilisateur (UX) qui évite les points de friction entraînera inévitablement à la fois une consommation d'énergie réduite et des clients plus satisfaits.
Choisir un fournisseur qui propose un hébergement durable alimenté par des énergies renouvelables est un must. C'est également une bonne idée d'examiner leur politique environnementale globale et de vérifier si votre hébergeur a pris des mesures supplémentaires pour compenser ses émissions de CO2 et/ou s'il est impliqué dans d'autres pratiques de développement durable.
Si un site n'a pas de cache, vous faites travailler le serveur plus dur. Chaque fois que quelqu'un accède à une page de votre site Web, le contenu de la page doit être construit à la volée en traitant le code PHP, en interrogeant la base de données et en le transformant en contenu HTML qui affiche votre site Web.
Cela utilise davantage le processeur, la mémoire et le disque du serveur, ce qui consomme de l'énergie. Le serveur devrait le faire pour chaque visiteur et chaque page, donc plus vous avez de visiteurs et de pages, plus vous consommez d'énergie.
Avec la mise en cache en place, la majeure partie de cette charge de travail intensive n'est effectuée que la première fois qu'un visiteur demande une page. Le code HTML résultant est ensuite stocké dans un cache afin que chaque chargement de page ultérieur n'ait pas besoin de faire tout ce gros travail.
De plus, vos pages se chargent plus rapidement. Ce n'est pas seulement une victoire pour vous et vos visiteurs, mais cela signifie également que vos visiteurs passent moins de temps à attendre que la page se charge - consommant moins d'énergie dans le processus.
Il existe une multitude de façons de mettre en cache des sites Web, chez Kualo, nous préférons LiteSpeed Cache pour la mise en cache des pages, et nous avons également Redis et Memcached pour mettre en cache les requêtes de base de données. Des sites Web ultra-rapides et une meilleure durabilité - qu'est-ce qu'il ne faut pas aimer ?
C'est souvent le cas avec les plugins orientés marketing ou ceux dupliqués que nous avons oubliés. Évaluez ce que vous avez, puis ce dont vous avez besoin et donnez la botte à tout le reste.
(la police personnalisée créée pour Duolingo par l'agence Johnson Banks)
Votre fichier de police personnalisé typique peut facilement dépasser 200 Ko tout en incluant un seul poids. Si vous utilisez différents poids et polices de caractères, cela s'additionnera inévitablement, ce qui aura un impact à la fois sur la vitesse et la consommation d'énergie.
Il est donc recommandé d'utiliser des polices personnalisées uniquement si vous pensez qu'elles sont vraiment importantes pour votre marque et à des fins pratiques.
https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache pour WordPress inclut l'optimisation automatique des images, vous n'avez donc pas à vous soucier de le faire vous-même. De plus, il peut convertir des images pour utiliser des formats de fichiers modernes tels que WebP, dont la taille est environ 25 % inférieure à celle des images PNG ou JPG.
Au-delà de l'optimisation, nous devons également nous demander si leur utilisation est justifiable et ciblée.
Par exemple, certaines photos de produits pourraient être inutiles (par exemple des angles très similaires). Dans d'autres cas, les images utilisées sur la page, comme les images de stock aléatoires, peuvent être facilement remplacées par des alternatives comme les graphiques SVG ou le même effet peut être obtenu grâce aux styles CSS.
Si cela inclut beaucoup d'images ou de vidéos en particulier, qui peuvent être de grande taille, toutes ces données doivent voyager sur Internet même si elles ne seront peut-être jamais vues.
Le chargement différé signifie que vous demandez ce contenu uniquement lorsque l'utilisateur fait défiler votre page. Ces sections apparaîtront juste avant que le contenu ne soit visible, donc du point de vue des visiteurs, c'est comme s'il était toujours là - il n'y a pas de différence perceptible.
Non seulement vous évitez de transmettre des données inutiles, mais vous améliorez également votre score PageSpeed en allégeant votre site Web.
Certaines applications sont livrées avec un chargement paresseux intégré, ou elles peuvent être intégrées avec un plugin. Pour WordPress, LiteSpeed Cache inclut une fonction de chargement paresseux qui est capable de charger paresseux n'importe quoi à partir d'images, de vidéos, de contenu intégré ou même de blocs HTML entiers si votre page est très longue.
Les animations n'ont généralement aucun but tactique, alors utilisez-les le moins possible. Avec les vidéos, cela dépend fortement de l'objectif qu'elles serviront, donc si vous pensez qu'elles sont utiles à vos utilisateurs, utilisez-les effectivement, assurez-vous simplement qu'elles sont aussi optimisées que possible.
Souvent, votre code HTML, CSS et Javascript contiendra des données supplémentaires, telles que des espaces, des sauts de ligne ou des commentaires. Ces espaces ou commentaires ne sont utiles que pour qu'un développeur puisse facilement lire et comprendre le code, mais ne changent rien à la façon dont le navigateur interprète votre code.
La réduction de votre code supprime tout ce poids inutile, réduit la taille des fichiers qui doivent être transférés sur Internet et accélère le chargement de votre site.
Pour WordPress, LiteSpeed Cache gère cet aspect pour vous, mais la plupart des autres applications auront également une fonctionnalité similaire disponible via un plugin.
Vous avez peut-être utilisé un thème ou un constructeur de pages qui comprend une tonne de mises en page, de styles ou de fonctionnalités différents que vous n'utilisez jamais sur votre site.
Tout le code restera dans vos fichiers CSS et JS, ce qui augmentera la quantité de données à transférer sur Internet et ralentira le chargement de votre site sans raison valable.
Il peut être difficile de déterminer exactement quel code supprimer manuellement, mais pour WordPress, LiteSpeed Cache vous permet de supprimer automatiquement les CSS inutilisés. Cela supprime les CSS inutilisés et génère un fichier CSS unique pour chaque page. Cela peut être intéressant si vous n'avez que quelques pages, mais si votre site comporte beaucoup de pages, il peut rester plus efficace d'utiliser un seul fichier CSS.
Javascript peut être plus complexe à supprimer, bien que LiteSpeed puisse au moins retarder son chargement jusqu'à ce que l'activité de l'utilisateur soit détectée. Cela peut être approprié, à condition que ce ne soit pas nécessaire pour le contenu au-dessus de la ligne de flottaison.
En fin de compte, le meilleur conseil est d'éviter d'utiliser des constructeurs de pages ou des plugins gonflés dans la mesure du possible et d'utiliser un code propre dont vous savez qu'il est réellement nécessaire.
Ils passeront beaucoup plus de temps à essayer de trouver ce qu'ils recherchent, ce qui entraînera une plus grande consommation d'énergie.
Pour éviter cela, assurez-vous que votre conception s'adapte bien à autant de ces variables que possible afin d'offrir une expérience optimale aux utilisateurs.
Plus important encore, du point de vue de la durabilité, cela contribue à réduire les émissions de CO2, car le transfert de données vers différentes parties du monde nécessite beaucoup d'énergie. Et plus les données doivent voyager loin, plus elles nécessitent d'énergie.
Il est également bon de mentionner que la taille des images diffusées via CDN est généralement réduite si vous avez en quelque sorte sauté cette étape. De nombreux CDN vous fourniront des outils d'optimisation d'image, notamment la réduction de la taille, de la densité de pixels, du format et de la compression de l'image.
Il est important de choisir un CDN qui utilise de l'énergie renouvelable, bien sûr, comme Cloudflare.
Vous pouvez soit les rechercher manuellement, soit utiliser Google Analytics pour évaluer quelles pages peuvent être obsolètes ou sous-performantes. Vous pouvez ensuite décider si vous pouvez les adapter pour avoir un contenu utile et à jour ou déterminer qu'ils sont simplement destinés à la corbeille.
Participer à des projets qui plantent des arbres et compensent le carbone est un moyen incroyable non seulement d'améliorer la durabilité de votre conception Web, mais de votre entreprise dans son ensemble. Les arbres sont les gagnants absolus lorsqu'il s'agit de réduire les émissions de CO2, car ils les absorbent et les transforment en oxygène.
Nous vous invitons à rendre visite à nos partenaires d'Ecologi (ou à toute autre organisation similaire) et à commencer à planter ces arbres !
J'ai ri.
"Vous savez qu'ils consomment aussi de l'énergie, et si vous ne rechargez pas votre voiture électrique sur une prise qui utilise des énergies renouvelables, vous polluez quand même pas mal, n'est-ce pas ?"
Il a dit qu'il le savait, mais qu'il avait toujours le sentiment que lui et sa VW de 20 ans étaient une gifle face à tous ses efforts pour mener une vie plus durable et plus respectueuse de l'environnement.
"Que diriez-vous de cela - je peux vous dire comment réduire vos émissions de carbone grâce à votre monde numérique", ai-je suggéré. Il m'a jeté un regard déconcerté. Je lui ai alors dit que selon certaines statistiques, l'internaute moyen génère à peu près la même quantité de CO2 qu'en parcourant 1000 km avec une voiture ordinaire et qu'il existe diverses activités qui y contribuent.
Il a combattu cette idée pendant près de dix minutes jusqu'à ce que je retire les données de mon téléphone. Honnêtement, je ne lui en voulais pas car je me souviens que j'avais eu la même réaction le jour où j'ai réalisé que chaque page Web que je visitais avait un coût caché - celui de l'énergie utilisée pour la maintenir.
Le sale secret d'Internet, pour ainsi dire.
Selon Website Carbon Calculator, un site Web moyen produit environ 0,5 gramme de CO2 par page vue, donc pour un site Web avec 100 000 vues mensuelles, cela représente 500 kg par an. Gardez à l'esprit que c'est par site Web!
Pour référence, une voiture moyenne émet 1200 kg de CO2 aux 1000 km, vous pouvez donc voir comment Internet a un effet très palpable sur le changement climatique et le réchauffement climatique en raison de son immense empreinte carbone.
La question se pose donc : que pouvez-vous faire en tant que propriétaire de site Web pour réduire l'impact de votre site sur notre environnement ?
Conception de sites Web durables, bien sûr.
Chez Kualo, nous sommes si intrinsèquement liés au concept de durabilité que nous avons pensé qu'il serait naturel d'explorer ce sujet. Dans cet article, nous apprendrons :
- Qu'est-ce que la conception web durable ?
- Pourquoi avons-nous besoin d'une conception Web durable?
- Quels sont les avantages d'une conception Web durable ?
- Meilleures pratiques de conception Web durable
Nous voulons vous fournir les plans exacts qui vous aideront à minimiser l'empreinte carbone de votre site Web, alors sans plus tarder, plongeons-y !
Qu'est-ce que la conception web durable ?
« La conception Web durable est une approche de conception de services Web qui donne la priorité aux personnes et à la planète. Elle fournit des produits et services numériques qui respectent les principes du Manifeste pour un Web durable : propre, efficace, ouvert, honnête, régénérateur et résilient. »C'est ce que l'on peut lire sur le Sustainable Web Design Manifesto, le site Web expliquant brièvement ce que ce credo engloberait. Passons rapidement sur les 6 points :
- Propre : les services utilisés par votre site Web doivent être alimentés par des sources d'énergie renouvelables, ce qui signifie que votre hébergement Web doit être alimenté en énergie verte.
- Efficace : les services que vous fournissez doivent être entièrement optimisés pour utiliser le moins possible d'énergie (et de matériaux)
- Ouvert : les services que vous fournissez doivent être accessibles à tous et doivent permettre aux utilisateurs d'avoir un contrôle total sur leurs données
- Honnête : votre site Web ne fournira pas de contenu trompeur et/ou n'essaiera pas d'induire en erreur les utilisateurs par le biais de la conception Web
- Régénératif : vos services participeront à une économie orientée vers le soutien des communautés et de l'environnement
- Résilient : vos services seront fournis au moment et à l'endroit où ils sont le plus nécessaires
Si vous considérez tous les points soulevés ci-dessus, vous constaterez peut-être que ce que ce manifeste réclame n'est pas seulement une conception Web durable, mais constitue en effet le fondement de pratiques commerciales durables et d'une économie durable. Pour avoir un avenir meilleur, nous avons besoin d'entreprises qui fournissent des services et des produits significatifs et utiles qui ont un impact négatif minimal sur l'environnement et les personnes.
En d'autres termes, si vous optez pour une conception Web durable, vous devez :
- Utiliser le moins de ressources possible
- Développez et suivez un plan de contenu bien pensé qui garantit que chaque page que vous concevez a un objectif
- Utiliser une construction de site Web optimisée
- Évitez d'induire vos utilisateurs en erreur de quelque manière que ce soit pour qu'ils effectuent des actions qu'ils ne souhaitent peut-être pas
Pourquoi la conception Web durable est-elle importante ?
Ainsi, Internet présente de nombreux avantages pour la société, mais il a un coût environnemental énorme. L'internaute moyen consomme du contenu en ligne pendant 5 à 6 heures par jour sur son ordinateur ou son appareil mobile. Alors que nous continuons à utiliser la technologie plus souvent que jamais, cela ne fera qu'augmenter dans les années à venir jusqu'à ce que des milliards de personnes surfent sur des sites Web du monde entier avec 8 types d'appareils différents !Maintenant, pour en revenir à ce que j'ai dit au début de cet article (et à notre infographie sur l'impact environnemental d'Internet), nous savons qu'il s'agit essentiellement d'un trou noir énergétique en constante augmentation. D'autre part, nous savons également qu'Internet est essentiel pour de nombreuses personnes, et ce n'est pas comme si elles pouvaient l'échanger contre sa version plus économe en énergie, comme vous le feriez avec une voiture ou un ordinateur portable.
Mais tu sais ce qu'on peut échanger ?
Notre conception de site Web, bien sûr.
Si le point principal est que la taille de votre site Web et la façon dont il est construit ont un impact direct sur la quantité de CO2 qu'il générera, alors c'est ce que nous devons aborder en tant que propriétaires de sites Web.
Avantages de la conception Web durable
Maintenant, d'une manière générale, si vous lisez ceci, vous avez déjà une bonne raison de vouloir un site Web durable, et cette raison est liée à la protection de l'environnement. En gros, tu veux être un héros pour la planète, et je t'admire pour ça.Mais y a-t-il un avantage supplémentaire à changer nos habitudes en matière de conception de sites Web ?
Je dirais absolument oui.
En tant que marketeur, j'ai l'habitude de considérer tous les angles de mes efforts numériques et leur impact sur mes projets. Je peux vous dire tout de suite que même à titre personnel, il est bien préférable de déployer un site Web qui suit une démarche conception de sites Web et voici quelques-unes des raisons pour lesquelles :
- Vous dépenserez moins : de vos dépenses de designer à la production de votre contenu, chaque chose supplémentaire vous coûtera de l'argent. Des conceptions plus complexes vous coûteront de l'argent, plus de rédaction et de contenu vous coûteront de l'argent et ainsi de suite. Être minimaliste et n'avoir que ce dont vous avez réellement besoin est un excellent moyen de réduire les dépenses
- Vos clients seront plus satisfaits : alors qu'il était une fois où les sites Web étaient une nouveauté, les gens appréciaient les cloches et les sifflets, maintenant tout le monde en est submergé, car ils passent toute la journée à surfer. Cela signifie que pour l'utilisateur moyen, plus votre site Web est clair, plus il a de chances de trouver ce qu'il veut au lieu d'appuyer sur le bouton X et d'aller voir quelqu'un qui ne perd pas son temps.
- Vos efforts de référencement seront plus efficaces : La vitesse est une chose depuis quelques années en ce qui concerne le classement Google, mais avec chaque année qui passe, nous voyons cela devenir de plus en plus critique en matière de référencement. Google DÉTESTE les sites Web lents, et ils donneront absolument la priorité aux sites plus légers et plus rapides. Soit dit en passant, cela vaut également pour l'expérience client, comme nous le savons tous.
Comment rendre votre site Web durable
1. Commencez par planifier votre parcours utilisateur
Si vous n'êtes pas familier avec le concept, le parcours utilisateur fait simplement référence à la séquence d'actions qu'un utilisateur entreprendra lorsqu'il visitera votre site pour atteindre un objectif particulier - une inscription, un achat, etc.Pour des raisons évidentes, les parcours utilisateurs plus courts sont privilégiés par les utilisateurs, car ils ne perdent pas leur temps. Outre l'expérience client, ils visiteront également moins de pages pour trouver ce dont ils ont besoin et réduiront ainsi les émissions de carbone de leur visite.
(crédit image : https://www.appcues.com/blog/user-journey-map)
C'est une bonne idée de mieux vous familiariser avec la notion de parcours utilisateurs puis, une fois que vous pouvez concevoir librement vos cartes de parcours utilisateurs, d'y adapter votre design web.
Une bonne expérience utilisateur (UX) qui évite les points de friction entraînera inévitablement à la fois une consommation d'énergie réduite et des clients plus satisfaits.
2. Choisissez un fournisseur d'hébergement écologique
Je sais que cela semble un peu intéressé puisque nous sommes, en fin de compte, une société d'hébergement, mais la réalité est que qui alimente votre site Web chaque jour sera absolument important si vous voulez réduire votre empreinte carbone. Les centres de données consomment, malheureusement, une grande partie de l'énergie qui alimente Internet. Il est essentiel de passer rapidement à des sources 100 % renouvelables.Choisir un fournisseur qui propose un hébergement durable alimenté par des énergies renouvelables est un must. C'est également une bonne idée d'examiner leur politique environnementale globale et de vérifier si votre hébergeur a pris des mesures supplémentaires pour compenser ses émissions de CO2 et/ou s'il est impliqué dans d'autres pratiques de développement durable.
3. Mettez tout en cache !
Si vous utilisez une application basée sur PHP comme le font de nombreux sites Web (WordPress, Magento, Drupal, etc.), la mise en cache est indispensable pour la durabilité.Si un site n'a pas de cache, vous faites travailler le serveur plus dur. Chaque fois que quelqu'un accède à une page de votre site Web, le contenu de la page doit être construit à la volée en traitant le code PHP, en interrogeant la base de données et en le transformant en contenu HTML qui affiche votre site Web.
Cela utilise davantage le processeur, la mémoire et le disque du serveur, ce qui consomme de l'énergie. Le serveur devrait le faire pour chaque visiteur et chaque page, donc plus vous avez de visiteurs et de pages, plus vous consommez d'énergie.
Avec la mise en cache en place, la majeure partie de cette charge de travail intensive n'est effectuée que la première fois qu'un visiteur demande une page. Le code HTML résultant est ensuite stocké dans un cache afin que chaque chargement de page ultérieur n'ait pas besoin de faire tout ce gros travail.
De plus, vos pages se chargent plus rapidement. Ce n'est pas seulement une victoire pour vous et vos visiteurs, mais cela signifie également que vos visiteurs passent moins de temps à attendre que la page se charge - consommant moins d'énergie dans le processus.
Il existe une multitude de façons de mettre en cache des sites Web, chez Kualo, nous préférons LiteSpeed Cache pour la mise en cache des pages, et nous avons également Redis et Memcached pour mettre en cache les requêtes de base de données. Des sites Web ultra-rapides et une meilleure durabilité - qu'est-ce qu'il ne faut pas aimer ?
4. Si vous écrivez du code, assurez-vous qu'il s'agit d'un code propre
La majorité des utilisateurs utiliseront une sorte de CMS, mais si vous écrivez du code, assurez-vous qu'il est facile à comprendre, facile à modifier et qu'il évite les duplications et opérations inutiles.5. Évitez les plugins et addons inutiles
Ceci est pertinent pour la règle ci-dessus, mais pour les personnes qui utilisent effectivement un CMS comme WordPress, Magento, Craft, Laravel, etc. Parfois, nous pouvons être trop excités par toutes les possibilités que nous offre le marché des plugins et noyer notre site Web dans des plugins inutilesC'est souvent le cas avec les plugins orientés marketing ou ceux dupliqués que nous avons oubliés. Évaluez ce que vous avez, puis ce dont vous avez besoin et donnez la botte à tout le reste.
6. Évitez ou utilisez des polices peu personnalisées
Cela peut surprendre, mais les polices personnalisées peuvent absolument augmenter la taille du fichier de votre site Web].(la police personnalisée créée pour Duolingo par l'agence Johnson Banks)
Votre fichier de police personnalisé typique peut facilement dépasser 200 Ko tout en incluant un seul poids. Si vous utilisez différents poids et polices de caractères, cela s'additionnera inévitablement, ce qui aura un impact à la fois sur la vitesse et la consommation d'énergie.
Il est donc recommandé d'utiliser des polices personnalisées uniquement si vous pensez qu'elles sont vraiment importantes pour votre marque et à des fins pratiques.
7. Utilisez les fichiers multimédias à bon escient (et optimisez-les)
Il va sans dire que toutes les images de votre site Web doivent être optimisées en taille. Nous le savons grâce aux meilleures pratiques liées à la vitesse du site Web (et, par la suite, au référencement). Nous voyons parfois des clients demander pourquoi leur site est lent, pour constater que la page d'accueil comprend 4 Mo d'images parce qu'ils ont téléchargé des originaux très volumineux ! Ces mêmes images pourraient être servies sans aucune réduction de qualité en les optimisant.https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache pour WordPress inclut l'optimisation automatique des images, vous n'avez donc pas à vous soucier de le faire vous-même. De plus, il peut convertir des images pour utiliser des formats de fichiers modernes tels que WebP, dont la taille est environ 25 % inférieure à celle des images PNG ou JPG.
Au-delà de l'optimisation, nous devons également nous demander si leur utilisation est justifiable et ciblée.
Par exemple, certaines photos de produits pourraient être inutiles (par exemple des angles très similaires). Dans d'autres cas, les images utilisées sur la page, comme les images de stock aléatoires, peuvent être facilement remplacées par des alternatives comme les graphiques SVG ou le même effet peut être obtenu grâce aux styles CSS.
8. Chargement paresseux sous le contenu du pli
Chacune de vos pages Web peut contenir beaucoup de contenu « en dessous de la ligne de flottaison », c'est-à-dire un contenu qui n'est visible que si le visiteur fait défiler votre page.Si cela inclut beaucoup d'images ou de vidéos en particulier, qui peuvent être de grande taille, toutes ces données doivent voyager sur Internet même si elles ne seront peut-être jamais vues.
Le chargement différé signifie que vous demandez ce contenu uniquement lorsque l'utilisateur fait défiler votre page. Ces sections apparaîtront juste avant que le contenu ne soit visible, donc du point de vue des visiteurs, c'est comme s'il était toujours là - il n'y a pas de différence perceptible.
Non seulement vous évitez de transmettre des données inutiles, mais vous améliorez également votre score PageSpeed en allégeant votre site Web.
Certaines applications sont livrées avec un chargement paresseux intégré, ou elles peuvent être intégrées avec un plugin. Pour WordPress, LiteSpeed Cache inclut une fonction de chargement paresseux qui est capable de charger paresseux n'importe quoi à partir d'images, de vidéos, de contenu intégré ou même de blocs HTML entiers si votre page est très longue.
9. Limitez l'utilisation de vidéos et d'animations
Vous n'avez pas besoin de faire ressembler votre site Web à une page Word et d'éviter les vidéos et les animations comme la peste, mais comme pour les images, utilisez-les plutôt avec parcimonie.Les animations n'ont généralement aucun but tactique, alors utilisez-les le moins possible. Avec les vidéos, cela dépend fortement de l'objectif qu'elles serviront, donc si vous pensez qu'elles sont utiles à vos utilisateurs, utilisez-les effectivement, assurez-vous simplement qu'elles sont aussi optimisées que possible.
10. Minimisez HTML, CSS et Javascript sur votre site
Encore une fois, vous faites peut-être déjà cela pour des raisons de vitesse, mais si ce n'est pas le cas, examinons rapidement la raison derrière cela.Souvent, votre code HTML, CSS et Javascript contiendra des données supplémentaires, telles que des espaces, des sauts de ligne ou des commentaires. Ces espaces ou commentaires ne sont utiles que pour qu'un développeur puisse facilement lire et comprendre le code, mais ne changent rien à la façon dont le navigateur interprète votre code.
La réduction de votre code supprime tout ce poids inutile, réduit la taille des fichiers qui doivent être transférés sur Internet et accélère le chargement de votre site.
Pour WordPress, LiteSpeed Cache gère cet aspect pour vous, mais la plupart des autres applications auront également une fonctionnalité similaire disponible via un plugin.
11. Supprimez les CSS et Javascript inutiles
Alors que la minification supprime les données inutiles, elle n'analyse pas si ce code est réellement utilisé par votre site.Vous avez peut-être utilisé un thème ou un constructeur de pages qui comprend une tonne de mises en page, de styles ou de fonctionnalités différents que vous n'utilisez jamais sur votre site.
Tout le code restera dans vos fichiers CSS et JS, ce qui augmentera la quantité de données à transférer sur Internet et ralentira le chargement de votre site sans raison valable.
Il peut être difficile de déterminer exactement quel code supprimer manuellement, mais pour WordPress, LiteSpeed Cache vous permet de supprimer automatiquement les CSS inutilisés. Cela supprime les CSS inutilisés et génère un fichier CSS unique pour chaque page. Cela peut être intéressant si vous n'avez que quelques pages, mais si votre site comporte beaucoup de pages, il peut rester plus efficace d'utiliser un seul fichier CSS.
Javascript peut être plus complexe à supprimer, bien que LiteSpeed puisse au moins retarder son chargement jusqu'à ce que l'activité de l'utilisateur soit détectée. Cela peut être approprié, à condition que ce ne soit pas nécessaire pour le contenu au-dessus de la ligne de flottaison.
En fin de compte, le meilleur conseil est d'éviter d'utiliser des constructeurs de pages ou des plugins gonflés dans la mesure du possible et d'utiliser un code propre dont vous savez qu'il est réellement nécessaire.
12. Assurez-vous que votre site Web fonctionne correctement sur différents appareils
Tester votre site sur de nombreuses tailles d'écran, navigateurs, appareils et vitesses de bande passante peut prendre beaucoup de temps, mais il est étroitement lié à une conception Web durable. Cela a à voir avec le point n.1, ce qui signifie qu'un affichage incorrect du contenu et de la conception entraînera une mauvaise UX et beaucoup de confusion parmi les utilisateurs.Ils passeront beaucoup plus de temps à essayer de trouver ce qu'ils recherchent, ce qui entraînera une plus grande consommation d'énergie.
Pour éviter cela, assurez-vous que votre conception s'adapte bien à autant de ces variables que possible afin d'offrir une expérience optimale aux utilisateurs.
13. Utilisez un CDN pour diffuser votre contenu
Qu'est-ce qu'un CDN ? Un réseau de diffusion de contenu (CDN) est un réseau de serveurs situés dans différents emplacements géographiques. La façon dont ils aideront votre contenu à se charger plus rapidement est de servir à partir d'un emplacement proche de vos utilisateurs. En d'autres termes, cela est lié à la fois à la vitesse et à l'expérience utilisateur.Plus important encore, du point de vue de la durabilité, cela contribue à réduire les émissions de CO2, car le transfert de données vers différentes parties du monde nécessite beaucoup d'énergie. Et plus les données doivent voyager loin, plus elles nécessitent d'énergie.
Il est également bon de mentionner que la taille des images diffusées via CDN est généralement réduite si vous avez en quelque sorte sauté cette étape. De nombreux CDN vous fourniront des outils d'optimisation d'image, notamment la réduction de la taille, de la densité de pixels, du format et de la compression de l'image.
Il est important de choisir un CDN qui utilise de l'énergie renouvelable, bien sûr, comme Cloudflare.
14. Auditez votre contenu pour vous assurer qu'il respecte la stratégie
Si vous avez un grand site Web, il est essentiel de vérifier périodiquement son contenu. Certaines pages deviendront inévitablement obsolètes ou ne rempliront plus leur fonction. Cela est particulièrement vrai pour les bases de connaissances, mais c'est également vrai pour les pages de produits, les articles de blog, etc.Vous pouvez soit les rechercher manuellement, soit utiliser Google Analytics pour évaluer quelles pages peuvent être obsolètes ou sous-performantes. Vous pouvez ensuite décider si vous pouvez les adapter pour avoir un contenu utile et à jour ou déterminer qu'ils sont simplement destinés à la corbeille.
15. Réduisez vos émissions de CO2 en compensant votre empreinte carbone
Devenir une entreprise positive pour le climat a probablement été l'une des meilleures décisions que nous ayons jamais prises pour améliorer notre durabilité. Jusqu'à présent, nous avons planté plus de 50 000 arbres et compensé plus de 2 000 tonnes de CO2, avec l'intention de poursuivre ce voyage pour les années à venir.Participer à des projets qui plantent des arbres et compensent le carbone est un moyen incroyable non seulement d'améliorer la durabilité de votre conception Web, mais de votre entreprise dans son ensemble. Les arbres sont les gagnants absolus lorsqu'il s'agit de réduire les émissions de CO2, car ils les absorbent et les transforment en oxygène.
Nous vous invitons à rendre visite à nos partenaires d'Ecologi (ou à toute autre organisation similaire) et à commencer à planter ces arbres !