A l'heure de l'accès généralisé à internet par fibre optique ou à large bande il peut sembler dépassé de se préoccuper du temps de chargement d'un site web, mais vos visiteurs sont d'autant plus impatients qu'ils s'attendent à ce que cela soit rapide. Plus personne n'a envie d'attendre 10 secondes le chargement d'une animation Flash d'introduction (si vous avez encore une animation Flash sur votre site, supprimez-là).

Au delà de ces considérations il faut tenir compte du fait que la vitesse annoncée est rarement la vitesse réelle²⁾. De plus, il ne faut pas oublier qu'une part importante de vos visiteurs utilisent probablement un smartphone (voir à ce sujet mon article Importance d'un site web adapté aux mobiles et impact sur le classement Google) et qui dit smartphone dit accès souvent moins rapide¹⁾ et moins stable que depuis un ordinateur de bureau.

L'optimisation du temps de chargement d'un site web dépend de divers facteurs hors de votre contrôle (charge du réseau, stabilité de la connection, saturation de l'accès par d'autres téléchargements), mais il y'a au moins deux facteurs que vous pouvez optimiser :

1. le nombre de requêtes au serveur nécessaires au chargement de vos pages
2. la taille des ressources téléchargées (images bien sûr, mais aussi librairies tierces)

Nombre de requêtes

Pour afficher une page de votre site, le navigateur de votre visiteur envoie des requêtes (des demandes de fichiers) à votre serveur web.

Au minimum une requête, pour recevoir la page elle-même, mais en général également de (très) nombreuses autres requêtes, afin de récupérer les éléments utilisés par la page, tels que:

• images
• fichiers de présentation (feuilles de styles CSS décrivant la présentation du site, les polices utilisées, la taille du texte, les couleurs, etc)
• fichiers de code Javascript pour les fonctionnalités de la page (statistiques d'accès, galerie, images défilantes, animations et autres modules)

Limiter les requêtes d'images

De nombreuses requêtes sont souvent liées au téléchargement d'icônes (pour une barre d'outils), ou à l'affichage d'une série de logos.

Afin de limiter le nombre de requêtes, une solution consiste à regrouper plusieurs petites images au sein d'une seule image (appelée une "sprite sheet"). Cette image unique peut du coup être téléchargée en une seule fois, puis seule la partie souhaitée est affichée grâce à des règles CSS.

Le tableau ci-dessous (tiré de la page Présentation) utilise une telle "sprite sheet":

sprite "HTML5"	sprite "CSS3"	sprite "Bootstrap"	sprite sheet complète

Chaque logo est en réalité une vue partielle de l'image complète, obtenue par du code HTML et une règle CSS:

<i class="sprite-css3"></i>html

.sprite-css3 {
  background-image: url(spritesheet.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 50px;
  background-position: -119px -5px;
}css

Création facilitée de "sprite sheets"

La création de "sprite sheets" pouvant s'avérer fastidieuse, il existe des outils pour faciliter cette création, comme par exemple Stitches sprite sheet generator. Cet outil gratuit en ligne permet d'importer une série d'images, puis d'obtenir une image fusionnée ainsi que les règles CSS prêtent à l'emploi pour l'affichage des images iindividuelles.

Limiter les requêtes CSS / JS

Les fichiers de style (CSS) et de code (JS) provoquent de nombreuses requêtes, il est de ce fait intéressant de fusionner plusieurs fichiers en un seul. Par exemple tous les fichiers CSS en un unique fichier styles.css et tous les fichiers de code en un unique fichier code.js, de manière à réduire le nombre de requêtes.

Fusion automatisée avec Drupal

Si votre site utilise un système de gestion de contenu, vous disposez très probablement de réglages permettant d'agréger automatiquement les fichiers. Voici par exemple comment procéder avec un site web basé sur Drupal 7:

• Administration > Configuration > Développement > Performance
• Section "Optimisation de la bande passante"
• Valider les options "Agréger les fichiers CSS" et "Agréger les fichiers JavaScript"

Taille des ressources

Deuxième domaine sur lequel vous pouvez agir pour améliorer la rapidité de votre site, la taille des ressources téléchargées.

L'optimisation de la taille des ressources fait l'objet d'un deuxième article dans cette série.

Références

1) Ménages avec accès large bande: 86% / Accès des ménages à internet à haut débit mobile: 53% (OFS, "Ménages et population - Accès des ménages à Internet", 2000-2014 - source)

2) "80% des abonnés au bénéfice d’un abonnement égal ou ­supérieur à 20 Mbit/s n’atteignent même pas 15 Mbit/s" (Bon à ­Savoir n° 05-2014 / On en parle - RTS-La Première - source)

3) Stitches - générateur de sprites HTML5 (lien)