लिक्विड व्हेरिएबल्स वापरून तयार केलेले तुमचे Shopify CSS कमी करण्याचा सर्वात सोपा मार्ग

Shopify Liquid CSS फायलींसाठी Minify Script

आम्ही बांधले अ शॉपिफाई प्लस वास्तविक थीम फाइलमध्ये त्यांच्या शैलींसाठी अनेक सेटिंग्ज असलेल्या क्लायंटसाठी साइट. शैली सहजपणे समायोजित करण्यासाठी ते खरोखर फायदेशीर असले तरी, याचा अर्थ असा की तुमच्याकडे स्टॅटिक कॅस्केडिंग शैली पत्रके नाहीत (CSS) आपण सहजपणे करू शकता अशी फाईल मिनी (आकार कमी करा). कधीकधी याला CSS म्हणून संबोधले जाते संक्षेप आणि संकुचित करीत आहे तुमचा CSS.

CSS Minification म्हणजे काय?

तुम्ही स्टाईलशीटवर लिहिता तेव्हा, तुम्ही विशिष्ट HTML घटकासाठी शैली एकदा परिभाषित करता आणि नंतर कितीही वेब पृष्ठांवर ती वापरता. उदाहरणार्थ, माझ्या साइटवर माझे फॉन्ट कसे दिसले यासाठी मला काही तपशील सेट करायचे असल्यास, मी माझे CSS खालीलप्रमाणे आयोजित करू शकतो:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

त्या स्टाइलशीटमध्ये, प्रत्येक स्पेस, लाइन रिटर्न आणि टॅब जागा घेतात. जर मी ते सर्व काढून टाकले, तर CSS कमी केल्यास मी त्या स्टाइलशीटचा आकार 40% पेक्षा कमी करू शकतो! याचा परिणाम असा आहे की…

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

CSS मिनिफिकेशन तुम्‍हाला तुमच्‍या साइटचा वेग वाढवायचा असेल आणि तुमच्‍या सीएसएस फाइलला कार्यक्षमतेने संकुचित करण्‍यात तुम्‍हाला मदत करण्‍यासाठी ऑनलाइन अनेक साधने आहेत. फक्त शोधा CSS टूल कॉम्प्रेस करा or CSS टूल लहान करा ऑनलाइन.

मोठ्या CSS फाईलची कल्पना करा आणि त्याची CSS कमी करून किती जागा वाचवता येईल... ती सामान्यत: किमान 20% असते आणि त्यांच्या बजेटच्या 40% पेक्षा जास्त असू शकते. तुमच्या संपूर्ण साइटवर एक लहान CSS पृष्ठ संदर्भित केल्याने प्रत्येक पृष्ठावरील लोड वेळा वाचू शकतात, तुमच्या साइटची रँकिंग वाढू शकते, तुमची प्रतिबद्धता सुधारू शकते आणि शेवटी तुमचे रूपांतरण मेट्रिक्स सुधारू शकतात.

नकारात्मक बाजू, अर्थातच, संकुचित CSS फाईलमध्ये एकच ओळ आहे त्यामुळे ते समस्यानिवारण किंवा अद्यतनित करणे आश्चर्यकारकपणे कठीण आहे.

Shopify CSS लिक्विड

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

हे चांगले कार्य करत असताना, तुम्ही कोड कॉपी करू शकत नाही आणि ते कमी करण्यासाठी ऑनलाइन साधन वापरू शकत नाही कारण त्यांची स्क्रिप्ट लिक्विड टॅग समजत नाही. खरं तर, तुम्ही प्रयत्न केल्यास तुमचा CSS पूर्णपणे नष्ट होईल! चांगली बातमी अशी आहे की ते लिक्विडसह तयार केलेले आहे... तुम्ही आउटपुट कमी करण्यासाठी स्क्रिप्टिंग वापरू शकता!

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}