Najłatwiejszy sposób na zminimalizowanie CSS Shopify, który jest zbudowany przy użyciu zmiennych płynnych

Skrypt Minify dla plików Shopify Liquid CSS

Zbudowaliśmy ShopifyPlus witryny dla klienta, który ma wiele ustawień dla swoich stylów w rzeczywistym pliku motywu. Chociaż jest to naprawdę korzystne dla łatwego dostosowywania stylów, oznacza to, że nie masz statycznych kaskadowych arkuszy stylów (CSS) plik, który możesz łatwo minify (zmniejszenie rozmiaru). Czasami jest to określane jako CSS kompresja i ściskanie Twój CSS.

Co to jest minifikacja CSS?

Kiedy piszesz do arkusza stylów, definiujesz styl dla określonego elementu HTML raz, a następnie używasz go wielokrotnie na dowolnej liczbie stron internetowych. Na przykład, gdybym chciał określić, jak moje czcionki wyglądały w mojej witrynie, mogę uporządkować CSS w następujący sposób:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

W tym arkuszu stylów każda spacja, powrót wiersza i tabulator zajmują miejsce. Jeśli usunę je wszystkie, mogę zmniejszyć rozmiar arkusza stylów o ponad 40%, jeśli CSS zostanie zminimalizowany! Rezultat jest taki…

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

Minifikacja CSS jest koniecznością, jeśli chcesz przyspieszyć działanie swojej witryny, a w Internecie dostępnych jest wiele narzędzi, które pomogą Ci skutecznie skompresować plik CSS. Po prostu wyszukaj skompresuj narzędzie CSS or zminimalizuj narzędzie CSS online.

Wyobraź sobie duży plik CSS i ile miejsca można zaoszczędzić, minimalizując jego CSS… zazwyczaj jest to minimum 20% i może przekraczać 40% budżetu. Mniejsza strona CSS, do której odsyła się w witrynie, może skrócić czas ładowania na każdej stronie, podnieść pozycję witryny, zwiększyć zaangażowanie i ostatecznie poprawić wskaźniki konwersji.

Minusem jest oczywiście to, że w skompresowanym pliku CSS jest jedna linia, więc niezwykle trudno jest je rozwiązać lub zaktualizować.

Shopify w płynie CSS

W motywie Shopify możesz zastosować ustawienia, które możesz łatwo zaktualizować. Lubimy to robić, testując i optymalizując witryny, dzięki czemu możemy po prostu dostosować motyw wizualnie, zamiast zagłębiać się w kod. Tak więc nasz arkusz stylów jest zbudowany przy użyciu Liquid (języka skryptowego Shopify) i dodajemy zmienne, aby zaktualizować arkusz stylów. Może to wyglądać tak:

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

Chociaż działa to dobrze, nie możesz po prostu skopiować kodu i użyć narzędzia online, aby go zminimalizować, ponieważ ich skrypt nie rozumie płynnych tagów. W rzeczywistości, jeśli spróbujesz, całkowicie zniszczysz swój CSS! Wspaniałą wiadomością jest to, że ponieważ jest zbudowany z Liquid… możesz faktycznie UŻYWAĆ skryptów, aby zminimalizować dane wyjściowe!

Shopify CSS Minifikacja w płynie

Shopify umożliwia łatwe tworzenie skryptów zmiennych i modyfikowanie danych wyjściowych. W takim przypadku możemy faktycznie zawinąć nasz CSS w zmienną zawartości, a następnie manipulować nią, aby usunąć wszystkie tabulatory, powroty linii i spacje! Znalazłem ten kod w Społeczność Shopify od Tim (tairli) i zadziałało znakomicie!

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

Tak więc w powyższym przykładzie moja strona theme.css.liquid wyglądałaby tak:

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

Kiedy uruchamiam kod, wynikowy CSS wygląda następująco, doskonale skrócony:

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