Le framerate du site

Introduction aux Core Web Vitals et à l'impact de la vitesse.

Imagine : tu lances un jeu magnifique, mais il tourne à 5 FPS. Tu as beau avoir un monde incroyable, personne ne reste. Sur le web, c'est pareil un site lent fait fuir les visiteurs ET Google le sait. La vitesse, c'est le framerate de ton site.

4.1Pourquoi la vitesse compte

Google a confirmé que la vitesse de chargement est un facteur de classement. Mais au-delà de Google, c'est une question d'expérience utilisateur :

53% des visiteurs quittent un site mobile qui met plus de 3 secondes à charger
Chaque seconde de chargement en plus = -7% de conversions
Google favorise les sites rapides dans les résultats sur mobile

C'est comme un jeu en ligne si le serveur met 10 secondes à répond re quand tu ouvres un coffre, tu changes de jeu. La patience des internautes est la même que celle des gamers quasi nulle.

4.2Les Core Web Vitals, tes stats de performance

Google mesure la performance de ton site avec 3 métriques clés appelées Core Web Vitals. Pense à elles comme les stats de ta fiche de personnage :

LCP (Largest Contentful Paint) Temps de spawn du décor
Combien de temps avant que le plus gros élément visible (image, titre) s'affiche ?
Bon < 2,5 secondes | Mauvais > 4 secondes
INP (Interaction to Next Paint) Temps de réponse aux commandes
Quand tu cliques sur un bouton, combien de temps avant que la page réagisse ?
Bon < 200 ms | Mauvais > 500 ms
CLS (Cumulative Layout Shift) Stabilité du décor
Est-ce que les éléments bougent tout seuls pendant le chargement ? (le bouton qui se décale quand tu vas cliquer…)
Bon < 0,1 | Mauvais > 0,25

LCP = le décor se charge vite. INP = les contrôles répondent instantanément. CLS = rien ne bouge tout seul. Trois stats à garder dans le vert, comme une barre de vie bien pleine.

4.3Optimiser les images, réduire le poids du décor

Les images sont souvent les fichiers les plus lourds de ton site. Les optimiser, c'est comme compresser les textures de ton jeu pour qu'il tourne mieux sans perdre en qualité visuelle.

<!-- Image brute de 4 Mo, non redimensionnée -->
<img src="photo-4000x3000.jpg" alt="Notre équipe" />

<!-- Image optimisée, format moderne, taille adaptée -->
<img 
    src="photo-800.webp" 
    alt="Notre équipe au complet dans les locaux" 
    width="800" 
    height="600"
    loading="lazy"
/>

Format WebP ou AVIF 30-50% plus léger que le JPEG/PNG
Redimensionner pas besoin d'une image 4000px pour un affichage 800px
loading="lazy" ne charge l'image que quand elle arrive à l'écran
width et height prévient le CLS en réservant l'espace

Un jeu qui charge toutes les textures HD de chaque zone en même temps = crash. Un site qui charge toutes les images d'un coup = lenteur. Le loading="lazy", c'est le système de LOD (Level of Detail) du web.

4.4Lighthouse, ton scanner de performance

Lighthouse est un outil intégré à Chrome qui analyse ta page et te donne un score de 0 à 100 sur 5 catégories. C'est ton scanner de stats en temps réel.

Pour l'utiliser :

Ouvre Chrome DevTools (F12)
Va dans l'onglet Lighthouse
Choisis les catégories (Performance, SEO, Accessibilité…)
Clique sur « Analyze page load »

Les 5 catégories analysées :

Performance la vitesse globale (ton framerate)
Accessibilité est-ce que tout le monde peut utiliser ton site ?
Bonnes pratiques sécurité HTTPS, images correctes…
SEO balises en place, mobile-friendly…
PWA progressive web app (bonus)

Vise 90+ en Performance et en SEO. Un score de 100 n'est pas obligatoire (c'est le mode Hardcore), mais rester au-dessus de 90 te met largement dans le top.