Les grands thèmes Shopify utilisent le code CSS pour définir la mise en page et la conception de la page. Cependant, le code CSS peut devenir gonflé et affecter les performances de votre site Shopify. Comme vous le savez probablement, maximiser les performances de chargement des pages est essentiel pour l’engagement, la conversion et les revenus. Dans cet article, je vais discuter de quelques façons d’optimiser le CSS du thème Shopify, pour vous assurer que votre beau thème ne ralentit pas vos pages.
Comprendre le prétraitement CSS dans Shopify
Lorsque les navigateurs affichent votre site Web, ils s’appuient à la fois sur HTML et CSS. C’est la feuille de style CSS qui détermine le style et l’apparence de votre boutique en ligne Shopify. Cependant, le CSS standard ne réutilise pas les segments de code. Cela peut rendre le processus assez compliqué. Les processeurs CSS aident les développeurs à gérer ce problème.
Un préprocesseur CSS est un langage de script qui prend la syntaxe et la convertit en syntaxe CSS standard. Ce processus de conversion est essentiel, car les navigateurs ne peuvent afficher que le CSS standard. Un exemple notable et populaire est un préprocesseur appelé Feuilles de style systématiquement impressionnantes (SASS), qui vous permet également de créer des propriétés personnalisées.
Shopify fournit un compilateur intégré, appelé CSSC, qui convertit la syntaxe SASS. Voici les principaux avantages de ce compilateur:
- Comprend des variables—Qui vous permet de stocker des ensembles de valeurs spécifiques, que vous pouvez réutiliser dans tous vos fichiers. Les variables peuvent vous aider à réduire considérablement le temps consacré aux tâches de codage répétitives.
- Prend en charge l’imbrication—Ce qui vous permet de cibler des éléments spécifiques de votre code. Cela peut vous aider à écrire du code plus efficacement.
Comment réduire le CSS sur votre thème Shopify
La minification est un processus qui supprime les données redondantes ou inutiles d’un site Web. Idéalement, le processus ne devrait pas affecter la façon dont la ressource minifiée est gérée par les navigateurs. Vous pouvez, par exemple, utiliser la minification pour supprimer le code inutilisé, supprimer les commentaires et la mise en forme du code et raccourcir les noms de fonctions.
Le but de la minification est de réduire la taille d’un site Web, ce qui devrait entraîner des temps de chargement plus rapides. Des temps de chargement rapides se traduisent souvent par de meilleures performances et une meilleure vitesse du site Web. Vous pouvez appliquer la minification à HTML, CSS et JS.
Voici une procédure pas à pas rapide sur la façon de localiser votre fichier CSS dans Shopify:
- Aller à la Les atouts dossier
- Localisez les fichiers CSS
- Dans votre boutique Shopify, accédez à la Canal de vente languette
- Choisir la Boutique en ligne option
- Dans le menu déroulant, choisissez le Actions option
- Choisir Modifier le code
Vous devriez maintenant voir vos fichiers CSS. Notez que tous les fichiers avec les extensions .sccs. ou alors .scss.liquid étaient déjà minifiés. Fichiers avec les extensions .css ou alors .css.liquid n’ont pas été minifiés.
Voici une procédure pas à pas rapide sur la façon de réduire votre fichier CSS dans Shopify:
- Ouvrez un fichier CSS en cliquant dessus. Par exemple, le fichier appelé css.test
- Renommez le fichier en custom.scss.test
- Localisez l’endroit où le fichier est chargé
- Changer css à custom.scss
Les étapes ci-dessus indiquent à Shopify de compresser votre fichier CSS avant qu’il ne soit diffusé sur votre site Web.
CSS dans Shopify: conseils d’optimisation
Remplacement des images par des effets CSS
Vous n’êtes pas obligé d’utiliser des images d’arrière-plan lors de la création d’effets. Au lieu, vous pouvez utiliser des effets d’image CSS pour créer des bordures, des dégradés, des ombres, des bords arrondis et même des formes géométriques. Les effets CSS nécessitent généralement moins de bande passante que les images et peuvent être plus facilement modifiés ou animés plus tard.
Par exemple, vous pouvez vous abstenir d’utiliser le @importer règle, qui permet à un fichier CSS d’être inclus dans un autre. Voici un exemple de base que vous ne devez pas suivre:
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");
Au lieu de cela, le @contribution les règles doivent être imbriquées. Cela aide le navigateur à analyser et à charger tous les fichiers d’une série.
L’exemple ci-dessous garantit que
Réduire la longueur du code CSS
Les feuilles de style CSS prennent du temps à être consultées. Pour garantir l’efficacité, vous devez vous assurer que votre code reste à une longueur minimale. Il existe de nombreuses façons de procéder. Par exemple, vous pouvez éviter d’utiliser des styles HTML en ligne et organiser votre code CSS en petits fichiers. Une fois vos fichiers organisés, vous pouvez facilement localiser les fonctionnalités et les supprimer ou les modifier selon vos besoins. Vous pouvez également essayer UnCss, un outil dédié à vous aider à supprimer le code redondant.
Techniques de mise en page modernes
La manière traditionnelle de définir les mises en page consiste à utiliser la propriété CSS float pour modifier et concevoir le remplissage et les marges de la mise en page de votre site. Cependant, cette technique a ses problèmes et est devenue obsolète. Aujourd’hui, vous pouvez utiliser CSS Flexbox et CSS Grids pour la conception de la mise en page. Flexbox peut vous aider à concevoir des mises en page unidimensionnelles tandis que les grilles sont principalement utilisées pour des mises en page en deux dimensions. Ces deux techniques nécessitent beaucoup moins de code et sont relativement simples à utiliser.
Conclusion
Dans cet article, j’ai discuté de plusieurs façons d’optimiser le CSS dans votre thème Shopify, pour améliorer les performances de votre site Shopify:
- Utiliser le prétraitement CSS pour permettre un traitement CSS plus rapide côté client
- Utilisez la fonction de minification CSS intégrée de Shopify
- Remplacer les images par des effets CSS
- Réduisez la longueur du code CSS pour réduire la taille globale du fichier
- Utilisez des techniques CSS modernes telles que CSS Flexbox et CSS Grids
J’espère que cela vous aidera à créer de beaux thèmes Shopify qui se chargent rapidement et satisfont les utilisateurs.
