Retour d'expérience : comment optimiser un site web pour minimiser son impact environnemental

1. WordPress est-il green ?
WordCamp 26/04/2019
#ecoConceptionWeb @romainpetiot44

2. Romain Petiot
@romainpetiot44
Qui-suis-je ?
#ecoConceptionWeb @romainpetiot44

3. Bilan
environnemental :

4. Internet repose sur une infrastructure physique
Data center
Réseau
Terminaux

5. Source : greenIT.fr

6. Extraction des
matières premières
50 à 60 Métaux différents dont
des terres rares pour fabriquer
un smartphone

7. Déforestation
Produits chimiques
Consommation Eau
Rejets toxiques et radioactifs

8. Baotou
(Chine - Mongolie inter.)
Les effluents toxiques sont stockés dans un lac artificiel de
10 km3*
La radioactivité est 32 fois à la normale*
*source : https://fr.wikipedia.org/wiki/Terre_rare

9. 97% de terres rares
extraite en Chine
Et si la Chine arrêtait d’exporter ses
terres rares ?

10. source : https://www.encyclo-ecolo.com/Epuisement_des_ressources

11. Ou sinon,
Les impacts du
numérique en 1
chiffre

12. 3,7 %

13. Que faire ?

14. Que faire ?
Allonger la durée de vie du matériel

15. Que faire ?
Allonger la durée de vie du matériel
Acheter matériel reconditionné

16. Et c’est tout ?

17. Frugalité
fonctionnelle

18. Eco-conception
Web

19. Définition de l’éco-
conception web
L’écoconception web est une démarche
d’optimisation pour limiter l’impact
environnemental d’un site web.

20. Définition de l’éco-
conception web
L’écoconception web est une démarche
d’optimisation pour limiter l’impact
environnemental d’un site web.
Ce résultat est obtenu par la frugalité
fonctionnelle (limiter la surcharge featurale),
et l’adoption de bonnes pratiques.

21. Définition de l’éco-
conception web
L’écoconception web est une démarche
d’optimisation pour limiter l’impact
environnemental d’un site web.
Ce résultat est obtenu par la frugalité
fonctionnelle (limiter la surcharge featurale),
et l’adoption de bonnes pratiques.
Outre cette recherche d’efficience, l’objectif
est de permettre l’utilisation du service
numérique sur des terminaux vieillissants
afin de favoriser l’allongement de leur durée
de vie.

22. Les
référentiels

23. Retour d’expérience

24. La sape
connectée
#merciLaSape

25. Présentation
du site
Site WordPresse
Thème : event-star
Page builder : Elementor
Hébergement : OVH

26. Mesures
Poids le page
Nombre de requêtes
Vitesse d’affichage (fully Loaded)

27. Mesures
Poids le page
Nombre de requêtes
Vitesse d’affichage (Fully Loaded)
Nombre d’éléments du Dom

28. Mesures
Poids le page
Nombre de requêtes
Vitesse d’affichage (Fully Loaded)
Nombre d’éléments du Dom
Estimation GES

29. Mesures
Poids le page
Nombre de requêtes
Vitesse d’affichage (Fully Loaded)
Nombre d’éléments du Dom
Estimation GES
Consommation électricité

30. Mesures

31. Audit sur les
fonctionnalités

32. Page d’accueil
Slider

33. Page d’accueil
Slider
Présentation de la soirée

34. Page d’accueil
Slider
Présentation de la soirée
Liste de tous les participants

35. Page d’accueil
Slider
Présentation de la soirée
Liste de tous les participants
Iframe d’inscription EventBrite

36. Page d’accueil
Slider
Présentation de la soirée
Liste de tous les participants
Iframe d’inscription EventBrite
Iframe Google Maps

37. Page Listing
soirées

38. Page soirées

39. Audit technique

40. Choix CMS & Thème & Page
builder

41. Relecture du code généré
Style inline
emoji
jquery version 1.x
HTML, JS, CSS pas minimiser
et pas regroupé

42. GTmetrix
Images non optimisées avec
des problèmes de taille
Manque le cache

43. Unused CSS
Beaucoup de fichiers
Beaucoup de code inutile

44. Hébergeur
PlanetHoster
Infomaniak
Greenshift

45. Conformité HTML
La page d’accueil n’a pas de H1
Problème sur le menu mobile (text blanc)
Fonctionne sur iphone 4 (minimum requis)
7 erreurs w3c

46. Audit contenu

47. Pages zombies
recherche Google :
site:www.sape-connectee.org
une page « non-classée » et les pages « quand, où? », «
pour qui? »

48. Arbitrages et
implémentations

49. Le thème Twenty Nineteen avec l’adoption de l’éditeur
Gutenberg (natif)

50. Les
participants
Lister 5 participants puis au clique sur le
bouton « Voir tous les participants », s’affiche
le listing des participants.

51. Les participants
Json généré dans le custom block

52. Les participants

53. Les
inscriptions
Au click sur le bouton “s'inscrire”, s’affiche
l’iframe eventBrite

54. La carte
Open Street Map
https://api-adresse.data.gouv.fr/search/?q
Générer un image png depuis l’API OSM
Lien href vers la page openStreetMap

55. La carte

56. - Retirer les fonctionnalités de commentaires
- Retirer les fonctionnalités « emoji »
- Bloquer le Cron WordPress
- Limiter les révisions
- Optimisation des images
- Mise en place du cache
- Mise en place du Lazy Load
- Minifier le code HTML, JS, CSS
- Utiliser l’hébergeur Infomaniak
Les autres
actions

57. - Limiter les animations CSS/JS
- Lister les soirées sur trois colonnes
- Ne pas utiliser des bibliothèques Jquery,
Bootstrap
Les autres
actions

58. Re-mesures

61. Résultats

62. Côté client
Nécessite moins de ressources
Propice à fonctionner sur des terminaux
vieillissants

63. Côté hébergement
Note the Green Web Foundation

64. Côté réseau
Page légère = moins de sollicitation

65. Romain Petiot
@romainpetiot44
Merci ! https://sape-connectee.ihaveagreen.fr/
#ecoConceptionWeb @romainpetiot44