Préchargement et préconnexion Shopify : accélérez votre boutique de 1,5 seconde (2026)

Le moyen le plus rapide d'optimiser le chargement des ressources

Les conseils manuels sur les ressources nécessitent de modifier le code Liquid de votre thème et de comprendre quelles ressources sont critiques. Si vous préférez ignorer les modifications du code, Thunder Page Speed Optimizer gère automatiquement la priorité de chargement des ressources :

Diffère les scripts non critiques afin que les ressources critiques (images, CSS, polices) soient chargées en premier
Gère automatiquement l'ordre d'exécution des scripts tiers
Aucune modification du code de thème requise - installez et c'est parti

Testez la vitesse de votre boutique pour voir vos performances actuelles de chargement des ressources, puis poursuivez votre lecture pour l'approche manuelle.

Que sont les indices de ressources et pourquoi sont-ils importants pour Shopify ?

Lorsqu'un navigateur charge votre boutique Shopify, il lit le code HTML de haut en bas et découvre les ressources (images, CSS, polices, scripts) au fur et à mesure. Certaines ressources critiques, comme votre image de héros ou votre police principale, sont profondément enfouies dans des fichiers CSS ou chargées via JavaScript. Le navigateur ne les trouvera pas tant qu'il n'aura pas analysé beaucoup de code.

Les conseils de ressources vous permettent d'indiquer au navigateur : "Hé, commencez à travailler sur ces ressources maintenant — n'attendez pas pour les découvrir naturellement." Ils sont Balises éléments placés dans le <head> de votre HTML.

Il existe quatre types, chacun avec des cas d'utilisation différents :

Astuce	Ce qu'il fait	Quand utiliser
Préconnexion	Télécharge immédiatement un fichier spécifique	Images de héros, polices critiques, clé CSS
	Ouvre une connexion à un domaine (DNS + TCP + TLS)	Domaines tiers que vous utiliserez certainement
dns-prélecture	Résout uniquement le DNS d'un domaine	Domaines tiers que vous pourriez utiliser
prélecture	Télécharge un fichier pour une future navigation	Ressources nécessaires sur la prochaine page probable

Chaque indice a un profil coût-bénéfice différent. Utilisés à bon escient, ils accélèrent LCP, réduisez la latence de connexion et améliorez les performances perçues. Utilisés avec négligence, ils gaspillent de la bande passante et peuvent même ralentir vos ressources les plus importantes.

Préchargement : prioriser les ressources critiques sur Shopify

Préconnexion est l'indice de ressource le plus puissant — et le plus couramment utilisé à mauvais escient. Il indique au navigateur : "Téléchargez ce fichier maintenant, il est critique pour la page actuelle." Le navigateur le traite comme obligatoire et récupère la ressource avec une priorité élevée.

Préchargement de votre image de héros (plus grande victoire LCP)

L'image du héros est généralement le plus grand élément Contentful Paint de votre page d'accueil et de vos pages de destination. Sans préchargement, le navigateur ne le découvre qu'après avoir téléchargé et analysé le CSS de votre thème, ce qui peut retarder le LCP de 1 à 2 secondes. Voici comment le précharger dans Shopify :

{% comment %} Add to theme.liquid inside <head> {% endcomment %}

