wordpress est-il green...eco-conception web . supprimer. #ecoconceptionweb @romainpetiot44....
TRANSCRIPT
#ecoConceptionWeb @romainpetiot44
WordPress est-il green ?WordCamp 24/04/2019
#ecoConceptionWeb @romainpetiot44
Romain Petiot@romainpetiot44
Qui-suis-je ?
#ecoConceptionWeb @romainpetiot44
Attention :Tromperie sur la marchandise !
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
Internet repose sur une infrastructure physique
Data center
Réseau
Terminaux
#ecoConceptionWeb @romainpetiot44
Impacts du numérique sur l’environnements
#ecoConceptionWeb @romainpetiot44
Extraction des matières premières50 à 60 Métaux différents dont des terres rares pour fabriquer un smartphone
#ecoConceptionWeb @romainpetiot44
Déforestation
Produits chimiques
Consommation Eau
Rejets toxiques et radioactifs
#ecoConceptionWeb @romainpetiot44
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
#ecoConceptionWeb @romainpetiot44
97% de terres rares extraite en Chine
Et si la Chine arrêtait d’exporter ses terres rares ?
#ecoConceptionWeb @romainpetiot44
source : https://www.encyclo-ecolo.com/Epuisement_des_ressources
#ecoConceptionWeb @romainpetiot44
Extraction de Cobalt en Afrique (République démocratique du Congo)
source : https://www.courrierinternational.com/article/republique-democratique-du-congo-le-scandaleux-business-du-cobalt
#ecoConceptionWeb @romainpetiot44
Ou sinon, Les impacts du numérique en 1 chiffre
#ecoConceptionWeb @romainpetiot44
3,7 %
#ecoConceptionWeb @romainpetiot44
Les impacts, c’est où et comment ?
#ecoConceptionWeb @romainpetiot44
Source : greenIT.fr
#ecoConceptionWeb @romainpetiot44
Que faire ?
#ecoConceptionWeb @romainpetiot44
Que faire ?Allonger la durée de vie du matériel
#ecoConceptionWeb @romainpetiot44
Que faire ?Allonger la durée de vie du matériel
Acheter matériel reconditionné
#ecoConceptionWeb @romainpetiot44
Que faire ?Allonger la durée de vie du matériel
Achéter matériel reconditionné
ou d’occasion
#ecoConceptionWeb @romainpetiot44
Et c’est tout ?
#ecoConceptionWeb @romainpetiot44
Frugalité fonctionnelle
#ecoConceptionWeb @romainpetiot44
Eco-conception Web
#ecoConceptionWeb @romainpetiot44
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.
#ecoConceptionWeb @romainpetiot44
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.
#ecoConceptionWeb @romainpetiot44
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.
#ecoConceptionWeb @romainpetiot44
Les référentiels
#ecoConceptionWeb @romainpetiot44
Retour d’expérience
#ecoConceptionWeb @romainpetiot44
La sape connectée
#merciLaSape
#ecoConceptionWeb @romainpetiot44
Présentation du site
Site WordPresseThème : event-star
Page builder : ElementorHébergement : OVH
#ecoConceptionWeb @romainpetiot44
MesuresPoids le pageVitesse d’affichage (Fully Loaded)
Nombre de requêtesNombre d’éléments du DomEstimation GESConsommation électricité
#ecoConceptionWeb @romainpetiot44
MesuresPoids le pageNombre de requêtesVitesse d’affichage (fully Loaded)
#ecoConceptionWeb @romainpetiot44
MesuresPoids le pageNombre de requêtesVitesse d’affichage (Fully Loaded)
Nombre d’éléments du Dom
#ecoConceptionWeb @romainpetiot44
MesuresPoids le pageNombre de requêtesVitesse d’affichage (Fully Loaded)
Nombre d’éléments du DomEstimation GES
#ecoConceptionWeb @romainpetiot44
MesuresPoids le pageNombre de requêtesVitesse d’affichage (Fully Loaded)
Nombre d’éléments du DomEstimation GESConsommation électricité
#ecoConceptionWeb @romainpetiot44
Mesures
#ecoConceptionWeb @romainpetiot44
Audit sur les fonctionnalités
#ecoConceptionWeb @romainpetiot44
Page d’accueilSlider
#ecoConceptionWeb @romainpetiot44
Page d’accueilSliderPrésentation de la soirée
#ecoConceptionWeb @romainpetiot44
Page d’accueilSliderPrésentation de la soiréeListe de tous les participants
#ecoConceptionWeb @romainpetiot44
Page d’accueilSliderPrésentation de la soiréeListe de tous les participantsIframe d’inscription EventBrite
#ecoConceptionWeb @romainpetiot44
Page d’accueilSliderPrésentation de la soiréeListe de tous les participantsIframe d’inscription EventBriteIframe Google Maps
#ecoConceptionWeb @romainpetiot44
Page ConceptTexte de présentationIframe Google MapsPrésentation des membres de l’équipe
#ecoConceptionWeb @romainpetiot44
Page Listing soirées
#ecoConceptionWeb @romainpetiot44
Page soirées
#ecoConceptionWeb @romainpetiot44
Audit technique
#ecoConceptionWeb @romainpetiot44
Choix CMS & Thème & Page builder
#ecoConceptionWeb @romainpetiot44
Relecture du code généré
Style inlineemojijquery version 1.xHTML, JS, CSS pas minimiser et pas regroupé
#ecoConceptionWeb @romainpetiot44
GTmetrix
Images non optimisées avec des problèmes de taille
Manque le cache
#ecoConceptionWeb @romainpetiot44
Unused CSS
Beaucoup de fichiers
Beaucoup de code inutil
#ecoConceptionWeb @romainpetiot44
Hébergeur
PlanetHosterInfomaniakgreenshift
#ecoConceptionWeb @romainpetiot44
Conformité HTML
La page d’accueil n’a pas de H1Problème sur le menu mobile (text banc)Fonctionne sur iphone 4 (minimum requis)7 erreurs w3c
#ecoConceptionWeb @romainpetiot44
Audit contenu
#ecoConceptionWeb @romainpetiot44
Pages zombiesrecherche Google :
site:www.sape-connectee.org
une page « non-classée » et les pages « quand, où? », «
pour qui? »
#ecoConceptionWeb @romainpetiot44
Pages Réglementation
Mention cookiesRGPDcrédit photosmentions légales
#ecoConceptionWeb @romainpetiot44
Arbitrages et implémentations
#ecoConceptionWeb @romainpetiot44
Le thème Twenty Nineteen avec l’adoption de l’éditeur Gutenberg
(natif)
#ecoConceptionWeb @romainpetiot44
Les participants
Lister 5 participants puis au clique sur le bouton « Voir tous les participants », s’affiche le listing des participants.
#ecoConceptionWeb @romainpetiot44
Les participantsJson généré dans le custom block
#ecoConceptionWeb @romainpetiot44
Les participants
#ecoConceptionWeb @romainpetiot44
Les inscriptionsAu click sur le bouton “s'inscrire”, s’affiche l’iframe eventBrite
#ecoConceptionWeb @romainpetiot44
La carteOpen Street Maphttps://api-adresse.data.gouv.fr/search/?q
Générer un image png depuis l’API OSM
Lien href vers la page openStreetMap
#ecoConceptionWeb @romainpetiot44
La carte
#ecoConceptionWeb @romainpetiot44
- Retirer les fonctionnalités de commentaires
- Retirer les fonctionnalités « emoji »
- Bloquer le Cron WordPress
- 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
#ecoConceptionWeb @romainpetiot44
- Limiter les animations CSS/JS
- Lister les soirées sur deux colonnes
- Ne pas utiliser des bibliothèques Jquery,
Bootstrap
Les autres actions
#ecoConceptionWeb @romainpetiot44
Re-mesures
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
#ecoConceptionWeb @romainpetiot44
Résultats
#ecoConceptionWeb @romainpetiot44
Côté client
Nécessite moins de ressources
Propice à fonctionner sur des terminaux vieillissants
#ecoConceptionWeb @romainpetiot44
Côté hébergement
Note the Green Web Foundation
#ecoConceptionWeb @romainpetiot44
Côté réseauPage légère = moins de sollicitation
#ecoConceptionWeb @romainpetiot44
Romain Petiot@romainpetiot44
Merci !