Une fois que la page est générée (rapidement, c’est là où je vous avais laissés dans l’épisode précédent), il faut que les informations soient transmises à votre internaute. Et pour cela, il n’y a pas de miracle : plusieurs millions d’octets de données mettront plus de temps que quelques milliers.
Cette fois-ci encore, partons du principe que vous n’avez pas la main sur le matériel (taille de la bande-passante,…) et focalisons-nous sur le logiciel. Et il y a fort à faire !
Taille et format des images
Réduisez la taille de vos images au minimum, c’est-à-dire ajustée à la taille affichée. Non seulement cela réduit le poids de l’image mais cela évite au navigateur de la redimensionner, ce que certains d’entre eux (Internet Explorer…) font mal.
D’autre part, choisissez le format approprié pour votre image. Et là, il n’y a pas de règle : le JPEG, le GIF et le PNG donnent des résultats variables suivant les images ; du coup, on ne peut pas passer à côté du test. Lorsqu’il y a peu de couleurs dans l’image, le PNG l’emporte souvent.
Minimiser le code Javascript et CSS
Les codes Javascript et CSS (s’ils existent) contiennent vraisemblablement des tabulations, des commentaires, des retours à la ligne,…. Autant de caractères qui sont parfaitement inutiles pour le navigateur (ils le sont seulement pour vous, pour vous relire). Dès lors, pourquoi ne pas les supprimer ?
Evidemment, ne faites pas le travail manuellement, des outils existent :
Sur les fichiers CSS de Nooxt, par exemple, on gagne ainsi 20%.
Minimiser le HTML
Si l’on réduit la taille des fichiers JavaScript et CSS, pourquoi ne pas faire de même sur le code HTML ? Pour les sites dynamiques (où chaque page est générée sur mesure par le serveur lorsque l’internaute la lui demande), l’inconvénient de cette opération est double :
- elle fait travailler plus intensément le serveur,
- elle augmente la durée de génération de la page, ce qui déplace donc le problème.
Sur Nooxt, je fais quand même cette minimisation lorsque l’on se connecte au site depuis un mobile, là où le temps de transmission est beaucoup plus déterminant que le temps de génération de la page. Pour cela, cette simple ligne supprime tous les caractères d’espaces successifs (tabulation, espaces, retour à la ligne) par un seul espace :
$sortie = preg_replace('~[\s]+~',' ',$entree);
Compression GZip
Lorsque vous envoyez des documents par mail, vous pensez sans doute à réduire sa taille en faisant une archive .zip. Pourquoi ne pas faire de même avec votre site internet ?
Certains navigateurs autorisent la réception de code compressé en GZIP (aussi bien la page HTML, que les codes JS et CSS). Pour vérifier si le navigateur qui visite votre site accepte ce format, il suffit de vérifier ses en-têtes. En PHP, cela consiste en vérifier que la chaine $_SERVER['HTTP_ACCEPT_ENCODING'] contient le terme “gzip”.
Pour faire la compression en particulier, l’opération est relativement simple pour les fichiers CSS et JS. Il suffit de compresser les fichiers et d’appeler les fichiers compressés (si le navigateur peut les lire, encore une fois !), par exemple :
<script type="text/javascript" src="fichier.js.gz"></script> <link rel="stylesheet" href="fichier.css.gz" type="text/css" />
Avec cette compression, le fichier CSS de Nooxt a été réduit de 76% supplémentaires !
Chipotons
La performance est un défi toujours renouvelé (les sportifs en savent quelque chose), et il est toujours possible de faire mieux. Voici donc un paragraphe pour chipoter.
Plutôt que d’appeler les fichiers avec des noms à rallonge, Nooxt utilise des répertoires de 2 ou 3 lettres, pour l’essentiel. Ainsi “version3/images/icones/fichier.png” sera plutôt appelé “v3/i/ic/fichier.png”. De la même manière, les noms des classes et id du code HTML sont des noms courts, dans la mesure du possible.
Dans les images (GIF, PNG ou JPEG), des informations inutiles sont automatiquement ajoutées par le logiciel qui compose l’image (Photoshop, par exemple). Il est possible de leur faire perdre une taille avec des outils tels que Pngcrush ou Optipng pour le PNG, JHead pour le JPEG, ou le fameux SmushIt qui fait ça en ligne !
Dans le prochain épisode…
Bien. Vous avez maintenant un site internet généré vitesse grand V et d’une taille réduite au maximum. Mais ça n’est pas fini : il faut que le navigateur récupère tout ça et l’affiche. Et, là aussi, il y a du boulot.
Un commentaire
-
Raphael, 3 novembre 2009
Concernant les “noms à rallonge” pour les images, ces derniers sont souvent nécessaires car pris en compte par les moteurs de recherche.
Par exemple, dans le cas d’une boutique en ligne, on fait en sorte d’afficher le nom du produit, de la catégorie et le nom du fabricant dans un maximum d’endroits possibles afin d’optimiser son référencement : url, titre, contenu, balises alt,… et nom de l’image.
On peut donc facilement se retrouver avec des noms d’image du type “plongee-masques-tubas-masque-double-shark-diverscorp.jpg”.
