Den nemmeste måde at formindske din Shopify CSS, der er bygget ved hjælp af flydende variable

Formindsk script til Shopify Liquid CSS-filer

Vi byggede ud en Shopify Plus websted for en klient, der har en række indstillinger for deres stilarter i den faktiske temafil. Selvom det er virkelig fordelagtigt for nemt at justere stilarter, betyder det, at du ikke har statiske cascading style sheets (CSS) fil, som du nemt kan minify (reducer i størrelse). Nogle gange omtales dette som CSS kompression og komprimere din CSS.

Hvad er CSS-minifikation?

Når du skriver til et typografiark, definerer du typografien for et bestemt HTML-element én gang og bruger den derefter igen og igen på et vilkårligt antal websider. Hvis jeg f.eks. ville konfigurere nogle detaljer for, hvordan mine skrifttyper så ud på mit websted, kunne jeg organisere min CSS som følger:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Inden for det typografiark optager hvert mellemrum, linjeretur og tabulator plads. Hvis jeg fjerner alle disse, kan jeg reducere størrelsen af ​​det stylesheet med over 40%, hvis CSS'en er formindsket! Resultatet er dette…

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

CSS minifikation er et must, hvis du vil fremskynde dit websted, og der er en række værktøjer online, som kan hjælpe dig med at komprimere din CSS-fil effektivt. Bare søg efter komprimere CSS-værktøj or minify CSS-værktøj online.

Forestil dig en stor CSS-fil, og hvor meget plads der kan spares ved at formindske dens CSS... den er typisk minimum 20 % og kan være op mod 40 % af deres budget. At have en mindre CSS-side henvist på hele dit websted kan spare indlæsningstider på hver enkelt side, kan øge dit websteds placering, forbedre dit engagement og i sidste ende forbedre dine konverteringsmetrics.

Ulempen er selvfølgelig, at der er en enkelt linje i en komprimeret CSS-fil, så de er utroligt svære at fejlfinde eller opdatere.

Shopify CSS Liquid

Inden for et Shopify-tema kan du anvende indstillinger, som du nemt kan opdatere. Vi kan godt lide at gøre dette, mens vi tester og optimerer websteder, så vi bare kan tilpasse temaet visuelt i stedet for at grave i koden. Så vores stylesheet er bygget med Liquid (Shopifys scriptsprog), og vi tilføjer variabler for at opdatere typografiarket. Det kan se sådan ud:

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

Selvom dette fungerer godt, kan du ikke bare kopiere koden og bruge et onlineværktøj til at formindske den, fordi deres script ikke forstår de flydende tags. Faktisk vil du totalt ødelægge din CSS, hvis du prøver! Den gode nyhed er, at fordi den er bygget med Liquid... kan du faktisk BRUGE scripting til at formindske outputtet!

Shopify CSS-minifikation i væske

Shopify giver dig mulighed for nemt at scripte variabler og ændre outputtet. I dette tilfælde kan vi faktisk pakke vores CSS ind i en indholdsvariabel og derefter manipulere den for at fjerne alle tabulatorer, linjeretur og mellemrum! Jeg fandt denne kode i Shopify-fællesskabet fra Tim (tairli) og det fungerede glimrende!

{%- 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 mit eksempel ovenfor ville min theme.css.liquid-side se sådan ud:

{%- 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 kører koden, er output-CSS som følger, perfekt minificeret:

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