La vitesse de votre site, est quelque chose de primordiale lors de la conception de site ou application web. La performance générale de vos pages web a un impact certain sur l’expérience de vos visiteurs et donc votre nombre de visites.

Plusieurs études montrent que la vitesse de chargement avait pour conséquence une réduction du trafic (20% pour 500ms selon l’étude réalisée par Google) et/ou des ventes dans le cas du commerce en ligne (1% pour 100ms de plus - Etude Amazon).

Depuis quelques temps maintenant, l’algorithme de Google prends en compte le temps de chargement des pages web.Un impact sur le référencement qui favorise les sites au temps de chargement réduit.

Est-il nécessaire de vous convaincre encore de l’utilité d’optimiser le chargement de vos pages ?

Cette série d’articles va essayer de couvrir les principaux axes d’efforts qui vous permettront de gagner de précieuses secondes sur l’affichage de vos pages.

Les requêtes HTTP

80% du temps de calcul serveur est utilisé pour rendre l’affichage des éléments visibles par l’utilisateur. La plus grande partie de ce temps est dévolue au téléchargement de tout les composants de la page: CSS, images, scripts etc. Il devient donc clair que la diminution du nombre d’éléments à télécharger réduira le nombre de requêtes HTTP. C’est une des choses fondamentale concernant la rapidité de vos pages.

Pour autant, nous voulons garder nos pages les plus présentables possibles, et de nos jours, un design de qualité requiert des images de plus en plus nombreuses. Y a t-il alors un moyen de concilier les deux, garder un design toujours plus riche tout en minimisant le nombre de requêtes HTTP ?

Restons groupir !

Une façon simple et efficace pour réduire le nombre de requêtes est de combiner le maximum possible les fichiers. Je m’explique. Il n’est pas rare d’avoir plusieurs fichiers de styles (.css), de scripts (.js) et d’images nécessaires à la bonne exécution de votre site web. Combiner vos fichiers en un seul quand cela est possible, vous permettra de diminuer vos requêtes et donc, comme nous l’avons vu, accélérer le chargement de vos pages . Groupez tout vos .css en un seul fichier, faites de même pour les scripts .js. Vous réduirez alors d’autant vos requêtes, ce qui aura pour conséquence direct d’améliorer le temps de réponse de votre site et l’expérience utilisateur.

[fancy_link link= »http://refresh-sf.com/yui/ » target= »blank »]Outils de compression et de regroupement des .css / .js en ligne[/fancy_link]

Optimiser vos images pour le web

La première chose qui aura un impact sur la rapidité de vos pages a propos des images, c’est leurs poids, cela va de soi. Nous approfondirons l’optimisation de la taille des images dans un prochain article. Le but ici étant de réduire le nombre de requêtes HTTP vers votre serveur.

google-sprite

Comment réduire le nombre de requêtes sans sacrifier le nombre d’images composant votre design ? En les regroupant en une seule bien sûr ! Vous l’aurez compris, cela s’applique uniquement aux images qui composent votre thème et non les images illustrant votre contenu.

Les images sont donc regroupées en une seule grande image. On accède à la partie souhaitée de l’image via la propriété  CSS background-position à qui on indique les coordonnées X et Y ainsi que la largeur et la hauteur de l’élément. Seule cette partie du sprite sera visible pour l’élément stylisé de la sorte.

Nous avons vu les grandes lignes qui vous permettrons déjà de mettre un bon coup de fouet a votre site.  Nous approfondirons le sujet dans de futurs articles.