Best practices pour optimiser le chargement d'un site web
Bonjour à tous,
Voici un lien que je viens de découvrir et que je trouve fort bon : http://developer.yahoo.com/performance/rules.html
Il s'agit d'une liste de best practices élaborées par Yahoo pour aider à améliorer le développement web. Elles sont axées sur la rapidité de chargement et d'exécution des sites web. En voici un résumé :
- Minimiser le nombre de requêtes HTTP
- Répartir le contenu sur des serveurs répartis dans le monde (euh, ça c'est pour les gros sites web)
- Utiliser des Header "Expires" et "Cache-Control"
- Compresser les fichiers avec Gzip
- Mettre les CSS dans la balise HEAD (rien de bien surprenant)
- Mettre les scripts le plus bas possible dans la page (un peu plus surprenant, mais évite de bloquer le chargement de la page à cause d'une script externe par exemple)
- Éviter les expressions CSS (car réévaluées à chaque évènement, donc par exemple à chaque survol de la page)
- Placer les CSS et les scripts dans des fichiers externes (car les navigateurs vont les mettre en cache)
- Réduire les résolutions DNS (donc mettre des liens relatifs pour les fichiers de votre site)
- Optimiser la taille des scripts et CSS (en supprimant les retours à la ligne, espaces inutiles, etc.)
- Éviter tant que possible les redirections
- Éviter d'inclure 2 fois le même script (erreur d'inattention courante sur de gros projets)
- Utiliser les ETag (Entity Tags) sur votre serveur (permet d'éviter au navigateur de recharger un fichier qu'il a déjà)
- Mettre en place un système de cache pour Ajax
- Faire un flush() du buffer après les balises "head" (pour permettre au navigateur de charger les CSS et Javascript)
- Utiliser de préférence GET pour Ajax (POST fait 2 connexions TCP en Ajax d'après eux)
- Charger des composants non essentiels après le chargement complet de la page
- Précharger des composants de la page (qui seront affichés par Javascript)
- Réduire le nombre d'éléments DOM (qui ralentiront l'exécution du Javascript)
- Répartir les composants de la page sur différents serveurs (pas plus de 4 à cause de la question des DNS)
- Minimiser le nombre d'iframe (beurk)
- Éviter le plus possible les erreurs 404 (c'est une requête comme une autre qui charge le serveur)
- Réduire la taille et le nombre des cookies
- Utiliser des domaines différents pour les fichiers statiques (images, scripts) sans cookies
- Minimiser les accès à des éléments DOM
- Développer des évènements intelligemment (en évitant des surcharges inutiles)
- Utiliser <link> plutôt que @import (sous IE avec @import le chargement de la feuille de style est délayé)
- Éviter les filtres CSS destinés à IE 6 et inférieur (utilisez des PNG transparents)
- Optimiser les images (encoder les Gif avec la meilleur palette possible, comparer les formats, etc.)
- Optimiser les images utilisée dans les CSS
- Ne pas redimensionner une image en HTML
- Faire un favicon, lui activer le cache et lui préférer un faible poids
- Garder les composants en dessous de 25Ko (en plus les iPhones ne le mettront pas en cache sinon)
- Grouper les composants dans un document Multipart (comme les mails, mais à vérifier que le user-agent est compatible)
Alors, vous aussi vous faites le check de ce qui est bon ou pas :) ? Quel est votre score héhé ?
Bon on est d'accord, y'en avait des bateaux, mais y'a des choses que je ne connaissais pas personnellement.
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
