ඊ-වාණිජ්‍යය සහ සිල්ලර වෙළඳාමඅලෙවිකරණය සොයන්න

ද්‍රව විචල්‍යයන් භාවිතයෙන් ගොඩනගා ඇති ඔබේ Shopify CSS අවම කිරීමට පහසුම ක්‍රමය

අපි ගොඩනැගුවේ a සාප්පු සවාරි සැබෑ තේමා ගොනුව තුළ ඔවුන්ගේ මෝස්තර සඳහා සැකසුම් ගණනාවක් ඇති සේවාදායකයකු සඳහා වන අඩවිය. විලාස පහසුවෙන් සකස් කිරීම සඳහා එය සැබවින්ම වාසිදායක වන අතර, එයින් අදහස් වන්නේ ඔබට ස්ථිතික කැස්කැඩින් මෝස්තර පත්‍ර නොමැති බවයි (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 ගොනුව කාර්යක්ෂමව සම්පීඩනය කිරීමට ඔබට උපකාර කළ හැකි මෙවලම් ගණනාවක් මාර්ගගතව තිබේ. නිකමට හොයන්න CSS මෙවලම සම්පීඩනය කරන්න or minify CSS මෙවලම සමඟ අමුත්තන්.

විශාල CSS ගොනුවක් සහ එහි CSS අවම කිරීමෙන් කොපමණ ඉඩ ඉතිරි කර ගත හැකිද යන්න සිතා බලන්න... එය සාමාන්‍යයෙන් අවම වශයෙන් 20%ක් වන අතර ඔවුන්ගේ අයවැයෙන් 40%කට වඩා වැඩි විය හැක. ඔබේ වෙබ් අඩවිය පුරා කුඩා CSS පිටුවක් යොමු කර තිබීමෙන් සෑම පිටුවකම පැටවීමේ වේලාවන් ඉතිරි කර ගත හැක, ඔබේ වෙබ් අඩවියේ ශ්‍රේණිගත කිරීම වැඩි කළ හැක, ඔබේ නියැලීම වැඩි දියුණු කළ හැක, සහ අවසානයේ ඔබේ පරිවර්තන ප්‍රමිතික වැඩිදියුණු කළ හැක.

ඇත්ත වශයෙන්ම, අවාසිය නම්, සම්පීඩිත CSS ගොනුවක තනි පේළියක් තිබීමයි, එබැවින් ඒවා දෝශ නිරාකරණය හෝ යාවත්කාලීන කිරීම ඇදහිය නොහැකි තරම් දුෂ්කර ය.

Shopify CSS දියර

Shopify තේමාවක් තුළ, ඔබට පහසුවෙන් යාවත්කාලීන කළ හැකි සැකසීම් යෙදිය හැක. අපි වෙබ් අඩවි පරීක්‍ෂා කර ප්‍රශස්ත කරන විට මෙය කිරීමට කැමැත්තෙමු, එවිට අපට කේතය හෑරීමට වඩා දෘශ්‍යමය වශයෙන් තේමාව අභිරුචිකරණය කළ හැකිය. එබැවින්, අපගේ මෝස්තර පත්‍රය Liquid (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 වේ විවෘත INSIGHTS සහ නිර්මාතෘ Martech Zone. ඩග්ලස් සාර්ථක MarTech ආරම්භක දුසිම් ගණනකට උදව් කර ඇත, මාර්ටෙක් අත්පත් කර ගැනීම් සහ ආයෝජන සඳහා ඩොලර් 5 කට වඩා වැඩි කඩිසරකමකට සහාය වී ඇත, සහ ඔවුන්ගේ විකුණුම් සහ අලෙවිකරණ උපාය මාර්ග ක්‍රියාත්මක කිරීමට සහ ස්වයංක්‍රීය කිරීමට සමාගම්වලට දිගටම සහාය වේ. ඩග්ලස් යනු ජාත්‍යන්තරව පිළිගත් ඩිජිටල් පරිවර්තනයක් වන අතර MarTech විශේෂඥයෙකු සහ කථිකයෙකි. ඩග්ලස් ඩමිගේ මාර්ගෝපදේශකයෙකු සහ ව්‍යාපාර නායකත්ව පොතක ප්‍රකාශිත කතුවරයෙකි.

සබැඳි පුවත්

ඉහළට බොත්තම
සමීප

Adblock අනාවරණය විය

Martech Zone වෙළඳ දැන්වීම් ආදායම, අනුබද්ධ සබැඳි සහ අනුග්‍රාහකත්ව හරහා අපි අපගේ වෙබ් අඩවියෙන් මුදල් උපයන නිසා කිසිදු වියදමකින් තොරව ඔබට මෙම අන්තර්ගතය ලබා දීමට හැකි වේ. ඔබ අපගේ වෙබ් අඩවිය නරඹන විට ඔබේ දැන්වීම් අවහිර කරන්නා ඉවත් කරන්නේ නම් අපි අගය කරන්නෙමු.