INP élevé sur site e-commerce : améliorer la réactivité

Comprendre l'INP

L'INP mesure le temps entre une interaction utilisateur (clic, tap, pression de touche) et la mise à jour visuelle qui en résulte. Il remplace le FID (First Input Delay) et offre une vision plus complète de la réactivité.

Seuils de performance

• Bon : INP inférieur à 200 ms
• Amélioration nécessaire : Entre 200 et 500 ms
• Mauvais : Supérieur à 500 ms

Différence avec le FID

Le FID ne mesurait que la première interaction. L'INP mesure toutes les interactions et rapporte la pire (ou quasi-pire au 75e percentile). C'est plus exigeant mais plus représentatif de l'expérience réelle.

Pourquoi l'e-commerce est particulièrement impacté

Les sites e-commerce cumulent les défis :

Interactions nombreuses et complexes

• Ajout au panier avec mise à jour du compteur
• Filtres de produits dynamiques
• Sliders et galeries d'images
• Formulaires de recherche avec autosuggestion
• Pop-ups et modales (newsletter, cookies)
• Calcul de prix en temps réel

Scripts tiers abondants

• Tracking analytics et publicitaire
• Chat en direct
• Avis clients
• Solutions de paiement
• Recommandations produits

Cause 1 : JavaScript bloquant le thread principal

La principale cause d'un mauvais INP est le JavaScript qui monopolise le thread principal du navigateur, empêchant la réponse aux interactions.

Diagnostic

• Utilisez Chrome DevTools → Performance pour identifier les "Long Tasks" (> 50ms)
• Vérifiez le "Total Blocking Time" dans Lighthouse
• Identifiez les scripts responsables des tâches longues

Solutions

• Code splitting : ne chargez que le JS nécessaire à chaque page
• Découper les tâches longues : utilisez requestIdleCallback ou setTimeout pour fragmenter
• Web Workers : déportez les calculs lourds hors du thread principal
• Déférer les scripts non critiques : chargez-les après l'interactivité

Cause 2 : Scripts tiers non optimisés

Les scripts tiers sont souvent les pires coupables car vous n'avez pas le contrôle sur leur code.

Scripts problématiques courants

• Google Tag Manager avec trop de tags
• Pixels Facebook/TikTok/autres réseaux sociaux
• Widgets de chat (Intercom, Zendesk, Crisp)
• Solutions d'avis (Trustpilot, Avis Vérifiés)
• Scripts de personnalisation/A/B testing

Stratégies d'atténuation

• Chargement différé : ne chargez les scripts qu'après interaction utilisateur
• Façade : affichez un placeholder et chargez le vrai widget au survol/clic
• Élagage : supprimez les scripts inutiles ou redondants
• Partytown : exécutez les scripts tiers dans un Web Worker

Cause 3 : Gestionnaires d'événements coûteux

Les événements JavaScript (click, scroll, input) peuvent déclencher des calculs lourds.

Problèmes courants

• Filtrage côté client de centaines de produits
• Calculs de prix complexes à chaque changement
• Re-rendu complet de composants React/Vue à chaque interaction
• Manipulation DOM excessive

Optimisations

• Debouncing/Throttling : limitez la fréquence d'exécution
• Virtualisation : pour les longues listes, ne rendez que les éléments visibles
• Memoization : cachez les résultats de calculs coûteux
• Optimistic UI : mettez à jour l'interface immédiatement, synchronisez ensuite

Cause 4 : DOM trop volumineux

Un DOM avec des milliers d'éléments ralentit toutes les opérations de mise à jour.

Signes d'un DOM trop grand

• Plus de 1500 éléments DOM
• Profondeur d'imbrication supérieure à 32 niveaux
• Élément parent avec plus de 60 enfants

Solutions e-commerce

• Pagination au lieu d'afficher 100 produits d'un coup
• Chargement progressif (infinite scroll avec virtualisation)
• Simplification de la structure HTML
• Suppression des éléments cachés inutiles

Cause 5 : CSS et layout coûteux

Certains styles CSS déclenchent des recalculs de layout (reflow) coûteux lors des interactions.

Propriétés à éviter dans les animations

• width, height, top, left (déclenchent un reflow)
• Préférez transform et opacity (ne déclenchent que composite)

Bonnes pratiques

• Utilisez will-change avec parcimonie pour les éléments animés
• Évitez les sélecteurs CSS trop complexes
• Regroupez les lectures/écritures DOM pour éviter le "layout thrashing"

Optimisations spécifiques e-commerce

Bouton "Ajouter au panier"

• Mettez à jour l'UI immédiatement (spinner, feedback visuel)
• Effectuez l'appel API en arrière-plan
• Évitez de recharger toute la page ou le panier entier

Filtres de produits

• Appliquez les filtres côté serveur pour les grandes catalogues
• Utilisez le debouncing pour les filtres en temps réel
• Affichez un skeleton/loader pendant le filtrage

Galerie d'images produit

• Préchargez les images suivantes
• Évitez les sliders JavaScript lourds (utilisez CSS quand possible)
• Optimisez le zoom produit

Pour un audit complet de la performance de votre site e-commerce, consultez nos services de référencement naturel.