Outil d'optimisation CSS Shopify : que peut-on automatiser ?

Solution rapide avec Thunder

Si PageSpeed ​​Insights signale « Éliminer les ressources bloquant le rendu » ou « Réduire les CSS inutilisés », installez Thunder et testez à nouveau votre page d'accueil, une page de produit et une page de collection. Thunder améliore le chargement des ressources de la vitrine sans vous demander de coller des extraits de code fragiles dans chaque modèle.

CSS est rarement isolé. Le même magasin contient souvent du JavaScript lourd, des images de héros chargées paresseusement, du code d'application inutilisé et des retards de police. C'est pourquoi une application de vitesse plus large bat généralement un correctif étroit uniquement CSS. Voir Fonctionnalités de Thunder, le Guide de révision de la vitesse de l'application meilleur guide des applications rapides Shopify, et notre détaillé Guide d'optimisation CSS Shopify avant de choisir un outil.

Ce qu'un outil d'optimisation CSS Shopify peut automatiser

Report CSS bloquant le rendu

Feuilles de style dans le rendu du bloc d'en-tête du document par défaut. Un outil peut modifier la façon dont les CSS non critiques se chargent afin que le navigateur peigne le contenu au-dessus de la ligne de flottaison plus tôt. Cela aide généralement First Contentful Paint et peut améliorer le LCP lorsque le plus grand élément attend des styles.

Vérifications de minification et de compression

La minification supprime les espaces et les commentaires. La compression se produit au niveau du serveur ou de la couche CDN. Le CDN de Shopify gère beaucoup de travail de livraison, mais les ressources CSS et personnalisées injectées par l'application peuvent toujours être plus lourdes que nécessaire. Les outils peuvent détecter ces problèmes sans qu'un développeur ne lise chaque feuille de style.

Extraction CSS critique plus sûre

CSS critique signifie le petit ensemble de règles nécessaires pour la première fenêtre. Un bon outil traite les modèles différemment au lieu de supposer que la page d'accueil, la page produit et la page de collection partagent le même chemin critique. Cela est important car une galerie de produits, un en-tête collant et une interface utilisateur de filtre de collection nécessitent des règles différentes.

Priorisation des feuilles de style des applications

Les avis, ventes incitatives, abonnements, popups et constructeurs de pages injectent souvent du CSS à l'échelle mondiale. Un outil d'optimisation CSS peut retarder les styles des widgets situés sous la ligne de flottaison afin que le titre du produit, le prix, l'image du héros et la zone d'ajout au panier s'affichent en premier. Pour les problèmes spécifiques à l'application, lisez également comment supprimer les CSS et JavaScript inutilisés sur Shopify.

Ce qui ne devrait pas être entièrement automatisé

La promesse dangereuse est de "supprimer automatiquement tous les CSS inutilisés". La couverture Chrome peut montrer que 80 % d'une feuille de style est inutilisée sur une page, mais cela ne signifie pas qu'elle est inutilisée dans l'ensemble du magasin. Un tableau des tailles peut être masqué jusqu'à ce qu'on clique dessus. Un sélecteur de variantes peut apparaître uniquement pour certains produits. Un tiroir de panier peut ne pas exister jusqu'à ce qu'un acheteur ajoute un article. Un widget de fidélité peut se charger après consentement.

La suppression de CSS basée sur une seule analyse peut briser ces états. C'est pourquoi l'approche la plus sûre est superposée : automatisez d'abord le report et la priorité, divisez ensuite le modèle CSS évident et supprimez-le uniquement après le test. L'objectif est un magasin plus rapide, pas un rapport de couverture parfait qui brise votre page la plus rentable.

Correction manuelle du CSS étape par étape

1. Confirmez que CSS est le problème

Testez la même URL dans PageSpeed Insights, Chrome DevTools et le tableau de bord des performances Web de Shopify. Si la cascade affiche de gros fichiers CSS bloquant la première peinture, le travail CSS en vaut la peine. Si le temps de blocage total constitue le problème le plus important, commencez par Optimisation JavaScript à la place.

2. Différer les styles non critiques

Pour une feuille de style de thème soigneusement testée, les développeurs utilisent souvent ce modèle :

<link
  rel="stylesheet"
  href="{{ 'component-deferred.css' | asset_url }}"
  media="print"
  onload="this.media='all'"
>
<noscript>{{ 'component-deferred.css' | asset_url | stylesheet_tag }}</noscript>

N'appliquez pas ceci à chaque feuille de style à la fois. Commencez par la section CSS sous la ligne de flottaison, puis testez la navigation, les formulaires de produits, les variantes, le tiroir de panier et les menus mobiles.

3. Diviser le CSS spécifique au modèle

Si les filtres de collection n'existent que sur les pages de collection, chargez leur CSS uniquement sur les modèles de collection. Si les règles relatives aux supports produits s'appliquent uniquement aux pages produits, conservez-les là. Les thèmes Shopify peuvent charger conditionnellement des actifs en fonction d'un modèle :

{% if template.name == 'product' %}
  {{ 'product-media.css' | asset_url | stylesheet_tag }}
{% endif %}

4. Supprimez les restes de l'application en dernier

Après avoir désinstallé les applications, recherchez les anciens extraits de code, les ressources CSS et les balises de script. Il s’agit d’un travail à fort impact, mais il doit être revu. Pour le processus de nettoyage complet, utilisez le Guide des restes de l'application Shopify.

Correction manuelle vs Thunder Fix

Comment choisir un outil d'optimisation CSS Shopify

Choisissez un outil compatible avec Shopify, pas un minificateur générique. Il doit comprendre les intégrations d'applications, les thèmes Liquid, les modèles de page, les Core Web Vitals et la différence entre les tests en laboratoire et les données de terrain. Cela devrait également vous offrir un chemin de restauration propre, car des modifications CSS agressives peuvent briser les états visuels qui n'apparaissent que pendant les achats.

Si vous comparez des options, commencez par Guide de l'application d'optimisation de la vitesse des pages Shopify et le Présentation de l'application d'optimisation de vitesse Shopify. CSS matters, but the best result usually comes from treating CSS, images, fonts, and scripts as one loading system.

FAQ