Affinity-web`Blog

La semaine passée, avait lieu à Paris, Paris Web 2007, 2 journées de conférences et une d'ateliers. Je m'y suis rendu le samedi pour les ateliers, voici le compte rendu de l'atelier Un site Web rapide c'est pas sorcier présenté par Anthony Ricaud et Mathieu Pillard travaillant chez Téléfun, société éditrice de Skyrock.com.

Bien que les connexions Internet soit de plus en plus rapides, il ne faut pas oublier les personnes surfant encore sur de mauvaises connexions. Il est également important de ne pas faire fuir ses visiteurs avec un temps de chargement trop long de son site (ce que pas mal de sites en flash font..). L'atelier séparé en deux grandes parties, l'optimisation côté serveur et côté client, avait pour but de donner des solutions pour améliorer la rapidité d'un site web.

Optimisation côté serveur :

1. Réduire les requêtes HTTP
   
   
   Moins de fichiers :
   • Combiner les fichiers CSS, JS => plutôt que de multiplier les fichiers CSS (ex : design.css, font.css, form.css, couleurs.css) il vaut mieux les regrouper en un seul fichier. Chaque fichier demande une connexion au serveur web pour que le client télécharge le fichier, plus il y a de fichiers, plus le temps de rappatriement des sources sera long.
   
   
   • Utiliser les images Maps et css Sprites => même principe que précédemment, en regroupant ses images on réduit le nombre de connexions. Bien que le fichier image sera plus lourd, une seule connexion permettra de récupérer les images.
   
   
   • Eviter les redirections de type méta et penser à mettre dans ses urls la dernère barre oblique (ex : www.toto.com/test/ et non www.toto.com/test). Lorsque l'on ne la met pas, c'est le serveur apache qui redirige automatiquement mais il s'agit d'une perte de temps qui peut être évitée.


2. Réduire les requêtes DNS
   
   
   • Eviter d'utiliser un grand nombre de widget externes qui doivent aller chercher leurs informations sur d'autres serveurs et donc faire des requètes DNS supplémentaires.
   
   
   • Faire attention à la configuration des CNAME de ses redirections.
   
   
3. Réduire vos envois
   
   
   • Il est possible de réduire la taille des fichiers envoyés au client. Le serveur s'occupe de zipper ce qui lui prend plus de temps, mais l'envoi est plus rapide. Des techniques comme Gzip ou Deflate permettent environ 70% de gain. Attention, cette méthode est à utiliser sur les fichiers HTML, CSS, JS mais surtout pas sur les images où elle ne présente pas d'intérêt.
   
   
4. Mettre en cache
   
   
   • Mettre en cache des fichiers permet d'éviter le re-téléchargement de ces fichiers par le client. Cela se fait en définissant les fichiers et leur durée de validité, ce qui permettra au navigateur web d'utiliser ceux qu'il a déja en mémoire qui sont toujours valides et de re-télécharger les autres.
   
   

Optimisation côté client :

1. Côté xHTML
   
   
   • Réduire la "soupe" de balise, ce qui permettra au navigateur de parser et d'afficher plus rapidement la source.
   
   
   • Ne pas utiliser de tableaux imbriqués, et surtout pas de tableaux pour la mise en page (les CSS sont fais pour çà).
   
   
   • Penser à l'ordre des éléments, les navigateurs actuels affichent la page avant le chargement définitif des CSS, le visiteur pourra donc commencer à lire votre site.
   
   
   • Réduire au maximum le poids des images et flashs.
   
   
2. Côté CSS
   
   
   • Factorisez les règles, c'est à dire regrouper les éléments aux mêmes propriétés.
   
   
   • Placer les CSS dans des fichiers externes sans multiplier leur nombre et en les compressant.
   
   
   • Mettre la balise link, de la feuille de style, dans le head de la page HTML, le plus haut possible (après doctype, title) afin que le navigateur la lise le plus rapidement possible.
   
   
3. Côté Scripts (JavaScript)
   
   
   • Les balises bloquent le chargement du site, elles doivent donc être évitées au maximum et placées à la fin de la page HTML pour être lues en dernières.
   
   
   • Placer les scripts dans des fichiers externes sans multiplier leur nombre et en les compressant.
   
   
   • L'attribut onLoad s'éffectue uniquement quand tout le site est chargé (images comprises), il ralentit le chargement de la page et est donc à éviter. On peut lui préférer DOMContenLoaded présent nativement sous Firefox, Opéra et qu'on retrouve dans les frameworks JS pour l'utiliser sous Internet Explorer
   
   
   • Penser à bien définir var nomvariable dans les fonctions JS plutôt que nomvariable pour que le navigateur ne recherche pas une variable globale.
   
   
   • Evitez d'accéder plusieurs fois à une propriété à la suite, mieux vaut le faire en une fois (ex : faire deux innerHTML de suite sur la même balise, on peut le regrouper en une fois).
   
   
   • Bannir with et éviter eval.
   
   
   • Ne pas abuser de XmlHttpRequest, bien que les requètes se fassent asynchronent, elles demandent une connexion HTTP au serveur.
   
   
   • Faire attention à l'utilisation des effets "web 2.0" (fade..) qui sur des machines anciennes provoquent des ralentissements.
   
   
   • Attention aux performances des frameworks JS, notamment sous Internet Explorer, mieux vaut les éviter si on en utilise que quelques fonctions.
   
   

Cet atelier a été très instructif et me servira dans mes prochains projets afin d'améliorer la vitesse d'affichage de mes sites. J'espère qu'il vous apprendra également certaines techniques. Je viens d'ailleurs de me rendre compte que les slides de la présentation sont disponibles sur le blog de la devteam de skyrock.

Les derniers articles de la catégorie : Internet

• Les communiqués de presse 2.0
• Google Chrome
• Blog = no man's land
• Brozengo RIP
• La guerre des blogs
• Apli Facebook : Slap your friends
• Twitter, pourquoi s'y mettre ?
• Web in Alps #1 (BDA #3)