Ձեր Shopify CSS-ը փոքրացնելու ամենահեշտ ձևը, որը կառուցված է հեղուկ փոփոխականների միջոցով
Մենք կառուցել ենք ա Shopify Plus- ը կայք հաճախորդի համար, որն ունի մի շարք կարգավորումներ իրենց ոճերի համար իրական թեմայի ֆայլում: Թեև դա իսկապես ձեռնտու է ոճերը հեշտությամբ կարգավորելու համար, դա նշանակում է, որ դուք չունեք ստատիկ կասկադային ոճերի թերթիկներ (CSS) ֆայլ, որը կարող եք հեշտությամբ ականապատել (նվազեցնել չափը): Երբեմն սա կոչվում է CSS սեղմում և սեղմում ձեր CSS-ը:
Ի՞նչ է CSS Minification-ը:
Երբ դուք գրում եք ոճաթերթի վրա, դուք մեկ անգամ սահմանում եք ոճը որոշակի HTML տարրի համար, այնուհետև այն կրկին ու կրկին օգտագործում եք ցանկացած թվով վեբ էջերում: Օրինակ, եթե ես ցանկանայի որոշ առանձնահատկություններ սահմանել իմ տառատեսակների տեսքով իմ կայքում, ես կարող եմ կազմակերպել իմ CSS-ը հետևյալ կերպ.
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
p {
font-size: 18px;
}
Այդ ոճաթերթի ներսում յուրաքանչյուր բացատ, տող վերադարձ և ներդիր տեղ են զբաղեցնում: Եթե ես հեռացնեմ այդ բոլորը, ես կարող եմ նվազեցնել այդ ոճաթերթի չափը ավելի քան 40%-ով, եթե CSS-ը փոքրացվի: Արդյունքը սա է…
h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}
CSS-ի փոքրացում պարտադիր է, եթե ցանկանում եք արագացնել ձեր կայքը, և կան մի շարք գործիքներ առցանց, որոնք կարող են օգնել ձեզ արդյունավետորեն սեղմել ձեր CSS ֆայլը: Պարզապես փնտրեք սեղմել CSS գործիքը or փոքրացնել CSS գործիքը Թեմա.
Պատկերացրեք մի մեծ CSS ֆայլ և որքան տարածք կարող է խնայվել՝ նվազեցնելով դրա CSS-ը… դա սովորաբար նվազագույնը 20% է և կարող է լինել ավելի քան 40% իրենց բյուջեի: Ձեր կայքում ավելի փոքր CSS էջ ունենալը կարող է խնայել բեռնման ժամանակը յուրաքանչյուր էջի վրա, կարող է բարձրացնել ձեր կայքի վարկանիշը, բարելավել ձեր ներգրավվածությունը և, ի վերջո, բարելավել ձեր փոխակերպման չափումները:
Բացասական կողմը, իհարկե, այն է, որ սեղմված CSS ֆայլում կա մեկ տող, այնպես որ դրանք աներևակայելի դժվար է լուծել կամ թարմացնել:
Shopify CSS Liquid
Shopify թեմայի շրջանակներում կարող եք կիրառել կարգավորումներ, որոնք հեշտությամբ կարող եք թարմացնել: Մենք սիրում ենք դա անել, երբ մենք փորձարկում և օպտիմիզացնում ենք կայքերը, որպեսզի կարողանանք պարզապես տեսողականորեն հարմարեցնել թեման, այլ ոչ թե կոդի մեջ փորփրել: Այսպիսով, մեր Stylesheet-ը կառուցված է Liquid-ով (Shopify-ի սկրիպտային լեզու) և մենք փոփոխականներ ենք ավելացնում Stylesheet-ը թարմացնելու համար: Այն կարող է այսպիսի տեսք ունենալ.
{%- 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 }}
}
Թեև սա լավ է աշխատում, դուք չեք կարող պարզապես պատճենել կոդը և օգտագործել առցանց գործիք՝ այն փոքրացնելու համար, քանի որ նրանց սցենարը չի հասկանում հեղուկ պիտակները: Փաստորեն, դուք ամբողջովին կկործանեք ձեր CSS-ը, եթե փորձեք: Հիանալի նորությունն այն է, որ քանի որ այն կառուցված է Liquid-ով… դուք կարող եք իրականում ՕԳՏԱԳՈՐԾԵԼ scripting-ը նվազագույնի հասցնելու արդյունքը:
Shopify CSS Minification In Liquid-ում
Shopify-ը Ձեզ հնարավորություն է տալիս հեշտությամբ գրավորել փոփոխականները և փոփոխել ելքը: Այս դեպքում մենք կարող ենք իրականում փաթաթել մեր CSS-ը բովանդակության փոփոխականի մեջ և այնուհետև շահարկել այն՝ հեռացնելու բոլոր ներդիրները, տողերի վերադարձը և բացատները: Ես գտա այս կոդը
Shopify համայնք - ից Թիմ (Թեյրլի) և այն փայլուն աշխատեց:{%- 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 }}
Այսպիսով, իմ վերը նշված օրինակի համար իմ theme.css.liquid էջը կունենա հետևյալ տեսքը.
{%- 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 }}
Երբ ես գործարկում եմ կոդը, ելքային CSS-ը հետևյալն է՝ կատարելապես փոքրացված.
/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}