თქვენი Shopify CSS-ის შემცირების უმარტივესი გზა, რომელიც აგებულია თხევადი ცვლადების გამოყენებით
ჩვენ ავაშენეთ ა ShopifyPlus საიტი კლიენტისთვის, რომელსაც აქვს რამდენიმე პარამეტრი მათი სტილისთვის რეალურ თემის ფაილში. მიუხედავად იმისა, რომ ეს ნამდვილად ხელსაყრელია სტილის ადვილად კორექტირებისთვის, ეს ნიშნავს, რომ თქვენ არ გაქვთ სტატიკური კასკადური სტილის ფურცლები (CSS) ფაილი, რომელიც შეგიძლიათ მარტივად მინი (ზომაში შემცირება). ზოგჯერ ამას CSS-ს უწოდებენ შეკუმშვის მდე compressing თქვენი 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-ით… თქვენ შეგიძლიათ რეალურად გამოიყენოთ სკრიპტი, რათა შეამციროთ გამომავალი!
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}