Lihtsaim viis oma Shopify CSS-i minimeerimiseks, mis on ehitatud vedelate muutujate abil

Minimeeri Shopify Liquid CSS-failide skript

Ehitasime välja a ShopifyPlus saidi kliendi jaoks, mille stiilide jaoks on tegelikus teemafailis mitu sätet. Kuigi see on stiilide hõlpsaks kohandamiseks väga kasulik, tähendab see, et teil ei ole staatilist kaskaadlaadilehte (CSS) faili, mida saate hõlpsalt teha pisendama (vähendage suurust). Mõnikord nimetatakse seda CSS-iks kokkusurumine ja kokkusurumise teie CSS.

Mis on CSS-i minimeerimine?

Kui kirjutate laaditabelile, määrate konkreetse HTML-i elemendi stiili üks kord ja kasutate seda siis ikka ja jälle mis tahes arvul veebilehtedel. Näiteks kui ma sooviksin seadistada teatud täpsustusi selle kohta, kuidas mu fontid saidil välja nägid, võiksin oma CSS-i korraldada järgmiselt.

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Sellel laaditabelil võtavad ruumi iga tühik, rea tagastus ja tabeldusmärk. Kui ma need kõik eemaldan, saan selle stiilitabeli suurust vähendada üle 40%, kui CSS on minimeeritud! Tulemuseks on selline…

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

CSS-i minimeerimine on kohustuslik, kui soovite oma saiti kiirendada ja võrgus on mitmeid tööriistu, mis aitavad teil CSS-faili tõhusalt tihendada. Lihtsalt otsige tihendage CSS-i tööriist or minimeeri CSS-i tööriist online.

Kujutage ette suurt CSS-faili ja seda, kui palju ruumi saab säästa selle CSS-i vähendamisega… tavaliselt on see vähemalt 20% ja võib moodustada kuni 40% nende eelarvest. Väiksemale CSS-lehele viitamine kogu saidil võib säästa iga üksiku lehe laadimisaegu, tõsta saidi asetust, parandada kaasatust ja lõppkokkuvõttes parandada konversioonimõõdikuid.

Negatiivne külg on muidugi see, et tihendatud CSS-failis on üks rida, nii et nende tõrkeotsing või värskendamine on uskumatult keeruline.

Shopify CSS Liquid

Shopify teemas saate rakendada seadeid, mida saate hõlpsalt värskendada. Meile meeldib seda teha saitide testimisel ja optimeerimisel, et saaksime teemat lihtsalt visuaalselt kohandada, mitte koodi süveneda. Seega on meie stiilitabel loodud Liquidiga (Shopify skriptikeel) ja lisame stiililehe värskendamiseks muutujaid. See võib välja näha selline:

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

Kuigi see toimib hästi, ei saa te koodi lihtsalt kopeerida ja selle minimeerimiseks veebitööriista kasutada, kuna nende skript ei mõista vedelaid silte. Tegelikult hävitate oma CSS-i täielikult, kui proovite! Suurepärane uudis on see, et kuna see on loodud Liquidiga, saate väljundi minimeerimiseks KASUTADA skriptimist!

Shopify CSS-i minimeerimine vedelikus

Shopify võimaldab teil muutujaid hõlpsalt skriptida ja väljundit muuta. Sel juhul saame oma CSS-i sisuliselt mähkida sisumuutujaks ja seejärel sellega manipuleerida, et eemaldada kõik tabeldusmärgid, reavahetused ja tühikud! Leidsin selle koodi lehelt Shopify kogukond Alates Tim (tairli) ja see töötas suurepäraselt!

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

Minu ülaltoodud näite puhul näeks minu leht theme.css.liquid välja selline:

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

Kui ma koodi käivitan, on väljund CSS järgmine, täiuslikult minimeeritud:

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