Ecommerce ati SoobuṢawari tita

Ọna ti o rọrun julọ lati dinku Shopify CSS rẹ Ti a Kọ ni Lilo Awọn oniyipada Liquid

A kọ jade a Ṣe afikun Plus Aaye fun alabara ti o ni nọmba awọn eto fun awọn aza wọn ninu faili akori gangan. Lakoko ti iyẹn jẹ anfani gaan fun ni irọrun ṣatunṣe awọn aza, o tumọ si pe o ko ni awọn oju-iwe ara cascading aimi kan (CSS) faili ti o le ni rọọrun mini (din ni iwọn). Nigba miiran eyi ni a tọka si bi CSS funmorawon ati funmorawon CSS rẹ.

Kí ni CSS Minification?

Nigbati o ba nkọwe si iwe-ara kan, o ṣalaye ara fun ẹya HTML kan ni ẹẹkan, ati lẹhinna lo leralera lori nọmba eyikeyi awọn oju-iwe wẹẹbu. Fun apẹẹrẹ, ti MO ba fẹ ṣeto awọn pato fun bii awọn nkọwe mi ṣe wo lori aaye mi, Mo le ṣeto CSS mi gẹgẹbi atẹle:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ninu iwe aṣa yẹn, aaye kọọkan, ipadabọ laini, ati taabu gba aye. Ti MO ba yọ gbogbo wọn kuro, Mo le dinku iwọn iwe aṣa yẹn nipasẹ diẹ sii ju 40% ti CSS ba dinku! Abajade ni eyi…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS kekere ni a gbọdọ ti o ba ti o ba fẹ lati titẹ soke rẹ sii ati nibẹ ni o wa nọmba kan ti irinṣẹ lori ayelujara ti o le ran o compress rẹ CSS faili daradara. Kan wa fun compress CSS ọpa or minify CSS ọpa online.

Fojuinu faili CSS nla kan ati iye aaye ti o le wa ni fipamọ nipa idinku CSS rẹ… o jẹ deede o kere ju 20% ati pe o le ga soke ti 40% ti isuna wọn. Nini oju-iwe CSS ti o kere ju ti a tọka si jakejado aaye rẹ le ṣafipamọ awọn akoko fifuye lori oju-iwe kan kọọkan, le mu ipo aaye rẹ pọ si, mu adehun igbeyawo rẹ dara, ati nikẹhin mu awọn metiriki iyipada rẹ dara si.

Apa isalẹ, nitorinaa, ni pe laini kan wa ninu faili CSS fisinuirindigbindigbin nitorinaa wọn nira pupọ lati laasigbotitusita tabi imudojuiwọn.

Shopify CSS Liquid

Laarin akori Shopify kan, o le lo awọn eto ti o le ṣe imudojuiwọn ni rọọrun. A fẹ lati ṣe eyi bi a ṣe n ṣe idanwo ati mu awọn aaye pọ si ki a le kan ṣe akanṣe akori ni oju ju ki o ma walẹ sinu koodu naa. Nitorinaa, Stylesheet wa ni itumọ pẹlu Liquid (Ede kikọ Shopify) ati pe a ṣafikun awọn oniyipada lati ṣe imudojuiwọn Stylesheet naa. O le dabi eyi:

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

Lakoko ti eyi n ṣiṣẹ daradara, o ko le daakọ koodu nirọrun ki o lo ohun elo ori ayelujara lati dinku nitori iwe afọwọkọ wọn ko loye awọn aami omi. Ni otitọ, iwọ yoo pa CSS rẹ run patapata ti o ba gbiyanju! Irohin nla ni pe nitori pe o ti kọ pẹlu Liquid… o le lo iwe afọwọkọ nitootọ lati dinku iṣelọpọ!

Shopify CSS Minification Ni Liquid

Shopify n fun ọ laaye lati ni irọrun awọn oniyipada iwe afọwọkọ ati yipada iṣelọpọ. Ni ọran yii, a le fi ipari si CSS wa sinu oniyipada akoonu ati lẹhinna ṣe afọwọyi lati yọ gbogbo awọn taabu kuro, awọn ipadabọ laini, ati awọn alafo! Mo ti ri yi koodu ni awọn

Shopify Community lati Tim (tairli) ati awọn ti o sise brilliantly!

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

Nitorinaa, fun apẹẹrẹ mi loke, oju-iwe mi theme.css.liquid yoo dabi eyi:

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

Nigbati mo ba ṣiṣẹ koodu naa, iṣẹjade CSS jẹ bi atẹle, dinku ni pipe:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

Douglas Karr

Douglas Karr jẹ CMO ti Ṣii awọn oye ati oludasile ti Martech Zone. Douglas ti ṣe iranlọwọ fun awọn dosinni ti awọn ibẹrẹ MarTech aṣeyọri, ti ṣe iranlọwọ ni aisimi ti o ju $ 5 bilionu ni awọn ohun-ini Martech ati awọn idoko-owo, ati tẹsiwaju lati ṣe iranlọwọ fun awọn ile-iṣẹ ni imuse ati adaṣe awọn tita ati awọn ilana titaja wọn. Douglas jẹ iyipada oni nọmba agbaye ti a mọye ati alamọja MarTech ati agbọrọsọ. Douglas tun jẹ onkọwe ti a tẹjade ti itọsọna Dummie ati iwe itọsọna iṣowo kan.

Ìwé jẹmọ

Pada si bọtini oke
Close

Ti ṣe awari Adblock

Martech Zone ni anfani lati pese akoonu yii fun ọ laisi idiyele nitori a ṣe monetize aaye wa nipasẹ wiwọle ipolowo, awọn ọna asopọ alafaramo, ati awọn onigbọwọ. A yoo ni riri ti o ba yọ ohun idena ipolowo rẹ bi o ṣe nwo aaye wa.