Comment optimiser le chargement d’un site internet ?

2 juin 2008

La rapidité de chargement d’un site internet dépend de nombreux facteurs :

- Débit internet de l’utilisateur

- Capacité en bande passante fournie par l’hébergeur

- Poids et nombre d’objets dans les pages

- Conception du site

- Etc…

Comme tout le monde ne bénéficie pas d’un hébergement dédié confortable ( c’est mon cas avec un hébergement chez FREE, quand je gagnerai au loto j’y réfléchirai ), l’optimisation d’un site internet est donc nécessaire (hé hé attention, même si vous avez un super serveur, ça ne signifie pas que l’on peut implémenter comme un porc!) pour rendre la navigation plus conviviale et attirer (ou du moins garder) les visiteurs sur son site car l’ennui devant une attente trop longue peut devenir très vite pénalisant.

Je vous propose ici quelques pistes pour analyser et améliorer votre site en optimiser son chargement :

Analyser le chargement de votre site

Avant de mettre les mains dans le cambouis, commençons par analyser les points critiques :

Firebug : Firebug est un plugin pour le navigateur Firefox permettant d’analyser le poids et le temps de chargement des objets qui composent votre site internet, il fournit un ensemble de rapports sur votre site. Un exemple :

YSlow : Ce plugin requiert Firebug et vous conseillera en vous indiquant comment optimiser votre site, à vous maintenant de choisir vos axes d’optimisation.

http://tools.pingdom.com : Le même genre d’outil que Firebug, mais pour une utilisation en ligne. Juste pour avoir un aperçu donc…

Enfin, vous pourrez également installer des outils permettant de simuler un débit moins important que le votre afin de vous rendre compte de la réalité de certains utilisateurs (tout le monde n’habite pas Paris ou Lyon, et je ne pense pas qu’à Celles sur plaine (je vous laisse chercher où ça se trouve) on ai le même débit internet).

Optimiser les feuilles de style CSS

csstidy : csstidy est un outil permettant de nettoyer et optimiser un fichier CSS, vous pouvez tester la version en ligne de l’outil , j’ai testé un fichier style.css de 11KB qui pèse maintenant 7KB, c’est toujours ça de gagné…

Autres outils pour optimiser les CSS : cleancss , cssoptimiser

Minimiser les Javascripts

jsmin : La même chose que pour les CSS mais pour les fichiers Javascript, le code est réduit, la bande passante est contente !

Quelques pratiques que j’ai utilisé (ou utiliserai) sur mon site

- Activer la compression des réponses HTTP, pour mon installation Wordpress j’ai installé le plugin gzippy pour Wordpress

- Faire preuve de bon sens : les widgets, les inclusions de vidéos YouTube, les annonces publicitaires, etc… c’est joli mais vous êtes tributaires du bon fonctionnement d’un service tiers. A utiliser avec parcimonie donc ! (Je vais donc réfléchir à retirer ou pas mon widget MyPageBlog dans la sidebar)

- Quand vous utilisez des images, choisissez le bon format (avez vous besoin d’un format supportant des millions de couleurs si seulement 4 sont présentes dans l’image), la bonne taille (attention par exemple quand vous retailler une grosse image pour l’afficher en miniature).

- Consolider les feuilles CSS en une seule pour éviter de multiples chargements

- Consolider les fichiers JS (quand c’est possible) et les inclure en fin de page, la page se chargera en premier et le code Javascript par la suite (encore une fois, quand c’est possible)

- Auditer les requêtes à la base de données qui affichent des données comme les titres , auteurs, etc…des valeurs qui peuvent être codées en dur parfois (je dis bien parfois…le codage en dur n’étant pas une bonne pratique en général)

Conclusion

Vous l’aurez remarqué, l’optimisation de site internet est un travail de longue haleine, aussi je reviendrai sûrement sur ce billet pour ajouter ou modifier le contenu de ce billet selon le résultat de mes recherches et de mon travail sur ce présent site.

Si vous avez également quelques idées, des outils, des liens, je suis preneur et j’attends vos commentaires sur le sujet.