août 18 2008
12 Conseils pour Réduire le temps de chargement de vos Blogs
Première visite ici? Suivez les articles du blog via RSS. Merci pour votre visite!
image Courtesy OregonScientific
Avec les vitesses du haut débit ADSL à 20 Mbits minimum pour la majorité des blogueurs et des développeurs, l’optimisation des codes pour l’affichage est de plus en plus négligé.La multiplication des widgets (y a qu’a regarder ma sidebar 
) et des bouts de javascripts pour des stats, des flux rss, etc..et donc tout cela prend de plus en plus de temps à charger même sur des connections internet rapides.
- Quelques raisons qui devraient pousser nos chers développeurs à créer du code rapide au chargement.
- Les pages Rapides apportent une expérience utilisateur plus attrayante et incitent à la fidélisation des visiteurs si le contenu suit.
- Google affiche a coté des SERPs le poids des pages, et il est de rigueur de penser que cela influe sur le classement en terme de référencement naturel .
- Les pages lourdes à charger,surtout sur les gros sites web d’E-commerce représentent un manque à gagner. Estimé à près d’un milliard de dollars.
Voila 12 conseils rapides pour améliorer et optimiser les temps de chargements de vos pages
1. Analyse BasiqueÂ
Il ya des centaines d’outils, mais un site tout simple pour vérifier les erreurs génériques et voir l’état de santé de votre blogs en terme de temps de chargement.Le site web page analyser vous donnera le nombre de scripts qui tournent à chaque fois, la taille totale, et bien d’autres infos intéressantes.
2. Pingdom
PingDom est un site très utile qui permet de vérifier les images et les chemins cassés, de même qu’il vérifie le temps de chargement de tous vos images et vos scripts. les chemins d’accès cassés peuvent charger inutilement votre page.Dans la même veine pour voir les urls cassés il y a le plugin Wordpress Broken Link Checker (Christophe me l’a conseillé via les commentaires).Une fois corrigés les liens et images cassés vos temps de chargement peuvent être divisés par deux.
Une autre utilité de PingDom est d’avoir la séquence de chargement de vos pages, avec des couleurs différentes un peu à la manière des séquences d’échanges http mais en plus Zoli, vous pourrez alors voir quel script vous impacte le plus, pour ma part Woopra me charge pas mal..mais de la à l’enlever…c’est une autre histoire.
3.Hébergement LocalÂ
Cela vous fait gagner de la bande passante mais le fait d’héberger des photos et ou des éléments sur d’autres serveurs rajoutent aux temps de chargement, résolution DNS, etc….les fichiers hébergés en local sont toujours plus rapides que les autres.
4. Attributs d’image
Utiliser les attributs height et width de vos images, en plus de la balise Alt hein, le fait de rajouter ces deux attributs de tailles améliore grandement vos temps de chargement sur le navigateur ( a tester sur pingdom), si le browser connait l’emplacement et la taille il prépare le cadre puis la charge en background.si ces attributs ne sont pas définis le browser doit attendre le chargement complet de l’image avant de continuer le reste.
5. Regime de widgets
Je suis friand de widgets, et ce conseil me gêne un peu mais il est sûr que les widgets n’arrangent pas les temps de chargement des pages.Un peu comme les javascripts, si jamais le site qui héberge le widgets ou le js est HS, cela vous pénalisera.
6. Utiliser du cacheÂ
Plusieurs solutions de caching existent mais cela dépend de votre langage de prédilection .L’utilisation de Cache est de générer des pages dynamiques en PHP par exemple et de publier le résultat sous forme de page web statique.
Les langages dynamiques suivants sont propices à la mise en cache: Perl, Rails, Java, ASP, PHP.
Wordpress Permet aussi grâce son plugin WP Cache de faire cela relativement rapidement mais attention aux incompatibilités des autres plugins.
7. Accelerateur
Les langages dynamiques ont des scripts qui accélèrent le langage.pour PHP par exemple : Zend cache,Xcache ou APC.
 8. Firebug
