Shopify Évitez document.write : corrigez les avertissements de script hérités

Pourquoi document.write nuit aux performances de Shopify

document.write() est une ancienne méthode JavaScript qui écrit le balisage directement dans la page pendant que le navigateur analyse le HTML. Cela avait du sens dans les anciens extraits de publicité et d’analyse, mais cela est hostile aux performances des vitrines modernes. Lorsque le navigateur rencontre un script de blocage qui appelle document.write(), il faudra peut-être suspendre l'analyse, récupérer plus de JavaScript, injecter un nouveau balisage et continuer seulement une fois ce travail terminé.

La documentation Lighthouse de Chrome prévient que document.write() peut retarder considérablement le contenu visible des pages sur des connexions lentes, et Chrome a bloqué certaines utilisations problématiques dans certaines conditions de réseau. Sur Shopify, les acheteurs mobiles lents sont exactement ceux que vous ne pouvez pas vous permettre de punir. Si l'ancien script apparaît avant le héros, le titre du produit, le prix ou le bouton d'ajout au panier, cela peut nuire Shopify LCP, INPet Temps de blocage total.

L'avertissement chevauche également avec réduit le temps d'exécution de JavaScript, JavaScript hérité, et JavaScript tiers bloquant Shopify. En pratique, la solution n’est généralement pas un paramètre magique. Vous devez identifier quel extrait de code écrit sur la page, décider s'il est toujours nécessaire et le remplacer par un modèle de chargement plus sûr.

D'où vient document.write dans les thèmes Shopify

Commencez par votre code de thème. Rechercher thème.liquide, extraits, sections et ressources pour document.écrire. Les anciens thèmes l'utilisent parfois pour les badges, les sceaux de confiance, les trackers d'affiliation, les popups, les intégrations sociales, les widgets de localisation de magasin ou les anciennes solutions de secours du navigateur. Si vous voyez un script collé avant ou près du haut de <corps>, inspectez-le d'abord.

Vérifiez ensuite les restes d'applications désinstallées. Les applications Shopify peuvent laisser derrière elles des extraits de code, des balises de script ou des blocs d'extension d'application de thème. Un magasin peut désinstaller l'application mais conserver l'ancien chargeur dans le thème. Cela crée un double problème : le script nuit aux performances et personne n'en est plus propriétaire. Le workflow de nettoyage dans supprime les CSS et JavaScript inutilisés s'applique ici.

Enfin, inspectez Google Tag Manager et les balises marketing. Certains fournisseurs de publicités fournissent encore d'anciens extraits qui appellent document.write() pour insérer une dépendance iframe, pixel de suivi ou script. Si GTM fait partie du problème, utilisez le guide dédié sur correction du ralentissement de GTM par Shopify avant de modifier le suivi critique pour les revenus.

Manuel étape par étape : correction d'éviter document.write sur Shopify

1. Confirmez la source exacte du script

Ne supprimez pas les scripts en devinant. Dans PageSpeed ​​Insights, développez le diagnostic et notez l'URL du script. Dans Chrome DevTools, ouvrez le panneau Sources ou recherchez dans tous les fichiers chargés document.écrire. Si l'URL appartient à votre thème, corrigez le thème. S'il appartient à un fournisseur d'applications ou de balises, recherchez la version asynchrone actuelle de l'extrait.

2. Remplacez les écritures statiques par Liquid ou HTML

If the code writes markup that is always present, it should not be JavaScript at all. Render it in Liquid so the browser receives stable HTML from the server.

<!-- Avoid this old pattern -->
<script>
  document.write('<div class="trust-badge">Livraison gratuite à partir de 75$</div>');
</script>

<!-- Use normal theme markup instead -->
<div class="trust-badge">
  Livraison gratuite à partir de 75$
</div>

This is safer for layout stability because the element exists from the first HTML response. It also makes the section easier to manage in Shopify's theme editor.

3. Remplacer les écritures dynamiques par l'insertion DOM

Si JavaScript a vraiment besoin de créer un balisage après le chargement, utilisez les API DOM. Ils sont explicites, plus faciles à contrôler et n’interrompent pas l’analyse HTML de la même manière qu’une écriture au moment de l’analyseur.

const slot = document.querySelector('[data-promo-slot]');

if (slot) {
  const badge = document.createElement('div');
  badge.className = 'promo-badge';
  badge.textContent = 'Today only: free shipping over $75';
  slot.appendChild(badge);
}

4. Remplacez les écritures de script par la création de script asynchrone

De nombreux extraits de code hérités utilisent document.write() pour charger un autre script. Remplacez-le par un chargeur asynchrone et placez-le après le contenu critique ou derrière l'intention de l'utilisateur lorsque le script n'est pas nécessaire immédiatement.

function loadVendorScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);
}

window.addEventListener('load', () => {
  loadVendorScript('https://vendor.example.com/widget.js');
});

5. Déplacer les fournisseurs non critiques plus tard

Les widgets de révision, les outils de chat, les cartes thermiques, les enquêtes, les popups, les badges d'affiliation et certains outils de personnalisation doivent rarement être exécutés avant la première fenêtre d'affichage. Retardez-les jusqu'au chargement, au temps d'inactivité, au défilement, au clic ou à la visibilité de la section. Pour les vidéos et les cartes, utilisez une façade au lieu de charger immédiatement l'iframe complète.

const schedule = window.requestIdleCallback || ((callback) => setTimeout(callback, 1200));

schedule(() => {
  loadVendorScript('https://vendor.example.com/non-critical.js');
}, { timeout: 2500 });

6. Testez le paiement et l'attribution avant de publier

Soyez prudent avec le consentement, les analyses, les publicités, les widgets d'abonnement, la logique d'ajout au panier et le transfert de paiement. Une page plus rapide qui perd le suivi des conversions ou casse la forme d'un produit n'est pas une victoire. Testez la page d'accueil, la page produit, la page de collection, le tiroir du panier, la redirection de paiement et tous les événements marketing après le changement.

Correction manuelle vs Thunder Fix

Comment vérifier que l'avertissement est corrigé

Retestez la même URL dans PageSpeed Insights et le test de vitesse Shopify gratuit. Vérifiez si l'avertissement disparaît ou si la source du script change. Enregistrez ensuite une trace des performances mobiles et confirmez que le script existant ne bloque plus l'analyse précoce ni la création de tâches longues.

Surveillez également le flux commercial. Passez une commande test si nécessaire. Confirmez que l'ajout au panier fonctionne, que le consentement se déclenche toujours, que les événements d'analyse apparaissent toujours et que les pixels publicitaires respectent toujours les paramètres de confidentialité. Pour un chemin de nettoyage complet, suivez les guide complet d'optimisation de la vitesse Shopify, comparer l'automatisation dans le meilleur guide des applications rapides Shopify, ou utilisez optimisation de vitesse professionnelle pour un nettoyage de thème risqué.

FAQ