Solution rapide avec Thunder
Thunder improves common Shopify resource loading patterns automatically, including Core Web Vitals pressure from images, scripts, fonts, and render-blocking assets. Use it for the baseline, then reserve manual preload tags for the few assets that are truly critical on a specific template.
Que signifie PageSpeed par demandes de clé de préchargement
A preload tells the browser: this resource matters soon, start fetching it early. PageSpeed surfaces preload opportunities when the browser discovers an important request late in the waterfall. On Shopify, the usual candidates are a self-hosted font, a hero image referenced from Liquid or CSS, or a CSS file required to paint the first view.
Cet avertissement chevauche Core Web Vitals, car une découverte tardive peut retarder Largest Contentful Paint. Les conseils LCP de Google indiquent qu'un bon LCP est de 2,5 secondes ou plus rapide pour au moins 75 % des visites, et l'un des principaux sous-éléments du LCP est le délai de chargement des ressources. Le préchargement peut réduire ce délai si la ressource est vraiment critique.
Cela peut aussi se retourner contre vous. Si vous préchargez cinq polices, trois images, le CSS de l'application, des critiques et un script de curseur, vous n'avez pas établi de priorité. Vous avez fait une file d'attente plus bruyante. Pour un contexte plus large, lisez le Guide d'astuces sur les ressources Shopify et le guide des chaînes de requêtes critiques.
Bons et mauvais candidats au préchargement Shopify
| Actif | Précharge ? | Raison |
|---|---|---|
| Image du héros de la page d'accueil | Souvent oui | Image LCP probable et nécessaire dans la première fenêtre. |
| Image principale du produit | Parfois | Utile lorsqu'il s'agit de l'élément LCP et découvert tardivement. |
| Police principale au-dessus de la ligne de flottaison | Parfois | Utile pour les polices auto-hébergées qui affectent le texte visible. |
| Images de collection sous la ligne de flottaison | Non | Ceux-ci doivent généralement être chargés paresseux et non préchargés. |
| Révision du script du widget | Non | Généralement pas nécessaire avant le premier rendu. |
Manuel étape par étape : correction des demandes de clé de préchargement sur Shopify
1. Confirmez que la ressource est utilisée au-dessus de la ligne de flottaison
Ouvrez PageSpeed Insights, identifiez la ressource suggérée et demandez si les acheteurs en ont besoin dans la première fenêtre. Si la réponse est non, ne le préchargez pas. Envisagez plutôt un chargement paresseux ou un retard. Si la ressource est l’image du héros ou la police principale, continuez.
2. Préchargez l'image du héros probable
Pour une image de héros contrôlée par Liquid, placez le préchargement dans la logique d'en-tête du document ou de section uniquement lorsque cette section apparaît au-dessus de la ligne de flottaison. Rendu également l'image réelle avec un chargement rapide et une priorité élevée.
<!-- In theme.liquid or a hero section rendered first -->
<link
rel="preload"
as="image"
href="{{ section.settings.hero_image | image_url: width: 1600 }}"
imagesrcset="
{{ section.settings.hero_image | image_url: width: 750 }} 750w,
{{ section.settings.hero_image | image_url: width: 1100 }} 1100w,
{{ section.settings.hero_image | image_url: width: 1600 }} 1600w"
imagesizes="100vw"
fetchpriority="high"
>S'il s'agit de votre problème LCP, le Guide de préchargement des images de héros et Guide de découverte des requêtes LCP va plus loin.
3. Préchargez uniquement les polices auto-hébergées critiques
Les préchargements de polices ne sont utiles que lorsque le fichier de police est utilisé immédiatement et que l'URL correspond à la police demandée par CSS. Utiliser origine croisée pour les fichiers de polices. Associez-le à affichage des polices : échange pour que le texte ne reste pas invisible pendant le chargement de la police.
<link
rel="preload"
href="{{ 'brand-regular.woff2' | asset_url }}"
as="font"
type="font/woff2"
crossorigin
>
@font-face {
font-family: 'Brand';
src: url('{{ 'brand-regular.woff2' | asset_url }}') format('woff2');
font-display: swap;
}Pour plus de détails, voir Optimisation des polices Shopify, réduisant la charge de police, et échange d'affichage de police.
4. Ne préchargez pas les éléments d'application non critiques
App assets often look important because they appear in the waterfall, but reviews, chat, recommendations, popups, personalization, and heatmaps are rarely needed before the first paint. Preloading them can make the score worse by stealing bandwidth and CPU from LCP. Use the Guide JavaScript tiers pour retarder le travail des applications non critiques à la place.
5. Surveillez les avertissements de préchargement inutilisés
Les navigateurs avertissent lorsqu'une ressource préchargée n'est pas utilisée peu de temps après le chargement. Cela signifie que le préchargement est probablement trop large, que la logique conditionnelle est erronée, que l'URL ne correspond pas ou que l'actif n'est pas réellement critique. Supprimez les précharges qui ne prouvent pas leur valeur lors des tests.
Correction manuelle vs Thunder Fix
| Problème de préchargement | Correction manuelle | Correction du tonnerre |
|---|---|---|
| Image du héros découverte tardivement | Ajoutez un préchargement conditionnel, un chargement rapide et une priorité de récupération élevée. | Améliore automatiquement les modèles LCP et de priorité d'image courants. |
| Police découverte tardivement | Préchargez le fichier WOFF2 exact et utilisez l'échange d'affichage de police. | Aide à réduire la pression de chargement des polices dans le cadre de la référence de la vitrine. |
| Trop de précharges | Supprimez les préchargements généraux et conservez uniquement les ressources de la première fenêtre. | Évite de traiter chaque actif comme critique. |
| La cascade de ressources de l'application est bruyante | Retardez les scripts d'application non critiques au lieu de les précharger. | Optimise le timing des ressources de l'application pour les problèmes de performances courants de Shopify. |
Comment le préchargement se connecte au LCP, au CSS et aux scripts
Preload n'est pas une stratégie de vitesse autonome. Cela fonctionne lorsque cela raccourcit le chemin critique. Si votre image LCP démarre tardivement parce qu'elle est masquée dans CSS, injectée par JavaScript ou chargée paresseusement, un préchargement peut vous aider. Si LCP est lent parce que le fichier image est volumineux, vous devez également formats d'images modernes et sources de bonne taille. Si le CSS bloquant le rendu retarde la peinture, lisez correction du CSS bloquant le rendu.
Si les scripts constituent le goulot d'étranglement, précharger un script est généralement une mauvaise décision. Vous devrez peut-être réduire le temps d'exécution, différer les scripts non critiques ou supprimer le code d'application inutilisé. Le Réduire le temps d'exécution de JavaScript est la meilleure prochaine étape.
Comment confirmer que le correctif a fonctionné
Testez avec PageSpeed Insights et le test de vitesse Shopify gratuit. Dans la cascade, l’actif préchargé doit démarrer plus tôt. En termes de métriques, le LCP devrait s’améliorer ou au moins rester stable. Dans les avertissements, vous ne devriez pas voir les messages « préchargé mais non utilisé ». Testez également sur mobile, car les erreurs de préchargement sont plus visibles lorsque la bande passante est limitée.
Pour une approche complète à l'échelle du magasin, utilisez le guide complet d'optimisation de la vitesse Shopify et comparez les options d'automatisation dans le Guide meilleures applications d'optimisation de vitesse Shopify .
FAQ
Que signifient les demandes de clé de préchargement sur Shopify ?
Cela signifie qu'un actif critique est découvert plus tard qu'il ne devrait l'être. Sur Shopify, cet actif est souvent une police, une image de héros, un fichier CSS critique ou une dépendance de script qui affecte le premier rendu.
Dois-je précharger tous les actifs Shopify importants ?
Non. Préchargez uniquement les éléments nécessaires à la fenêtre d'affichage initiale. Trop de balises de préchargement peuvent évincer l'image LCP, le CSS et les polices réels, ce qui rend les performances moins bonnes.
Quels actifs Shopify sont de bons candidats au préchargement ?
Les bons candidats incluent l'image probable du héros LCP, un fichier de police auto-hébergé au-dessus de la ligne de flottaison et parfois un fichier CSS critique. Les images sous la ligne de flottaison, les widgets d'application, les scripts de révision et le thème général JavaScript sont généralement de mauvais candidats.
Thunder peut-il aider avec les demandes de clés de préchargement ?
Thunder peut améliorer automatiquement la priorité des ressources de la vitrine et les modèles de chargement courants de Core Web Vitals. Les préchargements manuels peuvent toujours être utiles pour les images de héros ou les configurations de polices hautement personnalisées.
Comment savoir si une précharge a fonctionné ?
Testez à nouveau la même URL et vérifiez si la ressource critique est découverte plus tôt, si LCP s'améliore ou reste stable, et aucun avertissement n'apparaît concernant la non-utilisation des ressources préchargées peu de temps après le chargement.
Corriger la priorité des ressources de manière pratique
Préchargez les demandes de clés sur Shopify uniquement lorsque l'actif est critique pour la première fenêtre d'affichage. Thunder gère la base de référence automatisée commune et les préchargements manuels peuvent affiner les cas de héros et de polices personnalisés.
Installer Thunder