J'ai pesé cinq sites d'entreprises du Nord : de 0,2 à 16,8 Mo

Le 20 août, j'ai téléchargé la page d'accueil de cinq sites d'entreprises et de collectivités des environs de Valenciennes et du littoral, puis j'ai additionné tout ce que le navigateur doit rapatrier pour l'afficher. Le plus lourd pèse 84 fois le plus léger. Aucun de leurs visiteurs ne le sait, et pourtant tous le subissent.

Ce que j'ai mesuré, et comment

La méthode est volontairement simple, pour que vous puissiez la refaire. Je récupère le code HTML de la page d'accueil, j'y relève toutes les ressources qu'elle appelle — images, feuilles de style, scripts, polices — je les télécharge à leur tour, et j'additionne les octets. C'est ce que votre téléphone fait, à ceci près qu'il doit en plus les interpréter.

Les sites sont anonymisés : mon propos n'est pas de désigner qui que ce soit, mais de montrer un écart. Le seul que je nomme est le mien, parce que c'est le seul dont j'assume les choix techniques.

Le caviste n'a rien fait de scandaleux. Il a mis ses photos en ligne telles qu'elles sortaient de l'appareil. Seize méga-octets d'images pour une page : ce sont des clichés de 4 000 pixels de large affichés dans des vignettes de 400. Le navigateur télécharge dix fois ce dont il a besoin, puis jette le reste.

Traduisons en secondes

Un chiffre en méga-octets ne parle à personne. Convertissons-le en temps d'attente. Sur une connexion mobile ordinaire — disons 10 mégabits par seconde, ce qui est prudent pour de la 4G en centre-ville et optimiste dans un village —, voici ce que ça donne. Il s'agit du seul téléchargement : l'affichage, lui, vient après.

Treize secondes. Sur un téléphone, à l'arrêt de bus, pour savoir si la boutique est ouverte. Personne n'attend treize secondes. Le visiteur revient à ses résultats de recherche et clique sur le concurrent d'en dessous — qui n'est pas meilleur, seulement plus léger.

Un dixième de seconde, ça se mesure en euros

On pourrait croire que ces histoires de vitesse relèvent du détail d'ingénieur. Une étude commanditée par Google et menée par Deloitte et 55 dit le contraire. Elle a suivi 37 grandes marques européennes et américaines sur plus de 30 millions de sessions, en observant les temps de chargement mobiles heure par heure pendant trente jours, sans qu'aucun site ne soit redessiné entre-temps.

Le résultat tient en une phrase : gagner un dixième de seconde suffit à déplacer les chiffres d'affaires.

Ces marques-là ont des équipes techniques entières. Vous, vous avez un site fait une fois et jamais rouvert depuis. L'écart de potentiel est d'autant plus grand : elles grattent des dixièmes, vous avez des secondes entières à récupérer.

Ce que Google regarde, précisément

Depuis plusieurs années, Google mesure l'expérience réelle des visiteurs à travers trois indicateurs, les Core Web Vitals. Ils sont relevés chez de vrais utilisateurs, pas en laboratoire, et retenus au 75^e centile — autrement dit, il faut que trois visiteurs sur quatre soient bien servis.

Le LCP est celui que la plupart des sites ratent, et c'est presque toujours pour la même raison : une image trop lourde en haut de page. Notre caviste à 16 Mo n'a aucune chance de passer sous les 2,5 secondes, quelle que soit la qualité de son vin.

Quatre gestes qui règlent l'essentiel

Vous n'avez pas besoin de refaire votre site pour gagner des secondes. Dans l'immense majorité des cas, quatre choses suffisent.

1. Redimensionner les images avant de les mettre en ligne

Une photo affichée sur 800 pixels de large n'a aucune raison d'en faire 4 000. Réduisez-la à la taille réelle d'affichage, puis convertissez-la au format WebP. C'est le geste qui rapporte le plus : sur ce site, les photos sont passées de 10,7 à 4,5 Mo — 58 % de moins — sans aucune différence visible à l'œil.

2. Charger les images du bas seulement quand on y arrive

L'attribut loading="lazy" tient en un mot et évite de télécharger dix photos que le visiteur ne verra peut-être jamais. À réserver aux images situées sous la ligne de flottaison : celle du haut, elle, doit arriver la première.

3. Réserver la place des images

Indiquez toujours width et height. Sans ça, le texte se met en place, puis l'image arrive et pousse tout vers le bas — c'est ce saut, agaçant au possible, que mesure le CLS. Et c'est la raison pour laquelle on clique parfois sur le mauvais bouton.

4. Compter ses requêtes

Le caviste et la mairie appellent chacun plus de soixante fichiers pour une seule page. Chaque fichier, c'est un aller-retour réseau. Les extensions installées puis oubliées sont les premières coupables : chacune ajoute sa feuille de style et son script, que la page s'en serve ou non.

Pourquoi je publie mes propres chiffres

Le site que vous lisez pèse 0,20 Mo et appelle sept fichiers. Ce n'est pas une prouesse : c'est le résultat de choix ordinaires, tenus dans la durée. Aucune image n'y dépasse la taille à laquelle elle s'affiche, aucune extension n'y a été installée « pour voir », et chaque ajout est pesé avant d'être mis en ligne.

Un site rapide n'est pas un site pauvre. C'est un site où l'on a décidé de ce qui méritait d'être téléchargé. Et cette décision-là, personne ne la prend à votre place.