Éco-conceptionweb / les 100

bonnes pratiques

Doper son site et réduire son empreinte écologique

Frédéric BordageAvec la contribution de Stéphane Bordage, Jérémy Chatard et Olivier Philippot

© Groupe Eyrolles, 2012, ISBN : 978-2-212-13575-6© Groupe Eyrolles, 2012, ISBN : 978-2-212-13575-6

SommaireIntroduction .............................................................................................................. 11

ConceptionArchitectureChoisir les technologies les plus adaptées ................................................................20Utiliser un framework ou développer sur mesure ..................................................... 21Favoriser les pages statiques .......................................................................................22Utiliser certains forks applicatifs orientés « performance » ....................................... 23

DesignFavoriser un design simple, épuré et adapté au Web .............................................. 24Créer un site « responsive » ........................................................................................ 25

TemplatingHTMLExternaliser les CSS et JavaScript ................................................................................28Valider les pages auprès du W3C ................................................................................. 29

CSSDécouper les CSS.............................................................................................................30Limiter le nombre de CSS et les compresser ............................................................. 31Préférer les CSS aux images ......................................................................................... 32Minifi er les fi chiers CSS .................................................................................................. 33Écrire des sélecteurs CSS effi caces.............................................................................34Grouper les déclarations CSS similaires ...................................................................... 35Utiliser les notations CSS abrégées .............................................................................36Toujours fournir une CSS print ...................................................................................... 37Utiliser les commentaires conditionnels ....................................................................38Générer des spritesheets CSS ......................................................................................39

PolicesFavoriser les polices standards ....................................................................................40Préférer les glyphes aux images .................................................................................. 41

ImagesOptimiser les images ......................................................................................................42Mettre en cache le favicon.ico ......................................................................................43Supprimer les balises images dont l’attribut SRC est vide ......................................44

8 Sommaire

Code clientGénéralLimiter le recours aux plug-ins .....................................................................................46Éviter d’utiliser eval() ..................................................................................................... 47Préférer les fonctions aux strings, en argument à setTimeout() et setInterval() ................................................................................................................48Limiter l’utilisation de setTimeout() ............................................................................49Respecter le principe de navigation rapide dans l’historique ..................................50Éviter les boucles for...in ................................................................................................ 51Éviter d’utiliser try...catch...fi nally ................................................................................52Utiliser les opérations primitives .................................................................................53

JavaScriptMettre en cache les objets souvent accédés en JavaScript ...................................54Modifi er plusieurs propriétés CSS en une seule fois ................................................ 55Valider le code JavaScript avec JSLint ........................................................................56Privilégier les changements visuels instantanés...................................................... 57Privilégier les variables locales .....................................................................................58Privilégier les fonctions anonymes ............................................................................. 59Utiliser le concaténateur de chaînes de façon optimale ..........................................60Utiliser Ajax pour les zones de contenu souvent mises à jour ............................... 61

DOMUtiliser la délégation d’événements ............................................................................ 62Réduire au maximum le repaint (appearence) et le refl ow (layout) .................... 63Ne pas modifi er le DOM lorsqu’on le traverse ............................................................64Rendre les éléments du DOM invisibles lors de leur modifi cation ......................... 65

Code serveurGénéralÉviter les redirections ....................................................................................................68Ne pas générer de page 404 ........................................................................................ 69Mettre en cache les données calculées souvent utilisées .....................................70Utiliser des variables statiques .................................................................................... 71Libérer de la mémoire les variables qui ne sont plus nécessaires ....................... 72Ne pas appeler de fonction dans la déclaration d’une boucle de type for ............ 73Supprimer tous les warnings et toutes les notices .................................................. 74Utiliser la méthode GET pour les requêtes Ajax ......................................................... 75Ne pas assigner inutilement de valeurs aux variables ............................................ 76

Sommaire 9

SQLÉviter d’effectuer des requêtes SQL à l’intérieur d’une boucle ............................... 77Ne se connecter à une base de données que si nécessaire .................................. 78Ne jamais écrire de SELECT * FROM............................................................................. 79Limiter le nombre de résultats .....................................................................................80Utiliser les procédures stockées ................................................................................. 81

CMSUtiliser tous les niveaux de cache du CMS .................................................................82

HTMLUtiliser un moteur de templating ................................................................................. 83

PHPUtiliser la simple quote (') au lieu du guillemet (") ...................................................84Remplacer les $i++ par des ++$i ................................................................................. 85Mettre en cache le bytecode ........................................................................................86

CookiesOptimiser la taille des cookies ...................................................................................... 87

HébergementInfrastructureChoisir un hébergeur « vert » ......................................................................................90Utiliser une électricité « verte » .................................................................................. 91Optimiser l’effi cacité énergétique des serveurs ........................................................92Privilégier les serveurs équipés de mémoires SSD ..................................................93Utiliser des serveurs virtualisés ..................................................................................94Stocker les données dans le cloud ..............................................................................95

ArchitectureUtiliser un reverse proxy ...............................................................................................96Héberger les ressources sur un domaine sans cookies ............................................ 97Installer uniquement les services indispensables sur le serveur ..........................98Utiliser un CDN .................................................................................................................99Utiliser un serveur asynchrone ..................................................................................100

ParamétrageAjouter des en-têtes Expires ou Cache-Control .......................................................101Compresser la sortie HTML .........................................................................................102Utiliser les ETags ...........................................................................................................103Désactiver la directive AllowOverride d’Apache .......................................................104Désactiver certains logs d’accès du serveur web ...................................................105Désactiver les logs binaires de MySQL ou MariaDB ................................................106

10 Sommaire

Désactiver le DNS Lookup d’Apache ...........................................................................107

OptimisationMonter les caches entièrement en RAM ...................................................................108Compresser les feuilles de style CSS et les bibliothèques JavaScript ................109Minifi er les fi chiers JavaScript ....................................................................................110Combiner les fi chiers CSS et les fi chiers JavaScript ...............................................111Limiter le recours aux certifi cats SSL ........................................................................ 112Mettre en cache les réponses Ajax ............................................................................ 113

ContenuVidéosAdapter les vidéos aux contextes de visualisation .................................................116

ImagesRedimensionner les images en dehors du code HTML ............................................. 117Redimensionner les images en dehors du CMS.......................................................118

SonsAdapter les sons aux contextes d’écoute .................................................................119Encoder les sons en dehors du CMS .........................................................................120

DocumentsCompresser les documents ........................................................................................ 121Optimiser les PDF ..........................................................................................................122Générer les PDF en dehors du CMS ............................................................................ 123

TextesAdapter les textes au Web ........................................................................................... 124

AnimationsLimiter l’utilisation de Flash ........................................................................................ 125

E-mailsDédoublonner les fi chiers d’adresses e-mail avant envoi .....................................126N’utiliser que des adresses e-mail double opt-in .................................................... 127Préférer le texte brut au HTML ...................................................................................128