Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sensibilisation à l'éco-conception logicielle.

Sensibilisation à l'éco-conception logicielle.

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

Jeremy Desvaux de Marigny

January 30, 2023
Tweet

More Decks by Jeremy Desvaux de Marigny

Other Decks in Education

Transcript

  1. 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
  2. 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
  3. 2 - La professionnalisation des métiers du web Qualité Web

    Accessibilité Opquast RGAA Eco conception RGESN
  4. 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
  5. 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.
  6. 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.
  7. 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
  8. 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
  9. 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
  10. Impacts sur le réseau Bande passante Fréquence de transfert Téléchargement

    pour rien Poids Scalabilité & obsolescence Saturation
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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.
  19. Un site de réservation de billets de train Logo Gare

    / Date Gare / Date 2 Go Départ Arrivée Nb pers
  20. 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?
  21. 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
  22. 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
  23. 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)...
  24. 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
  25. Un site de réservation de billets de train Logo Gare

    / Date Gare / Date 2 Go Départ Arrivée Nb pers
  26. 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