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

Sgript Minify ar gyfer Ffeiliau CSS Hylif Shopify

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 ac 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}