ಲಿಕ್ವಿಡ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಿರ್ಮಿಸಲಾದ ನಿಮ್ಮ Shopify CSS ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸುಲಭವಾದ ಮಾರ್ಗ

Shopify ಲಿಕ್ವಿಡ್ CSS ಫೈಲ್‌ಗಳಿಗಾಗಿ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಿ

ನಾವು ಎ ನಿರ್ಮಿಸಿದ್ದೇವೆ Shopify ಪ್ಲಸ್ ನಿಜವಾದ ಥೀಮ್ ಫೈಲ್‌ನಲ್ಲಿ ಅವರ ಶೈಲಿಗಳಿಗಾಗಿ ಹಲವಾರು ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಕ್ಲೈಂಟ್‌ಗಾಗಿ ಸೈಟ್. ಶೈಲಿಗಳನ್ನು ಸುಲಭವಾಗಿ ಹೊಂದಿಸಲು ಇದು ನಿಜವಾಗಿಯೂ ಅನುಕೂಲಕರವಾಗಿದೆ, ಇದರರ್ಥ ನೀವು ಸ್ಥಿರ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ಹೊಂದಿಲ್ಲ (ಸಿಎಸ್ಎಸ್) ನೀವು ಸುಲಭವಾಗಿ ಮಾಡಬಹುದಾದ ಫೈಲ್ ಮಿನಿ (ಗಾತ್ರದಲ್ಲಿ ಕಡಿಮೆ ಮಾಡಿ). ಕೆಲವೊಮ್ಮೆ ಇದನ್ನು 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 ಉಪಕರಣವನ್ನು ಕುಗ್ಗಿಸಿ 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 ಅನ್ನು ನೀವು ಸಂಪೂರ್ಣವಾಗಿ ನಾಶಪಡಿಸುತ್ತೀರಿ! ಉತ್ತಮ ಸುದ್ದಿ ಏನೆಂದರೆ, ಇದನ್ನು ಲಿಕ್ವಿಡ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ… ನೀವು ಔಟ್‌ಪುಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ ಅನ್ನು ಬಳಸಬಹುದು!

ಶಾಪಿಫೈ ಸಿಎಸ್ಎಸ್ ಮಿನಿಫಿಕೇಶನ್ ಇನ್ ಲಿಕ್ವಿಡ್

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}