E-kereskedelem és kiskereskedelemSearch Marketing

A legegyszerűbb módja a folyékony változók felhasználásával készült Shopify CSS kicsinyítésének

Kiépítettük a ShopifyPlus webhely egy olyan ügyfél számára, amely számos stílusbeállítással rendelkezik az aktuális témafájlban. Bár ez nagyon előnyös a stílusok egyszerű beállításához, ez azt jelenti, hogy nincs statikus lépcsőzetes stíluslapja (CSS) fájlt, amelyet egyszerűen elkészíthet kisebbít (csökkentse a méretét). Néha ezt CSS-nek is nevezik összenyomás és a tömörítő az Ön CSS-je.

Mi az a CSS-minifikáció?

Amikor stíluslapra ír, egyszer meghatározza egy adott HTML-elem stílusát, majd újra és újra felhasználja tetszőleges számú weboldalon. Például, ha be akarok állítani néhány konkrétumot arra vonatkozóan, hogyan nézzenek ki a betűtípusaim a webhelyemen, a CSS-t a következőképpen rendezhetem:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

A stíluslapon belül minden szóköz, sor visszatérés és tabulátor helyet foglal. Ha az összeset eltávolítom, a stíluslap méretét több mint 40%-kal csökkenthetem, ha a CSS le van csökkentve! Az eredmény ez…

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

CSS kicsinyítés elengedhetetlen, ha fel szeretné gyorsítani webhelyét, és számos online eszköz található, amelyek segítségével hatékonyan tömörítheti a CSS-fájlt. Csak keress tömörített CSS eszköz or CSS eszköz minimalizálása online.

Képzeljen el egy nagy CSS-fájlt, és mennyi helyet takaríthat meg a CSS-jének lekicsinyítésével… ez általában minimum 20%, és akár a költségvetés 40%-a is lehet. Ha egy kisebb CSS-oldalra hivatkozik az egész webhelyen, az minden egyes oldalon megtakaríthatja a betöltési időt, növelheti a webhely rangsorolását, javíthatja az elköteleződést, és végső soron javíthatja a konverziós mutatókat.

A hátránya természetesen az, hogy egyetlen sor van a tömörített CSS-fájlban, így hihetetlenül nehéz a hibaelhárítás vagy a frissítés.

Shopify CSS Liquid

A Shopify témán belül olyan beállításokat alkalmazhat, amelyeket egyszerűen frissíthet. Szeretjük ezt megtenni, amikor webhelyeket tesztelünk és optimalizálunk, hogy a témát csak vizuálisan tudjuk testreszabni, ahelyett, hogy beleásnánk magunkat a kódba. Tehát a stíluslapunk a Liquiddel (a Shopify szkriptnyelvével) épül fel, és változókat adunk hozzá a stíluslap frissítéséhez. Így nézhet ki:

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

Bár ez jól működik, nem lehet egyszerűen másolni a kódot, és online eszközzel kicsinyíteni, mert a szkript nem érti a folyékony címkéket. Valójában teljesen tönkreteszi a CSS-t, ha megpróbálja! A nagyszerű hír az, hogy mivel a Liquid-del készült… valójában HASZNÁLHATSZ szkriptet a kimenet minimalizálására!

Shopify CSS Minification In Liquid

A Shopify lehetővé teszi a változók egyszerű szkriptelését és a kimenet módosítását. Ebben az esetben valójában becsomagolhatjuk CSS-ünket egy tartalmi változóba, majd manipulálhatjuk azt, hogy eltávolítsuk az összes tabulátort, sorvisszaadást és szóközt! Ezt a kódot a

Shopify közösség ból ből Tim (tairli) és zseniálisan működött!

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

Tehát a fenti példámban a theme.css.liquid oldalam így nézne ki:

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

Amikor futtatom a kódot, a kimeneti CSS a következő, tökéletesen kicsinyítve:

/* 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 of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.