Сұйық айнымалылар арқылы жасалған Shopify CSS-ті кішірейтудің ең оңай жолы

Shopify Liquid CSS файлдары үшін сценарийді кішірейту

Біз а ShopifyPlus нақты тақырып файлында мәнерлерінің бірқатар параметрлері бар клиентке арналған сайт. Бұл стильдерді оңай реттеу үшін өте тиімді болса да, бұл сізде статикалық каскадты мәнерлер кестелері жоқ екенін білдіреді (CSS) файлды оңай алуға болады minify (өлшемді азайту). Кейде бұл 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 тақырыбы ішінде оңай жаңартуға болатын параметрлерді қолдануға болады. Біз мұны сайттарды сынап, оңтайландыру кезінде орындағанды ​​​​ұнатамыз, осылайша біз кодты зерттемей, тақырыпты жай ғана көрнекі түрде теңшей аламыз. Сонымен, біздің стильдер кестесі 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-ті толығымен жоясыз! Тамаша жаңалық, ол Liquid көмегімен жасалғандықтан... шығаруды азайту үшін сценарийді пайдалануыңызға болады!

Сұйықтықтағы Shopify 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}