Shopify réduit le JavaScript inutilisé : corrige le gonflement du code

Ce que PageSpeed signale réellement

Lighthouse signale le JavaScript inutilisé lorsqu'un script contient une quantité significative de code qui n'est pas utilisé lors du chargement initial de la page. Les conseils de Chrome orientent les développeurs vers DevTools Coverage pour une enquête ligne par ligne. Sur Shopify, cela expose souvent un grand ensemble de thèmes qui alimente chaque modèle, ainsi que des scripts d'application pour les avis, les popups, les abonnements, la personnalisation, le chat, les analyses et les recommandations de produits.

L'avertissement est facile à mal comprendre. Un script de galerie de produits peut être inutilisé sur une page de collection mais obligatoire sur une page de produit. Un script contextuel peut être inutilisé pendant les premières secondes mais nécessaire après un certain temps. Un script de suivi peut ne pas affecter la mise en page, mais consommer du temps sur le réseau et sur le thread principal. Le correctif n’est pas une suppression aveugle. Le correctif charge moins de code plus tôt.

JavaScript inutilisé se connecte directement à Optimisation Shopify INP, Temps d'exécution JavaScript, tâches longues du thread principal, et Temps de blocage total. Même si les octets sont mis en cache, le navigateur peut toujours analyser, compiler et exécuter du code avant que l'acheteur puisse appuyer sur un bouton.

Sources Shopify courantes de JavaScript inutilisé

Un ensemble de thèmes pour chaque modèle

De nombreux thèmes expédient un seul Fichier thème.js comprenant des carrousels, des accordéons, des supports produits, une recherche prédictive, une localisation, des tiroirs de chariot, des en-têtes collants et des animations. C'est pratique pour le développement mais coûteux pour le premier chargement lorsque seul un petit sous-ensemble est nécessaire.

Extraits d'application restants après la désinstallation

Les applications peuvent laisser des extraits de code, des balises de script, des blocs d'extension d'application de thème, des champs méta et du code global après la désinstallation. Si le code JavaScript d'une application supprimée apparaît toujours dans DevTools, considérez cela comme un nettoyage à faible risque après le test. Cela chevauche nettoyage CSS et JavaScript inutilisé.

Pixels et tags chargés trop tôt

GTM, Meta Pixel, TikTok Pixel, Pinterest Tag et les outils d'attribution peuvent tous ajouter du JavaScript inutilisé lors du premier chargement. Gardez le suivi critique pour votre entreprise, mais ne chargez pas chaque expérience, balise héritée et pixel en double sur chaque page.

Manuel étape par étape : réduire le JavaScript inutilisé sur Shopify

1. Mesurez par modèle, pas seulement par la page d'accueil

Testez séparément la page d'accueil, la page produit, la page de collection, le panier et les pages de destination à fort trafic. Un script inutilisé sur la page d’accueil peut s’avérer indispensable sur les pages produits. Utilisez la couverture Chrome DevTools et le test de vitesse Shopify gratuit pour comparer les modèles.

2. Scripts de thème d'inventaire

Dans un thème en double, la recherche de fichiers de mise en page et de section pour JavaScript inclut. Recherchez les fichiers globaux qui peuvent être chargés de manière conditionnelle uniquement en cas de besoin.

<!-- Before: loads product media code everywhere -->
{{ 'product-media.js' | asset_url | script_tag }}

<!-- Better: load only on product templates -->
{% if template.name == 'product' %}
  {{ 'product-media.js' | asset_url | script_tag }}
{% endif %}

3. Différer le code qui n'est pas nécessaire pour le premier rendu

JavaScript qui alimente les avis, les recommandations, le chat, les commandes vidéo, les popups de newsletter ou les sections en dessous de la ligne de flottaison n'a souvent pas besoin de bloquer le premier écran. Utiliser différé pour les scripts locaux qui n'ont pas besoin d'être exécutés avant la fin de l'analyse HTML.

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

4. Initialisation paresseuse des fonctionnalités sous la ligne de flottaison

Certains codes doivent éventuellement se charger, mais pas immédiatement. Initialisez les curseurs, les vidéos, les widgets de recommandation ou les tableaux de comparaison lorsque leur section s'approche de la fenêtre d'affichage.

const sections = document.querySelectorAll('[data-lazy-module]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (!entry.isIntersecting) return;

    const section = entry.target;
    const moduleName = section.dataset.lazyModule;
    const module = await import('/assets/' + moduleName + '.js');
    module.init(section);
    observer.unobserve(section);
  });
}, { rootMargin: '300px' });

sections.forEach((section) => observer.observe(section));

5. Supprimez soigneusement les restes de l'application

Vérifiez les fichiers de mise en page de thème pour les anciennes inclusions, puis vérifiez les intégrations de l'application Shopify. Désactivez un suspect à la fois sur un thème en double et testez l'ajout au panier, la sélection de variantes, le tiroir de panier, le suivi et le transfert de paiement. Pour les magasins contenant beaucoup d'applications, lisez le Guide d'optimisation de la vitesse de l'application Shopify avant de couper le code.

6. Retestez les actions des utilisateurs, pas seulement les scores

Après chaque nettoyage, testez le parcours d'achat principal sur mobile. Appuyez sur les sélecteurs de variantes, les tableaux de tailles, les accordéons, l'ajout rapide, le tiroir du panier, les boîtes de réduction, les options de ramassage et les boutons de paiement. Un rapport PageSpeed ​​plus propre n'est pas une victoire s'il brise le comportement en matière de revenus.

Correction manuelle vs Thunder Fix

Que corriger après un JavaScript inutilisé

Si le nettoyage JavaScript aide mais que la page échoue toujours avec PageSpeed, continuez avec travail du fil principal, façades tierces, Correctifs JavaScript tiers, et le guide complet d'optimisation de la vitesse Shopify. JavaScript constitue généralement une couche dans une pile plus grande qui comprend des images, du CSS, des polices, la stabilité de la mise en page et la gouvernance des applications.

Pour les magasins qui ne peuvent pas se permettre une semaine de chirurgie thématique manuelle, Thunder vous offre un chemin plus rapide vers une base de référence plus propre. Examen Tarification Thunder, installez-le sur le magasin et conservez la suppression manuelle du code pour les anciens extraits et la logique spécifique au modèle qu'une application ne devrait pas deviner.

FAQ