Kummerċ elettroniku u bejgħ bl-imnutSearch Marketing

L-Eħfef Mod Biex Tnaqqas is-CSS Shopify Tiegħek Li Jinbena Bl-Użu ta' Varjabbli Likwidi

Bnejna barra a ShopifyPlus sit għal klijent li għandu numru ta 'settings għall-istili tagħhom fil-fajl tat-tema attwali. Filwaqt li dan huwa tassew vantaġġuż biex taġġusta faċilment l-istili, dan ifisser li m'għandekx folji tal-istil statiku cascading (CSS) fajl li tista' faċilment timminifika (naqqas fid-daqs). Xi drabi dan jissejjaħ CSS kompressjoni u, kompressjoni is-CSS tiegħek.

X'inhu l-Minifikazzjoni CSS?

Meta tkun qed tikteb fuq stylesheet, tiddefinixxi l-istil għal element HTML partikolari darba, u mbagħad tużah aktar u aktar fuq kull numru ta 'paġni tal-web. Pereżempju, jekk ridt nwaqqaf xi dettalji dwar kif il-fonts tiegħi dehru fuq is-sit tiegħi, nista' norganizza s-CSS tiegħi kif ġej:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

F'dik l-istil, kull spazju, ritorn tal-linja, u tab jieħdu spazju. Jekk inneħħi dawk kollha, nista' naqqas id-daqs ta' dik il-folja tal-istil b'aktar minn 40% jekk is-CSS jiġi mnaqqas! Ir-riżultat huwa dan...

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

minifikazzjoni CSS huwa indispensabbli jekk trid tħaffef is-sit tiegħek u hemm numru ta 'għodod onlajn li jistgħu jgħinuk tikkompressa l-fajl CSS tiegħek b'mod effiċjenti. Fittex biss għal tikkompressa għodda CSS or jimminimizza l-għodda CSS online.

Immaġina fajl CSS kbir u kemm spazju jista' jiġi ffrankat billi timminifizza s-CSS tiegħu... tipikament huwa minimu ta' 20% u jista' jkun 'il fuq minn 40% tal-baġit tagħhom. Li jkollok paġna CSS iżgħar referuta matul is-sit tiegħek jista' jiffranka ħinijiet ta' tagħbija fuq kull paġna waħda, jista' jżid il-klassifikazzjoni tas-sit tiegħek, itejjeb l-impenn tiegħek, u fl-aħħar itejjeb il-metriċi ta' konverżjoni tiegħek.

L-iżvantaġġ, ovvjament, huwa li hemm linja waħda f'fajl CSS kompressat u għalhekk huma oerhört diffiċli biex issolvi l-problemi jew taġġorna.

Shopify CSS Likwidu

F'tema ta' Shopify, tista' tapplika settings li tista' faċilment taġġorna. Aħna nħobbu nagħmlu dan hekk kif nittestjaw u ottimizzaw is-siti sabiex inkunu nistgħu nippersonalizzaw biss it-tema viżwalment aktar milli nħaffru fil-kodiċi. Għalhekk, il-Stylesheet tagħna hija mibnija bil-Liquid (il-lingwa tal-iskript ta' Shopify) u aħna nżidu varjabbli biex taġġorna l-Stylesheet. Jista' jidher bħal dan:

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

Filwaqt li dan jaħdem tajjeb, ma tistax sempliċement tikkopja l-kodiċi u tuża għodda onlajn biex timminifiha minħabba li l-iskrittura tagħhom ma tifhimx it-tikketti likwidi. Fil-fatt, int se teqred totalment is-CSS tiegħek jekk tipprova! L-aħbar l-kbira hija li minħabba li hija mibnija bil-Likwid... tista' fil-fatt TUŻA scripting biex timminimizza l-output!

Shopify CSS Minifikazzjoni Fil-Likwidu

Shopify jippermettilek li tikteb varjabbli faċilment u timmodifika l-output. F'dan il-każ, nistgħu fil-fatt nagħlaq is-CSS tagħna f'varjabbli tal-kontenut u mbagħad jimmanipulawh biex ineħħu t-tabs, il-prospetti tal-linja u l-ispazji kollha! Sibt dan il-kodiċi fil-

Shopify Komunità minn Tim (tairli) u ħadmet b'mod brillanti!

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

Allura, għall-eżempju tiegħi hawn fuq, il-paġna tiegħi theme.css.liquid tidher bħal din:

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

Meta nmexxi l-kodiċi, is-CSS tal-output huwa kif ġej, minifikat perfettament:

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

Douglas Karr

Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

Artikli relatati

Lura għall-buttuna ta 'fuq
Agħlaq

Adblock Individwat

Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.