De eenvoudigste manier om uw Shopify CSS te verkleinen die is gebouwd met behulp van vloeibare variabelen

Verklein script voor Shopify Liquid CSS-bestanden

We bouwden een Shopify Plus site voor een klant die een aantal instellingen voor hun stijlen heeft in het eigenlijke themabestand. Hoewel dat erg handig is om stijlen gemakkelijk aan te passen, betekent dit dat je geen statische trapsgewijze stylesheets hebt (CSS) bestand dat u gemakkelijk kunt kleineren (verkleinen). Soms wordt dit CSS genoemd samendrukking en comprimeren uw CSS.

Wat is CSS-minificatie?

Wanneer u naar een stylesheet schrijft, definieert u de stijl voor een bepaald HTML-element één keer en gebruikt u deze vervolgens steeds opnieuw op een willekeurig aantal webpagina's. Als ik bijvoorbeeld wat details wil instellen voor hoe mijn lettertypen eruitzien op mijn site, zou ik mijn CSS als volgt kunnen organiseren:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Binnen dat stylesheet nemen elke spatie, regelterugloop en tab ruimte in beslag. Als ik die allemaal verwijder, kan ik de grootte van die stylesheet met meer dan 40% verkleinen als de CSS wordt verkleind! Het resultaat is dit…

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

CSS-minificatie is een must als u uw site wilt versnellen en er zijn een aantal tools online die u kunnen helpen uw CSS-bestand efficiënt te comprimeren. Zoek gewoon naar comprimeer CSS-tool or verklein CSS-tool online.

Stel je een groot CSS-bestand voor en hoeveel ruimte kan worden bespaard door de CSS te verkleinen ... het is meestal minimaal 20% en kan oplopen tot 40% van hun budget. Als er op uw hele site naar een kleinere CSS-pagina wordt verwezen, kunt u laadtijden op elke afzonderlijke pagina besparen, de positie van uw site verhogen, uw betrokkenheid vergroten en uiteindelijk uw conversiestatistieken verbeteren.

Het nadeel is natuurlijk dat er een enkele regel in een gecomprimeerd CSS-bestand is, dus het is ongelooflijk moeilijk om problemen op te lossen of bij te werken.

Shopify CSS Liquid

Binnen een Shopify-thema kun je instellingen toepassen die je eenvoudig kunt bijwerken. We doen dit graag terwijl we sites testen en optimaliseren, zodat we het thema visueel kunnen aanpassen in plaats van in de code te graven. Onze Stylesheet is dus gebouwd met Liquid (de scripttaal van Shopify) en we voegen variabelen toe om de Stylesheet bij te werken. Het kan er als volgt uitzien:

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

Hoewel dit goed werkt, kun je de code niet simpelweg kopiëren en een online tool gebruiken om deze te verkleinen, omdat hun script de vloeibare tags niet begrijpt. In feite vernietig je je CSS volledig als je het probeert! Het goede nieuws is dat, omdat het is gebouwd met Liquid... je zelfs scripting kunt GEBRUIKEN om de uitvoer te verkleinen!

Shopify CSS-verkleining in vloeistof

Met Shopify kunt u eenvoudig variabelen scripten en de uitvoer wijzigen. In dit geval kunnen we onze CSS in een inhoudsvariabele wikkelen en deze vervolgens manipuleren om alle tabs, regelterugloop en spaties te verwijderen! Ik vond deze code in de Shopify-community van Tim (taar) en het werkte uitstekend!

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

Dus voor mijn voorbeeld hierboven zou mijn theme.css.liquid-pagina er als volgt uitzien:

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

Wanneer ik de code uitvoer, is de output-CSS als volgt, perfect verkleind:

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