Ecommerce a RetailSich Marketing

Deen einfachste Wee fir Är Shopify CSS ze minifizéieren, dee mat flëssege Variablen gebaut ass

Mir hunn eng ausgebaut ShopifyPlus Site fir e Client deen eng Rei Astellunge fir hir Stiler an der aktueller Themadatei huet. Och wann dat wierklech avantagéis ass fir d'Stiler einfach unzepassen, heescht et datt Dir keng statesch Kaskadesstilblieder hutt (CSS) Datei déi Dir einfach kënnt mini (an der Gréisst reduzéieren). Heiansdo gëtt dëst als CSS bezeechent Kompromiss an kompriméieren Är CSS.

Wat ass CSS Minification?

Wann Dir op e Stylesheet schreift, definéiert Dir de Stil fir e bestëmmten HTML Element eemol, a benotzt se dann ëmmer erëm op all Zuel vu Websäiten. Zum Beispill, wann ech e puer Spezifizitéiten opstelle wollt fir wéi meng Schrëften op menger Säit ausgesinn hunn, kéint ech meng CSS wéi follegt organiséieren:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Bannent deem Stylesheet hëlt all Raum, Zeil zréck, a Tab Plaz op. Wann ech all déi ewechhuelen, kann ech d'Gréisst vun deem Stylesheet ëm iwwer 40% reduzéieren wann d'CSS minifizéiert ass! D'Resultat ass dëst…

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

D'Ännerung am CSS ass e Must wann Dir Äre Site wëllt beschleunegen an et sinn eng Rei Tools online déi Iech hëllefe kënnen Är CSS Datei effizient ze kompriméieren. Sich einfach no kompriméieren CSS Tool or minify CSS Tool online.

Stellt Iech eng grouss CSS Datei vir a wéi vill Plaz ka gespuert ginn andeems Dir seng CSS minifizéiert ... et ass typesch e Minimum vun 20% a ka bis zu 40% vun hirem Budget sinn. Eng méi kleng CSS Säit ze hunn, déi op Ärem ganze Site bezeechent gëtt, kann Laaschtzäiten op all eenzel Säit spueren, kann de Ranking vun Ärem Site erhéijen, Äert Engagement verbesseren, a schlussendlech Är Konversiounsmetriken verbesseren.

Den Nodeel ass natierlech datt et eng eenzeg Zeil an enger kompriméierter CSS-Datei ass, sou datt se onheemlech schwéier sinn ze troubleshoot oder ze aktualiséieren.

Shopify CSS Liquid

Bannent engem Shopify Thema kënnt Dir Astellungen uwenden déi Dir einfach aktualiséieren. Mir maachen dat gär wéi mir Siten testen an optimiséieren sou datt mir d'Thema just visuell personaliséiere kënnen anstatt an de Code ze graven. Also, eise Stylesheet ass mat Liquid gebaut (Shopify's Scripting Sprooch) a mir addéiere Variablen fir de Stylesheet ze aktualiséieren. Et kann esou ausgesinn:

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

Obwuel dëst gutt funktionnéiert, kënnt Dir de Code net einfach kopéieren an en Online-Tool benotzen fir et ze minimiséieren, well hire Skript d'Flësseg Tags net versteet. Tatsächlech wäert Dir Är CSS total zerstéieren wann Dir probéiert! Déi grouss Neiegkeet ass datt well et mat Liquid gebaut ass ... Dir kënnt tatsächlech Scripting BENOTZEN fir d'Ausgab ze minimiséieren!

Shopify CSS Minifikatioun A Liquid

Shopify erlaabt Iech einfach Variabelen ze skriptéieren an d'Ausgab z'änneren. An dësem Fall kënne mir eis CSS tatsächlech an eng Inhaltsvariabel wéckelen an se dann manipuléieren fir all Tabs, Zeilretouren a Plazen ze läschen! Ech hunn dëse Code am

Shopify Gemeinschaft aus Tim (eng) an et huet genial geschafft!

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

Also, fir mäi Beispill hei uewen, meng theme.css.liquid Säit géif esou ausgesinn:

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

Wann ech de Code lafen, ass d'Ausgab CSS wéi follegt, perfekt minifizéiert:

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

Douglas Karr

Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.