Déclaration d’écoconception

Préambule

La refonte du site de TeleCoop a été portée entièrement par Timothée Goguely, designer et développeur front-end. Gauthier Roussilhe, 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 cœur 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.

Conformité

À l’aide de l’outil d’auto-diagnostic 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 (RGESN).

Voir le détail du diagnostic (CSV, 14 Ko)

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 caractères
Mise en cache des assets (CSS, JS, images et polices de caractères)
Préchargement des assets critiques via <link rel="preload"> :

<!-- Exemple de préchargement de police de caractères -->
<link 
      rel="preload" 
      as="font" 
      type="font/woff2" 
      href="path/to/poppins-latin-400-normal.woff2" 
      crossorigin>

<!-- Exemple de préchargement d’image en résolutions multiples -->
<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 non-vectorielles (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"

<!-- Exemple d’image -->
<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.

<!-- Logo TeleCoop -->
<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>

<!-- Exemple d’icône -->
<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.

<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>

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 : https://telecoop.fr/ecoconception/
Rédaction de plusieurs articles relatifs au numérique responsable sur le blog
Rédaction d’un article de blog dédié à la démarche d’écoconception du site web: Écoconception de notre site web

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.

Mobile

Navigateur	Version	Système d’exploitation	Date
Chrome	✅ 71+	Android 7+, iOS 12+	2018
Safari	✅ 10.3+	iOS 12+	2018
Firefox	✅ 75+	Android 7+, iOS 10+	2020
Edge	✅ 16+	Android 8+	2017
Samsung Internet	✅ 6.2+	Android 7+	2017

Desktop

Navigateur	Version	Système d’exploitation	Date
Chrome	✅ 79+	GNU/Linux, Windows 7+, macOS 10.11+	2019
Safari	✅ 10.3+	macOS 10.12+	2017
Firefox	✅ 75+	GNU/Linux, Windows 7+, macOS 10.9+	2020
Edge	✅ 16+	GNU/Linux, Windows 7+, macOS 10.15+	2017
Opera	✅ 66+	GNU/Linux, Windows 7+, macOS 10.11+	2020
IE	❌	–	–

Texte

Le site est également accessible et fonctionnel via des navigateurs textes tels que Lynx, 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 :

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 et Yellow Lab Tools.

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	1.2s	2.6s	0.015	1.4s	567	94	96	100	100
À propos	1.2s	2.3s	0.039	1.5s	317	98	100	100	100
Nos forfaits mobiles	1.3s	1.3s	0.072	1.6s	591	99	96	100	100
Forfait mobile Sobriété	1.3s	1.3s	0.011	1.8s	591	100	96	100	100
Blog	1.1s	2.0s	0	1.1s	486	99	100	100	100
Article	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	0.3s	0.8s	0.008	0.4s	567	100	96	100	100
À propos	0.4s	0.6s	0.034	0.4s	317	100	100	100	100
Nos forfaits mobiles	0.3s	0.6s	0.005	0.4s	591	100	96	100	100
Forfait mobile Sobriété	0.6s	0.7s	0.098	0.6s	591	97	96	100	100
Blog	0.4s	0.9s	0.002	0.4s	486	99	100	100	100
Article	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	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	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	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é	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	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	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 pour mettre en cache toutes les pages du site sous forme de fichiers statiques.