Une boutique peut obtenir un score de test encourageant et rester p\u00e9nible \u00e0 utiliser : image principale tardive, bouton qui r\u00e9agit lentement, formulaire qui se d\u00e9place au chargement. Les Core Web Vitals aident \u00e0 d\u00e9crire trois aspects de cette exp\u00e9rience. Ils doivent \u00eatre reli\u00e9s aux pages et aux gestes r\u00e9els des clients.<\/p>\n
Le bon objectif est de rendre la consultation et la commande plus stables, plus r\u00e9actives et plus rapides. Chercher uniquement un score parfait dans un test isol\u00e9 peut d\u00e9tourner l\u2019effort des probl\u00e8mes les plus fr\u00e9quents.<\/p>\n
La documentation web.dev<\/a> indique les rep\u00e8res de bonne exp\u00e9rience suivants, \u00e9valu\u00e9s au 75e percentile des visites, avec segmentation mobile et ordinateur.<\/p>\n Un r\u00e9sultat isol\u00e9 ne d\u00e9crit pas tous les visiteurs. Les donn\u00e9es de terrain refl\u00e8tent les appareils, r\u00e9seaux et interactions observ\u00e9s ; les tests de laboratoire aident \u00e0 reproduire et diagnostiquer une situation. Le score global Lighthouse n\u2019est pas une mesure directe de l\u2019INP r\u00e9el.<\/p>\n S\u00e9lectionnez accueil, cat\u00e9gorie, produit, panier et commande selon votre boutique. Identifiez les \u00e9l\u00e9ments communs : th\u00e8me, en-t\u00eate, polices, scripts, images et modules tiers. Une correction sur un composant partag\u00e9 peut toucher plusieurs pages ; elle doit donc \u00eatre test\u00e9e sur des cas repr\u00e9sentatifs.<\/p>\n Ajoutez les interactions importantes : s\u00e9lection d\u2019une variante, ouverture d\u2019une image, calcul d\u2019une livraison, saisie d\u2019un formulaire. La vitesse de la page au premier chargement ne d\u00e9crit pas seule le confort de ces gestes.<\/p>\n Une boutique fictive affiche une grande photo, un s\u00e9lecteur de format et un bandeau promotionnel. Le diagnostic r\u00e9v\u00e8le une image principale lourde, un script qui occupe le navigateur et un espace non r\u00e9serv\u00e9 au bandeau.<\/p>\n L\u2019\u00e9quipe traite chaque cause s\u00e9par\u00e9ment : image adapt\u00e9e au rendu, r\u00e9duction du travail inutile au moment de l\u2019interaction et dimensions r\u00e9serv\u00e9es au contenu qui arrive. Elle v\u00e9rifie ensuite que les variantes, le panier et la mesure des commandes fonctionnent toujours.<\/p>\n Le guide photo produit<\/a> rappelle que l\u2019image doit rester informative. R\u00e9duire le poids ne doit pas rendre un d\u00e9tail d\u00e9terminant incompr\u00e9hensible.<\/p>\n Pour chaque probl\u00e8me, notez les pages concern\u00e9es, la fr\u00e9quence observ\u00e9e, l\u2019effet sur le parcours et le co\u00fbt de correction. Commencez par les causes qui touchent un parcours important et qui peuvent \u00eatre v\u00e9rifi\u00e9es clairement.<\/p>\n \u00c9vitez d\u2019installer plusieurs extensions d\u2019optimisation sans comprendre leurs effets. Cache, report de scripts et transformations d\u2019images peuvent interagir avec le th\u00e8me et les modules de commande. Chaque changement doit conserver un moyen de retour et un test fonctionnel.<\/p>\n Un test de laboratoire donne un retour rapide dans des conditions choisies. Les donn\u00e9es agr\u00e9g\u00e9es de terrain \u00e9voluent avec de nouvelles visites et demandent une lecture sur une p\u00e9riode appropri\u00e9e. Ne comparez pas directement un test r\u00e9alis\u00e9 sur un ordinateur rapide \u00e0 l\u2019exp\u00e9rience d\u2019un t\u00e9l\u00e9phone sur un autre r\u00e9seau.<\/p>\n Documentez la date, les pages, les versions et les conditions de mesure. V\u00e9rifiez aussi les formulaires, les options produit et les moyens de paiement. Une am\u00e9lioration technique qui emp\u00eache de commander ne r\u00e9pond pas au besoin.<\/p>\n\n\n
\n \nIndicateur<\/th>\n Ce qu\u2019il d\u00e9crit<\/th>\n Rep\u00e8re \u00ab bon \u00bb<\/th>\n<\/tr>\n<\/thead>\n \n LCP<\/td>\n Affichage du principal \u00e9l\u00e9ment de contenu<\/td>\n 2,5 secondes ou moins<\/td>\n<\/tr>\n \n INP<\/td>\n R\u00e9activit\u00e9 aux interactions<\/td>\n 200 millisecondes ou moins<\/td>\n<\/tr>\n \n CLS<\/td>\n Instabilit\u00e9 visuelle pendant la visite<\/td>\n 0,1 ou moins<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n Partir des mod\u00e8les de pages<\/h2>\n
Exemple p\u00e9dagogique : la fiche produit<\/h2>\n
Prioriser les corrections<\/h2>\n
V\u00e9rifier le r\u00e9sultat sans conclure trop t\u00f4t<\/h2>\n