INP sur Shopify : mesurer et corriger la réactivité

Une boutique peut afficher sa page en une seconde et rester lente : quand on touche le bouton d'ajout au panier et que rien ne bouge pendant un instant, c'est la réactivité qui pèche. Google la mesure avec l'INP, Interaction to Next Paint, l'un des trois Core Web Vitals. Ce guide explique ce qu'il mesure, ce qui le dégrade sur Shopify et comment le corriger dans le bon ordre.

Ce que mesure l'INP

Une interaction, trois temps

L'INP observe les interactions réelles des visiteurs : un clic à la souris, un appui sur un écran tactile, une frappe au clavier. Le survol, le zoom et le défilement ne sont pas pris en compte. Pour chaque interaction, la documentation de Google distingue trois temps :

• le délai d'entrée, entre le geste et le début du traitement, quand le navigateur est occupé ailleurs ;

• la durée de traitement, le temps d'exécution du code qui répond à l'événement ;

• le délai de présentation, entre la fin de ce code et l'affichage de l'image suivante à l'écran.

Prenez un appui sur « Ajouter au panier ». Si un script d'avis clients est en train de s'exécuter, le délai d'entrée s'allonge. Si le gestionnaire du bouton recalcule tout le panier avant d'afficher quoi que ce soit, la durée de traitement s'allonge. Si l'ouverture du panier latéral oblige le navigateur à recalculer la mise en page de toute la page, c'est le délai de présentation.

Les seuils

Google classe l'INP en trois zones : bon à 200 millisecondes ou moins, à améliorer jusqu'à 500 millisecondes, mauvais au-delà. La valeur retenue pour une page est celle du 75e centile des visites, mobile et ordinateur séparés. Pour chaque visite, c'est en général l'interaction la plus lente qui compte, Google ignorant la pire interaction par tranche de cinquante pour écarter les accidents.

Autrement dit, l'INP ne mesure pas votre interaction moyenne. Il mesure ce que vit un visiteur sur quatre, au pire moment de sa visite.

Pourquoi il a remplacé le FID

L'INP a remplacé le First Input Delay comme Core Web Vital le 12 mars 2024. Le FID ne mesurait que le délai d'entrée de la toute première interaction. Une page pouvait obtenir un bon FID et répondre ensuite très lentement à chaque choix de variante. L'INP couvre toute la visite et toute la durée de l'interaction, ce qui le rend nettement plus exigeant.

Ce qu'il pèse dans le référencement

Google recommande d'obtenir de bons Core Web Vitals et indique qu'ils s'alignent sur ce que ses systèmes de classement cherchent à récompenser. Ce n'est pas le critère principal : une page lente et pertinente passera devant une page rapide et vide. Mais à pertinence égale, et surtout pour le visiteur qui hésite à acheter, une boutique qui répond au doigt fait la différence.

Ce qui dégrade l'INP sur une boutique Shopify

Le JavaScript chargé au démarrage

La documentation de Shopify est explicite : trop de JavaScript, chargé au mauvais moment ou mal écrit, est l'une des principales causes d'un mauvais INP. Pendant le chargement, le navigateur exécute les scripts sur un seul fil principal. Toute tâche qui dure plus de 50 millisecondes est une tâche longue : pendant qu'elle tourne, un appui du visiteur attend. C'est pour cela que les interactions des premières secondes sont souvent les plus lentes.

Les apps

Une boutique Shopify accumule les apps, et chacune peut charger son script sur toutes les pages, y compris celles où elle n'affiche rien. Shopify distingue trois façons pour une app de s'intégrer au thème : les blocs d'app, les intégrations d'app et le code ajouté directement au thème. Les intégrations se désactivent depuis l'éditeur de thème, ce qui permet de mesurer leur effet une par une. Le code collé dans les fichiers du thème, lui, reste en place tant que personne ne le retire, y compris parfois après la désinstallation de l'app.

Les balises marketing

Pixels publicitaires, outils d'analyse, cartes de chaleur, tests A/B : ces scripts écoutent souvent chaque clic de la page pour l'enregistrer, et ce travail s'ajoute à la durée de traitement de chaque interaction. Shopify propose de les déclarer comme pixels web dans les événements clients. Les pixels fournis par des apps s'exécutent alors dans un bac à sable isolé (un web worker), les pixels personnalisés dans une iframe isolée de la page, plutôt que directement dans le code du thème.

Le thème lui-même

Shopify le rappelle : un code propre au thème mal écrit fait autant de dégâts qu'un script tiers mal intégré. Les causes les plus fréquentes :

• un choix de variante qui recharge et réinjecte toute la section produit, galerie comprise ;

• un méga-menu de plusieurs centaines de liens présent dans le DOM de chaque page ;

• des pages de collection à 48 cartes, chacune avec ses pastilles, sa seconde image et son bouton d'achat rapide ;

• des animations au défilement calculées en JavaScript, qui lisent la position des éléments juste après les avoir modifiés et forcent le navigateur à recalculer la mise en page ;

• une bibliothèque de carrousel chargée sur toutes les pages pour un seul bandeau.

Les interactions à surveiller en priorité

Mesurer : le terrain d'abord

L'INP est une mesure de terrain. Il dépend des appareils de vos visiteurs, de leurs gestes et de ce qui se charge à ce moment-là. Les outils de laboratoire servent à reproduire un problème, pas à le découvrir.

Le rapport Core Web Vitals de la Search Console

