లిక్విడ్ వేరియబుల్స్ ఉపయోగించి నిర్మించబడిన మీ Shopify CSSని కనిష్టీకరించడానికి సులభమైన మార్గం

Shopify లిక్విడ్ CSS ఫైల్‌ల కోసం స్క్రిప్ట్‌ను కనిష్టీకరించండి

మేము a నిర్మించాము Shopify ప్లస్ వాస్తవ థీమ్ ఫైల్‌లో వారి శైలుల కోసం అనేక సెట్టింగ్‌లను కలిగి ఉన్న క్లయింట్ కోసం సైట్. స్టైల్‌లను సులభంగా సర్దుబాటు చేయడానికి ఇది నిజంగా ప్రయోజనకరంగా ఉన్నప్పటికీ, మీకు స్టాటిక్ క్యాస్కేడింగ్ స్టైల్ షీట్‌లు లేవని అర్థం (CSS) మీరు సులభంగా చేయగల ఫైల్ మినీ (పరిమాణాన్ని తగ్గించండి). కొన్నిసార్లు దీనిని CSS గా సూచిస్తారు కుదింపు మరియు కుదించేందుకు మీ CSS.

CSS కనిష్టీకరణ అంటే ఏమిటి?

మీరు స్టైల్‌షీట్‌కి వ్రాస్తున్నప్పుడు, మీరు నిర్దిష్ట 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 ఫైల్‌ను సమర్ధవంతంగా కుదించడంలో మీకు సహాయపడే అనేక సాధనాలు ఆన్‌లైన్‌లో ఉన్నాయి. కేవలం శోధించండి కుదించు CSS సాధనం or CSS సాధనాన్ని కనిష్టీకరించండి ఆన్లైన్.

ఒక పెద్ద CSS ఫైల్‌ను ఊహించండి మరియు దాని CSSని కనిష్టీకరించడం ద్వారా ఎంత స్థలాన్ని ఆదా చేయవచ్చో ఊహించండి... ఇది సాధారణంగా కనీసం 20% మరియు వారి బడ్జెట్‌లో 40% కంటే ఎక్కువగా ఉండవచ్చు. మీ సైట్ అంతటా సూచించబడిన చిన్న CSS పేజీని కలిగి ఉండటం వలన ప్రతి ఒక్క పేజీలో లోడ్ సమయాన్ని ఆదా చేయవచ్చు, మీ సైట్ ర్యాంకింగ్‌ను పెంచవచ్చు, మీ నిశ్చితార్థాన్ని మెరుగుపరచవచ్చు మరియు చివరికి మీ మార్పిడి కొలమానాలను మెరుగుపరచవచ్చు.

ప్రతికూలత ఏమిటంటే, కంప్రెస్డ్ CSS ఫైల్‌లో ఒకే లైన్ ఉంది కాబట్టి వాటిని ట్రబుల్షూట్ చేయడం లేదా అప్‌డేట్ చేయడం చాలా కష్టం.

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

ఇది బాగా పని చేస్తున్నప్పుడు, మీరు కోడ్‌ను కాపీ చేయలేరు మరియు దానిని కనిష్టీకరించడానికి ఆన్‌లైన్ సాధనాన్ని ఉపయోగించలేరు ఎందుకంటే వారి స్క్రిప్ట్ లిక్విడ్ ట్యాగ్‌లను అర్థం చేసుకోదు. నిజానికి, మీరు ప్రయత్నిస్తే మీ CSSని పూర్తిగా నాశనం చేస్తారు! గొప్ప వార్త ఏమిటంటే ఇది లిక్విడ్‌తో నిర్మించబడినందున... మీరు అవుట్‌పుట్‌ను తగ్గించడానికి స్క్రిప్టింగ్‌ని ఉపయోగించవచ్చు!

లిక్విడ్‌లో షాపిఫై CSS మినిఫికేషన్

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}