Sous les Toits

La question est vaste et c’est un travail quotidien : compression, réduction du nombre des requêtes, mise en cache, progression non obstrusive, parallélisation… Quelques points qui me paraissent essentiels et qui sont encore trop souvent délaissés.

L’optimisation d’un site web joue à chaque fois sur quelques millièmes de secondes. Ça peut paraître complètement dérisoire, ceci étant, je suis passé un affichage en 6 secondes pour la page d’accueil de ce blog à moins d’une seconde et demi. L’expérience utilisateur n’est plus tout la même !

Pour info Google prend officiellement en compte le temps de chargement d’une page web dans le classement des résultats de Google depuis le moins d’Avril.

Les outils pour tester la réactivité de vos sites

Pour vous donner un aperçu du temps de chargement de vos pages web, il existe plusieurs utilitaires, voici mes préférés :

• GTmetrix
• WebPageTest
• Le plugin Google Page Speed
• Le plugin Firefox Yahoo Yslow

Mise en cache des fichiers dynamiques

Les CMS actuels rivalisent de possibilités, souvent au prix de trop nombreux appels aux bases de données, fichiers XML et autres web services. L’idéal dans ces cas là est de continuer à se servir de la puissance du CMS mais de générer un fichier statique (ou en partie du moins) pour le servir à l’internaute. En règle générale, c’est là qu’on gagnera le plus gros du temps de téléchargement. Au passage, on déchargera le processeur et la base de données.
Sur un site que j’ai eu à gérer il y a maintenant bien longtemps, le CMS était franchement plan plan. A chaque fois qu’une page était modifiée ou créée, le fichier HTML correspondant était placé sur le serveur. C’est archaïque, mais c’était redoutable d’efficacité.
Aujourd’hui, la plupart des CMS proposent des systèmes de cache en natif ou via des plugins. Ce serait dommage de ne pas en profiter.

Comprimez tout ce qui peut l’être

Vous avez l’habitude de compresser vos images pour gagner en temps de téléchargement (et en bande passante) sans perte de qualité. Il est possible de faire la même chose avec les autres types de fichiers : la minification permettra de supprimer tous les espaces, tabulations, commentaires et autres sauts de lignes inutiles. C’est valable en javascript, CSS mais aussi en HTML même si c’est encore peu utilisé.
Attention toutefois à ne pas minifier vos fichiers de développement 😉

La compression peut doit aussi passer par des méthodes classiques. De plus en plus de navigateurs acceptent la compression gzip. Il est assez facile de paramétrer son serveur (même mutualisé) pour pouvoir transmettre les fichiers dans leur version compressée quand le client les acceptent. Pour info, sur un serveur mutualisé OVH, il suffit d’ajouter la ligne suivante en tête de votre fichier .htaccess à la racine de votre hébergement :

modgzipon On

Réduction du nombre de requêtes

Chaque fichier à télécharger crée une nouvelle requête vers le serveur, chaque nouvelle requête se décompose en plusieurs étapes : recherche du DNS, envoi de la demande, accusé de réception, recherche du fichier, envoi… Aussi rapide soient ces étapes, il est quand même intéressant d’éviter de les cumuler inutilement.

On vous a déjà dit mille fois de ne pas créer 12 fichiers CSS pour une même page et vous faites attention. Soit. S’il reste 2 ou 3 fichiers CSS regardez donc s’il n’y a vraiment pas moyen de les rassembler en un seul fichier, des fois que vous puissiez gagner une petite requête… Idem pour le javascript bien entendu.

Un peu moins répandu, il est aussi possible d’envisager la même méthode avec les images de votre thème. Puisque il s’agit de votre thème (et donc que vous ne mélangez pas fond et forme), ces images sont utilisées en background dans votre CSS, délimitées en hauteur et largeur, donc si l’image était plus grande, seule une partie serait visible. Regardez ce que fait Google sur sa page d’accueil : il ne charge qu’une seule image !

Progression non obstrusive

Certains javascripts peuvent bloquer le chargement d’une page tant qu’ils ne sont pas totalement chargés. C’était le cas de la première version de Google Analytics. Vous savez comme moi que le javascript est une couche complémentaire qui ne doit jamais être essentielle au bon fonctionnement d’une page web (ne serait-ce que pour les navigateurs dont le JS est désactivé). On peut donc charger la page sans son javascript et ne l’appeler qu’une fois le HTML chargé. L’internaute sera toujours plus enclin à attendre un peu s’il a quelque chose à se mettre sous les yeux 😉
N’hésitez pas à préférer un chargement AJAX ou à placer vos scripts en fin de page juste avant la fin de body.

Parallélisation des chargements

Le protocole HTTP limite théoriquement le chargement à deux fichiers simultanément, même si les navigateurs fourbent pour passer au-delà. Les fichiers sont chargés à la queue leu leu et ça peut prendre un brin de temps.
L’idée est d’utiliser d’autres noms de domaines pour contrer cette limitation. En soit, ça paraît compliqué et peu utile. Ceci dit, le Cloud computing nous permet d’avoir accès à des serveurs de réplication disséminés un peu partout dans le monde. Imaginez maintenant que non seulement vous puissiez permettre de charger plus de 2 fichiers à la fois, mais qu’en plus ces fichiers soient servis par un serveur proche de l’internaute, même s’il est à l’autre bout du monde. La technique devient d’un coup beaucoup plus intéressante.
Par ailleurs, cette technique (appelée CDN pour Content Data Network) permettra en outre d’utiliser des serveur qui refusent les cookies. Autant de requêtes économisées donc puisque le navigateur n’aura pas à vérifier la présence d’un éventuel cookies pour chaque fichier téléchargé. De surcroit, vous gagnerez en bande passante et en temps processeur sur votre propre serveur.
Bien entendu, cette technologie est à réserver à l’usage des fichiers statiques (CSS, javascript images, polices de caractères, etc.).

A l’heure actuelle, les CDN sont peu abordables au niveau tarif, mais peuvent dans certains cas améliorer sensiblement les choses.

Pour l’heure, en CDN gratuits, il existe essentiellement :

• Coral, un CDN basé sur le P2P (Maxime en parle)
• Google App Engine en HTTP

Je vous prépare un petit billet sur la mise en place d’un CDN via Google App Engine.
Je suis sûr que de votre côté, vous avez vous-aussi vos petites astuces. Comment gérez vous l’optimisation de votre site web ?

Illustration : cc Danard Vincente