E-Fasnach a ManwerthuChwilio Marchnata

Y ffordd hawsaf i leihau'ch CSS Shopify Sydd wedi'i Adeiladu Gan Ddefnyddio Newidynnau Hylif

Adeiladasom allan a ShopifyPlus safle ar gyfer cleient sydd â nifer o osodiadau ar gyfer eu harddulliau yn y ffeil thema wirioneddol. Er bod hynny'n fanteisiol iawn ar gyfer addasu arddulliau'n hawdd, mae'n golygu nad oes gennych chi ddalennau arddull rhaeadru statig (CSS) ffeil y gallwch yn hawdd mini (lleihau mewn maint). Weithiau cyfeirir at hyn fel CSS cywasgu a cywasgu eich CSS.

Beth yw minio CSS?

Pan fyddwch chi'n ysgrifennu at ddalen arddull, rydych chi'n diffinio'r arddull ar gyfer elfen HTML benodol unwaith, ac yna'n ei defnyddio drosodd a throsodd ar unrhyw nifer o dudalennau gwe. Er enghraifft, pe bawn i eisiau sefydlu rhai manylion ar gyfer sut roedd fy ffontiau'n edrych ar fy ngwefan, efallai y byddaf yn trefnu fy CSS fel a ganlyn:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

O fewn y daflen arddull honno, mae pob bwlch, dychweliad llinell, a thab yn cymryd lle. Os byddaf yn dileu pob un o'r rheini, gallaf leihau maint y ddalen arddull honno dros 40% os caiff y CSS ei leihau! Y canlyniad yw hyn…

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

miniad CSS yn hanfodol os ydych chi am gyflymu'ch gwefan ac mae yna nifer o offer ar-lein a all eich helpu i gywasgu'ch ffeil CSS yn effeithlon. Chwiliwch am cywasgu offeryn CSS or minify offeryn CSS ar-lein.

Dychmygwch ffeil CSS fawr a faint o le y gellir ei arbed trwy leihau ei CSS ... fel arfer mae'n lleiafswm o 20% a gall fod dros 40% o'u cyllideb. Gall cyfeirio tudalen CSS lai ledled eich gwefan arbed amserau llwyth ar bob tudalen, gall gynyddu safle eich gwefan, gwella'ch ymgysylltiad, ac yn y pen draw wella'ch metrigau trosi.

Yr anfantais, wrth gwrs, yw bod yna un llinell mewn ffeil CSS cywasgedig felly maen nhw'n anhygoel o anodd eu datrys neu eu diweddaru.

Shopify CSS Liquid

O fewn thema Shopify, gallwch chi gymhwyso gosodiadau y gallwch chi eu diweddaru'n hawdd. Rydyn ni'n hoffi gwneud hyn wrth i ni brofi ac optimeiddio gwefannau fel y gallwn ni addasu'r thema yn weledol yn hytrach na chloddio i mewn i'r cod. Felly, mae ein Daflen Arddull wedi'i hadeiladu gyda Liquid (iaith sgriptio Shopify) ac rydym yn ychwanegu newidynnau i ddiweddaru'r Daflen Arddull. Gall edrych fel hyn:

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

Er bod hyn yn gweithio'n dda, ni allwch gopïo'r cod a defnyddio offeryn ar-lein i'w leihau oherwydd nad yw eu sgript yn deall y tagiau hylif. Yn wir, byddwch chi'n dinistrio'ch CSS yn llwyr os ceisiwch! Y newyddion gwych yw oherwydd ei fod wedi'i adeiladu gyda Hylif ... gallwch chi DEFNYDDIO sgriptio i leihau'r allbwn!

Shopify Lleihau CSS mewn Hylif

Mae Shopify yn eich galluogi i sgriptio newidynnau yn hawdd ac addasu'r allbwn. Yn yr achos hwn, gallwn mewn gwirionedd lapio ein CSS i mewn i newidyn cynnwys ac yna ei drin i gael gwared ar yr holl dabiau, dychweliadau llinell, a bylchau! Cefais y cod hwn yn y

Cymuned Shopify o Tim (tairli) ac fe weithiodd yn wych!

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

Felly, er fy enghraifft uchod, byddai fy nhudalen theme.css.liquid yn edrych fel hyn:

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

Pan fyddaf yn rhedeg y cod, mae'r allbwn CSS fel a ganlyn, wedi'i leihau'n berffaith:

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

Douglas Karr

Douglas Karr yn CMO o AGOREDION a sylfaenydd y Martech Zone. Mae Douglas wedi helpu dwsinau o fusnesau newydd llwyddiannus MarTech, wedi cynorthwyo gyda diwydrwydd dyladwy o dros $5 bil mewn caffaeliadau a buddsoddiadau Martech, ac yn parhau i gynorthwyo cwmnïau i weithredu ac awtomeiddio eu strategaethau gwerthu a marchnata. Mae Douglas yn arbenigwr trawsnewid digidol ac yn siaradwr MarTech a gydnabyddir yn rhyngwladol. Mae Douglas hefyd yn awdur cyhoeddedig canllaw Dummie a llyfr arweinyddiaeth busnes.

Erthyglau Perthnasol

Yn ôl i'r brig botwm
Cau

Adblock Wedi'i Ganfod

Martech Zone yn gallu darparu'r cynnwys hwn i chi heb unrhyw gost oherwydd ein bod yn rhoi arian i'n gwefan trwy refeniw hysbysebu, dolenni cyswllt, a nawdd. Byddem yn gwerthfawrogi petaech yn cael gwared ar eich rhwystrwr hysbysebion wrth i chi edrych ar ein gwefan.