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: à venir

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.