4 astuces pour accélérer l'affichage d'un site Web
Avec de nombreux éléments dynamiques et des lignes de code qui s'accumulent, une page Web peut mettre du temps avant de s'afficher. Optimiser la rapidité d'affichage peut pourtant apporter de multiples avantages concurrentiels : confort de navigation pour l'internaute, baisse du taux de rebond, ou même, à en croire Google et certains experts SEO améliorer le référencement naturel d'un site. D'autant que certaines astuces, pas toujours connues, et finalement rarement mises en places, permettent également d'économiser des ressources.
1 -Faire attention aux cookies
Il est tentant de placer les cookies sur la racine d'un domaine (par exemple monsite.com), qui va également servir les images (www.monsite.com/img/...). Problème : chaque image va provoquer le transfert du cookie, aller et retour.
Or, les pages peuvent contenir un certain nombre d'images. Si 1 million de pages sont servies par mois, que chaque page contient 50 images, il y aura chaque mois, avec un cookie de 100 octets, pas moins de 10 gigaoctects de données de cookies (5 pour l'aller, autant pour le retour) qui auront été transférés pour rien.
Solution : les images, CSS, et codes JavaScript peuvent être servis depuis un autre domaine, sans cookies, qui resteront eux, sur "monsite.com "... De même, réduire la taille des cookies peut également permettre d'améliorer les performances.
2 – Bien utiliser le cache navigateur
Que ce soit pour des pages dynamiques ou statiques, il est possible de jouer sur le cache du navigateur pour optimiser l'affichage. C'est plus facile pour des pages statiques. Dans ce cas, il est recommandé de mettre en cache un maximum de contenu, via des paramètres HTML "Cache-Control:public", et un "max-age=" très élevé.
Mais même les pages dynamiques peuvent être cachées par le navigateur, qui reste le cache le plus efficace (par rapport aux proxies par exemple). Il peut même remplir le rôle d'un CDN.
Utiliser une requête HTTP pour activer la mise à jour du cache du navigateur que si les données serveur ont changé
Il faut donc savoir résister à l'envie de multiplier les "no-cache" et "no-store" de peur que les pages ne se rafraichissent pas... De même, le Time To Live, "TTL", qui veut limiter la durée du trajet des paquets IP, sera toujours trop long ou trop court. Et ce même si un TTL de 1 seconde restera plus intéressant que pas de cache du tout, surtout si un gros volume de pages est servi par seconde....
Pour ces pages dynamiques, la solution, pas toujours mise en place, est de miser plutôt sur une bonne gestion du code HTTP 304 "not modified" couplé aux headers HTTP must-revalidate, max-age=0. Avec ces paramètres, le navigateur devra ainsi toujours revalider ("revalidate") son cache, et le serveur pourra lui répondre avec le message "HTTP 304" dans le cas où le cache du navigateur est encore bon ("Not Modified").
Plus d'information sur le site w3.org
3 - Limiter les requêtes HTTP
Regrouper les images dans des sprites CSS, compacter et concaténer le code JavaScript ... Google Page Speed, entre autres outils, le recommandera pour la plupart des sites qu'il analysera. Preuve que, même si c'est sans doute classique, c'est aussi finalement assez rarement appliqué. Il y a pourtant des performances d'affichage non négligeable à la clef.
A noter qu'il existe même des outils gratuits pour minifier du code Javascript : YUI Compressor, Closure Compiler, ou JSMin, notamment, - le premier pouvant même minifier du CSS.
De même, Yahoo! le recommandait déjà, avant Google, "Put Scripts at the Bottom" : mettez les scripts (JavaScript / Jquery et autres) en bas de page ! Du moins quand c'est possible. A noter que le code asynchrone de Google Analytics peut cependant être placé en haut de la page sans ralentir son affichage.
Cependant, ce levier n'est pas toujours facile à actionner. Il n'est en effet pas rare que ce soient les publicités qui brident la performance de l'affichage d'une page, par ailleurs très bien optimisée...
4 - Avoir les bons indicateurs
Sans les bons indicateurs, un site ne pourra être correctement optimisé... pour tout le monde. Il ne sert en effet à rien de s'évertuer à optimiser l'affichage pour les français si les consultations viennent du Canada, ou pour Free si 80% des internautes utilisent SFR... Pour éviter cet écueil, il faut bien connaître son trafic. Et Google Analytics ne suffit pas, il existe une multitude d'autres solutions, gratuites ou plus ou moins chères.
En outre, des mesures régulières (dès le développement, et en production), mais aussi depuis des IP variées, sont des conditions obligatoires pour mesurer de manière fiable, et donc améliorer, l'affichage et les performances d'un site Web.
Article réalisé avec l'aide de Damien Mangin, DSI de CCMBenchmark