Blog de Marti

Ce billet sera le premier d'une série portant sur l'optimisation de sites Web, et plus spécifiquement de ceux développés avec AMP (Apache, MySQL, PHP). Optimiser un site Web est important pour deux raisons :

1. Améliorer l'expérience des visiteurs en accélérant le chargement et l'affichage
2. Réaliser des économies en réduisant les besoins en matériel et bande passante

Commençons cette série par la partie client.

Taille des fichiers

La première chose qui vient à l'esprit pour gagner en vitesse est tout simplement de réduire la taille des fichiers.

HTML : il n'y a pas beaucoup de gains à espérer ici, vous pouvez essayer de réduire votre quantité de retours à la ligne et de tabulations, mais cela nuira forcément à la lisibilité de votre code. Bien sûr il est très fortement recommandé d'écrire son code HTML "à la main" et sans le recours à un éditeur visuel, vu leur tendance à faire gonfler inutilement la taille du code.

CSS : il y a quelques gains à réaliser ici. Le premier est d'avoir un code bien organisé et structuré, de sorte que vous ayez le moins de classes et de propriétés définies et pas de redondance. N'oubliez pas qu'il est possible d'appliquer plusieurs classes à un même élément HTML. Si des éléments partagent partiellement des propriétés communes, il peut être utile de les grouper dans une même règle que vous leur appliquerez en plus de leur propriétés spécifiques. De plus, vous pouvez gagner quelques octets en utilisant les raccourcis CSS prévus à cet effet. Ainsi la règle { border-style: solid; border-width: 1px; border-color: #ffffff; } est identique à {border:solid 1px #fff}.

JPEG : vous pouvez faire de gros gains en utilisant les modules d'optimisation qu'on trouve dans les bons logiciels graphiques. D'après mes essais, les JPEG progressifs sont généralement un peu plus compacts. Jouez avec les réglages offerts pour voir quel rapport qualité/taille vous convient le mieux. Chaque image nécessite un réglage différent - par exemples celles avec des zones rouges ou des tons rouges font plus ressortir les défauts de compression et nécessitent donc une optimisation moins agressive. Si votre logiciel rajoute des données EXIF ou IPTC dans les JPEG qu'il produit, vous pouvez également les supprimer pour gagner encore en place (avec par exemple PlainViewer).

PNG : la aussi vous pouvez tirer partie des modules d'optimisation de votre suite graphique favorite. En particulier vous pourrez opter ou pas pour utiliser une palette, et le cas échéant la limiter à un certain nombre de couleurs. Ceci fait, vous pouvez réaliser encore de gros gains supplémentaires en utilisant un logiciel spécifique comme AdvanceComp qui retire les données inutiles et pousse la compression plus loin.

GIF : la seule raison valable pour utiliser des images GIF concerne les petites animation (ou bien de très petites images d'une poignée de pixels). Pour le reste utilisez PNG, qui offre une meilleure compression.

Javascript : de gros gains sont possibles en utilisant un compacteur de code comme par exemple Dojo ShrinkSafe ou Packer (conservez l'original de votre fichier pour les modifications, car la version compactée est illisible pour un être humain normalement constitué). De nombreuses librairies AJAX sont disponibles en version compacte directement ou auprès de tiers.

Nombre de fichiers

Plus que la taille des fichiers, le fait d'en avoir en trop grand nombre donne encore plus l'impression de "lenteur" au visiteur (à cause des aller-retour nécessaire entre le navigateur et le serveur pour effectuer chaque demande). Il faut donc tenter de limiter les fichiers connexes à une page en regroupant feuilles de style et scripts dans un nombre de fichier le plus limité possible.

Le problème est qu'en suivant cette stratégie, on oblige certaines pages à charger des données dont elles n'ont pas besoin. Ainsi si certaines pages utilisent les fichiers A et B, et d'autres B et C, et que A B et C sont assez lourds, il y a une perte importante à regrouper ces trois fichiers et à les servir systématiquement même lorsque seule une partie est nécessaire. La solution est alors d'écrire un petit script côté serveur (PHP ou autre) qui regroupera les différents fichiers CSS ou Javascript dont chaque page à besoin pour le servir d'un coup.

Ainsi au lieu d'avoir ces deux inclusions :
<link rel="stylesheet" href="A.css" type="text/css"/>
<link rel="stylesheet" href="B.css" type="text/css"/>


On aura :
<link rel="stylesheet" href="styles.php?group=AB" type="text/css"/>


Pour les images, je recommande chaudement la technique baptisée CSS sprites, qui regroupe plusieurs images en une seule et utilise des propriétés CSS pour les extraire et afficher. C'est particulièrement efficace pour les petits éléments d'interface (boutons, coins arrondis, icônes, etc.) en remplaçant des douzaines d'images par une seule.

Ordre des fichiers

L'ordre dans lequel sont listés vos librairies Javascript compte. En effet, le navigateur les charges séquentiellement dans leur ordre d'apparition, en bloquant pendant ce temps le traitement de la page elle même. Une solution est donc de placer ces inclusions en fin de page plutôt que dans l'en-tête (techniquement il n'y a pas de gain du temps de chargement, mais en pratique l'utilisateur verra quelque chose s'afficher plus vite).

Un mot à propos de la mesure des performances

Pour mesurer la performance côté client un bon outil est l'excellente extension FireBug pour Firefox (déjà recommandée précédemment), qui dispose d'un onglet "Net" indiquant dans quel ordre, et à quelle vitesse, sont chargé chacun des fichiers inclus dans une page.