Optimisation des performances - La vitesse de la caravane

Dans l'Égypte antique, la vitesse de livraison des matériaux déterminait le rythme de construction de la pyramide. Dans le développement web, la vitesse de chargement d'une page détermine si l'utilisateur reste ou s'en va. Selon une étude de Google de 2016, 53 % des visites sur des sites mobiles sont abandonnées si le chargement dure plus de 3 secondes. Chaque octet superflu est un chameau de plus dans la caravane - plus la charge est légère, plus vite elle arrive à destination. Tu vas découvrir trois façons d'alléger une page : la minification, la compression et le lazy loading.

La minification - compresser les hiéroglyphes

La minification consiste à supprimer du code les caractères inutiles (espaces, commentaires, retours à la ligne) sans changer son fonctionnement :

1/* AVANT la minification - version lisible */
2body {
3  font-family: Georgia, serif;
4  max-width: 800px;
5  margin: 0 auto;
6  padding: 20px;
7  /* Fond couleur sable */
8  background: #f5f1e3;
9}
10
11/* APRÈS la minification - version optimisée */
12/* body{font-family:Georgia,serif;max-width:800px;margin:0 auto;padding:20px;background:#f5f1e3} */

Les deux versions fonctionnent de manière identique, car le navigateur n'a besoin ni d'indentation ni de commentaires. Seul disparaît ce qui aide l'humain, c'est pourquoi tu travailles toujours sur la version lisible et tu laisses un outil générer la version minifiée au moment de la publication.

Outils de minification :

• cssnano - minification du CSS
• Terser - minification du JavaScript
• html-minifier - minification du HTML
• Des bundlers comme Webpack ou Vite le font automatiquement

La compression lors du transfert

On confond facilement la minification et la compression. La minification modifie le fichier lui-même, alors que la compression a lieu pendant le transfert : le serveur emballe les fichiers texte (HTML, CSS, JS) avec l'algorithme gzip ou Brotli, et le navigateur les déballe tout seul. Tu verras l'algorithme utilisé dans le panneau Network, dans l'en-tête de réponse Content-Encoding. Les deux techniques se complètent - le meilleur résultat vient d'un fichier minifié envoyé compressé.

La compression des images

Les images sont généralement les ressources les plus lourdes d'une page. Leur optimisation est une étape clé :

Les formats d'image :

• JPEG - photos, arrière-plans en dégradé (compression avec perte)
• PNG - graphiques avec transparence, icônes (sans perte)
• WebP - format moderne : selon Google, le WebP avec perte est 25 à 34 % plus léger qu'un JPEG comparable, et le WebP sans perte 26 % plus léger qu'un PNG
• AVIF - le plus récent des formats populaires, généralement encore plus léger que le WebP
• SVG - graphiques vectoriels, icônes (redimensionnable sans perte)

Du plus léger au plus lourd, les photos se classent donc généralement ainsi : AVIF, WebP, JPEG. Les anciens navigateurs ne connaissent toutefois pas les nouveaux formats, c'est pourquoi il te faut un plan de secours.

L'élément picture - l'approche moderne :

L'élément <picture> permet de fournir plusieurs versions d'une même image et de laisser le choix au navigateur :

1<picture>
2  <!-- Le navigateur choisira le meilleur format -->
3  <source srcset="pyramid.avif" type="image/avif">
4  <source srcset="pyramid.webp" type="image/webp">
5  <img src="pyramid.jpg" alt="La Grande Pyramide de Gizeh"
6       width="800" height="600">
7</picture>

Le navigateur lit les éléments <source> de haut en bas et prend le premier format qu'il comprend. S'il n'en connaît aucun, il utilise le <img> - c'est lui la solution de secours obligatoire, et c'est sur lui que restent alt, width et height. Place toujours le format le plus léger en haut.

Le lazy loading - le chargement paresseux

Le lazy loading retarde le chargement des images qui ne sont pas visibles à l'écran. Grâce à cela, la page se charge plus vite :

