De 597 à 242 Ko : la recette exacteFrom 597 KB down to 242 KB: the exact recipe
Formats modernes, tailles multiples, chargement différé bien placé : le détail des arbitrages qui ont réduit le poids d'une page de 60 %.Modern formats, multiple sizes, lazy loading in the right place: the trade-offs that cut a page’s weight by 60%.
Une page d’accueil à 597 Ko n’est pas scandaleuse. Elle est simplement deux fois et demie plus lourde que nécessaire, et sur une connexion mobile médiocre, cette différence se voit. Voici où sont passés les 355 Ko.A 597 KB home page is not scandalous. It is simply two and a half times heavier than it needs to be, and on a poor mobile connection that difference shows. Here is where the 355 KB went.
Le format, pour la moitié du gainThe format, for half the gain
Les images en WebP pèsent en moyenne 30 % de moins qu’un JPEG de qualité visuellement équivalente. La bascule se fait sans rien casser : on sert le WebP à qui sait le lire, et le JPEG d’origine aux autres, par une simple balise d’alternative. Aucun visiteur ne voit d’image cassée, et la quasi-totalité reçoit la version légère.WebP images are on average 30% lighter than a visually equivalent JPEG. The switch breaks nothing: you serve WebP to whoever can read it and the original JPEG to the rest, through a simple alternative tag. No visitor sees a broken image, and almost all of them get the light version.
Les fichiers d’origine restent sur le serveur. C’est ce qui permet de refaire la conversion si les réglages changent, ou de revenir en arrière.The original files stay on the server. That is what lets you redo the conversion if the settings change, or roll back.
La taille, pour l'autre moitiéThe size, for the other half
Servir une image de 800 pixels de large à un téléphone qui en affiche 360 revient à transférer quatre fois trop de données. Chaque visuel existe donc en deux largeurs, et le navigateur choisit selon l’écran. Le gain sur mobile est immédiat et ne demande aucune détection côté serveur.Serving an 800-pixel-wide image to a phone that displays 360 means transferring four times too much data. Each visual therefore exists in two widths, and the browser picks by screen. The mobile gain is immediate and requires no server-side detection.
- Deux largeurs par image : une pour les petits écrans, une pour les grands.Two widths per image: one for small screens, one for large.
- Deux formats par largeur : moderne et classique.Two formats per width: modern and classic.
- Soit quatre fichiers par visuel, générés une fois, servis automatiquement.That is four files per visual, generated once, served automatically.
Le chargement différé, mais pas partoutLazy loading, but not everywhere
Différer le chargement des images sous la ligne de flottaison est un gain net. L’appliquer à l’image du haut de page est une erreur coûteuse, et c’est pourtant le réglage par défaut de beaucoup d’extensions : le navigateur attend d’avoir calculé la mise en page pour commencer à télécharger l’élément le plus visible.Deferring images below the fold is a clear gain. Applying it to the top-of-page image is an expensive mistake, and yet it is the default in many plugins: the browser waits until it has computed the layout before starting to download the most visible element.
La règle tient en une phrase : tout ce qui est visible sans défiler se charge immédiatement, tout le reste se charge en différé. Une extension qui ne fait pas cette distinction dégrade la page qu’elle prétend accélérer.The rule fits in one sentence: everything visible without scrolling loads immediately, everything else is deferred. A plugin that does not make this distinction degrades the page it claims to speed up.
Ce qui restaitWhat was left
Après les images, le reste du poids se répartissait entre une police d’affichage variable — 90 Ko, assumés, parce qu’elle remplace à elle seule sept fichiers de graisses différentes — et moins de 10 Ko de script, sans aucune bibliothèque externe. La feuille de style et le balisage complètent le compte.After the images, the remaining weight split between a variable display font — 90 KB, owned, because it alone replaces seven separate weight files — and under 10 KB of script, with no external library at all. The stylesheet and the markup make up the rest.
Le point à retenir : aucun de ces gains ne vient d’un outil. Ils viennent tous d’une décision sur ce qu’on envoie et quand.The point to take away: none of these gains comes from a tool. They all come from a decision about what you send, and when.