Actifs tiers du cache Shopify : ce que vous pouvez corriger

Que signifie l'avertissement de politique de cache

PageSpeed signale les actifs statiques avec des durées de vie de cache courtes, car les visiteurs réguliers devront peut-être les télécharger à nouveau trop tôt. Sur un site purement personnalisé, un développeur peut souvent ajuster les en-têtes du serveur. Sur Shopify, les actifs de la vitrine sont répartis entre le CDN de Shopify, votre thème, les fournisseurs d'applications, les plateformes de suivi, les fournisseurs de polices, les intégrations vidéo et les réseaux publicitaires. Vous contrôlez une partie de cette pile, mais pas la totalité.

This is why merchants get frustrated with the warning. They see a third-party JavaScript file from a reviews app, chat widget, pixel, or attribution tool and look for a Shopify setting that does not exist. If the file is served from the vendor's domain, the vendor sets the cache lifetime. Your job is to decide whether that vendor should load, where it should load, and whether a lighter pattern can replace it.

La politique de cache appartient à côté Politique de cache efficace de Shopify, impact sur les scripts tiers Optimisation de la vitesse de l'application, , et le guide complet d'optimisation de la vitesse Shopify.

Quels actifs vous pouvez contrôler sur Shopify

Actifs du thème

Les fichiers téléchargés sur votre thème Shopify, tels que CSS, JavaScript, images et polices, sont l'endroit le plus sûr à optimiser. Vous pouvez supprimer les fichiers morts, compresser des images, diviser des scripts et éviter de charger d'anciens actifs. Le CDN de Shopify gère la livraison, mais vous contrôlez toujours ce qui est demandé.

Fichiers de fournisseurs statiques approuvés

Some libraries can be self-hosted if the license and vendor documentation allow it. Examples include a local slider library, a small helper script, or a font file you are licensed to host. This is different from copying a live app script that expects vendor updates.

Intégrations et pixels de l'application

Vous ne pouvez généralement pas modifier leurs en-têtes de cache. Vous pouvez désactiver les intégrations d'applications inutilisées, supprimer les pixels en double, limiter les widgets aux modèles pertinents et retarder l'interface utilisateur non critique jusqu'à ce que le premier écran soit utilisable.

Manuel étape par étape : gérer les avertissements de cache tiers

1. Trier les actifs par propriété

Ouvrez DevTools Network ou PageSpeed et regroupez les URL signalées dans Shopify CDN, votre thème, vos fournisseurs d'applications, vos pixels, vos polices, vos intégrations vidéo et vos outils marketing. Réparez d’abord vos propres actifs. Les actifs appartenant aux fournisseurs nécessitent une décision différente.

Shopify-controlled:
cdn.shopify.com/s/files/.../theme.css
cdn.shopify.com/s/files/.../custom.js

Vendor-controlled:
reviews-app.example/widget.js
analytics.example/pixel.js
chat.example/launcher.js

2. Remove assets from templates that do not need them

Un widget d'évaluation de produits peut appartenir aux pages de produits mais pas aux articles de blog. Un script de recherche de magasin peut appartenir à une seule page, et non à toute la vitrine. Les extensions d’applications thématiques et les intégrations d’applications doivent être aussi limitées que l’application le permet.

{% if template.name == 'product' %}
  <script src="https://vendor.example/reviews.js" defer></script>
{% endif %}

3. Utiliser des façades pour des intégrations lourdes

Les vidéos, les cartes, les discussions et les réseaux sociaux chargent souvent de nombreux fichiers avec des politiques de cache que vous ne contrôlez pas. Remplacez l'intégration complète par un aperçu statique ou un bouton léger, puis chargez le code tiers uniquement après interaction.

<button class="chat-facade" data-load-chat>
  Discutez avec nous
</button>

&lt;script&gt;
  document.querySelector('[data-load-chat]')?.addEventListener('click', () => {
    const script = document.createElement('script');
    script.src = 'https://chat.example/widget.js';
    script.defer = true;
    document.head.appendChild(script);
  });
&lt;/script&gt;

4. Auto-héberger uniquement ce qui est sûr

Polices auto-hébergées, petites bibliothèques et ressources statiques approuvées lorsque vous y êtes autorisé. Ne copiez pas les scripts d'application, les scripts de paiement, les pixels de suivi ou le code du fournisseur constamment mis à jour dans votre thème. Cela peut perturber la gestion du consentement, l’analyse, l’assistance et les futurs correctifs de sécurité.

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans.woff2" | asset_url }}') format('woff2');
  font-display: swap;
  font-weight: 400;
}

5. Demandez aux fournisseurs une meilleure mise en cache

If a critical app ships static files with very short cache lifetimes, contact support with the exact URL from PageSpeed and ask whether they can improve cache headers or provide a lighter embed. Good vendors understand the request. If they cannot help and the widget is not producing revenue, remove or replace it.

6. Retestez les vues répétées et les performances mobiles

La politique de cache est la plus importante pour les visiteurs réguliers, mais les mêmes actifs tiers peuvent également nuire à la charge utile du réseau de premier chargement, au travail du thread principal et à l'INP. Retester avec le test de vitesse Shopify gratuit, puis comparez métriques de vitesse mobile et Score de vitesse Shopify par rapport à PageSpeed Insights.

Correction manuelle vs Thunder Fix

Ce qu'il ne faut pas faire

Ne recherchez pas un score de politique de cache parfait en brisant les outils de revenus. Les avis, les abonnements, les analyses, les contrôles de fraude et le chat peuvent être importants. La bonne question est de savoir si chaque actif tiers mérite sa place sur ce modèle précis. Supprimez ce qui ne le fait pas, contient ce qui le fait et gardez la page contrôlée par Shopify aussi simple que possible.

Pour un plan de nettoyage plus large, utilisez Corrections du script d'application , Corrections de vitesse GTM, et Conseils sur les ressources Shopify. Si vous souhaitez d'abord la référence automatisée, consultez Tarification Thunder puis nettoyez la pile des fournisseurs avec de meilleures données.

FAQ