Tu cliques sur un bouton… rien.
Tu scannes l’écran du regard. Est-ce que tu as bien cliqué ? Tu réessaies. Toujours rien.
Tu scrolles, et là… ton site se met à ramer comme un vieux PC sous Windows 95.
Pourtant, il charge vite ! Alors où est le problème ?
Bienvenue dans le monde de l’INP (Interaction to Next Paint)
C'est un indicateur qui mesure le temps entre ton action (clic, scroll, saisie) et l’affichage du résultat. Google a récemment intégré ce critère dans son algorithme SEO.
Pourquoi ton site réagit lentement ?
1. Trop de JavaScript
Chaque script, c’est une brique dans ton sac à dos. Ton navigateur croule sous la charge. Regarde ton gestionnaire des tâches : c'est le navigateur qui consomme toute la RAM !
- ✅ Supprime les scripts inutiles.
- ✅ Évite les libs lourdes.
- ✅ Priorise le CSS pour les animations.
2. API lente
Si ton site dépend d’une API lente… ton utilisateur attend. C’est comme voir le serveur partir en pause avant de te servir ton café.
- ✅ Mets en cache les résultats.
- ✅ Affiche un loader (skeleton) plutôt qu'un écran figé.
3. Base de données
Tu affiches 10.000 résultats sans pagination ? Tu forces ton site à charger une montagne de données. Le navigateur n'aime pas ça.
- ✅ Pagination SQL (LIMIT 20).
- ✅ Stocke en cache ce qui peut l’être.
Un cloud scalable ne sauvera pas un site mal conçu
Tu peux avoir Kubernetes prêt à tout absorber… Si tes pages ne sont pas en cache, ton serveur va transpirer et Kubernetes finira par t’envoyer un SMS : "OK, j’abandonne... je pars en vacances".
- 🚀 Cache les pages au moins 1 minute.
- 📦 Utilise Redis ou JSON pour les recherches fréquentes.
- ⏳ Délègue les tâches lourdes en background.
Gérer les pics de trafic (RabbitMQ)
Si tu as une file d’attente de requêtes, il faut lisser la charge. Au lieu de tout traiter immédiatement (et faire exploser la base), on met les actions en file d'attente.
👉 Toujours envoyer le
created_at avec l’action pour garder l’ordre réel.
// Flow RabbitMQ
Les médias trop lourds
Images énormes, vidéos mal encodées, polices de 500 Ko... Dans l'immobilier, c'est classique : le client veut du "Wow", Google veut du "Fast".
- Formats modernes (WebP, AVIF).
- Lazy loading (ne charger que le visible).
- Limiter les polices custom.
L'enfer des scripts tiers
3 pixels Facebook, 2 Google Ads, 1 chat live, une vidéo autoplay, deux pubs latérales... Résultat ? T’as à peine 20% de l’écran pour ton contenu.
- Charger en différé (
async/defer). - Utiliser Google Tag Manager pour faire le tri.
Mais pourquoi ces problèmes ne se voient pas toujours ?
Les outils comme Lighthouse te donnent un bon aperçu… mais ils ne détectent pas tout. Un site peut avoir 99% de score et offrir une expérience catastrophique. Et j'ai connu des scores à 10% qui étaient des fusées !
C’est là qu’intervient le test manuel (job pour le PO généralement) :
- 👉 Je clique une fois → délai de réponse ?
- 👉 Je clique plusieurs fois rapidement → Est-ce que ça enregistre plusieurs actions ?
- 👉 Un pic de trafic → Est-ce que tout explose ou la file d’attente gère ?
Il faut savoir que lorsqu'on développe… c'est notre bébé ! On fait attention à lui, on ne clique pas comme un sauvage. Le client, lui, va toujours sortir des trucs improbables.
"Ah d'accord… ok… celle-là, je l’avais pas vue venir !!! Il a fait ça comment ?"
