Pour savoir où on va, il faut savoir d'où l'on vient

Vous avez
une question ?
Un projet ?

Contactez nous !
 

Contactez-nous

Vous avez une question ? un projet ? 
Vous souhaitez plus d'informations sur un produit ? sur notre offre ? 
Contactez-nous, on vous répond sous 4H.

retour

Moins de composants, moins de requêtes

Moins de composants, moins de requêtes

 

On ne demande pas pour autant de revoir l’esthétique ou l’ergonomie des sites. Non, l’idée c’est que pour le même rendu, il faut parvenir à élaborer la page avec moins de composants.

Quelques statistiques

Etudions quelques statistiques des plus grands sites web français, sous monitoring sur l’outil Woozweb, à partir d’un échantillon de 6000 sites :

Composants de la page

image032

Ici le pourcentage de sites ayant tel nombre de composants dans leur home page. Par exemple 35% des sites ont entre 25 et 50 composants sur leur page, et au total 30% des sites on plus de 50 composants.

Ces composants peuvent être, comme on l’a vu plus haut, des images, des fichiers javascript, css, objets flash, etc.

Images dans la page

image034

Sur la figure précédente, nous avons un focus sur les images au sein de la page, toujours sur le même échantillon. Où l’on voit que 10% des sites ont plus de 60 images dans leur page.

Chargement de la page

image036
image038

La figure précédente représente le temps total de chargement de la page, dans un navigateur à très haut débit. Le second graphe est une courbe cumulé, où l’on peut lire par exemple que 72% des sites environ chargent la totalité des composants de la page en moins de 4 secondes ; Cela en laisse quand même 28% qui mettent plus de 3 secondes, ce qui est trop.

Poids total de la page

image040

Enfin sur ces derniers graphes, nous avons représenté le poids total de la page, tous composants compris. La moitié des sites ont un poids total de plus de 250 kO.

Réduire le nombre de composants

Il faut bien comprendre que, au delà du volume total échangé, c’est vraiment le nombre de requêtes, donc de composants, qui impacte le plus les performances.

On cherchera donc à adresser les mêmes fichiers au navigateur en moins de requêtes. Comment faire cela ? Plusieurs voies :

  • Plusieurs fichiers Javascript ou bien CSS peuvent souvent être réunis en un seul. On pourra également supprimer les commentaires de ces fichiers lors de la mise en production.
  • Fusionner les fichiers image également, selon la technique du « CSS Sprite », qui consiste à former une image unique en juxtaposant différentes petites images, puis à sélectionner la petite image côté client, en indiquant le coin supérieur gauche et la dimension. C’est un peu sophistiqué, mais il existe quelques outils pour rendre cela facile.

Dans l’ensemble toutefois, ces techniques sont moins déterminantes si l’on a par ailleurs une bonne configuration du cache. Sauf que, à la différence du cache, elles fonctionnent au premier chargement et non au second.