Nejjednodušší způsob, jak minimalizovat svůj styl Shopify CSS, který je vytvořen pomocí tekutých proměnných

Minifikační skript pro soubory Shopify Liquid CSS

Vybudovali jsme a ShopifyPlus web pro klienta, který má řadu nastavení pro své styly ve skutečném souboru motivu. I když je to opravdu výhodné pro snadnou úpravu stylů, znamená to, že nemáte statické kaskádové styly (CSS) soubor, který můžete snadno minify (zmenšit velikost). Někdy se tomu říká CSS komprese a stlačující vaše CSS.

Co je to minimalizace CSS?

Když zapisujete do šablony stylů, definujete styl pro konkrétní prvek HTML jednou a poté jej znovu a znovu používáte na libovolném počtu webových stránek. Pokud bych například chtěl nastavit nějaká specifika pro to, jak moje písma vypadala na mém webu, mohl bych své CSS uspořádat takto:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

V této šabloně stylů zabírá místo každá mezera, návrat řádku a tabulátor. Pokud je všechny odstraním, mohu zmenšit velikost této šablony stylů o více než 40 %, pokud je CSS minimalizováno! Výsledkem je toto…

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

Minifikaci CSS je nutností, pokud chcete zrychlit svůj web, a existuje řada online nástrojů, které vám pomohou efektivně komprimovat váš soubor CSS. Stačí hledat komprimační nástroj CSS or nástroj minify CSS online.

Představte si velký soubor CSS a kolik místa lze ušetřit minifikací jeho CSS… obvykle je to minimálně 20 % a může to být až 40 % jejich rozpočtu. Menší stránka CSS odkazovaná na váš web může ušetřit dobu načítání každé jednotlivé stránky, může zvýšit hodnocení vašeho webu, zlepšit zapojení a v konečném důsledku zlepšit metriky konverzí.

Nevýhodou samozřejmě je, že v komprimovaném souboru CSS je jeden řádek, takže je neuvěřitelně obtížné je řešit nebo aktualizovat.

Shopify CSS Liquid

V rámci motivu Shopify můžete použít nastavení, která můžete snadno aktualizovat. Rádi to děláme, když testujeme a optimalizujeme weby, abychom si mohli téma pouze vizuálně přizpůsobit, než abychom se vrtali v kódu. Takže naše šablona stylů je vytvořena pomocí Liquid (skriptovací jazyk Shopify) a přidáváme proměnné pro aktualizaci šablony stylů. Může to vypadat takto:

{%- 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 }}
}

I když to funguje dobře, nemůžete jednoduše zkopírovat kód a použít online nástroj k jeho minifikaci, protože jejich skript nerozumí tekutým značkám. Ve skutečnosti, pokud se o to pokusíte, zcela zničíte své CSS! Skvělou zprávou je, že protože je vytvořen s Liquidem... můžete skutečně POUŽÍVAT skriptování k minimalizaci výstupu!

Shopify CSS Minification in Liquid

Shopify vám umožňuje snadno skriptovat proměnné a upravovat výstup. V tomto případě můžeme skutečně zabalit naše CSS do proměnné obsahu a poté s ní manipulovat, abychom odstranili všechny tabulátory, návraty řádků a mezery! Tento kód jsem našel v Komunita Shopify od Tim (tairli) a fungovalo to skvěle!

{%- 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  }}

Takže pro můj příklad výše by moje stránka theme.css.liquid vypadala takto:

{%- 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  }}

Když spustím kód, výstupní CSS je následující, dokonale minimalizované:

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