Netverslun og smásalaSearch Marketing

Auðveldasta leiðin til að minnka Shopify CSS sem er smíðaður með því að nota fljótandi breytur

Við byggðum út a ShopifyPlus síða fyrir viðskiptavin sem hefur fjölda stillinga fyrir stíla sína í raunverulegu þemaskránni. Þó að það sé mjög hagkvæmt til að stilla stíla auðveldlega, þýðir það að þú ert ekki með kyrrstæð, fellandi stílblöð (CSS) skrá sem þú getur auðveldlega minnka (minnka að stærð). Stundum er þetta kallað CSS þjöppun og þjappa CSS þinn.

Hvað er CSS Minification?

Þegar þú ert að skrifa í stílblað skilgreinirðu stílinn fyrir tiltekið HTML frumefni einu sinni og notar hann síðan aftur og aftur á hvaða fjölda vefsíðna sem er. Til dæmis, ef ég vildi setja upp smáatriði fyrir hvernig leturgerðirnar mínar litu út á síðunni minni, gæti ég skipulagt CSS minn á eftirfarandi hátt:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Innan þess stílblaðs tekur hvert bil, línuskil og flipi pláss. Ef ég fjarlægi alla þá get ég minnkað stærð þess stílblaðs um meira en 40% ef CSS er minnkað! Niðurstaðan er þessi…

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

CSS minnkun er nauðsyn ef þú vilt flýta fyrir síðunni þinni og það er fjöldi verkfæra á netinu sem getur hjálpað þér að þjappa CSS skránni þinni á skilvirkan hátt. Leitaðu bara að þjappa CSS tól or minnka CSS tól á netinu.

Ímyndaðu þér stóra CSS skrá og hversu mikið pláss er hægt að spara með því að minnka CSS hennar ... hún er venjulega að lágmarki 20% og getur verið allt að 40% af kostnaðarhámarki þeirra. Að hafa minni CSS síðu sem vísað er á síðuna þína getur sparað hleðslutíma á hverri einustu síðu, getur aukið stöðu síðunnar þinnar, bætt þátttöku þína og að lokum bætt viðskiptamælingar þínar.

Gallinn er auðvitað sá að það er ein lína í þjappaðri CSS skrá svo það er ótrúlega erfitt að leysa eða uppfæra þær.

Shopify CSS Liquid

Innan Shopify þema geturðu notað stillingar sem þú getur auðveldlega uppfært. Okkur finnst gaman að gera þetta þegar við prófum og fínstillum síður þannig að við getum bara sérsniðið þemað sjónrænt frekar en að grafa ofan í kóðann. Svo, stílblaðið okkar er byggt með Liquid (forskriftarmáli Shopify) og við bætum við breytum til að uppfæra stílblaðið. Það gæti litið svona út:

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

Þó að þetta virki vel geturðu ekki einfaldlega afritað kóðann og notað nettól til að minnka hann vegna þess að handritið þeirra skilur ekki fljótandi merkin. Reyndar muntu algjörlega eyðileggja CSS þinn ef þú reynir! Góðu fréttirnar eru þær að vegna þess að það er smíðað með Liquid... þá geturðu í raun NOTAÐ skriftu til að minnka framleiðsluna!

Shopify CSS Minification In Liquid

Shopify gerir þér kleift að skrifa breytur auðveldlega og breyta úttakinu. Í þessu tilfelli getum við í raun sett inn CSS okkar inn í innihaldsbreytu og síðan meðhöndlað hana til að fjarlægja alla flipa, línuskil og bil! Ég fann þennan kóða í

Shopify samfélag frá Tim (tairli) og það virkaði ljómandi vel!

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

Svo, fyrir dæmið mitt hér að ofan, þá myndi theme.css.liquid síðan mín líta svona út:

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

Þegar ég keyri kóðann er úttakið CSS sem hér segir, fullkomlega minnkað:

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

Douglas Karr

Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

tengdar greinar

Til baka efst á hnappinn
Loka

Auglýsingablokk greind

Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.