{'
'}
{'{% if template == "index" %}'}{'
'}
{'  {% comment %} Preload hero image on homepage {% endcomment %}'}{'
'}
{'  '}{'
'}
{'{% endif %}'}{'
'}
{'
'}
{'{% if template contains "product" %}'}{'
'}
{'  {% comment %} Preload main product image {% endcomment %}'}{'
'}
{'  {% if product.featured_image %}'}{'
'}
{'    '}{'
'}
{'  {% endif %}'}{'
'}
{'{% endif %}'}}

Cette technique améliore généralement le LCP de 500 ms à 1,5 s car le navigateur commence à télécharger l'image du héros en parallèle avec CSS et JavaScript au lieu d'attendre. L'équipe Performance de Shopify recommande cette approche spécifiquement.

Préchargement des polices

If your theme uses custom web fonts, preloading the most critical font file prevents the browser from blocking text rendering while it discovers the font through CSS. See our full pour plus de détails. La mise en œuvre de base :

{% comment %} Preload primary body font {% endcomment %}

{''}}

Important : Le origine croisée L'attribut est requis pour les préchargements de polices, même lorsque la police se trouve sur le même domaine. Sans cela, le navigateur télécharge la police deux fois.

Utilisation des filtres de préchargement de liquide de Shopify

Les modèles Liquid de Shopify fournissent une prise en charge intégrée du préchargement via le image_tag Le filtre et stylesheet_tag Filtres :

{% comment %} Preload via Liquid image_tag filter {% endcomment %}

{"{{ section.settings.hero_image | image_url: width: 1200 | image_tag: preload: true, fetchpriority: 'high' }}"}{'
'}
{'
'}
{'{% comment %} Preload critical stylesheet {% endcomment %}'}{'
'}
{"{{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}"}}

Ces filtres liquides génèrent automatiquement le bon Les balises ainsi que la référence réelle de la ressource, ce qui est plus propre que d'écrire manuellement les astuces de préchargement.

Préconnexion : réduisez le temps de connexion des tiers

Every time your browser needs a resource from a new domain, it performs three steps: DNS resolution (50-200ms), TCP handshake (50-150ms), and TLS negotiation (100-200ms). That's 200-550ms of connection setup avant le téléchargement d'un seul octet.

indique au navigateur de terminer ces étapes plus tôt, ainsi, lorsque la ressource est réellement nécessaire, la connexion est déjà établie.

Cibles de préconnexion communes pour les boutiques Shopify

{% comment %} Add to theme.liquid <head> — before stylesheet and script tags {% endcomment %}

{'
'}
{'{% comment %} Shopify CDN — your images, fonts, and assets {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Fonts (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Analytics/GTM {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} YouTube embeds (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}}

Quand utiliser origine croisée L'attribut: Ajouter le origine croisée L'attribut attribute when the resources from that domain will be fetched with CORS (fonts, images loaded via Étiquette avec crossorigin, récupérer les appels API). En cas de doute, incluez-le – le pire des cas est une connexion supplémentaire.

Limites de préconnexion

Chaque préconnexion utilise un emplacement de connexion de navigateur et une petite quantité de CPU/mémoire. Les navigateurs disposent généralement de 6 connexions par domaine et d'un total limité. Limiter les préconnexions à 3 à 5 domaines — uniquement ceux que votre page utilisera certainement.

Pour les domaines que vous pourriez utiliser (par exemple, un widget de chat qui ne se charge que pour certains visiteurs), utilisez le plus léger dns-prélecture à la place.

DNS-Prefetch : préparation de connexion légère

dns-prélecture est l'indice de ressource le plus léger : il résout uniquement l'adresse IP du domaine (économie de 50 à 200 ms) sans établir une connexion complète. Utilisez-le pour les domaines tiers que votre page pourrait besoin :

{% comment %} DNS-prefetch for optional third-party services {% endcomment %}

{''}{'
'}
{''}{'
'}
{''}{'
'}
{''}}

Bonne pratique : Utilisation pour vos 3 à 5 principaux domaines critiques. Utiliser dns-prélecture comme solution de secours pour tous les autres domaines tiers. Un modèle courant consiste à inclure les deux :

{% comment %} Belt and suspenders: preconnect with dns-prefetch fallback {% endcomment %}

{''}{'
'}
{''}}

Navigateurs plus anciens qui ne prennent pas en charge will still benefit from the dns-prélecture. Les navigateurs modernes utilisent la préconnexion et ignorent la prélecture DNS redondante. Ceci est particulièrement pertinent pour les magasins Shopify dont les visiteurs utilisent des appareils mobiles plus anciens.

Prefetch : préchargement des ressources pour la page suivante

prélecture indique au navigateur : "L'utilisateur visitera probablement cette page ou aura ensuite besoin de cette ressource - téléchargez-la en arrière-plan pendant les périodes d'inactivité." Ceci est utile pour les parcours sur plusieurs pages comme la navigation dans les collections → les pages produits.

{% comment %} On collection pages: prefetch the first few product pages {% endcomment %}

{'{% for product in collection.products limit: 3 %}'}{'
'}
{'  '}{'
'}
{'{% endfor %}'}{'
'}
{'
'}
{'{% comment %} Prefetch critical CSS for product pages {% endcomment %}'}{'
'}
{""}}

Utilisez la prélecture avec précaution : Les ressources préchargées sont téléchargées en utilisant la bande passante inactive, afin qu'elles ne bloquent pas le contenu critique. Mais sur mobile avec des forfaits de données limités, la prélecture inutile gaspille la bande passante. Pré-extraire uniquement les ressources avec une probabilité de navigation élevée.

Bons candidats pour la prélecture sur Shopify : la page produit lorsqu'un utilisateur survole un article de collection, la feuille de style de paiement sur la page du panier et les images de produits visibles dans une grille de collection.

5 erreurs courantes d'indices de ressources sur Shopify

Les indications de ressources peuvent se retourner contre elles lorsqu'elles sont mal mises en œuvre. Ce sont les erreurs que nous constatons le plus souvent lors de l’audit des magasins Shopify (exécuter une et vérifiez celles de votre page <head> pour les repérer) :

❌ Erreur 1 : tout précharger

Ajout Préconnexion à 10+ ressources va à l’encontre de l’objectif. Quand tout est « critique », rien n’est prioritaire. Les connexions limitées du navigateur sont réparties de manière égale entre toutes les précharges, ralentissant les plus importantes.

Correction : Préchargez uniquement 2 à 4 ressources : image du héros, police principale et CSS critique au-dessus de la ligne de flottaison.

❌ Erreur 2 : origine croisée manquante sur les préchargements de polices Les polices

nécessitent le origine croisée L'attribut attribute on preload links, even when served from the same domain. Without it, the browser downloads the font twice — once from the preload (without CORS) and once from the CSS (with CORS).

Correction : Toujours ajouter origine croisée L'attribut aux préchargements de polices : <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

❌ Erreur 3 : Précharger des ressources qui ne sont pas utilisées

La console Chrome DevTools affiche "La ressource a été préchargée mais n'a pas été utilisée en quelques secondes" si vous préchargez quelque chose dont la page n'a pas réellement besoin. Cela gaspille de la bande passante et des emplacements de connexion.

Correction : Précharger uniquement les ressources que la page actuelle utilise réellement. Utilisez la logique Liquide conditionnelle : {% if template == "index" %} pour les préchargements de la page d'accueil uniquement.

❌ Erreur 4 : Préconnexion aux domaines inutilisés

Une préconnexion qui n'est pas utilisée maintient une connexion ouverte pendant environ 10 secondes avant d'expirer. Cela gaspille les ressources du navigateur et peut en fait retarder les connexions aux domaines dont vous avez besoin.

Correction : Vérifiez quels domaines tiers votre page charge réellement (Chrome DevTools → Réseau → trier par domaine). Préconnectez-vous uniquement aux domaines dont les ressources se trouvent dans le chemin critique.

❌ Erreur 5 : URL d'image incorrecte dans le préchargement du héros

Le système d'image réactif de Shopify propose différentes tailles en fonction de la largeur de la fenêtre d'affichage. Si votre URL de préchargement ne correspond pas à l'URL demandée par le CSS/HTML, le préchargement est inutile et le navigateur télécharge l'image deux fois.

Correction : Faites correspondre l'URL de préchargement exactement à ce que le navigateur demandera. Utilisez Shopify Filtre image_url Filtre avec le même paramètre de largeur que votre thème utilise pour l'image du héros.

Où placer les astuces de ressources dans les thèmes Shopify

L'ordre de placement est important. Conseils de ressources dans le <head> de votre thème.liquide devrait suivre cet ordre pour une efficacité maximale :

<head>

{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  {% if template == "index" %}'}{'
'}
{'    '}{'
'}
{'  {% endif %}'}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  {{ "theme.css" | asset_url | stylesheet_tag }}'}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  ...'}{'
'}
{''}}

Les préconnexions doivent intervenir le plus tôt possible dans <head> car le navigateur démarre immédiatement la connexion. Les préchargements devraient suivre, puis les feuilles de style, puis les astuces DNS-prefetch. Lisez notre guide des ressources bloquant le rendu pour une image complète de la façon de structurer votre thème <head> pour un ordre de chargement optimal.

Conseils de ressources manuelles vs Thunder : comparaison

Facteur	Conseils sur les ressources manuelles	Thunder
Configuration	Modifiez theme.liquid, comprenez les priorités en matière de ressources	Installation en un clic
Amélioration du LCP	500 ms-1,5 s (préchargement de l'image du héros)	Gains similaires via optimisation automatique
Couvre le report du script	Non — les astuces ne diffèrent pas les scripts	Oui — gestion complète des scripts
Risque de sur-optimisation	Élevé si trop d'indices ajoutés	Faible — priorisation automatique
Entretien	Mise à jour lorsque le thème ou les applications changent	Automatique

Pour une vitesse maximale, combinez les deux : préchargement manuel de l'image du héros + Thunder pour une optimisation complète des scripts. Voir Tarification pour les détails du forfait.

Comment mesurer l'impact des indices de ressources

Après avoir ajouté des indices de ressources, mesurez l'amélioration à l'aide de ces outils :

Test de vitesse gratuit de Thunder — Comparaison rapide avant/après des performances globales de votre magasin.
Onglet Réseau Chrome DevTools — Regardez le graphique en cascade. Les ressources préchargées devraient commencer à être téléchargées plus tôt (plus à gauche dans le graphique). Les domaines préconnectés doivent afficher des barres de connexion plus courtes.
Lighthouse — Vérifiez si l'audit « Précharger la plus grande image Contentful Paint » réussit après l'ajout du préchargement de l'image de héros. Vérifiez également qu’aucun avertissement « préchargements inutilisés » n’apparaît.
Test de page Web — La vue en cascade indique exactement quand chaque ressource commence à être téléchargée. Comparez les cascades avant et après avoir ajouté des indices pour voir le changement de timing.

Pour un guide complet sur l'interprétation de ces résultats, lisez notre guide des résultats des tests de vitesse et notre guide complet d'optimisation de la vitesse.

Questions fréquemment posées sur les conseils de ressources Shopify

Que sont les indices de ressources dans Shopify ?

Les indices de ressources sont des éléments de lien HTML qui indiquent au navigateur de préparer les ressources avant qu'elles ne soient nécessaires. Les quatre types sont : preload (télécharger cette ressource immédiatement — c'est nécessaire pour la page actuelle), preconnect (établir une connexion à ce domaine — nous en aurons bientôt besoin), dns-prefetch (résoudre le DNS de ce domaine — une version allégée de preconnect) et prefetch (télécharger cette ressource pour une future navigation sur la page). Sur Shopify, les astuces de ressources se trouvent dans le <head> de votre fichier theme.liquid ou sont appliquées via des filtres Liquid comme image_tag avec préchargement.

Dois-je précharger mon image de héros sur Shopify ?

Oui — le préchargement de votre image de héros est l'un des moyens les plus efficaces d'améliorer Largest Contentful Paint (LCP). L'image du héros est généralement l'élément LCP sur la page d'accueil et les pages de destination. Sans préchargement, le navigateur découvre l'image uniquement après avoir téléchargé et analysé le HTML et le CSS. Avec le préchargement, le navigateur commence immédiatement à télécharger l'image du héros, réduisant souvent de 500 ms à 1,5 s le temps LCP. Utilisez <link rel='preload' as='image'> dans votre tête theme.liquid pour l'image du héros.

Quelle est la différence entre précharge et préconnexion ?

Preload tells the browser to download a specific file immediately — you know the exact URL of the resource. Preconnect tells the browser to establish a connection (DNS + TCP + TLS) to a domain — you know you'll need resources from that domain but don't know the exact URLs yet. Use preload for known critical resources like hero images and key fonts. Use preconnect for third-party domains like Google Fonts, YouTube, or analytics services.

Trop d'indices de ressources peuvent-ils nuire aux performances de Shopify ?

Oui. Chaque préchargement et préconnexion est en concurrence pour les emplacements de connexion et la bande passante limités du navigateur. Si vous préchargez plus de 10 ressources, vous dites essentiellement au navigateur que tout est critique, ce qui signifie que rien n'est prioritaire. Bonne pratique : préchargez uniquement 2 à 4 ressources véritablement critiques (image de héros, police principale, CSS critique), préconnectez-vous à 2 à 3 domaines tiers clés et utilisez la prélecture avec parcimonie pour les navigations probables sur la page suivante. Faire des allusions excessives est pire que pas d’allusion du tout.

Thunder Page Speed Optimizer gère-t-il les indications de ressources ?

Thunder optimise automatiquement la priorité de chargement des ressources, ce qui inclut la gestion de la manière et du moment où les ressources tierces se connectent et se téléchargent. Plutôt que d'ajouter des balises de préconnexion ou de préchargement manuelles, le report des scripts et la priorisation des ressources de Thunder garantissent que les ressources critiques se chargent en premier pendant que les scripts tiers non critiques attendent. Cela permet d'obtenir des résultats similaires aux conseils de ressources manuels sans nécessiter de modifications du code du thème.

Comment précharger les polices sur Shopify ?

Add a preload link in your theme.liquid <head> pour votre fichier de police le plus critique (généralement la police du corps du texte au format WOFF2). La syntaxe est : <link rel='preload' href='your-font.woff2' as='font' type='font/woff2' crossorigin>. The crossorigin attribute is required for fonts even if they're on the same domain. Only preload 1-2 font files — preloading all font weights wastes bandwidth on files the current page may not need.

Faites en sorte que chaque milliseconde compte grâce aux astuces sur les ressources

Les conseils de ressources sont l'une des optimisations de vitesse Shopify les moins exigeantes et les plus impactantes que vous puissiez mettre en œuvre. Un préchargement d’une seule image de héros peut améliorer le LCP de plus d’une seconde. Les préconnexions stratégiques éliminent des centaines de millisecondes de temps d’établissement de connexion. La clé est la retenue : préchargez uniquement ce qui est vraiment critique et laissez le navigateur gérer le reste.

Commencez par les deux changements ayant le plus grand impact : préchargez votre image de héros et préconnectez-vous à vos domaines tiers les plus utilisés. Utilisez ensuite Thunder Page Speed Optimizer pour une hiérarchisation complète des ressources et une gestion des scripts tiers dans l'ensemble de votre boutique Shopify.

Testez la vitesse de votre boutique maintenant pour voir où le chargement des ressources vous ralentit et utilisez les techniques de ce guide pour y remédier.

⚡

Expert Speed Optimization for Your Store

Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.

Get Your Free Speed Audit →

✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder

Starting from €1,500 · Learn more

Conseils sur les ressources Shopify : Préchargement, préconnexion et prélecture pour des magasins plus rapides