Chaînes de demandes critiques Shopify : Correction de l'avertissement PageSpeed (2026)

Solution rapide avec Thunder

Ce que signifie PageSpeed par chaînes de requêtes critiques

Une requête critique est une ressource que le navigateur considère comme importante pour le rendu de la page actuelle. Une chaîne apparaît lorsqu'une ressource critique en retarde une autre : le HTML découvre le CSS, le CSS découvre une police, un script bloquant retarde le balisage de l'image ou un script charge un autre script avant que la page ne puisse devenir utile.

Les rapports les plus récents de Lighthouse appellent cela le Arbre de dépendance du réseau. Des rapports plus anciens et de nombreux fils de discussion de la communauté Shopify l'appellent encore éviter d'enchaîner les requêtes critiques. Quoi qu’il en soit, la question pratique est la même : quelle ressource fait attendre la première fenêtre d’affichage ?

Ce diagnostic n'est pas une métrique de champ Core Web Vitals, mais il explique souvent une faiblesse Rapport Core Web Vitals. Les longues chaînes augmentent le délai de chargement pour LCP, retardent First Contentful Paint et font osciller énormément les scores mobiles car les téléphones lents ressentent plus nettement chaque dépendance.

La chaîne spécifique à Shopify que vous voyez habituellement

Un thème Shopify propre peut toujours créer une chaîne critique comme celle-ci :

document
  -> theme.css
    -> storefront font file
  -> theme.js
    -> app embed script
      -> widget script
  -> Image du héros découverte tardivement

Le navigateur ne peut pas peindre la page visible tant que suffisamment de CSS n'est pas disponible. Il ne peut pas prioriser une image qu’il n’a pas découverte. Il ne peut pas répondre rapidement si l'application JavaScript saisit le fil de discussion principal alors que la page est encore en cours de chargement. C'est pourquoi le travail de la chaîne de requêtes chevauche ressources bloquant le rendu, travail du fil principal, et Optimisation JavaScript.

Étape 1 : Identifier le chemin critique réel

Run PageSpeed Insights, open the Network Dependency Tree or critical request chain section, and write down the deepest chain. Then open Chrome DevTools -> Réseau, désactivez le cache, rechargez sur la limitation mobile et triez par heure de début.

Ne corrigez pas tous les fichiers de la cascade. Recherchez les ressources hautement prioritaires qui bloquent la première fenêtre d'affichage : CSS global, polices, images de héros, scripts de thème dans l'en-tête, scripts d'application et requêtes tierces qui démarrent avant que la page ne soit utile. Si l'avertissement indique 30 fichiers mais qu'un seul se trouve au-dessus de la ligne de flottaison, corrigez-le d'abord.

Pour un flux de travail plus large, utilisez notre Guide d'audit de vitesse Shopify before touching code. It keeps you from spending an hour on request chains when the bigger problem is oversized images or an app stack.

Étape 2 : Différer les scripts de thème et d'application non critiques

Les scripts dans l'en-tête peuvent bloquer l'analyse et créer de nouvelles requêtes critiques. Si un script n'est pas nécessaire pour afficher la première fenêtre, reportez-le :

<script src="{{ 'theme.js' | asset_url }}" defer></script>

Utilisation différer pour les scripts nécessitant un ordre de documents. Utiliser asynchrone Attributs only for independent scripts such as simple analytics beacons. For app scripts you do not control, Thunder is safer because dependency-aware deferral prevents common breakage from blindly moving files.

Étape 3 : Précharger uniquement l'actif réel au-dessus de la ligne de flottaison

Le préchargement est puissant car il modifie l'ordre de découverte. Il est également facile d’en abuser. Préchargez l'image principale uniquement s'il s'agit de l'élément LCP réel, ou préchargez la police critique uniquement si le rendu du texte est bloqué par une demande de police tardive.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="{{ settings.hero_image | image_url: width: 800 }} 800w, {{ settings.hero_image | image_url: width: 1600 }} 1600w"
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Ne préchargez jamais chaque diapositive du carrousel. Ne préchargez jamais une image de bureau que les visiteurs mobiles n’utiliseront pas. L’objectif est d’avoir une chaîne plus courte et non une file d’attente plus bruyante. Si votre image LCP est chargée paresseusement, corrigez-la également avec chargement="impatient" et fetchpriority="haut".

Étape 4 : Réduire les CSS bloquant le rendu

Les thèmes Shopify contiennent souvent un gros fichier CSS pour chaque modèle. Cela crée une chaîne simple mais coûteuse : HTML attend le CSS avant le rendu, même si la plupart du CSS appartient à des sections situées en dessous de la ligne de flottaison.

Le chemin manuel sûr consiste à conserver le CSS de mise en page globale dans le fichier principal, puis à rapprocher le CSS de la section lourde de la section qui en a besoin. Si votre thème prend en charge des ressources spécifiques à une section, utilisez-les pour les curseurs, les lookbooks, les sections vidéo et les galeries de produits complexes.

{%- comment -%}Load section CSS only where the section appears{%- endcomment -%}
{{ 'featured-collection.css' | asset_url | stylesheet_tag }}

Pour un nettoyage en profondeur, suivez notre Guide d'optimisation CSS Shopify et nettoyage CSS et JavaScript inutilisés.

Étape 5 : déplacer les intégrations d'applications hors de la première fenêtre

Les avis, offres groupées, abonnements, chat, popups et outils d'analyse créent souvent des chaînes de dépendance supplémentaires. Ils chargent un petit script de démarrage, puis un autre script, puis du CSS, puis un appel API, puis un widget. Cette chaîne peut être fine sous le pli mais douloureuse à la tête.

In Shopify Admin, open Online Store -> Themes -> Customize -> Application intégrée. Désactivez tout ce qui n'a pas besoin de chaque page. Vérifiez ensuite les modèles de produits, de collections et de paniers pour les anciens extraits d'application. Si une application est nécessaire uniquement sur les pages de produits, ne la chargez pas globalement à partir de thème.liquide.

C'est aussi le bon moment pour comparer votre stack avec notre Recherche sur l'impact de la vitesse des applications Applications et qui ralentissent les magasins Shopify.

Correction manuelle vs Thunder Fix

Retester la chaîne de requêtes

Après chaque modification, exécutez à nouveau la même URL sur mobile. Vérifiez si la chaîne la plus profonde est plus courte, si la requête LCP démarre plus tôt et si le temps de blocage total diminue. Si un chiffre s’améliore et qu’un autre empire, inspectez la cascade avant de conserver la monnaie.

Pour un plan complet, utilisez le Guide d'optimisation de la vitesse Shopify. Si vous souhaitez une automatisation au lieu d'éditer manuellement le code du thème, comparez Fonctionnalités d'optimisation de Thunder ou chèque tarification actuelle.

Références et Validation

Pour le diagnostic sous-jacent, comparez votre rapport avec Guide de la chaîne de requêtes critiques de Chrome et le nouveau langage Lighthouse Network Dependency Tree. Pour le préchargement, utilisez Guide de préchargement d'image réactif de web.dev.

Les exemples de la communauté Shopify montrent généralement le même schéma : les commerçants suivent l'avertissement après avoir ajouté des applications, des créateurs de pages, des curseurs ou des médias de héros lourds. La solution gagnante n'est pas davantage de balises de préchargement. Il supprime les dépendances inutiles, différe les scripts et rend la première ressource visible évidente pour le navigateur.