ਈਕਾੱਮਰਸ ਅਤੇ ਪ੍ਰਚੂਨਖੋਜ ਮਾਰਕੀਟਿੰਗ

ਤੁਹਾਡੇ Shopify CSS ਨੂੰ ਘੱਟ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਜੋ ਕਿ ਤਰਲ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ ਹੈ

ਅਸੀਂ ਬਣਾਇਆ ਏ ਸ਼ਾਪੀਫਾਈ ਪਲੱਸ ਇੱਕ ਕਲਾਇੰਟ ਲਈ ਸਾਈਟ ਜਿਸ ਵਿੱਚ ਅਸਲ ਥੀਮ ਫਾਈਲ ਵਿੱਚ ਉਹਨਾਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਲਈ ਕਈ ਸੈਟਿੰਗਾਂ ਹਨ। ਹਾਲਾਂਕਿ ਸਟਾਈਲ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਐਡਜਸਟ ਕਰਨ ਲਈ ਇਹ ਅਸਲ ਵਿੱਚ ਫਾਇਦੇਮੰਦ ਹੈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਸਥਿਰ ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਨਹੀਂ ਹਨ (CSS) ਫਾਈਲ ਜੋ ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ ਮਿੰਨੀ (ਆਕਾਰ ਨੂੰ ਘਟਾਓ). ਕਈ ਵਾਰ ਇਸ ਨੂੰ CSS ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਕੰਪਰੈਸ਼ਨ ਅਤੇ ਸੰਕੁਚਿਤ ਤੁਹਾਡਾ 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 ਤਰਲ

ਇੱਕ 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}

Douglas Karr

Douglas Karr ਦਾ CMO ਹੈ ਓਪਨ ਇਨਸਾਈਟਸ ਅਤੇ ਦੇ ਸੰਸਥਾਪਕ Martech Zone. ਡਗਲਸ ਨੇ ਦਰਜਨਾਂ ਸਫਲ MarTech ਸਟਾਰਟਅੱਪਸ ਦੀ ਮਦਦ ਕੀਤੀ ਹੈ, ਮਾਰਟੇਕ ਐਕਵਾਇਰਿੰਗ ਅਤੇ ਨਿਵੇਸ਼ਾਂ ਵਿੱਚ $5 ਬਿਲੀਅਨ ਤੋਂ ਵੱਧ ਦੀ ਉਚਿਤ ਮਿਹਨਤ ਵਿੱਚ ਸਹਾਇਤਾ ਕੀਤੀ ਹੈ, ਅਤੇ ਕੰਪਨੀਆਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਵਿਕਰੀ ਅਤੇ ਮਾਰਕੀਟਿੰਗ ਰਣਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਅਤੇ ਸਵੈਚਲਿਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਨਾ ਜਾਰੀ ਰੱਖਿਆ ਹੈ। ਡਗਲਸ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀ ਪੱਧਰ 'ਤੇ ਮਾਨਤਾ ਪ੍ਰਾਪਤ ਡਿਜੀਟਲ ਪਰਿਵਰਤਨ ਅਤੇ ਮਾਰਟੈਕ ਮਾਹਰ ਅਤੇ ਸਪੀਕਰ ਹੈ। ਡਗਲਸ ਇੱਕ ਡਮੀ ਦੀ ਗਾਈਡ ਅਤੇ ਇੱਕ ਕਾਰੋਬਾਰੀ ਲੀਡਰਸ਼ਿਪ ਕਿਤਾਬ ਦਾ ਪ੍ਰਕਾਸ਼ਿਤ ਲੇਖਕ ਵੀ ਹੈ।

ਸੰਬੰਧਿਤ ਲੇਖ

ਸਿਖਰ ਤੇ ਵਾਪਸ ਜਾਓ
ਬੰਦ ਕਰੋ

ਐਡਬਲਾਕ ਖੋਜਿਆ ਗਿਆ

Martech Zone ਤੁਹਾਨੂੰ ਇਹ ਸਮੱਗਰੀ ਬਿਨਾਂ ਕਿਸੇ ਕੀਮਤ ਦੇ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਯੋਗ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਵਿਗਿਆਪਨ ਆਮਦਨ, ਐਫੀਲੀਏਟ ਲਿੰਕਾਂ, ਅਤੇ ਸਪਾਂਸਰਸ਼ਿਪਾਂ ਰਾਹੀਂ ਸਾਡੀ ਸਾਈਟ ਦਾ ਮੁਦਰੀਕਰਨ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਾਂਗੇ ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੀ ਸਾਈਟ ਨੂੰ ਦੇਖਦੇ ਹੋਏ ਆਪਣੇ ਵਿਗਿਆਪਨ ਬਲੌਕਰ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹੋ।