Nejjednodušší způsob, jak minimalizovat svůj styl Shopify CSS, který je vytvořen pomocí tekutých proměnných
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}