Det enklaste sättet att förminska din Shopify CSS som är byggd med flytande variabler

Minifiera skript för Shopify Liquid CSS-filer

Vi byggde ut en ShopifyPlus webbplats för en klient som har ett antal inställningar för sina stilar i själva temafilen. Även om det är väldigt fördelaktigt för att enkelt justera stilar, betyder det att du inte har statiska överlappande stilark (CSS) fil som du enkelt kan minify (minska i storlek). Ibland kallas detta för CSS kompression och komprimera din CSS.

Vad är CSS-minifiering?

När du skriver till en stilmall definierar du stilen för ett visst HTML-element en gång och använder den sedan om och om igen på valfritt antal webbsidor. Om jag till exempel vill ställa in några detaljer för hur mina typsnitt såg ut på min webbplats, kan jag organisera min CSS enligt följande:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Inom den stilmallen tar varje blanksteg, radretur och tabb plats. Om jag tar bort alla dessa kan jag minska storleken på den stilmallen med över 40 % om CSS minifieras! Resultatet är detta…

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

CSS-minifiering är ett måste om du vill snabba upp din webbplats och det finns ett antal verktyg online som kan hjälpa dig att komprimera din CSS-fil effektivt. Sök bara efter komprimera CSS-verktyg or förminska CSS-verktyget uppkopplad.

Föreställ dig en stor CSS-fil och hur mycket utrymme som kan sparas genom att förminska dess CSS... den är vanligtvis minst 20 % och kan vara uppemot 40 % av deras budget. Att ha en mindre CSS-sida hänvisad till hela din webbplats kan spara laddningstider på varje enskild sida, kan öka din webbplats ranking, förbättra ditt engagemang och i slutändan förbättra dina konverteringsstatistik.

Nackdelen är förstås att det finns en enda rad i en komprimerad CSS-fil så de är otroligt svåra att felsöka eller uppdatera.

Shopify CSS Liquid

Inom ett Shopify-tema kan du använda inställningar som du enkelt kan uppdatera. Vi gillar att göra detta när vi testar och optimerar webbplatser så att vi bara kan anpassa temat visuellt istället för att gräva i koden. Så vår stilmall är byggd med Liquid (Shopifys skriptspråk) och vi lägger till variabler för att uppdatera stilarket. Det kan se ut så här:

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

Även om detta fungerar bra, kan du inte bara kopiera koden och använda ett onlineverktyg för att förminska den eftersom deras skript inte förstår de flytande taggarna. Faktum är att du helt förstör din CSS om du försöker! Den stora nyheten är att eftersom den är byggd med Liquid... så kan du faktiskt ANVÄNDA skript för att förminska utdata!

Shopify CSS-minifiering i vätska

Shopify låter dig enkelt skripta variabler och ändra utdata. I det här fallet kan vi faktiskt slå in vår CSS i en innehållsvariabel och sedan manipulera den för att ta bort alla flikar, radreturer och mellanslag! Jag hittade den här koden i Shopify Community från Tim (tairli) och det fungerade strålande!

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

Så för mitt exempel ovan skulle min theme.css.liquid-sida se ut så här:

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

När jag kör koden är utdata-CSS som följer, perfekt förminskad:

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