अपने Shopify CSS को छोटा करने का सबसे आसान तरीका जो लिक्विड वेरिएबल्स का उपयोग करके बनाया गया है

Shopify लिक्विड सीएसएस फाइलों के लिए स्क्रिप्ट को छोटा करें

हमने एक का निर्माण किया Shopify प्लस एक क्लाइंट के लिए साइट जिसमें वास्तविक थीम फ़ाइल में उनकी शैलियों के लिए कई सेटिंग्स हैं। हालांकि यह शैलियों को आसानी से समायोजित करने के लिए वास्तव में फायदेमंद है, इसका मतलब है कि आपके पास स्थिर कैस्केडिंग स्टाइल शीट नहीं है (सीएसएस) फ़ाइल जिसे आप आसानी से कर सकते हैं छोटा करना (आकार में कमी)। कभी-कभी इसे सीएसएस के रूप में जाना जाता है दबाव और संपीड़ित आपका सीएसएस।

CSS मिनिफिकेशन क्या है?

जब आप किसी स्टाइलशीट पर लिख रहे होते हैं, तो आप एक विशेष HTML तत्व के लिए शैली को एक बार परिभाषित करते हैं, और फिर इसे किसी भी वेब पेज पर बार-बार उपयोग करते हैं। उदाहरण के लिए, अगर मैं अपनी साइट पर मेरे फोंट कैसे दिखते हैं, इसके लिए मैं कुछ विवरण सेट करना चाहता हूं, तो मैं अपने सीएसएस को निम्नानुसार व्यवस्थित कर सकता हूं:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

उस स्टाइलशीट के भीतर, प्रत्येक स्थान, पंक्ति वापसी, और टैब स्थान लेते हैं। अगर मैं उन सभी को हटा दूं, तो मैं उस स्टाइलशीट के आकार को 40% से अधिक कम कर सकता हूं यदि सीएसएस को छोटा किया जाता है! नतीजा यह है…

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

सीएसएस मिनिफिकेशन यदि आप अपनी साइट को गति देना चाहते हैं तो यह आवश्यक है और ऑनलाइन कई उपकरण हैं जो आपकी सीएसएस फ़ाइल को कुशलतापूर्वक संपीड़ित करने में आपकी सहायता कर सकते हैं। बस खोजें CSS टूल को कंप्रेस करें or सीएसएस टूल को छोटा करें ऑनलाइन.

एक बड़ी CSS फ़ाइल की कल्पना करें और उसके CSS को छोटा करके कितनी जगह बचाई जा सकती है... यह आमतौर पर न्यूनतम 20% है और उनके बजट के 40% से अधिक हो सकती है। आपकी साइट पर संदर्भित एक छोटा सीएसएस पृष्ठ होने से प्रत्येक पृष्ठ पर लोड समय की बचत हो सकती है, आपकी साइट की रैंकिंग बढ़ सकती है, आपकी सहभागिता में सुधार हो सकता है, और अंततः आपके रूपांतरण मीट्रिक में सुधार हो सकता है।

निश्चित रूप से, नकारात्मक पक्ष यह है कि एक संपीड़ित सीएसएस फ़ाइल में एक ही पंक्ति होती है, इसलिए उन्हें समस्या निवारण या अद्यतन करने के लिए अविश्वसनीय रूप से कठिन होता है।

Shopify CSS लिक्विड

Shopify थीम के भीतर, आप ऐसी सेटिंग लागू कर सकते हैं जिन्हें आप आसानी से अपडेट कर सकते हैं। हम ऐसा करना पसंद करते हैं क्योंकि हम साइटों का परीक्षण और अनुकूलन करते हैं ताकि हम कोड में खुदाई करने के बजाय विषय को केवल दृष्टि से अनुकूलित कर सकें। इसलिए, हमारी स्टाइलशीट लिक्विड (Shopify की स्क्रिप्टिंग भाषा) के साथ बनाई गई है और हम स्टाइलशीट को अपडेट करने के लिए वेरिएबल जोड़ते हैं। यह इस तरह दिख सकता है:

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

हालांकि यह अच्छी तरह से काम करता है, आप केवल कोड को कॉपी नहीं कर सकते हैं और इसे छोटा करने के लिए एक ऑनलाइन टूल का उपयोग नहीं कर सकते क्योंकि उनकी स्क्रिप्ट लिक्विड टैग को नहीं समझती है। वास्तव में, यदि आप कोशिश करते हैं तो आप अपने सीएसएस को पूरी तरह से नष्ट कर देंगे! अच्छी खबर यह है कि क्योंकि यह लिक्विड के साथ बनाया गया है… आप वास्तव में आउटपुट को छोटा करने के लिए स्क्रिप्टिंग का उपयोग कर सकते हैं!

लिक्विड में Shopify CSS मिनिफिकेशन

Shopify आपको वेरिएबल को आसानी से स्क्रिप्ट करने और आउटपुट को संशोधित करने में सक्षम बनाता है। इस मामले में, हम वास्तव में अपने सीएसएस को एक सामग्री चर में लपेट सकते हैं और फिर सभी टैब, लाइन रिटर्न और रिक्त स्थान को हटाने के लिए इसमें हेरफेर कर सकते हैं! मुझे यह कोड में मिला है 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 minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}