Le moyen le plus simple de minifier votre CSS Shopify construit à l'aide de variables liquides

Minify Script pour Shopify Liquid CSS Files

Nous avons construit un Shopify Plus site pour un client qui a un certain nombre de paramètres pour ses styles dans le fichier de thème réel. Bien que ce soit vraiment avantageux pour ajuster facilement les styles, cela signifie que vous n'avez pas de feuilles de style en cascade statiques (CSS) fichier que vous pouvez facilement rapetisser (taille réduite). Parfois, cela est appelé CSS compression et compression votre CSS.

Qu'est-ce que la minification CSS ?

Lorsque vous écrivez dans une feuille de style, vous définissez une fois le style d'un élément HTML particulier, puis vous l'utilisez encore et encore sur un certain nombre de pages Web. Par exemple, si je voulais configurer certaines spécificités pour l'apparence de mes polices sur mon site, je pourrais organiser mon CSS comme suit :

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dans cette feuille de style, chaque espace, retour à la ligne et tabulation occupe de l'espace. Si je supprime tout cela, je peux réduire la taille de cette feuille de style de plus de 40 % si le CSS est minifié ! Le résultat est ceci…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS minification est indispensable si vous souhaitez accélérer votre site et il existe un certain nombre d'outils en ligne qui peuvent vous aider à compresser efficacement votre fichier CSS. Cherchez simplement outil de compression CSS or outil minifier CSS en ligne.

Imaginez un gros fichier CSS et combien d'espace peut être économisé en minimisant son CSS… c'est généralement un minimum de 20 % et peut représenter plus de 40 % de leur budget. Le fait d'avoir une page CSS plus petite référencée sur votre site peut réduire les temps de chargement sur chaque page, augmenter le classement de votre site, améliorer votre engagement et, en fin de compte, améliorer vos mesures de conversion.

L'inconvénient, bien sûr, est qu'il n'y a qu'une seule ligne dans un fichier CSS compressé, il est donc incroyablement difficile à dépanner ou à mettre à jour.

Liquide CSS Shopify

Dans un thème Shopify, vous pouvez appliquer des paramètres que vous pouvez facilement mettre à jour. Nous aimons faire cela pendant que nous testons et optimisons les sites afin que nous puissions simplement personnaliser le thème visuellement plutôt que de creuser dans le code. Ainsi, notre feuille de style est construite avec Liquid (le langage de script de Shopify) et nous ajoutons des variables pour mettre à jour la feuille de style. Cela peut ressembler à ceci :

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

Bien que cela fonctionne bien, vous ne pouvez pas simplement copier le code et utiliser un outil en ligne pour le réduire car leur script ne comprend pas les balises liquides. En fait, vous allez totalement détruire votre CSS si vous essayez ! La bonne nouvelle est que parce qu'il est construit avec Liquid… vous pouvez réellement UTILISER des scripts pour réduire la sortie !

Minification CSS Shopify en liquide

Shopify vous permet de scripter facilement des variables et de modifier la sortie. Dans ce cas, nous pouvons réellement encapsuler notre CSS dans une variable de contenu, puis la manipuler pour supprimer tous les onglets, les retours à la ligne et les espaces ! J'ai trouvé ce code dans le Communauté Shopify À partir de Tim (tairli) et ça a marché à merveille !

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Ainsi, pour mon exemple ci-dessus, ma page theme.css.liquid ressemblerait à ceci :

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Lorsque j'exécute le code, le CSS de sortie est le suivant, parfaitement minifié :

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}