Dans la première partie de cette série nous avons vu comment optimiser le nombre de requêtes nécessaires au chargement d'une page sur votre site web.

Dans cette deuxième partie nous allons nous intéresser à un autre domaine sur lequel vous pouvez agir pour améliorer la rapidité de votre site: la taille des ressources téléchargées.

Taille des ressources

Votre site web utilise à priori deux catégories principales de ressources:

• des images
• des fichiers "techniques" (feuilles de styles CSS décrivant la présentation du site, fichiers de code Javascript pour les fonctionnalités)

Que ce soit pour l'une ou l'autre de ces catégories de ressources, l'idée est de réduire autant que possible leur poids (la taille des fichiers), afin d'accélérer leur téléchargement et donc diminuer le temps de chargement des pages de votre site web.

Gestion optimisée des images

L'optimisation des images peut se faire à plusieurs niveaux:

• en travaillant sur la compression des données afin de réduire le poids d'un fichier image tout en conservant ses dimensions
• en adaptant les dimensions de l'image aux besoins réels de votre site
• en créant plusieurs variantes d'une image et en affichant la mieux adaptée selon la situation

Formats

Prenons l'exemple d'une photo, prise avec un appareil numérique 6MP (cela pourrait être bien plus!), et voyons ses paramètres (cliquez sur une image pour l'agrandir) :

(pour les curieux, il s'agit d'une photo des Dents du Midi, prise depuis le pied de la Pointe de Bellevue)

Comme vous pouvez le constater, la compression réduit déjà fortement la taille du fichier image, sans effet visible notable.

L'image redimensionnée et compressée apporte un nouveau gain de taille appréciable (le fichier "pèse" 97% de moins que l'original!) tout en restant suffisante même pour un affichage en grand.

Inutile donc de télécharger vos images originales vers votre serveur web (sauf bien sûr si votre but est explicitement de mettre à disposition vos photos), des versions compressées et redimensionnées feront parfaitement l'affaire.

La bonne image pour la bonne situation

Outre le travail discuté ci-dessus pour réduire le poids de vos images, il faut également veiller à utiliser la bonne taille d'image au bon endroit.

En effet, pourquoi demander à vos visiteurs de télécharger une photo pleine taille si c'est pour l'afficher en tout petit ? Il vaut mieux afficher une image redimensionnée adaptée à la situation, puis éventuellement afficher une image de plus grande taille seulement lorsque nécessaire.

L'exemple type de mise en oeuvre de ce fonctionnement est une galerie d'images:

Dans une galerie telle que celle-ci, plutôt que d'afficher en petit de grandes images, on a créé des miniatures (vignettes) qui sont beaucoup plus rapides à télécharger et mieux adaptées. Les grandes images sont affichées uniquement si demandé par l'utilisateur par un clic sur une vignette (comportement mis en place par Colorbox², un composant javascript).

Optimisation des fichiers JS / CSS

Deuxième catégorie de ressources à traiter, les fichiers "techniques" (feuilles de styles CSS décrivant la présentation du site, fichiers de code Javascript des modules et fonctionnalités) de votre site.

Utilisation de fichiers "minifiés"

Votre site fait sans doute appel à des outils tiers, tels que jQuery (bibliothèque javascript qui facilite l'écriture de scripts multi-plateformes) ou Bootstrap (collection d'outils JS et CSS pour la mise en page). Ces outils sont fournis sous forme de fichiers CSS et Javascript à intégrer à votre site. Ils existent usuellement en deux versions:

• une version non-compressée / de développement
• une version de production / compressée / "minified" (souvent identifiée par le suffixe .min.js ou .min.css)

La version "minifiée" (réduite, compressée) est beaucoup plus légère et optimisée pour l'utilisation en situation réelle. Privilégiez donc toujours les version "minifiées".

La version non compressée est utile si vous devez lire le code, car elle comporte des commentaires des concepteurs et une structure facilitant la lecture du code, mais les fichiers sont plus lourds.

Compression manuelle

Si votre site comporte des fichiers CSS et JS personnalisés / développés spécifiquement, c'est à vous de faire en sorte de les réduire avant de les mettre en production sur votre site web.

Pour ce faire vous pouvez utiliser par exemple Closure Compiler³ de Google, un outil en ligne permettant de réduire du code Javascript. Cet outil retire les commentaires et espaces inutiles, mais il est également capable d'analyser plus finement le code fourni pour renommer les fonctions et paramètres afin de les raccourcir, retirer les bouts de code "mort" (jamais utilisés), etc.

js original// ceci est un commentaire
function hello(name) {
  var prefix = 'Hello';
  alert(prefix + ', ' + name);
}
hello('Yves');

js compressé function hello(a){alert("Hello, "+a)}hello("Yves");

Ci-dessus un exemple très simple de code Javascript avant / après compression.

Compression automatique via votre CMS

Si votre site utilise un système de gestion de contenu, vous disposez très probablement de réglages permettant de compresser automatiquement les ressources CSS et JS. Ci-dessous la marche à suivre pour un site web basé sur Drupal 7:

• Administration > Configuration > Développement > Performance
• Section "Optimisation de la bande passante"
• Valider l'option "Compresser les fichiers CSS"

Ces mêmes réglages permettent aussi de limiter le nombre de fichiers à télécharger, comme présenté dans la première partie de cette série sur l'optimisation du temps de chargement.

Pour aller plus loin

Au delà de la réduction de la taille des ressources et de la limitation du nombre de requêtes nécessaires au chargement de votre site web, il existe encore d'autres techniques pour améliorer la rapidité d'affichage de vos pages, par exemple:

• l'optimisation de l'ordre de chargement des ressources
• le chargement retardé des ressources non-essentielles
• l'optimisation du code HTML
• l'intégration des règles CSS principales directement dans le code HTML

Toutes ces optimisations ont pour but de réduire la taille du contenu au-dessus de la "ligne de flottaison" (partie initialement visible de votre page web), afin de permettre un affichage le plus rapide possible du "haut" de vos pages (le restant du contenu et des ressources étant chargé ensuite).

Bien que potentiellement utiles ces optimisations sont plus difficiles à mettre en oeuvre et ne seront pas présentées plus en détails ici - pour en apprendre d'avantage vous pouvez tester votre site web et obtenir des recommendations via un outil comme PageSpeed Insights⁴.

Bonnes optimisations!

 

Vous utilisez d'autres outils et techniques utiles ? Partagez vos expériences dans les commentaire ci-dessous!

Vous pouvez aussi consulter mes services web pour en apprendre plus ou me contacter pour en discuter.

 

Références

1) OptiPNG - outil d'optimisation d'images (lien)
2) Colorbox - plugin jQuery de galerie d'images (lien)
3) Closure Compiler Service - outil d'optimisation Javascript (lien)
4) PageSpeed Insights - outil de diagnostique de rapidité (lien)