Le rapport Core Web Vitals de la Search Console regroupe vos adresses par comportement similaire, sépare mobile et ordinateur, et classe chaque groupe en bon, à améliorer ou mauvais. Il s'appuie sur les données réelles des utilisateurs de Chrome (CrUX), agrégées sur les 28 derniers jours : une correction met donc plusieurs semaines à s'y voir entièrement.

PageSpeed Insights

PageSpeed Insights affiche en haut les données de terrain de la page et de l'origine, quand le trafic est suffisant, et en dessous un test de laboratoire. Ne confondez pas les deux : le test de laboratoire charge la page sans interagir avec elle, il ne mesure donc pas l'INP. Google signale que le Total Blocking Time peut servir d'indicateur approché, sans le remplacer.

Le rapport de performance web de Shopify

Shopify propose dans l'admin des rapports de performance web qui suivent le LCP, l'INP et le CLS dans le temps, au 75e centile par défaut, avec un détail par adresse et par type de page. Ils demandent l'autorisation d'accès aux rapports. Leur intérêt est de relier une dégradation à une date, donc à l'installation d'une app ou à la publication d'un thème.

Trouver l'interaction coupable

Les rapports disent quelle page est lente, pas quel bouton. Pour le savoir :

1. Collectez l'attribution sur le terrain. La bibliothèque web-vitals de Google, dans sa version d'attribution, indique pour chaque INP l'élément touché et la répartition entre les trois temps. Envoyez ces données à votre outil d'analyse.

2. Identifiez les scripts responsables. L'API Long Animation Frames de Chrome attribue les images lentes aux scripts qui les ont causées, avec leur adresse : c'est ainsi qu'on distingue le thème d'une app.

3. Reproduisez en laboratoire. Dans le panneau Performance de Chrome, ralentissez le processeur pour simuler un téléphone moyen, enregistrez, et répétez l'interaction pendant le chargement de la page, quand le fil principal est le plus encombré.

Corriger, dans l'ordre

1. Faire l'inventaire

Dupliquez le thème publié et travaillez sur la copie. Listez chaque script chargé, son origine (thème, app, balise) et les pages où il sert vraiment. L'onglet Réseau et l'outil Couverture de Chrome montrent ce qui est téléchargé et ce qui est réellement exécuté.

2. Retirer avant d'optimiser

Le script le plus rapide est celui qu'on ne charge pas. Désinstallez les apps qui ne servent plus et cherchez dans le thème le code qu'elles ont laissé. Supprimez les doublons : deux outils d'analyse, deux apps d'avis, un pixel installé à la fois dans le thème et dans les événements clients. Limitez chaque app aux gabarits où elle apparaît. Notre sélection des apps Shopify vraiment utiles part du même principe.

3. Différer ce qui n'est pas urgent

Shopify recommande de différer les scripts non critiques et de charger les modules au moment de l'interaction plutôt qu'au chargement. Une bulle de discussion peut n'être qu'une image tant que personne ne clique dessus. Un guide des tailles n'a pas besoin de son script avant qu'on l'ouvre.

4. Découper les tâches longues

Quand un clic doit déclencher beaucoup de travail, affichez d'abord le retour visuel, puis rendez la main au navigateur avant de continuer. Google détaille la méthode dans son guide sur les tâches longues. La fonction scheduler.yield() permet de céder le fil principal en reprenant ensuite en priorité ; elle n'est pas disponible partout, d'où un repli sur setTimeout.

// Rendre la main au navigateur entre deux étapes
const ceder = () =>
  globalThis.scheduler?.yield
    ? scheduler.yield()
    : new Promise((r) => setTimeout(r, 0));

bouton.addEventListener('click', async () => {
  panier.ouvrir({ chargement: true }); // retour visuel immédiat
  await ceder();
  const contenu = await ajouterAuPanier(formulaire); // /cart/add.js
  panier.afficher(contenu);
  await ceder();
  analytics.envoyer('ajout_panier'); // ce qui ne se voit pas, en dernier
});

Le principe vaut pour tout gestionnaire d'événement : ce que le visiteur doit voir passe en premier, le reste attend la tâche suivante.

5. Alléger le rendu

Le délai de présentation dépend surtout de la taille du DOM et des recalculs de mise en page. La documentation de Google sur l'optimisation de l'INP recommande de garder le DOM réduit, d'éviter de lire une dimension juste après avoir modifié un style, et d'utiliser la propriété CSS content-visibility pour différer le rendu des zones hors écran. Sur une boutique, cela veut dire : des menus qui ne contiennent pas tout le catalogue, des grilles paginées plutôt qu'infinies, et des animations confiées au CSS.

6. Vérifier après chaque mise en production

Chaque correction se vérifie en laboratoire avant publication, puis sur le terrain dans les semaines qui suivent. Notez la date de chaque changement : quand la courbe bouge dans le rapport de Shopify ou la Search Console, vous saurez pourquoi. Pour le chargement lui-même (images, polices, LCP), notre guide sur la vitesse d'une boutique Shopify complète celui-ci.

Pour aller plus loin

La réactivité se gagne surtout dans le thème et dans le choix des apps, deux points que nous traitons dans notre accompagnement SEO Shopify et dans chaque refonte de boutique. Si votre INP est dans le rouge et que vous ne savez pas par où commencer, écrivez-nous : un relevé des scripts chargés suffit souvent à trouver les premiers coupables.