Ce qui se passe entre le clic et l'affichage

La vitesse d'un site ne se joue pas au moment où l'image apparaît, mais bien avant, dans une suite d'opérations que personne ne voit et que tout le monde subit. Les connaître change la conversation : au lieu de demander un site rapide, on sait quoi regarder, quoi exiger, et ce qui coûte réellement des secondes.

1. 01

   La recherche de l'adresse

   Le navigateur ne connaît que le nom que le visiteur a tapé. Il interroge d'abord un annuaire, le DNS, pour obtenir l'adresse réelle du serveur. Cet aller-retour a lieu avant qu'un seul octet de la page ne circule. Il est ensuite mémorisé, ce qui explique qu'une deuxième visite démarre plus vite qu'une première.

2. 02

   L'ouverture de la connexion sécurisée

   Le navigateur et le serveur négocient le chiffrement, celui qui affiche le cadenas dans la barre d'adresse. Cette poignée de main coûte plusieurs allers-retours réseau, d'autant plus longs que le serveur est physiquement loin du visiteur. C'est toute la raison d'être des réseaux de diffusion de contenu, qui rapprochent les fichiers de celui qui les demande.

3. 03

   La fabrication de la page

   Deux modèles s'opposent ici. Sur un site dynamique classique, le serveur interroge une base de données, assemble la page puis l'envoie, et ce travail recommence à chaque visite. Sur un site statique, le HTML a été fabriqué une fois à la publication : le serveur se contente de remettre un fichier déjà écrit. L'écart ne dépend ni du nombre de visiteurs, ni de la charge du moment.

4. 04

   Le premier affichage

   Le navigateur lit le HTML de haut en bas. Toute ressource bloquante rencontrée en chemin, feuille de style, script, police de caractères, suspend l'affichage jusqu'à son arrivée. C'est là que se joue l'essentiel du ressenti : une page qui montre son texte immédiatement paraît rapide, même si des éléments continuent d'arriver derrière.

5. 05

   Les images et les polices

   Les images pèsent souvent plus lourd que tout le reste réuni. Les formats modernes comme WebP et AVIF, et le fait de servir chaque image à la taille où elle sera réellement affichée, réduisent ce poids sans perte visible. Les polices, elles, gagnent à être hébergées avec le site : chaque domaine tiers appelé rajoute une recherche d'adresse et une connexion, soit les deux premières étapes de cette liste, en entier.

Aucune de ces étapes ne se voit à l'œil nu, mais toutes se mesurent, avec des outils publics et gratuits — PageSpeed Insights de Google, ou l'onglet réseau de n'importe quel navigateur. Les indicateurs que Google retient pour cette mesure sont détaillés dans la section suivante.