Den enkleste måten å forminske Shopify CSS som er bygget ved hjelp av flytende variabler

Forminsk skript for Shopify Liquid CSS-filer

Vi bygget ut en ShopifyPlus nettsted for en klient som har en rekke innstillinger for stilene deres i selve temafilen. Selv om det er veldig fordelaktig for enkelt å justere stiler, betyr det at du ikke har statiske overlappende stilark (CSS) fil som du enkelt kan minify (reduser i størrelse). Noen ganger blir dette referert til som CSS kompresjon og komprimere din CSS.

Hva er CSS Minification?

Når du skriver til et stilark, definerer du stilen for et bestemt HTML-element én gang, og bruker den deretter om og om igjen på et hvilket som helst antall nettsider. Hvis jeg for eksempel ønsker å sette opp noen detaljer for hvordan skriftene mine så ut på nettstedet mitt, kan jeg organisere CSS-en min som følger:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Innenfor det stilarket tar hvert mellomrom, linjeretur og tabulator opp plass. Hvis jeg fjerner alle disse, kan jeg redusere størrelsen på det stilarket med over 40 % hvis CSS er forminsket! Resultatet er dette…

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

CSS-minifisering er et must hvis du vil øke hastigheten på nettstedet ditt, og det finnes en rekke verktøy på nettet som kan hjelpe deg med å komprimere CSS-filen din effektivt. Bare søk etter komprimere CSS-verktøy or minify CSS-verktøyet på nett.

Se for deg en stor CSS-fil og hvor mye plass som kan spares ved å forminske CSS-filen … den er vanligvis minimum 20 % og kan være oppover 40 % av budsjettet. Å ha en mindre CSS-side henvist til hele nettstedet ditt kan spare innlastingstider på hver enkelt side, kan øke nettstedets rangering, forbedre engasjementet ditt og til slutt forbedre konverteringsberegningene dine.

Ulempen er selvfølgelig at det er en enkelt linje i en komprimert CSS-fil, så de er utrolig vanskelige å feilsøke eller oppdatere.

Shopify CSS Liquid

Innenfor et Shopify-tema kan du bruke innstillinger som du enkelt kan oppdatere. Vi liker å gjøre dette mens vi tester og optimaliserer nettsteder slik at vi bare kan tilpasse temaet visuelt i stedet for å grave i koden. Så stilarket vårt er bygget med Liquid (Shopifys skriptspråk) og vi legger til variabler for å oppdatere stilarket. Det kan se slik ut:

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

Selv om dette fungerer bra, kan du ikke bare kopiere koden og bruke et nettbasert verktøy for å forminske den fordi skriptet deres ikke forstår de flytende taggene. Faktisk vil du fullstendig ødelegge CSS-en din hvis du prøver! Den gode nyheten er at fordi den er bygget med Liquid... kan du faktisk BRUKE scripting for å redusere utdataene!

Shopify CSS-minifikasjon i væske

Shopify lar deg enkelt skripte variabler og endre utdataene. I dette tilfellet kan vi faktisk pakke inn CSS-en vår i en innholdsvariabel og deretter manipulere den for å fjerne alle tabulatorer, linjeretur og mellomrom! Jeg fant denne koden i Shopify-fellesskap fra Tim (tairli) og det fungerte strålende!

{%- 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å, for eksemplet ovenfor, vil theme.css.liquid-siden min se slik ut:

{%- 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 jeg kjører koden, er utdata-CSS som følger, perfekt minifisert:

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