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 // TODO a reformuler

• Supprimer les ressources non utilisées

• Minifier le code

• Ne pas redimensionner les images coté application

• Éviter d'utiliser des images matricielles

• Utiliser le chargement paresseux

• Ne pas recharger inutilement l'ensemble du contenu d'une liste si seulement une partie a changé

• Optimiser le chargement paresseux d'un écran complexe comportant des listes imbriquées

• Éviter les animations

// TODO https://developer.android.com/topic/performance/reduce-apk-size // TODO // MAIN/IO thread ? // Repository (stratégie offline) // Eviter image non vectoriel (/chapters/BP_023_fr.md) // Etudier si l'usage de style/theme plutôt que paramètre individuel est plus efficace (BP_024_fr BP_025_fr) // Utiliser les paramètres de style abrégés // Utiliser les notations CSS abrégées // Utiliser glide ou équivalent pour mettre en cache les images et éviter de les recharger // Notifications // ABI ?? // Feature play store // Base de données: ne pas garder en base de données des données plus utilisées // Si fonctionnalité de mise en offline de fichier volumineux (ex media), associer une durée de vie.

// Liste performance (notifyDataSetChange, id in lazy list to avoir rendering everything. Type in lazy list) https://developer.android.com/topic/performance/vitals/render#recyclerview_notifydatasetchanged

// Reduce cost of inflation (ex ConstraintLayout instead of nested LinearLayout) https://developer.android.com/topic/performance/vitals/render#recyclerview_too_much_inflation_or_create_is_taking_too_long If your view types look good, look at reducing the cost of your inflation. Reducing unnecessary container and structural views can help. Consider building itemViews with ConstraintLayout, which can help reduce structural views.

// TODO pas encore fait la suite

• 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