Early Hints Shopify : préchargement automatique pour accélérer LCP et FCP

Parce qu’il ne peut lire la plupart des ressources qu’après avoir reçu et parsé le HTML. Tant que le document n’arrive pas, le navigateur ignore encore les feuilles de style et les scripts nécessaires au premier affichage, alors que l’attente du serveur peut déjà coûter des centaines de millisecondes.

Pour une ressource tierce, le coût grimpe : résoudre le nom de domaine, ouvrir la connexion, négocier le TLS. Un head typique avec theme.css, une police Google Fonts et un script jQuery bloque le rendu trois fois, et les deux derniers fichiers peuvent encore exiger une nouvelle connexion avant le téléchargement.

Shopify ne s’appuie plus seulement sur les resource hints ajoutés par les auteurs de thème. D’après l’article Performance @ Shopify de Mateusz Krzeszowiak (28 août 2026), la plateforme scanne désormais le HTML généré, repère les ressources qui bloquent le rendu, puis utilise ces informations pour ouvrir des connexions tierces et démarrer le téléchargement de fichiers critiques avant que le navigateur ne reçoive la réponse HTML finale.

Concrètement, un statut HTTP 103 Early Hints arrive avant le 200 OK et porte des en-têtes Link : un preconnect prépare la connexion, un preload lance déjà le téléchargement. Shopify s’appuie sur son CDN : une fois le Link mis en cache pour une URL, le nœud edge peut renvoyer le 103 avant même que la requête n’atteigne les serveurs d’application.

Shopify transforme déjà le HTML storefront pendant le rendu. Ce mécanisme a été étendu pour identifier les ressources sur le chemin critique. Pour les feuilles de style : styles bloquants classiques, hors media non bloquant comme print. Pour les scripts : scripts classiques bloquants, hors async, defer ou type="module". La détection réutilise un scan HTML existant, sans overhead mesurable, et reste alignée quand le thème ajoute, retire ou change un fichier bloquant.

Le déploiement s’est fait en deux étapes. D’abord, jusqu’à trois domaines servant des ressources tierces bloquantes sont ajoutés en preconnect dans le Link, aux côtés des hints CDN Shopify. Sur le trafic acheteur, cette seule étape a accéléré le FCP de 28 ms et le LCP de 36 ms au p75 ; au p90, les gains étaient de 56 ms et 64 ms.

Un cas Adobe Fonts a aussi été traité : un CSS servi depuis use.typekit.net importe ensuite un autre CSS depuis p.typekit.net. Quand Shopify trouve du CSS bloquant Typekit, il préconnecte les deux domaines. Sur les pages concernées, ce hint supplémentaire a encore amélioré le FCP de 31 ms au p75.

Ensuite, le même scan lance le preload des feuilles de style et scripts bloquants eux-mêmes. À la différence d’un preload écrit dans le thème, Shopify ne sélectionne que les fichiers qui bloquent réellement le rendu dans le document généré pour cette URL, et la liste se met à jour au fil des réponses.

HTTP/2 103 Early Hints
Link: <https://fonts.googleapis.com>; rel=preconnect
Link: <//shop.example/cdn/shop/t/1/assets/theme.css>; as=style; rel=preload

HTTP/2 200 OK
Content-Type: text/html

Sur les pages vues où le navigateur a reçu et utilisé les preloads Early Hints de Shopify, les métriques de rendu s’améliorent sur toute la distribution. Au p75, le FCP est 76 ms plus rapide et le LCP 100 ms plus rapide. L’arrivée des en-têtes de la réponse finale n’a pas régressé : le navigateur commence un travail utile plus tôt sans retarder le HTML.

Avec un 103, le TTFB classique s’arrête à l’arrivée des Early Hints, pas au début de la réponse finale. Shopify a donc regardé finalResponseHeadersStart. Sur cette plage, chaque 100 ms supplémentaires avant la réponse finale étaient associées, au p90, à une amélioration FCP plus grande de 7,5 ms et LCP de 7,6 ms : plus le navigateur aurait attendu, plus il peut avancer un téléchargement bloquant en parallèle.

Le LCP progresse souvent plus que le FCP. L’hypothèse principale de Shopify : récupérer CSS et JavaScript bloquants plus tôt libère de la bande passante quand le navigateur découvre ensuite les images prioritaires du body, souvent éléments LCP, sans que ces images aient été préchargées.

Chromium et Firefox peuvent agir sur les liens preload d’une réponse 103. Safari accepte la réponse intermédiaire mais n’utilise pour l’instant que les preconnects et ignore les preloads ; un travail WebKit est en cours pour étendre le support.

La documentation thème Shopify (The Shopify platform) précise que, sur chaque réponse HTML storefront, Shopify scanne le head rendu pour les scripts et feuilles de style bloquants, envoie des Link de preload et de preconnect, limite le nombre d’entrées, place les hints automatiques en premier, puis laisse les hints ajoutés via preload_tag, stylesheet_tag: preload: true et image_tag: preload: true remplir le reste. Early Hints et streaming HTML se cumulent : le 103 démarre les téléchargements avant le HTML, le streaming laisse parser le haut du head pendant le rendu des sections.

La même doc indique un plafond de 10 preloads Link par réponse. Si le head compte déjà 10 ressources bloquantes ou plus, un preload d’image LCP ajouté manuellement peut être écarté. Après une publication de thème, la première visite d’une URL peut arriver sans Early Hints encore en cache CDN : ne jugez pas l’effet sur un seul rechargement juste après une édition.

Rien n’est obligatoire pour activer la fonction : elle est plateforme. En revanche, un thème ou des apps qui multiplient les CSS et scripts bloquants dans le head limitent le bénéfice, saturent le budget de 10 preloads, et laissent le navigateur avec plus de travail même si la découverte démarre plus tôt.

{{ product.featured_image | image_url: width: 800 | image_tag: preload: true }}

Quand le LCP reste trop lent malgré le déploiement plateforme : head saturé de CSS et scripts bloquants, apps marketing qui ouvrent trop de domaines, preload manuel qui pousse hors du plafond de 10, ou thème sur mesure dérivé de Dawn/Horizon sans revue récente du chemin critique.

Une agence spécialisée Shopify peut prioriser le cleanup (defer/async, réduction de feuilles, polices self-hostées sur le CDN Shopify), valider les filtres Liquid de preload restants, et mesurer FCP/LCP sur le thème publié plutôt que dans l’éditeur. Le levier Early Hints est gratuit ; le travail qui reste est souvent éditorial et technique sur votre stack réelle.