[TeleCoop] Article blog + Déclaration d’écoconception

--- title: TeleCoop – Article blog + Déclaration d’écoconception --- # Article blog :::info **Titre**: à définir **Auteurs** : Timothée Goguely et Gauthier Roussilhe. **Dernière mise à jour** : 16/11/2023 ::: L'**écoconception numérique** continue à se développer en France, notamment portée par le nouveau [Référentiel général d'écoconception de services numériques (RGESN)](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/) développé au sein de l'État. **Cette pratique consiste à se demander quoi faire pour réduire la charge environnementale (émissions de gaz à effet de serre, consommation d'énergie, d'eau, etc.) d'un site web et de son usage.** Nous avons maintenant une certaine expérience du sujet puisque nous explorons à la fois en théorie et en pratique depuis 5 ans toutes ces questions. De plus, nous avons vu de nombreuses déclarations d'écoconception apparaître avec de nombreuses variations (référentiels, indicateurs et mesures, méthodologie, etc.) : * [ille-et-vilaine.fr/declaration-ecoconception](https://www.ille-et-vilaine.fr/declaration-ecoconception) * [exposition-celtique.bzh/ecoconception](https://www.exposition-celtique.bzh/ecoconception/) * [grenoblealpesmetropole.fr/302-eco-conception.htm](https://www.grenoblealpesmetropole.fr/302-eco-conception.htm) * [lafibre.info/forum/ecoconception/](https://lafibre.info/forum/ecoconception/) * [lesentreprises-sengagent.gouv.fr/eco-conception](https://lesentreprises-sengagent.gouv.fr/eco-conception) * [ademe.fr/une-logique-d-ecoconception/](https://www.ademe.fr/une-logique-d-ecoconception/) L'idée était de trouver un format de déclaration d'écoconception numérique qui réponde de façon détaillée au RGESN tout en restant synthétique et pertinent. La refonte de Telecoop s'inscrit d'ailleurs dans la continuité de l'écoconception du site de [Commown](commown.coop/) développée en collaboration avec [Derek Salmon](https://www.pikselkraft.com/). Dans cette étude de cas, nous avons appliqué le [Référentiel général d'écoconception de services numériques (RGESN)](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/) constitué de **8 grands axes** : 1. [Stratégie](#Stratégie) 2. [Spécifications](#Spécifications) 3. [Architecture](#Architecture) 4. [UX/UI](#UXUI-amp-Contenus) 5. [Contenus](#UXUI-amp-Contenus) 6. [Front-end](#Front-amp-Back-end) 7. [Back-end](#Front-amp-Back-end) 8. [Hébergement](#Hébergement) ## Stratégie Commençons donc par la stratégie. Contrairement à d'autres projets portés précédemment, **le contenu et l'arborescence n'ont pas subi de modifications majeures**. Certaines pages ont été enlevées ou déplacées mais la structure est restée à peu près la même. Cela est d'autant plus normal que l'activité et l'offre de Telecoop n'ont pas été modifiées entre temps. La majorité du travail d'écoconception s'est donc portée sur le **design et le développement du nouveau site web** sous la houlette de [Timothée Goguely](https://timothee.goguely.com/). Nous avons commencé notre démarche en nous fixant certains objectifs sur nos indicateurs techniques habituels : **poids total de la page**, **nombre de requêtes** et **indicateurs de performances** (FCP, LCP, Speed Index). À cela se rajoute aussi des objectifs de **rétrocomptabilité** basés sur le RGESN, visant à produire un site web qui fonctionne de manière optimale pour des terminaux âgés de 5 ans ou plus. Nos objectifs pour ce site étaient de limiter le **poids total moyen des pages à 750 Ko** (500 Ko idéalement), le **nombre maximum de requêtes à 30**, un **FCP inférieur à 1,5 seconde**, un **LCP inférieur à 2 secondes** et un **Speed Index inférieur à 1 seconde**. Nous avons décidé de **ne pas prendre en compte les outils grand public d'estimation du poids environnemental de pages web** (Ecoindex ou Website Carbon par exemple) car nous ne trouvons pas leur méthodologie satisfaisante. Les facteurs d'impacts environnementaux d'Ecoindex sont issus d'une ACV qui n'est pas ouverte, et le modèle de Website Carbon est basé sur une vision trop macroscopique pour être fournir des estimations pertinentes à notre sens. Nous préférons directement travailler avec les indicateurs techniques eux-mêmes utilisés et agrégés par ces outils. ![schema-modeles](https://hackmd.io/_uploads/S18sO57Vp.jpg) Notre stratégie se résume finalement à répondre au cœur du RGESN : contribuer à l'allongement de la durée de vie des équipements et fournir une expérience optimale même dans les conditions d'usage les plus difficiles. Nous estimons qu'en visant ces objectifs nous permettons de réduire l'empreinte environnementale attenante à l'usage du site web sans que cela ait besoin d'une estimation chiffrée en éq. CO2 ou autres facteurs. Au-delà du respect du RGESN, il s'agissait aussi pour nous de renforcer le cercle vertueux des bonnes pratiques du web : attention très forte à l'accessbilité, respect du RGPD (Matomo), une meilleure expérience pour les utilisateurs et l'augmentation générale de la qualité du site. ## Spécifications Cette partie du RGESN est moins pertinente pour un projet « simple » comme celui de TeleCoop, mais nous avons dû faire avec des **services tiers** particulièrement récalcitrant à une démarche d'écoconception : le service de gestion des cookies (Axeptio), Avis Vérifiés et Matomo (hébergé par Ethibox) représentent à eux seuls plus de la moitié du poids de la page d'accueil (uniquement en JS). Il n'était malheureusement pas possible d'enlever ses services tiers ou même d'influer concrètement sur les widgets et les options d'intégration qu'ils proposent. Seule l'intégration du **widget RocketChat** a pu faire l'objet d'une d'intégration sur mesure consistant à ne charger et n'afficher le widget (et tous les assets qui vont avec) qu'au clic sur un bouton composé d'une simple icône SVG. ## Architecture Le site de TeleCoop est géré via une seule solution, le **CMS [Kirby](https://getkirby.com/)** basé sur PHP. À ce titre nous ne faisons pas appel à des frameworks externes. Les différents protocoles techniques ont bien été intégré en fonction de leur évolution et de leur pertinence par rapport au contenu présent sur le site. Nous avons fait en sorte que le blog soit rapatrié sous le même nom de domaine (avant : https://www.blog.telecoop.fr/ — après : https://telecoop.fr/blog). Le blog est ainsi géré par la même solution (Kirby) au lieu d'avoir deux solutions différentes. ## UX/UI & Contenus Au vu de nos indicateurs et de nos objectifs, le travail d'UX et d'UI mené a pris en compte les critères du RGESN là où ils sont applicables : le site est fait pour **fonctionner à bas débit**, les **parcours ont été optimisés**, les **contenus lourds (images, vidéo) suivent une logique de sélection et d'optimisation assez poussée** et décrite dans la déclaration d'écoconception. Concrètement, toutes les images sont converties en WebP, avec des fallbacks prévus en JPG ou PNG pour les équipements plus anciens, et un chargement dit « paresseux » (*lazy loading*). La seule vidéo présente dans le site a été compressée à 480p et sans option de pré-chargement avant d'éviter tout chargement exédentaire de données. ## Front & Back-end Comme dit précédemment, [Kirby](https://getkirby.com/) est utlisé pour le site de TeleCoop. Ce CMS est basé sur PHP et ne gère pas de base de données. Au-delà des caractéristiques techniques, Kirby propose selon nous d'une des meilleures expériences de gestion de contenu pour ses utilisateurs. Le site a été pensé en *mobile-first* et est fait pour s'adapter à toutes les tailles d'écran standards. Nous avons mis en place de nombreux mécanismes pour s'assurer d'un **chargement optimisé** des ressources et des contenus transférés comme expliqué dans la [déclaration d'écoconception](). De même, une **mise en cache** est activée pour éviter tout transfert superflu. ## Hébergement Le site est hébergé chez **Scaleway**. Il existe quelques hébergeurs français qui répondent aux critères du RGESN. Nous apprécions particulièrement et valorisons [la transparence de Scaleway](https://www.scaleway.com/fr/leadership-environnemental/) sur la consommation d'énergie et d'eau de ses installations, c'est pour cela que nous les avons choisi. ## Résultats Voici à titre d'exemple l'**évolution des indicateurs avant et après refonte**, sur une sélection de quelques pages. Les données de la colonnes « après » sont une moyenne des résultats sur mobile et desktop. :::spoiler Page d’Accueil | | Avant | Après | Évolution | | -- | ----- | ----- | --------- | | FCP | 1.57s | 0.75s | ↘︎ ÷2.09 | | LCP | 3.22s | 1.7s | ↘︎ ÷1.89 | | Speed Index | 2.79s | 0.9s | ↘︎ ÷3.1 | | Performances | 62/100 | 97/100 | ↗︎ +35 | | Accessibilité | 81/100 | 96/100 | ↗︎ +15 | | Bonnes pratiques | 100/100 | 100/100 | – | | SEO | 89/100 | 100/100 | ↗︎ +11 | | Poids total | 881 Ko | 721 Ko | ↘︎ ÷1.22 | ::: :::spoiler À propos | | Avant | Après | Évolution | | -- | ----- | ----- | --------- | | FCP | 1.73s | 0.75s | ↘︎ ÷2.3 | | LCP | 2.11s | 1.7s | ↘︎ ÷1.24 | | Speed Index | 3.01s | 0.9s | ↘︎ ÷3.34 | | Performances | 62/100 | 97/100 | ↗︎ +35 | | Accessibilité | 72/100 | 96/100 | ↗︎ +24 | | Bonnes pratiques | 100/100 | 100/100 | – | | SEO | 89/100 | 100/100 | ↗︎ +11 | | Poids total | 873 Ko | 650 Ko | ↘︎ ÷1.34 | ::: :::spoiler Blog | | Avant | Après | Évolution | | -- | ----- | ----- | --------- | | FCP | 1.73s | 0.75s | ↘︎ ÷2.3 | | LCP | 2.11s | 1.45s | ↘︎ ÷3 | | Speed Index | 3.01s | 0.75s | ↘︎ ÷4 | | Performances | 89/100 | 99/100 | ↗︎ +10 | | Accessibilité | 96/100 | 100/100 | ↗︎ +4 | | Bonnes pratiques | 100/100 | 100/100 | – | | SEO | 93/100 | 100/100 | ↗︎ +7 | | Poids total | 1310 Ko | 905 Ko | ↘︎ ÷1.44 | ::: :::spoiler Article | | Avant | Après | Évolution | | -- | ----- | ----- | --------- | | FCP | 1.7s | 0.7s | ÷2.4 ↘︎ | | LCP | 1.85s | 1.3s | ÷1.4 ↘︎ | | Speed Index | 1.7s | 0.7s | ÷2.4 ↘︎ | | Performances | 99/100 | 100/100 | +1 ↗︎| | Accessibilité | 96/100 | 100/100 | +4 ↗︎ | | Bonnes pratiques | 100/100 | 100/100 | – | | SEO | 100/100 | 100/100 | – | | Poids total | 229 Ko | 569 Ko | ×2.5↗︎ | ::: ### Moyenne | | Avant | Après | Évolution | | -- | ----- | ----- | --------- | | FCP | 1.68s | 0.74s | ÷2.3 ↘︎ | | LCP | 2.32s | 1.54s | ÷1.5 ↘︎ | | Speed Index | 2.63s | 0.81s | ÷3.2 ↘︎ | | Performances | 78/100 | 98/100 | +20 ↗︎| | Accessibilité | 86/100 | 98/100 | +12 ↗︎ | | Bonnes pratiques | 93/100 | 100/100 | +7 ↗︎ | | SEO | 100/100 | 100/100 | – | | Poids total | 823 Ko | 711 Ko | ÷1.2 ↘︎ | En se basant sur la **moyenne des résultats obtenus pour chaque indicateur** à partir de ce panel de 4 pages, on peut constater que **nos différents objectifs ont tous été atteints**. Si vous souhaitez en savoir plus sur notre démarche d’écoconception, nous vous invitons à consulter notre [Déclaration d’écoconception](https://telecoop.fr/ecoconception). # Déclaration d’écoconception ## Préambule La refonte du site de Telecoop a été portée entièrement par [Timothée Goguely](timothee.goguely.com/), designer et développeur front-end. [Gauthier Roussilhe](https://gauthierroussilhe.com/), chercheur spécialisé sur les enjeux environnementaux de la numérisation, a accompagné le processus d'écoconception. ## Raison d’être de ce site Le site de TeleCoop vise à promouvoir une offre de forfaits mobiles plus sobres et un modèle coopératif plus vertueux. De même, le site sert de support à la relation clients et à l'accès aux différents services internes pour les clients gérés par un autre outil. La réduction des impacts environnementaux du secteur numérique est au coeur de la mission de TeleCoop. Les cibles utilisatrices sont des clients particuliers ou professionnels potentiels, intéressés par l'offre de TeleCoop et l'alignement de leurs valeurs avec un service plus adapté. Le site répond aussi aux besoins métiers des équipes de TeleCoop pour mettre en avant leurs offres, promouvoir le sociétariat au sein de la coopérative et gérer la relation client. ## Diagnostique RGESN Le diagnostic mené en novembre 2023 a porté sur l'ensemble des pages du site. :::success ### Conformité À l’aide de l'outil d’auto-diagnostic [NumEcoDiag](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/numecodiag/), ce service numérique a un taux de conformité de **83%** pour 99% des critères évalués selon le [Référentiel Général d'Écoconception de Services Numériques](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/) (RGESN). [Voir le détail du diagnostic (.csv, 14 Ko)]() [ajouter le lien] ::: ## Stratégie mise en œuvre en matière de réduction ou de limitation des impacts environnementaux ### Design * Navigation la plus intuitive possible pour réduire le temps passé à trouver une information * Tous les contenus sont consultables sur tous types de terminaux (mobiles, tablettes, ordinateurs). Le site s’adapte à toutes les tailles d’écran. * Nombres maximum de polices de caractères utilisées : 3 ### Assets * Poids total maximum par page : 750 Ko (moyenne à 650 Ko) * Auto-hébergement et optimisation du poids des polices de caratcères * Mise en cache des assets (CSS, JS, images et polices de caractères) * Préchargement des assets critiques via `<link rel="preload">` : ```xml  <link rel="preload" as="font" type="font/woff2" href="path/to/poppins-latin-400-normal.woff2" crossorigin>  <link rel="preload" as="image" type="image/webp" fetchpriority="high" href="path/to/image-256x.webp" imagesrcset="path/to/image-256x.webp 256x, path/to/image-512x.webp 512w, path/to/image-768x.webp 768w, path/to/image-1280x.webp 1280w" imagesizes="100vw"> ``` #### Images Toutes les **images** (exceptés les GIFs) sont converties côté serveur au format **WebP** (qualité 80) et limitées à 1280px de largeur maximum pour limiter leur poids. - Résolutions multiples (256, 512, 768, 1280) via les attributs `srcset` et `sizes` afin de s’adapter automatiquement à la résolution du terminal depuis lequel est consulté le site. - Fallback en JPG (ou PNG) pour les navigateurs ne supportant pas le format WebP. - Chargement paresseux (*lazy loading*) via l'attribut `preload="lazy"` ```xml  <picture> <source srcset="path/to/image-256x-q80.webp 256w, path/to/image-512x-q80.webp 512w, path/to/image-768x-q80.webp 768w, path/to/image-1280x-q80.webp 1280w" sizes="100vw" type="image/webp"> <img src="path/to/image-256x-q80.jpg" srcset="path/to/image-256x-q80.jpg 256w, path/to/image-512x-q80.jpg 512w, path/to/image-768x-q80.jpg 768w, path/to/image-1280x-q80.jpg 1280w" sizes="100vw" width="1280" height="720" loading="lazy" alt="Texte alternatif"> </picture> ``` Le **logo** et l’ensemble des **icônes** sont au format vectoriel SVG, optimisé via [SVGOMG](https://jakearchibald.github.io/svgomg/). ```xml  <svg id="telecoop-logo" aria-label="TeleCoop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 594.98 148.72" width="160" height="40" fill="#00E164"> <path d="M557.32 51.74c-10.4 0-20.41 3.94-26.33 9.78-11.1 10.95-11 22.39-11 30.5v56.7h22.57l-.66-59.95c0-9.46 5.55-17.3 15.27-17.3 9.06 0 15.28 6.76 15.28 17.3s-6.09 17.57-15.28 17.56a15.58 15.58 0 0 1-6.85-1.49l-2.52 17.62a33.36 33.36 0 0 0 13.69 2.75c20.55 0 33.53-18.88 33.53-36.3-.02-21.76-17.28-37.17-37.7-37.17ZM455.53 20.8q-3.86-1.12-5.14-3a5.75 5.75 0 0 1-1-3.63 18.75 18.75 0 0 1 1.12-5.77Q453 0 457.3 0a31.32 31.32 0 0 1 4.28 1l23.53 7.18c2.56.75 4.28 1.74 5.14 3a6 6 0 0 1 1 3.7 19.18 19.18 0 0 1-1.12 5.84c-1.78 5.62-4.1 8.42-6.95 8.43a9.4 9.4 0 0 1-4.28-1ZM501.9 43.88c-7.66-7.12-16.29-10.63-26.21-10.66S457.12 36.75 449.37 44s-11.48 16-11.52 27.09a34.43 34.43 0 0 0 5.82 19.62A39.16 39.16 0 0 0 458 103.88a40 40 0 0 0 10.79 3.82s0 .07-.05.1c-.17.47-.38 1-.59 1.39s-.45.89-.71 1.34a30.17 30.17 0 0 1-37.07 13.91 7.13 7.13 0 0 0-2.58-.48 7.43 7.43 0 0 0-7 4.81 8 8 0 0 0-.48 2.61 7.49 7.49 0 0 0 4.84 7 45 45 0 0 0 57.9-26.44 5.32 5.32 0 0 0 .35-1.3 6 6 0 0 0 .12-1.28.74.74 0 0 0 0-.26 5.9 5.9 0 0 0-.18-1.46.14.14 0 0 0 0-.06 40.27 40.27 0 0 0 9.72-3.38 37 37 0 0 0 14.31-13 35.41 35.41 0 0 0 5.88-20.2c-.02-11.12-3.76-20-11.35-27.12Zm-16.18 38.49a17.07 17.07 0 0 1-10.3 3.85 16.6 16.6 0 0 1-10.18-3.8c-3.44-2.61-5.16-6.65-5.13-11.57s1.63-9 5-11.63a16.42 16.42 0 0 1 10.47-3.89A16.88 16.88 0 0 1 486 59.07c3.35 2.58 5 6.62 5 11.57s-1.75 9.08-5.28 11.73ZM374.91 30.68q-3.86-1.12-5.14-3a5.81 5.81 0 0 1-1-3.63 18.75 18.75 0 0 1 1.12-5.77q2.53-8.41 6.81-8.43a33.2 33.2 0 0 1 4.27 1L404.49 18q3.86 1.13 5.14 3a5.93 5.93 0 0 1 1 3.7 18.88 18.88 0 0 1-1.12 5.84Q406.85 39 402.57 39a9.36 9.36 0 0 1-4.27-1Z"></path> <path d="M419.31 58.8c-7.65-7.12-16.29-10.63-26.2-10.66s-18.58 3.53-26.32 10.74S355.3 74.93 355.27 86a34.5 34.5 0 0 0 5.81 19.62 39.2 39.2 0 0 0 14.33 13.2 37.46 37.46 0 0 0 17.59 4.43 39 39 0 0 0 17.51-4.18 37 37 0 0 0 14.31-13 35.48 35.48 0 0 0 5.87-20.21c-.04-11.06-3.78-19.94-11.38-27.06Zm-16.18 38.48a17 17 0 0 1-10.29 3.86 16.58 16.58 0 0 1-10.18-3.8c-3.44-2.61-5.16-6.65-5.13-11.57s1.63-9 5-11.63A16.47 16.47 0 0 1 393 70.25 16.83 16.83 0 0 1 403.43 74c3.36 2.58 5 6.62 5 11.57s-1.76 9.07-5.3 11.71ZM269.82 73.19c0-29 21.48-51.16 52.3-51.16 12.29 0 21.76 3.54 28.82 8.35l-6.78 21.2c-5.23-3.58-12.72-6.93-21.16-6.93-18.09 0-28 13.15-28 28.54S304.85 102 323 102a40 40 0 0 0 21.62-6.93l6.79 21.2c-7.07 4.81-17 8.34-29.26 8.34-32 .04-52.34-22.3-52.33-51.42ZM213.24 92.58c.56 6.53 6.8 12.07 15.4 12.08a18.77 18.77 0 0 0 15.25-7.77l15.25 11.79c-2.08 4.3-12.06 16.09-30.92 16.09-24 0-38.69-16.52-38.69-38S204 48.35 225.32 48.35c23.16 0 35.77 14.85 35.77 39.67 0 1.39 0 2.91-.14 4.57Zm.76-14.69h23.57c-.28-5.83-4.58-10.82-11.78-10.82-7.69 0-11.29 5.68-11.79 10.82ZM156.2 23.17h22.28v101.74H156.2ZM97 92.61c.55 6.53 6.8 12.07 15.4 12.07a18.77 18.77 0 0 0 15.25-7.77l15.25 11.79c-2.08 4.3-12.06 16.09-30.91 16.09-24 0-38.7-16.51-38.7-38s14.42-38.41 35.78-38.41c23.16 0 35.77 14.84 35.77 39.66 0 1.39 0 2.91-.13 4.57Zm.7-14.69h23.6c-.28-5.83-4.59-10.82-11.79-10.82-7.63 0-11.24 5.68-11.79 10.82Z"></path><path d="M97.37 23.15v18.18H59.66v83.43H37.81V41.33H0V23.15h97.37z"></path> </svg>  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 32 32"> <path d="M23.5 29.071V5.928c-.004-1.064-.842-1.925-1.875-1.928h-11.25c-1.034.002-1.872.864-1.875 1.928v23.143c.002 1.065.841 1.927 1.875 1.929h11.25c1.034-.002 1.872-.865 1.875-1.929Z" fill="#00e164"/> <path d="M21.647 30a2.294 2.294 0 0 0 1.671-.699A2.427 2.427 0 0 0 24 27.586V4.414a2.431 2.431 0 0 0-.683-1.714 2.3 2.3 0 0 0-1.67-.7H10.353a2.296 2.296 0 0 0-1.67.699A2.423 2.423 0 0 0 8 4.414v23.172c-.006.643.24 1.261.682 1.715a2.294 2.294 0 0 0 1.671.699h11.294ZM18.636 2.966l-.517.531c-.276.28-.648.437-1.036.435H14.87a1.262 1.262 0 0 1-.987-.435l-.519-.531h5.272Zm-9.6 25.102h12.611a.466.466 0 0 0 .408-.241.492.492 0 0 0-.001-.483.471.471 0 0 0-.407-.242H8.941V4.414a1.44 1.44 0 0 1 .405-1.035 1.363 1.363 0 0 1 1.008-.416h1.694l1.176 1.207a2.28 2.28 0 0 0 1.694.724h2.211a2.178 2.178 0 0 0 1.647-.724l1.178-1.204h1.694c.377-.008.741.143 1.007.417.267.274.413.647.406 1.034v23.169c.007.387-.139.761-.406 1.034-.266.274-.63.425-1.007.417H10.353a1.372 1.372 0 0 1-1.317-.969Zm8.565-14.411-3.885 3.987a.488.488 0 0 0-.145.349c0 .132.052.258.145.349a.458.458 0 0 0 .679 0l3.885-3.987a.503.503 0 0 0-.005-.692.471.471 0 0 0-.674-.006Zm-3.505 2.876a.44.44 0 0 0 .339-.149l1.939-1.994a.503.503 0 0 0-.005-.692.471.471 0 0 0-.674-.005l-1.944 1.994a.488.488 0 0 0-.145.349c0 .132.052.258.145.349a.433.433 0 0 0 .345.148Zm3.471-.917-1.94 1.993a.492.492 0 0 0 0 .698.458.458 0 0 0 .679 0l1.94-1.993a.503.503 0 0 0-.006-.692.471.471 0 0 0-.673-.006Z" fill="#1f1549"/> </svg> ``` #### Vidéos Une seule vidéo est utilisée sur l’ensemble du site telecoop.fr, au sein de la page d’accueil. - Résolution et compression optimisés (480p H.264 MPEG-4 30FPS) afin de réduire son poids au maximum tout en offrant une qualité de visionnage suffisante. - Ajout de l’attribut `preload="none"` pour ne précharger aucune donnée. - Ajout des sous-titres en Français via l’élément `<track>` pour des questions d'accessibilité. - Lecture automatique désactivée. - Chargement paresseux (*lazy loading*) via `IntersectionObserver` : l’attribut `data-src` devient `src` uniquement lorsque la vidéo entre dans le viewport. ```xml <video class="lazy" controls preload="none" poster="path/to/telecoop-video-640x360.webp"> <source data-src="path/to/telecoop-video-480p.mp4" type="video/mp4"> <track default kind="captions" label="Français" srclang="fr" src="path/to/telecoop-video.vtt"> </video> ``` ```js document.addEventListener("DOMContentLoaded", function() { var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy")); if ("IntersectionObserver" in window) { var lazyVideoObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(video) { if (video.isIntersecting) { for (var source in video.target.children) { var videoSource = video.target.children[source]; if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") { videoSource.src = videoSource.dataset.src; videoSource.removeAttribute("data-src"); } } video.target.load(); video.target.classList.remove("lazy"); lazyVideoObserver.unobserve(video.target); } }); }); lazyVideos.forEach(function(lazyVideo) { lazyVideoObserver.observe(lazyVideo); }); } }); ``` ### Limitation du nombre de domaines et de requêtes - À l'exception des scripts de services tiers (matomo3.ethibox.fr, awsapis3.netreviews.eu, www.googletagmanager.com, cl.avis-verifies.com, app.mailjet.com et static.axept.io), l’intégralité des assets (CSS, JS, polices, images et vidéos) sont hébergés sur un unique nom de domaine : telecoop.fr - Nombre de **requêtes serveurs maximum** par page : 30 ### Éduquer sur le numérique responsable - Une page dédiée est mise en place [à mettre en ligne] : https://telecoop.fr/ecoconception/ - Rédaction de plusieurs articles relatifs au numérique responsable sur le [blog](https://telecoop.fr/blog) - Rédaction d'un article de blog dédié à la démarche d'écoconception du site web: [url] ### Efficacité de l'alimentation du serveur Scaleway assemble ses propres serveurs et est responsable de l’écoconception de ses équipements. À ce titre nous ne disposons pas d'informations sur les certifications des serveurs assemblés par Scaleway (EPEAT, 80Plus). ### Efficacité du serveur Le **PUE** (Power Usage Effectiveness) cible du serveur SCALEWAY AS12876 où est hébergé telecoop.fr est de **1,39** au niveau du centre de données DC3 en utilisant la norme internationale ISO/IEC 30134-2:2016, suivi de la certification ISO 50001:2018. ## Configuration minimum matérielle pour accéder au site - **Connexion internet (IPv4 ou IPv6) minimum** : un débit de 128 Kb/s (256 Kb/s recommandé) - **Taille minimum de l’écran**: 320px - **Processeur minimum** : microprocesseur 1 cœur à 1,5 Ghz ou plus puissant (microprocesseur 2 cœurs recommandé pour un affichage plus rapide) - **Mémoire vive minimum** : 1 Go de RAM (2 Go de RAM recommandé) ## Configuration logicielle minimum pour accéder au site - Navigateur supportant **TLS 1.2** ou supérieur (sans ce pré-requis, la connexion est impossible) - Navigateur supportant le codec vidéo **H.264** pour les vidéos (sans ce pré-requis, les vidéos H.264 ne s'affichent pas) - Système d'exploitation (ou navigateur) reconnaissant l'autorité de certification **Let's Encrypt** (sans ce pré-requis, la connexion demande de passer outre un message d'alerte) - Navigateurs supportant les modules **CSS Grid Layout** et **Flexible Box Layout**, ainsi que les **CSS Variables** (Custom Properties) ### Compatibilité navigateurs Les tests de compatibilité navigateurs ci-dessous ont été réalisés à l'aide de [BrowserStack](https://www.browserstack.com/). #### Mobile | Navigateur | Version | Système d’exploitation | Date | | ---------- | ------- | ---------------------- | ---- | | ![](https://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png =16x) Chrome | ✅ 71+ | Android 7+, iOS 12+ | 2018 | | ![](https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/48/safari-icon.png =16x) Safari | ✅ 10.3+ | iOS 12+ | 2018 | | ![](https://icons.iconarchive.com/icons/carlosjj/mozilla/48/Firefox-icon.png =16x) Firefox | ✅ 75+ | Android 7+, iOS 10+ | 2020 | | ![](https://icons.iconarchive.com/icons/dtafalonso/win-10x/48/Edge-icon.png =16x) Edge | ✅ 16+ | Android 8+ | 2017 | | ![](https://static-00.iconduck.com/assets.00/samsung-internet-icon-256x256-szmw4pbi.png =16x) Samsung Internet | ✅ 6.2+ | Android 7+ | 2017 | #### Desktop | Navigateur | Version | Système d’exploitation | Date | | ---------- | ------- | ---------------------- | ---- | | ![](https://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png =16x) Chrome | ✅ 79+ | GNU/Linux, Windows 7+, macOS 10.11+ | 2019 | | ![](https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/48/safari-icon.png =16x) Safari | ✅ 10.3+ | macOS 10.12+ | 2017 | | ![](https://icons.iconarchive.com/icons/carlosjj/mozilla/48/Firefox-icon.png =16x) Firefox | ✅ 75+ | GNU/Linux, Windows 7+, macOS 10.9+ | 2020 | | ![](https://icons.iconarchive.com/icons/dtafalonso/win-10x/48/Edge-icon.png =16x) Edge | ✅ 16+ | GNU/Linux, Windows 7+, macOS 10.15+ | 2017 | | ![](https://www.symbols.com/images/symbol/1/4114_opera.png =16x) Opera | ✅ 66+ | GNU/Linux, Windows 7+, macOS 10.11+ | 2020 | | ![](https://techwisegroup.com/wp-content/uploads/2017/05/IE-icon.jpg =16x) IE | ❌ | – | – | #### Texte Le site est également accessible et fonctionnel via des **navigateurs textes** tels que [Lynx](https://fr.wikipedia.org/wiki/Lynx_(navigateur)), compatible avec un grand nombre de systèmes d’exploitation (Un\*x, MacOS, VMS, Windows 95/98/NT, DOS386+ et OS/2 EMX) et ne nécessitant que très peu de ressources. ## Résultats et mesures Un suivi des indicateurs et des objectifs a aussi été mené sur l’échantillon des pages suivant avant et après la refonte : - [Accueil](https://telecoop.fr/) - [À propos](https://telecoop.fr/a-propos) - [Nos forfaits mobiles](https://telecoop.fr/particuliers/forfaits-mobile) - [Forfait mobile Sobriété](https://telecoop.fr/particuliers/forfaits-mobile/forfait-sobriete) - [Blog](https://telecoop.fr/blog) - [Article](https://telecoop.fr/blog/fairphone-5-plus-performant-plus-durable-et-plus-ethique) Les outils utilisés pour évaluer certains indicateurs techniques sont l’inspecteur « réseau » des outils de développement du navigateur et les outils [Lighthouse ](https://ecoresponsable.numerique.gouv.fr/publications/boite-outils/fiches/lighthouse/) et [Yellow Lab Tools](https://ecoresponsable.numerique.gouv.fr/publications/boite-outils/fiches/yellowlabtools/). Les mesures ci-dessous ont été effectuées les 15/11/2023 et 16/11/2023. Les rapports associés à chaque outils sont accessibles en cliquant sur les liens des différentes pages. ### PageSpeed Insights #### Mobile | Page | FCP | LCP | CLS | Speed Index | DOM | Perf | A11Y | Bonnes pratiques | SEO | | ---- | --- | --- | --- | ----------- | --- | ----- | ---- | ---------------- | --- | | [Accueil](https://pagespeed.web.dev/analysis/https-telecoop-fr/igfvku3428?form_factor=mobile) | 1.2s | 2.6s | 0.015 | 1.4s | 567 | 94 | 96 | 100 | 100 | | [À propos](https://pagespeed.web.dev/analysis/https-telecoop-fr-a-propos/oixeubbcbe?form_factor=mobile) | 1.2s | 2.3s | 0.039 | 1.5s | 317 | 98 | 100 | 100 | 100 | | [Nos forfaits mobiles](https://pagespeed.web.dev/analysis/https-telecoop-fr-particuliers-forfaits-mobile/ngslzmr8pj?form_factor=mobile) | 1.3s | 1.3s | 0.072 | 1.6s | 591 | 99 | 96 | 100 | 100 | | [Forfait mobile Sobriété](https://pagespeed.web.dev/analysis/https-telecoop-fr-particuliers-forfaits-mobile-forfait-sobriete/x6m9miuzan?form_factor=mobile) | 1.3s | 1.3s | 0.011 | 1.8s | 591 | 100 | 96 | 100 | 100 | | [Blog](https://pagespeed.web.dev/analysis/https-telecoop-fr-blog/n0mvlv9n22?form_factor=mobile) | 1.1s | 2.0s | 0 | 1.1s | 486 | 99 | 100 | 100 | 100 | | [Article](https://pagespeed.web.dev/analysis/https-telecoop-fr-blog-et-si-on-choisissait-de-louer-mon-mobile-plutot-de-l-acheter-telecoop-et-commown-lancent-leur-cooperation/dy64v26etq?form_factor=mobile) | 1.1s | 1.8s | 0.007 | 1.1s | 247 | 99 | 96 | 100 | 100 | | **Moyenne** | 1.2s | 1.9s | 0.024 | 1.4s | **466** | 83.2 | 97.3 | 100 | 100 | #### Desktop | Page | FCP | LCP | CLS | Speed Index | DOM | Perf | A11Y | Bonnes pratiques | SEO | | ---- | --- | --- | --- | ----------- | --- | ----- | ---- | ---------------- | --- | | [Accueil](https://pagespeed.web.dev/analysis/https-telecoop-fr/igfvku3428?form_factor=desktop) | 0.3s | 0.8s | 0.008 | 0.4s | 567 | 100 | 96 | 100 | 100 | | [À propos](https://pagespeed.web.dev/analysis/https-telecoop-fr-a-propos/oixeubbcbe?form_factor=desktop) | 0.4s | 0.6s | 0.034 | 0.4s | 317 | 100 | 100 | 100 | 100 | | [Nos forfaits mobiles](https://pagespeed.web.dev/analysis/https-telecoop-fr-particuliers-forfaits-mobile/ngslzmr8pj?form_factor=desktop) | 0.3s | 0.6s | 0.005 | 0.4s | 591 | 100 | 96 | 100 | 100 | | [Forfait mobile Sobriété](https://pagespeed.web.dev/analysis/https-telecoop-fr-particuliers-forfaits-mobile-forfait-sobriete/x6m9miuzan?form_factor=desktop) | 0.6s | 0.7s | 0.098 | 0.6s | 591 | 97 | 96 | 100 | 100 | | [Blog](https://pagespeed.web.dev/analysis/https-telecoop-fr-blog/n0mvlv9n22?form_factor=desktop) | 0.4s | 0.9s | 0.002 | 0.4s | 486 | 99 | 100 | 100 | 100 | | [Article](https://pagespeed.web.dev/analysis/https-telecoop-fr-blog-et-si-on-choisissait-de-louer-mon-mobile-plutot-de-l-acheter-telecoop-et-commown-lancent-leur-cooperation/dy64v26etq?form_factor=desktop) | 0.3s | 0.8s | 0.004 | 0.3s | 247 | 100 | 100 | 100 | 100 | | **Moyenne** | 0.4s | 0.7s | 0.025 | 0.4s | **466** | 99.3 | 98 | 100 | 100 | ### Yellow Lab Tools | Page | Score global | Requêtes | DOM | Poids total | HTML | CSS | JS | JSON | Images | Video | Fonts | Autres | | ---- | ------------ | -------- | --- | ----------- | ---- | --- | -- | ---- | ------ | ----- | ----- | ------ | | [Accueil](https://yellowlab.tools/result/gqn76y5xf2) | 92/100 | 28 | 601 | 721 Ko | 47.6 Ko | 7.4 Ko | 528 Ko | 6.8 Ko | 104 Ko | 0 Ko | 24.8 Ko | 2.7 Ko | | [À propos](https://yellowlab.tools/result/gqn783sgr7) | 94/100 | 19 | 350 | 650 Ko | 44.8 Ko | 7.4 Ko | 525 Ko | 6.8 Ko | 49.9 Ko | 0 Ko | 16 Ko | 0 Ko | | [Nos forfaits mobiles](https://yellowlab.tools/result/gqn7a2h3ek) | 94/100 | 18 | 624 | 608 Ko | 52.7 Ko | 7.4 Ko | 525 Ko | 6.8 Ko | 49.9 Ko | 0 Ko | 16 Ko | 0 Ko | | [Forfait mobile Sobriété](https://yellowlab.tools/result/gqn73xapzo) | 93/100 | 21 | 741 | 616 Ko | 52 Ko | 7.4 Ko | 526 Ko | 6.8 Ko | 5.0 Ko | 0 Ko | 18 Ko | 0 Ko | | [Blog](https://yellowlab.tools/result/gqnhf1d7a1) | 94/100 | 24 | 519 | 905 Ko | 47 Ko | 7.4 Ko | 472 Ko | 6.8 Ko | 356 Ko | 0 Ko | 16 Ko | 0 Ko | | [Article](https://yellowlab.tools/result/gqni2bqzgg) | 94/100 | 18 | 280 | 566 Ko | 44.9 Ko | 7.4 Ko | 475 Ko | 6.8 Ko | 32.4 Ko | 0 Ko | 16 Ko | 0 Ko | | **Moyenne** | 93.5/100 | **21.3** | **520** | **677 Ko** | **48.2 Ko** | **7.4 Ko** | **508 Ko** | **6.8 Ko** | **99.6 Ko** | **0 Ko** | **17.8 Ko** | **0.4 Ko** | ## Améliorations identifiées ### Performances - **Limiter le nombre de domaines et de requêtes** : - en affichant les **avis clients** et le **formulaire d’inscription à la newsletter** uniquement lorsqu'ils entrent dans le viewport - en auto-hébergeant (si possible) les scripts **Matomo** actuellement hébergés chez ethibox.fr - **Site statique** : utiliser le plugin Kirby [Staticache](https://github.com/getkirby/staticache) pour mettre en cache toutes les pages du site sous forme de fichiers statiques.

Read more

Guide de compression d’images

Rencontres Numérique & Ruralité (octobre 2022)

Formation écoconception numérique pour Universcience

[Plateaux Numériques] Questionnaire