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}