Bonne pratiques d'écoconception appliqué au mobile

Contexte

L'objectif de ce document est de fournir un référentiel d'écoconception adapté au mobile. L'application des bonnes pratiques ci-dessous ont toutes un but commun : prolonger la durée de vie des terminaux des utilisateurs et utilisatrices.

Les besoins

Étant donné les évolutions continues du mobile, ce référentiel a besoin de régulièrement être mis à jour. Toute proposition ou idée d'amélioration, de modification ou de suppression est bienvenue.

Comment contribuer ?

N'hésitez pas à lire le guide des contributeurs.

La liste des Bonnes Pratiques

Produit :

• Éliminer les fonctionnalités non essentielles
• Quantifier précisément le besoin

UI/UX :

• Optimiser le parcours utilisateur

• Préférer la saisie assistée à l'autocomplétion

• Favoriser un design simple, épuré, adapté au mobile

• Optimiser la récupération en fonction du cycle de vie de l'application

• Libérer la mémoire des traitements consommateurs en fonction de l'état de l'application

• Stocker localement les données de configuration non liées aux données du serveur // TODO à discuter car côté mobile, beaucoup des données statiques sont déjà sur l'appareil.

• Déployer un Android App Bundle (AAB) plutôt qu'un APK

• Supprimer les ressources non utilisées

• Minifier et obfusquer le code

// TODO SavedStateHandle // Repository (stratégie offline)

// TODO pas encore fait la suite

• Proposer un traitement asynchrone lorsque c'est possible // TODO à voir si équivalent.

• Choisir les technologies les plus adaptées

• Utiliser certains forks applicatifs orientés "performance"

• Choisir un format de données adapté

• Limiter le nombre de domaine servant les ressources

• Remplacer les boutons officiels de partage des réseaux sociaux

• Découper les CSS

• Limiter le nombre de CSS

• Préférer les CSS aux images

• Écrire des sélecteurs CSS efficaces

• Grouper les déclarations CSS similaires

• Utiliser les notations CSS abrégées

• Fournir une CSS print

• Favoriser les polices standards

• Préférer les glyphs aux images

• Valider les pages auprès du W3C

• Externaliser les CSS et JavaScript

• Ne pas redimensionner les images coté navigateur

• Éviter d'utiliser des images matricielles pour l'interface

• Optimiser les images vectorielles

• Utiliser le chargement paresseux

• Utiliser le rechargement partiel d'une zone de contenu

• Éviter les animations JavaScript / CSS

• N'utilisez que les portions indispensables des librairies JavaScript et frameworks CSS

• Ne pas faire de modification du DOM lorsqu’on le traverse

• Rendre les éléments du DOM invisibles lors de leur modification

• Réduire au maximum le repaint (appearence) et le reflow (layout)

• Utiliser la délégation d'évènements

• Modifier plusieurs propriétés CSS en 1 seule fois

• Valider votre code avec un Linter

• Mettre en cache les objets souvent accédés en JavaScript

• Réduire les accès au DOM via JavaScript

• Utiliser tous les niveaux de cache du CMS

• Optimiser et générer les médias avant importation sur un CMS

• Encoder les sons en dehors du CMS

• Mettre en cache les données calculées souvent utilisées

• Supprimer tous les warning et toutes les notices

• Éviter d'effectuer des requêtes SQL à l’intérieur d’une boucle

• Ne se connecter à une base de données que si nécessaire

• Optimiser les requêtes aux bases de données

• Éviter le transfert d'une grande quantité de données pour réaliser un traitement

• Minifier les fichiers CSS, JavaScript, HTML et SVG

• Compresser les fichiers CSS, JavaScript, HTML et SVG

• Combiner les fichiers CSS et JavaScript

• Optimiser les images

• Optimiser la taille des cookies

• Favoriser HSTS Preload list aux redirections 301

• Mettre en place un plan de fin de vie du site

• Choisir un hébergeur "éco-responsable"

• Privilégier un fournisseur d'électricité écoresponsable

• Adapter la qualité de service et le niveau de disponibilité

• Utiliser des serveurs virtualisés

• Optimiser l'efficacité énergétique des serveurs

• Installer le minimum requis sur le serveur

• Mettre les caches entièrement en RAM (opcode et kvs)

• Stocker les données dans le cloud

• Héberger les ressources (CSS/JS) sur un domaine sans cookie

• Éviter les redirections

• Afficher des pages d'erreur statiques

• Utiliser un serveur asynchrone

• Utiliser un CDN

• Utiliser un cache HTTP

• Ajouter des entêtes Expires ou Cache-Control

• Mettre en cache les réponses Ajax

• Réduire au nécessaire les logs des serveurs

• Désactiver le DNS lookup d’Apache

• Apache Vhost : désactiver le AllowOverride

• Désactiver les logs binaires

• Compresser les documents

• Optimiser les PDF

• Limiter les e-mails lourds et redondants

• N'utiliser que des fichiers double opt-in

• Limiter la taille des e-mails envoyés

• Adapter les sons aux contextes d'écoute

• Adapter les textes au web

• Adapter les vidéos aux contextes de visualisation

• Limiter les outils d'analytics et les données collectées

• Limiter l'utilisation des GIFs animés

• Éviter la lecture et le chargement automatique des vidéos et des sons

• Utiliser les compartiments CSS

• Fournir une alternative textuelle aux contenus multimédias

• Privilégier HTTP/2 à HTTP/1

• Économiser de la bande passante grace à un ServiceWorker

• Mettre en place un sitemap efficient

• Assurer la compatibilité avec les plus anciens appareils et logiciels du parc

• Réduire le volume de données stockées au strict nécessaire

• Mettre en place une politique d'expiration et suppression des données

• Limiter le recours aux canvas

• S'assurer que les parcours utilisateurs permettent de réaliser leur action prévue

• Avoir un titre de page et une metadescription pertinents avec le contenu de la page

• Utiliser la version la plus récente du langage

• Ne charger des données/du code que lorsqu'elles sont/il est nécessaire

• Éliminer les fonctionnalités non utilisées

• Préférer une PWA à une application mobile native similaire au site web

• Éviter les temps de blocages par des traitements JavaScript trop longs

• Mettre en place une architecture élastique

• Limiter le nombre d'appels aux API HTTP

• Limiter le recours aux carrousels

• Avoir une stratégie de fin de vie des contenus

• Mettre en place un "Circuit breaker"

• Favoriser le "Request collapsing"

• S’appuyer sur les services managés

• Préférer la pagination au défilement infini

• Entretenir son site régulièrement

• Limiter le nombre d'extensions dans un CMS

• Sécuriser l'accès à l'administration

• Ne pas afficher les documents à l'intérieur des pages

Licence

Les sources et contenus de ce projet sont protégés