1<!-- Les images sous l'écran se chargent uniquement au défilement -->
2<img src="sphinx.jpg" alt="Le Grand Sphinx" loading="lazy"
3     width="800" height="600">
4
5<!-- Première image de la page - NE PAS utiliser le lazy loading -->
6<img src="hero.jpg" alt="Pyramides au coucher du soleil" loading="eager"
7     width="1200" height="600">

loading="lazy" demande au navigateur d'attendre que l'image s'approche de la zone visible, alors que loading="eager" (la valeur par défaut) la charge immédiatement. Ne retarde pas l'image principale en haut de la page - c'est généralement le plus grand élément du premier écran, et le temps qu'elle met à apparaître est mesuré par l'indicateur LCP (Largest Contentful Paint).

Les attributs width et height

Indique toujours les dimensions des images - cela évite que la page « saute » pendant le chargement (CLS - Cumulative Layout Shift) :

1<!-- BIEN - le navigateur réserve l'espace -->
2<img src="pyramid.jpg" alt="Pyramide" width="800" height="600">
3
4<!-- MAL - la page « saute » pendant le chargement -->
5<img src="pyramid.jpg" alt="Pyramide">

À partir des attributs, le navigateur calcule les proportions de l'image et lui réserve de la place avant même l'arrivée du fichier, si bien que le texte en dessous ne fait pas de bond. Les dimensions n'empêchent pas le responsive : ajoute en CSS max-width: 100% et height: auto, et l'image continuera de s'adapter. LCP et CLS sont des indicateurs des Core Web Vitals, que tu peux mesurer avec Lighthouse, découvert dans la première leçon de ce module.

Mon ordre de priorité : d'abord les dimensions et le lazy loading, car ce sont deux attributs qui ne coûtent rien, puis les formats modernes dans <picture>, et la minification, laisse-la aux outils. Dans la prochaine leçon, tu verras que les polices ont elles aussi un poids - et tu apprendras à les charger intelligemment.

Pratique

Ouvre le panneau Network, fais défiler la page de l'éditeur ci-dessous et observe à quel moment se téléchargent les images dotées de loading="lazy" :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Optimisation des performances</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Optimisation des performances de la page</h1>
11
12    <section>
13        <h2>Lazy loading des images</h2>
14        <p>Fais défiler vers le bas - les images se chargeront uniquement
15           lorsqu'elles seront visibles à l'écran.</p>
16
17        <img src="https://placehold.co/600x300/d4af37/1a1a2e?text=Piramida+1"
18             alt="Pyramide de Khéops" width="600" height="300"
19             loading="eager">
20        <p class="caption">Image 1 : loading="eager" (se charge immédiatement)</p>
21    </section>
22
23    <section>
24        <h2>Images avec lazy loading</h2>
25
26        <img src="https://placehold.co/600x300/8b6914/f5f1e3?text=Piramida+2"
27             alt="Pyramide de Khéphren" width="600" height="300"
28             loading="lazy">
29        <p class="caption">Image 2 : loading="lazy" (se charge au défilement)</p>
30
31        <img src="https://placehold.co/600x300/3d2914/d4af37?text=Sfinks"
32             alt="Le Grand Sphinx" width="600" height="300"
33             loading="lazy">
34        <p class="caption">Image 3 : loading="lazy"</p>
35    </section>
36
37    <section>
38        <h2>L'élément picture - différents formats</h2>
39        <picture>
40            <source srcset="https://placehold.co/600x300/1a1a2e/d4af37?text=WebP+Format"
41                    type="image/webp">
42            <img src="https://placehold.co/600x300/1a1a2e/d4af37?text=JPEG+Fallback"
43                 alt="La Vallée des Rois" width="600" height="300"
44                 loading="lazy">
45        </picture>
46        <p class="caption">L'élément &lt;picture&gt; avec le format WebP et une solution de secours JPEG</p>
47    </section>
48</body>
49</html>

Souviens-toi : une page rapide est une caravane légère - sans octets superflus, elle arrive à destination avant que le voyageur n'ait le temps de s'impatienter.