Core Web Vitals : les métriques qui comptent

Google utilise les Core Web Vitals comme facteur de classement depuis 2021. Comprendre et optimiser ces métriques est indispensable pour votre boutique Shopify.

Les 3 métriques clés

• LCP (Largest Contentful Paint) : mesure le temps de chargement du plus grand élément visible. Objectif : moins de 2,5 secondes. Sur Shopify, c'est souvent l'image hero de la page d'accueil.
• INP (Interaction to Next Paint) : remplace le FID depuis mars 2024, mesure la réactivité globale de la page lors des interactions utilisateur. Objectif : moins de 200 ms. Les apps Shopify lourdes en JavaScript dégradent souvent cette métrique.
• CLS (Cumulative Layout Shift) : mesure la stabilité visuelle, les éléments qui "sautent" pendant le chargement. Objectif : moins de 0,1. Les bannières promotionnelles et les images sans dimensions explicites sont les principaux coupables.

Comment mesurer vos Core Web Vitals

Utilisez ces outils gratuits pour auditer votre boutique :

• Google PageSpeed Insights (pagespeed.web.dev) : données réelles (CrUX) + données de laboratoire
• Google Search Console, puis rapport "Signaux Web essentiels" : vue d'ensemble de toutes vos pages
• Chrome DevTools, puis onglet Performance : analyse détaillée en temps réel
• Web Vitals Extension pour Chrome : monitoring permanent pendant la navigation

Optimisation des polices web

Les polices personnalisées sont souvent le facteur de blocage n°1 du rendu initial sur Shopify. Voici comment les optimiser efficacement.

Utilisez font-display: swap

La propriété CSS font-display: swap indique au navigateur d'afficher immédiatement le texte avec une police système de secours, puis de basculer vers la police personnalisée une fois chargée. Cela élimine le texte invisible (FOIT. Flash of Invisible Text) :

@font-face {
 font-family: 'MaPolice';
 src: url('mapolice.woff2') format('woff2');
 font-display: swap;
}

La plupart des thèmes Shopify modernes (Dawn, Sense, Craft) utilisent déjà cette propriété. Vérifiez dans votre fichier base.css ou theme.css.

Limitez les variantes de police

Chaque variante (poids, style) représente un fichier supplémentaire à télécharger :

• Règle d'or : n'utilisez pas plus de 2 familles de polices et 3-4 variantes au total
• Préférez les formats WOFF2 (30 % plus légers que WOFF)
• Si vous utilisez Google Fonts via Shopify, sélectionnez uniquement les graisses nécessaires (Regular 400, Medium 500, Bold 700)
• Envisagez les polices système (system-ui, -apple-system, sans-serif) pour le corps de texte, elles ne nécessitent aucun téléchargement

Préchargez la police principale

Ajoutez un lien de préchargement dans votre theme.liquid pour la police la plus importante :

<link rel="preload" href="{{ 'mapolice.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>

CDN et stratégie de cache sur Shopify

Shopify intègre un CDN (Content Delivery Network) global via Cloudflare, mais comprendre son fonctionnement vous permet d'en tirer le meilleur parti.

Comment fonctionne le CDN Shopify

Chaque fichier statique de votre boutique (images, CSS, JavaScript, polices) est automatiquement distribué sur le réseau CDN mondial de Shopify :

• Points de présence (PoP) répartis sur tous les continents, votre contenu est servi depuis le serveur le plus proche du visiteur
• Domaine CDN : vos assets sont servis depuis cdn.shopify.com avec des en-têtes de cache optimisés
• Cache automatique : les fichiers statiques reçoivent un en-tête Cache-Control: public, max-age=31536000 (1 an)
• Cache-busting intégré : quand vous modifiez un fichier, Shopify génère automatiquement une nouvelle URL avec un hash unique

Ce que vous pouvez contrôler

Même si le CDN est géré par Shopify, vous avez un impact direct sur l'efficacité du cache :

• Minimisez les fichiers inline : le CSS et JS inline dans theme.liquid ne bénéficient pas du cache CDN. Privilégiez les fichiers externes dans le dossier assets/
• Évitez les scripts tiers non nécessaires : chaque script externe (chat, analytics, popups) ajoute des requêtes DNS et contourne le cache Shopify
• Utilisez les filtres Liquid de taille d'image : {{ image | image_url: width: 800 }} , Shopify génère et met en cache des versions redimensionnées automatiquement
• Activez le lazy loading natif : loading="lazy" sur les images below-the-fold pour réduire les requêtes initiales

Cache des pages HTML

Les pages HTML de Shopify ont un cache plus court et plus complexe :

• Les pages de collection et produit sont mises en cache côté serveur et invalidées automatiquement lors des modifications
• Le panier et les pages de paiement ne sont jamais mis en cache (contenu dynamique)
• Les sections Liquid avec {% render %} bénéficient d'un cache partiel plus efficace que {% include %}