DEMEY Fanny
88adbc6865
|
||
|---|---|---|
| chapters | ||
| .gitignore | ||
| CONTRIBUTING.md | ||
| README.md | ||
README.md
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 :
UI/UX :
-
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
// 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
// TODO pas encore fait la suite
- 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