E-trgovina in trgovina na drobnoIskalni marketing

Najlažji način za pomanjšanje vašega Shopify CSS, ki je zgrajen z uporabo tekočih spremenljivk

Zgradili smo a ShopifyPlus spletno mesto za odjemalca, ki ima številne nastavitve za svoje sloge v dejanski datoteki teme. Čeprav je to res ugodno za enostavno prilagajanje slogov, to pomeni, da nimate statičnih kaskadnih slogovnih listov (CSS), ki jo lahko enostavno Pomanjšaj (zmanjšajte velikost). Včasih se to imenuje CSS stiskanje in stiskanjem vaš CSS.

Kaj je pomanjševanje CSS?

Ko pišete v slogovno tabelo, enkrat definirate slog za določen element HTML in ga nato znova in znova uporabite na poljubnem številu spletnih strani. Na primer, če bi želel nastaviti nekaj podrobnosti o tem, kako so moje pisave izgledale na svojem spletnem mestu, bi lahko svoj CSS organiziral na naslednji način:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

V tej slogovni tabeli vsak presledek, vrnitev vrstice in zavihek zavzamejo prostor. Če vse te odstranim, lahko zmanjšam velikost te slogovne tabele za več kot 40 %, če je CSS pomanjšan! Rezultat je ta…

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

Pomanjšanje CSS je obvezen, če želite pospešiti svoje spletno mesto in na spletu obstaja številna orodja, ki vam lahko pomagajo učinkovito stisniti datoteko CSS. Samo poiščite stisnite orodje CSS or pomanjšajte orodje CSS na spletu.

Predstavljajte si veliko datoteko CSS in koliko prostora lahko prihranite z zmanjšanjem njenega CSS… običajno je to najmanj 20 % in je lahko več kot 40 % njihovega proračuna. Če imate na vašem spletnem mestu napoteno manjšo stran CSS, lahko prihranite čas nalaganja vsake posamezne strani, lahko povečate uvrstitev vašega spletnega mesta, izboljšate vašo dejavnost in na koncu izboljšate meritve konverzij.

Slaba stran je seveda, da je v stisnjeni datoteki CSS ena vrstica, zato jih je izjemno težko odpraviti ali posodobiti.

Shopify CSS Liquid

V temi Shopify lahko uporabite nastavitve, ki jih lahko preprosto posodobite. To radi počnemo, ko preizkušamo in optimiziramo spletna mesta, tako da lahko samo vizualno prilagodimo temo in ne kopamo v kodo. Naš slogovni list je torej zgrajen s Liquid (skriptni jezik Shopify) in dodamo spremenljivke za posodobitev slogovne tabele. Lahko izgleda takole:

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

Čeprav to dobro deluje, ne morete preprosto kopirati kode in uporabiti spletnega orodja za pomanjšanje, ker njihov skript ne razume tekočih oznak. Pravzaprav boste popolnoma uničili svoj CSS, če poskusite! Odlična novica je, da ker je zgrajena s Liquid ... lahko dejansko UPORABLJATE skripte za pomanjšanje izhoda!

Minifikacija CSS Shopify v tekočini

Shopify vam omogoča preprosto pisanje spremenljivk in spreminjanje izhoda. V tem primeru lahko dejansko zavijemo naš CSS v spremenljivko vsebine in nato z njo manipuliramo, da odstranimo vse zavihke, vrnitve vrstic in presledke! To kodo sem našel v

Skupnost Shopify iz Tim (tairli) in delovalo je briljantno!

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

Torej, za moj zgornji primer bi bila moja stran theme.css.liquid videti takole:

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

Ko zaženem kodo, je izhodni CSS, popolnoma pomanjšan:

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

Douglas Karr

Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

Povezani članki

Nazaj na vrh
Zapri

Zaznan Adblock

Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.