Bonnes pratiques du développement web

Conception fonctionnelle

  • Eliminer les fonctionnalités non essentielles
  • Quantifier précisément le besoin
  • Fluidifier le processus
  • Préférer la saisie assistée à l'autocompletion
  • Favoriser un design simple, épuré, adapté au web
  • Créer un site responsive
  • Respecter le principe de navigation rapide dans l’historique
  • Proposer un traitement asynchrone lorsque c'est possible
  • Limiter le nombre de requêtes HTTP
  • Stocker les données statiques localement
  • Choisir les technologies les plus adaptées
  • Limiter le recours aux plugins
  • Favoriser les pages statiques
  • Créer une architecture applicative modulaire
  • Utiliser un framework ou développer sur mesure
  • 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
  • Générer des spritesheets CSS
  • Découper les CSS
  • Limiter le nombre de CSS
  • Préférer les CSS aux images
  • Ecrire des sélecteurs CSS efficaces
  • Grouper les déclarations CSS similaires
  • Utiliser les notations CSS abrégées
  • Fournir une CSS print
  • Utiliser les commentaires conditionnels
  • Favoriser les polices standard
  • Préférer les glyphs aux images
  • Valider les pages auprès du W3C
  • Modifier plusieurs propriétés CSS en 1 seule fois
  • Supprimer les balises images dont l’attribut SRC est vide
  • Redimensionner les images en dehors du HTML
  • Eviter d'utiliser des images bitmap pour l'interface
  • Optimiser les images vectorielles
  • Mettre en cache le Bytecode
  • Utiliser un système de templating (Smarty, Twig)
  • Utiliser tous les niveaux de cache du CMS
  • Générer les PDF en dehors du CMS
  • Redimensionner les images en dehors du CMS
  • Encoder les sons en dehors du CMS
  • Utiliser un thème léger
  • Favoriser HSTS Preload list aux redirections 301
  • Mettre en place un plan de fin de vie du site
  • Choisir un hébergeur "vert"
  • Utiliser une électricité "verte"
  • 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
  • Limiter le recours au SSL
  • Ne pas générer de page 404

Développement

  • Externaliser les CSS et JavaScript
  • Valider le code JavaScript
  • Eviter d'utiliser try-catch-finally
  • Utiliser les opérations primitives
  • Mettre en cache les objets souvent accédés en JavaScript
  • Utiliser Ajax pour certaines zones de contenu
  • Eviter les animations Javascript / CSS coûteuses
  • 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
  • Utiliser la méthode GET pour les requêtes Ajax
  • Priviliégier les fonctions inline
  • Donner des fonctions en paramètre à setTimeout() et setInterval() plutôt que des string
  • Eviter les for - in
  • Réduire les accès au DOM via JavaScript
  • Privilégier les changements visuels instantanés
  • Mettre en cache les données calculées souvent utilisées
  • Ne pas assigner inutilement de valeur aux variables
  • Eviter la ré-écriture des getter / setter natifs
  • Utiliser la simple côte (') au lieu du guillemet (")
  • Remplacer les $i++ par ++$i
  • Libérer de la mémoire les variables qui ne sont plus nécessaires
  • Ne pas appeler de fonction dans la déclaration d’une boucle de type for
  • Supprimer tous les warning et toutes les notices
  • Utiliser des variables statiques
  • Eviter d'effectuer des requêtes SQL à l’intérieur d’une boucle
  • Ne se connecter à une base de données que si nécessaire
  • Ne jamais faire de SELECT * FROM
  • Limiter le nombre de résultats (clause LIMIT)
  • Utiliser les procédures stockées

Hébergement

  • N'utilisez que les portions indispensables des librairies Javascript et frameworks CSS
  • Utiliser le chargement paresseux des images
  • Minifier les fichiers CSS
  • Compresser les librairies CSS et Javascript
  • Combiner les fichiers CSS et JavaScript
  • Optimiser les images bitmap
  • Minifier les fichiers JavaScript
  • Optimiser la taille des cookies
  • Compresser la sortie HTML
  • Utiliser un serveur asynchrone
  • Utiliser un CDN
  • Désactiver certains logs d’accès du serveur web
  • Désactiver le DNS lookup d’Apache
  • Apache Vhost : désactiver le AllowOverride
  • Mettre en cache les réponses Ajax
  • Utiliser un reverse proxy
  • Mettre en cache le favicon.ico
  • Ajouter des entêtes Expires ou Cache-Control
  • Désactiver les logs binaires de MySQL / MariaDb

Contenu

  • Compresser les documents
  • Optimiser les PDF
  • Dédoublonner systématiquement les fichiers avant envoi
  • N'utiliser que des fichiers double opt-in
  • Préférer le texte brut au HTML
  • Adapter les sons aux contextes d'écoute
  • Adapter les textes au web
  • Adapter les vidéos aux contextes de visualisation
  • Limiter l'utilisation du Flash