Sensibilisation à l'éco-conception logicielle.

Supports de cours d'éco-conception. Janvier 2023.

Transcript

1. Sensibilisation à l’éco conception
2. Présentation Jérémy DESVAUX DE MARIGNY Consultant - Direction Technique - Développement WordPress - Obtention du label Numérique Responsable pour l’Agence Wonderful @jdmweb
3. Qu’est-ce que l'éco-conception?
4. Réponses? ?
5. On cherche à réduire l’impact / l’empreinte, d’un service numérique
6. Pourquoi est-ce devenu un sujet?
7. Réponses? ?
8. 1 - L’aspect environnemental “ Alors que l’humanité doit diviser son empreinte écologique par 4 pour atteindre les objectifs d’un développement durable, l’univers numérique continue son expansion, avec des impacts environnementaux toujours plus importants. “ En 2020, le numérique représente 7% de nos émissions de gaz à effet de serre, soit plus que l’aviation civile. Greenit.fr
9. 2 - La professionnalisation des métiers du web Qualité Web Accessibilité Opquast RGAA Eco conception RGESN
10. Environnement & démarche qualité. Let’s go!
11. Sommaire 1. Le cycle de vie de l’affichage d’une page 2. Identification des impacts 3. Méthodologie d’amélioration (en 4 points) 4. Pratique
12. 01 Le cycle de vie de l’affichage d’une page
13. “Je voudrais afficher la page d’accueil du site de l’école”
14. Qu’est-ce qui se passe alors? ?
15. Affichage d’une page web : requête Client Réseau internet Serveur Web Calcul / Exécution du code
16. Chronologie d’une requête 1. Un utilisateur va se servir d'un terminal : ordinateur, tablette, téléphone etc. 2. Ces terminaux sont équipés d’un navigateur internet, comme chrome, firefox, safari, edge, brave etc, aussi appelés clients. 3. Pour afficher le service numérique, le navigateur va faire une requête à un serveur web. 4. La requête va transiter sur le réseau internet pour atteindre le serveur. 5. Ce dernier va calculer la page à retourner, puis préparer une réponse qui va être envoyée en sens inverse au client.
17. Exemple de réponse
18. Affichage d’une page web : réponse Client Réseau internet Serveur Web Calcul du rendu
19. Chronologie d’une réponse 1. La réponse part du serveur, et re-transite en sens inverse à travers le matériel réseau qui constitue internet. 2. Le client récupère la réponse, l’analyse puis demande au serveur les différentes ressources nécessaires au bon affichage de la page : les images, les feuilles de style, les fichiers javascript, et les polices notamment. 3. Le navigateur interprète et exécute les différentes ressources. Il affiche les images, il applique les styles demandés, et exécute le code JavaScript interprété. Il calcule tout pour construire la page. 4. La page est complètement affichée dans le navigateur.
20. Résultat final
21. Sous le capot
22. Affichage de la page supdeweb.com/montpellier Client Réseau internet Serveur Web Calcul du rendu 65 requêtes = 65 fois ce schéma 8Mo de ressources échangées à travers les équipements
23. Combien d’équipements traversés? Commande terminal : traceroute IP ou site web ex : traceroute supdeweb.com
24. 02 Les impacts associés
25. Un nuage ? Vraiment ?
26. Impacts sur le serveur Complexité de calcul Répétition de calcul Travail pour rien Duplication sans valeur ajoutée CPU Mémoire Ventilateur Consommation électrique Scalabilité & obsolescence Saturation
27. Réduction des impacts sur le serveur Complexité de calcul Répétition de calcul Éviter (Cache) Réduire les calculs Optimiser le code Sobriété fonctionnelle Sobriété visuelle Scalabilité & obsolescence Bien dimensionner Surveiller Éviter la saturation Prolonger la durée de vie Objectifs: Éviter de changer le serveur / Réduire sa consommation
28. Impacts sur le réseau Bande passante Fréquence de transfert Téléchargement pour rien Poids Scalabilité & obsolescence Saturation
29. Réduction des impacts sur le réseau Bande passante Fréquence de transfert Cache pour éviter les téléchargements redondants Réduire le Poids des réponses / des pages. Compression Concaténation Réduire le nb de ressources à télécharger Scalabilité & obsolescence Bien dimensionner Surveiller Éviter la saturation Prolonger la durée de vie Objectifs: Éviter de changer les équipements / Réduire leur consommation
30. Impacts sur les terminaux Ressources Obsolescence Saturation CPU Batterie Mémoire Saturation
31. Réduction des impacts sur les terminaux Ressources Obsolescence Éviter la saturation Prolonger la durée de vie Optimiser pour l’exécution client Réduire les calculs Simplifier Saturation Objectifs: Réduire leur consommation / Éviter un changement de terminal
32. On cherche à réduire l’impact / l’empreinte, d’un service numérique -> En vue d’éviter des sur consommations et des remplacements matériels
33. 03 Méthodologie
34. 4 savoirs faire indispensables 1. Connaître les opportunités de sobriété numérique 2. Connaître les bonnes pratiques 3. Savoir utiliser les outils de mesures 4. Savoir tenir un cap
35. 3.1 Connaître les opportunités de sobriété numérique Spécifications Limiter les fonctionnalités non essentielles Conception Design sobre Approche mobile first ou +>DC Production Optimiser le code, le cache Choisir un cap, le mesurer, le maintenir Hébergement Serveurs bien dimensionnés, bien utilisés. Hébergeur engagé. Limiter les DEEE
36. 3.2 Connaître les bonnes pratiques
37. 3.3 Savoir utiliser les outils de mesures - Inspecteur web - Nombre de requêtes - Poids - Temps d’exécution - Outil d’analyse spécialisé - ecoindex.fr - Green It extension - Lighthouse - Page speed insights
38. 3.4 Savoir tenir un cap - On choisit un but, communément appelé budget, essayer de viser une métrique choisie (ou plusieurs) et s’y tenir (poids, nombre de requêtes, vitesse de chargement, eco index …) - Mesurer avant application des améliorations - Faire les modifications - Mesurer de nouveau - Tenir la métrique souhaitée dans le temps
39. Le client fait une demande de fonctionnalité - On questionne la demande - Si non pertinent on arbitre. Go? No Go? Alternative plus légère? - On fait passer en web design - On anticipe les impacts, on critique - On implémente - En faisant attention au budget associé. - On mesure - On optimise si ça ne passe pas. - On revient dessus si ça ne passe toujours pas.
40. On essaye?
41. 04 Pratique
42. “Je voudrais acheter un billet de train”
43. Un site de réservation de billets de train ? ?
44. Un site de réservation de billets de train Logo Gare / Date Gare / Date 2 Go Départ Arrivée Nb pers
45. Un site de réservation de billets de train
46. Ce site est-il éco-responsable? ?
47. On applique la méthode 1. On mesure - https://www.ecoindex.fr/ - Green It Extension
48. On applique la méthode 2. On évalue le scope fonctionnel - Peut-on réduire le scope fonctionnel? - Le service est-il bien concentré sur sa valeur ajoutée initiale? Pas d’obésité fonctionnelle?
49. On applique la méthode 3. On évalue le design - Le design est-il adapté? Pas trop lourd? - Si trop lourd, revoir les maquettes. - Faire attention aux implications des décisions de design - Mettre en perspective d’un objectif à ne pas dépasser
50. On applique la méthode 4. On évalue le code qu’on peut (le code client - frontend) • Est-ce que le serveur communique des directives de cache au client ? Si non, configurer le cache client. • Le poids du service est-il raisonnable ou trop important ? Si trop lourd : - optimiser les assets du mieux possible (images, CSS, JS, polices, vidéos notamment) - Réduire le périmètre fonctionnel si possible • Le nombre de requêtes nécessaires à l’utilisation du service est-il raisonnable ? Si non, optimiser les requêtes avec différents principes (concaténation, sprites, lazy load) • La gestion des images est-elle optimisée ? • Si non, reprendre le process image • Utiliser des formats modernes • Mettre en place des outils de compression
51. Pour les terminaux - Le code envoyé au terminal est-il optimisé pour fonctionner sur la plupart des terminaux en termes de poids et de complexité de calcul ? - Si non, optimiser le poids (refactoring, concatenation, minification, simplification, polyfills) - Dans quelle mesure le service numérique s’adapte-t-il aux conditions dans lesquelles il est utilisé par le terminal ? (taille d’écran, densité de pixels, offline, batterie, capacités du navigateur) - Si pas satisfaisant, mieux exploiter les forces et les faiblesses du panel de terminaux supportés. - La technologie est-elle adaptée - Attention aux technologies qui exercent une grosse pression sur le front (webgl, framework full front)...
52. On applique la méthode 5. Si on peut on analyse le code backend • Le code est-il saint? Est-il optimisé Si non, refactorer le code pour être moins consommateur. • Le code est-il bien mis en cache? - Si non, mettre en place une politique de cache
53. On applique la méthode 6. On rédige une recommandation
54. Un site de réservation de billets de train Logo Gare / Date Gare / Date 2 Go Départ Arrivée Nb pers
55. midjourney /imagine “simple and minimalist website design to book a train ticket”
56. 05 Exercice Exercice
57. Appliquer la méthode à un site existant 1. Choisir un site 2. L’analyser en suivant la méthode 3. Rédiger une recommandation 4. Présenter cette recommandation à l’oral