Glossaire de la vitesse Shopify : les termes expliqués simplement

Core Web Vitals

Les trois indicateurs de Google pour l'expérience réelle d'une page : LCP (chargement), INP (réactivité) et CLS (stabilité visuelle). Une page les valide quand les trois sont bons au 75e centile des visites, d'après les données terrain du rapport Chrome sur l'expérience utilisateur (CrUX). Ils font partie des signaux d'expérience de page utilisés par la recherche Google.

Sur Shopify : L'interface administrateur Shopify propose un rapport de performance web avec ces trois indicateurs, mesurés sur vos propres visiteurs.

LCP (Largest Contentful Paint)

Le temps entre le début du chargement et l'affichage de la plus grande image ou du plus grand bloc de texte visible. Bon : 2,5 s ou moins ; mauvais : plus de 4 s.

Sur Shopify : Sur une page produit, l'élément LCP est en général la photo principale ; sur l'accueil, la bannière. Tout ce qui se charge avant le retarde.

INP (Interaction to Next Paint)

Le temps que met la page à réagir visiblement après un toucher, un clic ou une saisie, d'après l'une des interactions les plus lentes de la visite. Bon : 200 ms ou moins ; mauvais : plus de 500 ms. L'INP a remplacé le First Input Delay (FID) parmi les Core Web Vitals en mars 2024.

Sur Shopify : Les scripts d'applications qui occupent le navigateur sont une cause fréquente d'INP lent, par exemple au clic sur « Ajouter au panier ».

CLS (Cumulative Layout Shift)

L'ampleur des déplacements inattendus du contenu visible, calculée selon la taille du contenu déplacé et la distance parcourue. Bon : 0,1 ou moins ; mauvais : plus de 0,25.

Sur Shopify : Les bandeaux d'annonce, popups et étoiles d'avis qui apparaissent après l'affichage, ainsi que les images sans largeur ni hauteur définies, en sont des causes fréquentes.

TTFB (Time to First Byte)

Le temps entre la requête et l'arrivée du premier octet du HTML de la page, redirections, connexion et temps serveur compris. Google considère 0,8 s ou moins comme bon.

Sur Shopify : Shopify gère les serveurs : une boutique a peu de prise directe sur le TTFB, même si les chaînes de redirection et un code de thème lourd peuvent l'allonger.

FCP (First Contentful Paint)

Le moment où le navigateur affiche le premier texte ou la première image de la page. Bon : 1,8 s ou moins.

Sur Shopify : Un FCP rapide avec un LCP lent signifie en général que l'image principale est retardée par autre chose sur la page.

Speed Index (indice de vitesse)

Un indicateur de laboratoire Lighthouse qui mesure à quelle vitesse la partie visible de la page se remplit pendant un test, calculé à partir d'une vidéo du chargement. Plus il est bas, mieux c'est.

Total Blocking Time (TBT)

Dans un test Lighthouse, le temps total après le FCP pendant lequel des tâches longues (plus de 50 ms) bloquent le fil principal du navigateur, en ne comptant que la part de chaque tâche au-delà de 50 ms. C'est l'équivalent en laboratoire de l'INP, et l'un des poids les plus lourds du score de performance Lighthouse.

Sur Shopify : Les scripts d'applications exécutés pendant le chargement sont une cause fréquente de TBT élevé.

Ressource bloquant le rendu

Un fichier que le navigateur doit télécharger et traiter avant de pouvoir afficher quoi que ce soit, en général une feuille de style ou un script dans l'en-tête sans async ni defer. Chacun repousse le FCP et le LCP.

Sur Shopify : Sur Shopify, les scripts d'applications ajoutés dans l'en-tête du thème en sont une source fréquente. PageSpeed Insights les liste dans ses suggestions.

CSS critique

La petite partie du CSS nécessaire pour afficher ce qui est visible en premier, placée directement dans le HTML pour que la page s'affiche avant l'arrivée de la feuille de style complète. Le reste se charge ensuite.

Sur Shopify : Certaines applications de vitesse génèrent du CSS critique pour un thème. Pas Whoosh : il change le moment où les applications se chargent.

Lazy loading (chargement différé)

Attendre qu'une image, une vidéo ou un iframe soit sur le point d'apparaître à l'écran pour le charger, en général avec loading="lazy". Cela économise des données et laisse le réseau libre pour ce qui est affiché.

Sur Shopify : Ne chargez jamais en différé la première photo produit ou la bannière d'accueil : c'est en général l'élément LCP, et le différer ralentit le LCP.

Préchargement (preload et prefetch)

Le preload (rel="preload") demande au navigateur de récupérer tôt un fichier dont la page actuelle aura besoin, comme l'image d'accueil ou une police. Le prefetch récupère, en basse priorité, des fichiers ou des pages pour la navigation suivante probable, pour qu'elle s'ouvre plus vite.

Sur Shopify : AI Page Preloading de Whoosh charge la page suivante avant que le client ne clique.

Speculation rules (règles de spéculation)

Une fonction des navigateurs Chrome et Edge : la page indique en JSON quels liens le navigateur peut précharger ou pré-afficher avant le clic. Une page pré-affichée peut apparaître presque aussitôt au clic. Les navigateurs qui ne la prennent pas en charge ignorent ces règles.

CDN (réseau de diffusion de contenu)

Des serveurs répartis dans le monde qui gardent des copies des fichiers d'un site, pour que chaque visiteur les télécharge depuis un endroit proche. Chaque fichier arrive plus vite.

Sur Shopify : Chaque boutique Shopify passe par le CDN mondial de Shopify : rien à configurer. Les fichiers des éditeurs d'applications viennent de leurs propres serveurs.