Firebug est une extension Firefox qui vous donnent de multiples indicateurs pour un site web, très utile et plus complet que le premier outil.
9. Optimiseur de CSS
Les scripts externes comme JavaScript ou CSS impactent malheureusement les temps de chargement.Utilisez CleanCSS pour rendre vos scripts CSS plus propres en enlevant les espaces, les sauts de lignes,virer les caractères inutiles,etc… ne garder que le strict nécessaire.
10. Régime de cookies
Comme les régimes, la génération de cookies doivent être utilisés avec parcimonie cela éviter de charger vos sites web, bien paramétrer la durée de vos cookies et la stratégie de taille des cookies est importante.Dans la même veine mais dans vraie vie: une idée de site web de vente de cookies online.
11. Compression de JavaScript
Comme le CSS, il est utile de compresser les javascripts.un service qui fait cela très bien est le Dean Edwards Packer et qui élimine donc les saut de lignes, les caractères redondants dans le code js.
12. Combinaison des codes js
La régle général, le temps de chargement de plusieurs petits scripts prend plus de temps que le temps d’un seul plus grand script.le plus simple et de concacatener les fichiers js.c’est la méthode facile le plus propre est de le faire dynamiquement par le votre langage de programmation.
Conclusion
Il est très facile de rajouter des fonctionnalités sur des sites web, il faut toujours garder en tête les temps de chargements et la tenue en charge, avec ces outils et quelques petits changements vous pourrez avoir d’excellents résultats.
Pour suivre la liste de posts n’hésitez pas à vous abonnez aux flux RSS 
ou les recevoir directement par MailÂ
ou vous pouvez me suivre sur TwitterÂ
@+
22 Commentaires to “12 Conseils pour Réduire le temps de chargement de vos Blogs”
Merci, article plutôt intéressant, qui résume assez bien ce que le webmaster novice doit avoir en tête lors de la mise en place de son blog.
Bravo !
Dernier Post de kjame.En vacances, quelle est l’utilité des services 2.0 ?
Les 12 conseils que t’a proposé sont efficace.
J’ajoute aussi qu’il faut
# Placez CSS en début de la page (balise header).
# JavaScript au contaraire , doit être placé en bas de la page .
Pingdom est un outil excellent en effet… En fait, plus que la bande passante, aujourd’hui, il convient de faire un code propre, validé W3C et pas trop surchargé en JS car sinon bonjour les dégâts dans le navigateur
@Eon que dire de plus
@Olivier tiens j’aurais du rajouter un valideur w3c ..bonne idée
Et ce n’est pas en ayant un blog hebergé chez free.fr qui arrange les choses
La vitesse est bridé pour les non-users de Free.
Merci quand même, je teste pingdom.
Dernier Post de GamaniaK.Netcom dog - Un amour de chienne
ps: le blog est très lent hors réseau free (souci de peering free)
Je te conseille de ne pas trop tarder pour ta migration car tu vas te prendre une grosse baffe au niveau du référencement même si tu fais une redirection 301…
Dans un chat, un type de chez Google dont j’ai oublié le nom a indiqué que la vitesse de chargement d’une page et donc son poids n’ont pas d’influence sur le positionnement.
Un excellent article qui permet fournit les outils nécessaires à la mise en place des différents conseils : un plus très appréciable !
En complément, Camille Roux propose un cours vidéo sur la réduction des temps de chargement : http://www.camilleroux.com/2008/07/08/optimiser-performances-site-web-video-hd/
Dernier Post de Maigret.100e billet sur Maigret’s Blog
Un excellent article qui permet fournit les outils nécessaires à la mise en place des différents conseils : un plus très appréciable !
En complément, Camille Roux propose un cours vidéo sur la réduction des temps de chargement : http://www.camilleroux.com/2008/07/08/optimiser-performances-site-web-video-hd/
Article très intéressant. Merci, je vais creuser tous ces points.
Au passage, ton blog est particulièrement intéressant
Autre idée pour faire baisser ton temps de chargement : virer le widget criteo. Ok tu seras plus dans le classement des 500 blogs les plus visités de la blogosphère mais franchement, on s’en tappe non?
Moi je l’ai dégagé hier, il me bloquait l’affichage des pages (leur serveur doit saturer en ce moment).
@Al kanz c’est bizarre, d’ailleurs sur Adwords cet indicateur est noté comme indicateur de qualité http://adwords.google.com/support/bin/answer.py?answer=87144
@maigret oui la vidéo de camille est excellente merci
@julien merci you are welcome
@Olivier je sais pour les widgets de la sidebar mais que veux tu c’est mon péché mignon
ceci dit tu as raison cf l’incident sitemeter sur les IE récemment
Seoman, ma source :
Q : Le temps de chargement des pages a-t-il une influence sur le positionnement ?
R : Le temps de chargement est important pour la satisfaction de l’utilisateur. Mais il n’est pas actuellement considéré par Google comme un signal devant influencer le positionnement.
http://s.billard.free.fr/referencement/?2008/06/20/489-chat-google-traduction-des-reponses-les-plus-interessantes
Les idées sont bonnes mais je voudrais juste souligner que l’utilisation du mot cache dans la proposition 6 est à mon avis un abus de langage. Il ne s’agit ici que de conserver sur le serveur une réponse à une requete qui revient fréquemment tant que le site n’est pas mis à jour. Une vraie solution de caching consiste à bien préciser les dates d’expirations des fichiers (css javascript…) pour permettre la mise en cache coté client dans le navigateur. C’est alors encore plus rapide.
De même que ton CleanCSS, je viens de trouver ça : http://www.rankquest.com/tools/Code-Cleaner.php pour le code de la page.
Le problème : utilisation impossible avec des CMS ou des blogs par exemple car le code se répartit sur des dizaines des pages php incluses et difficilement modifiables par le novices.
Moi j’en reste aux bases sur mes sites : pas trop de scripts externes dont je ne peux gérer la vitesse de chargement (tes widget), et pas d’images non compressées.
Ce n’est pas trop tard pour faire ta migration. Si tu fais bien tes redirections, tu n’y verras presque du feu
apache —>Serveur appi —> BdD dans un cas
et en cas de cache statique Apache uniquement dans le cas de vrai cache statique …(je en suis pas sur que WP cache ne fasse pas appel à la BdD )
la gestion des caches coté navigateur est problématique sur des sites dynamiques et peuvent engendrer des soucis de répartition de charge du à l’affinité de sessions par exemple …sur les gros sites à forte affluence.
@Jice merci pour le lien
@Olivier hmm, je me tate…;)
Pas évident de franchir le pas mais tu ne regretteras pas. Plus tu attends et plus cela risque potentiellement d’avoir un impact sur ton traffic…
Dernier Post de Olivier.Quand une attraction relance le débat sur la peine de mort
Article sympathique, cependant on peut trouver d’autres configurations et astuces. Perso. j’ai trouvé les armes ultimes pour augmenter la réactivité (http://bit.ly/79fxkr)
merci