Un site rapide n'est pas un site léger

La confusion est fréquente, y compris chez des équipes techniques expérimentées: on optimise le poids d'une page comme si le poids était la performance. Il en est un facteur, souvent le plus visible, rarement le plus déterminant. Un site de 400 kilo-octets peut être lent, un site de deux mégaoctets peut être perçu comme immédiat.

Ce que mesure réellement un visiteur

Personne ne perçoit des kilo-octets. On perçoit trois choses: le moment où quelque chose apparaît, le moment où l'essentiel devient lisible, et la réaction du site quand on le touche. Les métriques modernes traduisent ces trois perceptions, et aucune n'est un poids.

Le rendu du plus grand élément visible dépend surtout de la chaîne de requêtes qui mène à cet élément. Une image de 80 kilo-octets découverte au terme de quatre sauts, le document, la feuille de style, un script, un appel d'API, arrive plus tard qu'une image de 300 kilo-octets déclarée dès le document initial. Le poids a changé d'un facteur quatre. L'ordre d'arrivée, lui, a changé de rang.

La réactivité à l'interaction, elle, ne dépend pas du réseau du tout. Elle dépend du fil principal du navigateur. Un script de mesure d'audience de 30 kilo-octets qui bloque ce fil pendant 300 millisecondes dégrade davantage l'expérience qu'une police de caractères de 200 kilo-octets chargée en parallèle.

Trois cas rencontrés cette année

Un site vitrine à 380 kilo-octets, jugé lent. Toutes les images étaient différées, y compris celle du haut de page. Le navigateur ne pouvait pas la découvrir avant l'exécution du script d'observation. Retirer le différé sur cette seule image a fait gagner près de 900 millisecondes sur le rendu principal, sans changer un octet de poids total.

Un catalogue à 2,1 mégaoctets, jugé instantané. Le document initial contenait le texte, la structure et les dimensions réservées pour chaque visuel. Le reste arrivait après, sans jamais déplacer ce qui était déjà affiché. Le visiteur lisait pendant le chargement, donc il ne l'a pas vu.

Une application interne allégée de 40 pour cent, sans gain perçu. Le travail avait porté sur des dépendances chargées après le premier écran. Nous avions optimisé ce que personne n'attendait.

La question utile, à poser en premier

Avant de réduire quoi que ce soit, nous établissons la chaîne critique: la liste ordonnée des ressources indispensables au premier écran utile, avec pour chacune le moment où le navigateur peut la découvrir. Cette liste tient sur une feuille. Elle désigne presque toujours d'elle-même les deux ou trois interventions qui comptent.

Les gains viennent alors d'un petit nombre de gestes:

1. Déclarer tôt les ressources critiques, dans le document initial, plutôt que de les faire découvrir par un script.

2. Réserver la place des éléments qui arriveront plus tard, pour que rien ne bouge sous les yeux du lecteur.

3. Sortir du fil principal tout ce qui n'a pas besoin de s'y trouver, en particulier la mesure d'audience et les composants tiers.

4. Servir depuis un point de présence proche du visiteur, avec un cache dont on maîtrise l'invalidation.

5. Alléger, enfin, mais ce qui est sur la chaîne critique et rien d'autre.

Ce que l'allègement reste capable de faire

Rien de ce qui précède ne dit que le poids est indifférent. Sur un réseau mobile contraint, dans une zone à couverture irrégulière, chaque centaine de kilo-octets se paie. Un visiteur au forfait limité regarde sa consommation. Et un site lourd est presque toujours le symptôme d'autre chose: une dépendance mal choisie, un format d'image obsolète, un composant qui embarque tout un environnement pour afficher trois lignes.

L'allègement est donc un bon indicateur de santé. Ce n'est pas un objectif en soi, et le confondre avec la performance conduit à des chantiers longs dont les visiteurs ne perçoivent rien.

Notre règle de travail

Nous ne prenons aucun engagement de poids dans nos contrats. Nous prenons des engagements sur les trois métriques de perception, mesurées sur les pages qui reçoivent réellement du trafic, sur du matériel comparable à celui des visiteurs et non sur nos machines de travail. C'est plus difficile à tenir. C'est la seule promesse qui corresponde à ce que quelqu'un ressent en ouvrant la page.