Der einfachste Weg, Ihr Shopify-CSS zu minimieren, das mit flüssigen Variablen erstellt wurde

Minify-Skript für Shopify Liquid CSS-Dateien

Wir bauten ein Shopify Plus Website für einen Client, der eine Reihe von Einstellungen für seine Stile in der eigentlichen Designdatei hat. Dies ist zwar wirklich vorteilhaft für die einfache Anpassung von Stilen, bedeutet aber, dass Sie keine statischen Cascading Stylesheets haben (CSS)-Datei, die Sie problemlos erstellen können minify (verkleinern). Manchmal wird dies als CSS bezeichnet Kompression und Komprimieren Ihr CSS.

Was ist CSS-Minifizierung?

Wenn Sie in ein Stylesheet schreiben, definieren Sie den Stil für ein bestimmtes HTML-Element einmal und verwenden ihn dann immer wieder auf einer beliebigen Anzahl von Webseiten. Wenn ich zum Beispiel einige Besonderheiten dafür festlegen möchte, wie meine Schriftarten auf meiner Website aussehen, könnte ich mein CSS wie folgt organisieren:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Innerhalb dieses Stylesheets nehmen alle Leerzeichen, Zeilenumbrüche und Tabulatoren Platz ein. Wenn ich all diese entferne, kann ich die Größe dieses Stylesheets um über 40 % reduzieren, wenn das CSS minimiert wird! Das Ergebnis ist dieses …

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

CSS-Minifizierung ist ein Muss, wenn Sie Ihre Website beschleunigen möchten, und es gibt eine Reihe von Tools online, mit denen Sie Ihre CSS-Datei effizient komprimieren können. Einfach suchen CSS-Tool komprimieren or CSS-Tool minimieren online.

Stellen Sie sich eine große CSS-Datei vor und wie viel Speicherplatz durch Verkleinern des CSS eingespart werden kann … normalerweise sind es mindestens 20 % und können bis zu 40 % ihres Budgets ausmachen. Eine kleinere CSS-Seite, auf die auf Ihrer gesamten Website verwiesen wird, kann Ladezeiten auf jeder einzelnen Seite verkürzen, das Ranking Ihrer Website erhöhen, Ihr Engagement verbessern und letztendlich Ihre Conversion-Metriken verbessern.

Der Nachteil ist natürlich, dass es eine einzelne Zeile in einer komprimierten CSS-Datei gibt, sodass sie unglaublich schwierig zu beheben oder zu aktualisieren sind.

Shopify CSS-Flüssigkeit

Innerhalb eines Shopify-Designs können Sie Einstellungen anwenden, die Sie einfach aktualisieren können. Wir tun dies gerne, wenn wir Websites testen und optimieren, sodass wir das Design einfach visuell anpassen können, anstatt in den Code einzudringen. Unser Stylesheet wird also mit Liquid (der Skriptsprache von Shopify) erstellt, und wir fügen Variablen hinzu, um das Stylesheet zu aktualisieren. Es kann so aussehen:

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

Obwohl dies gut funktioniert, können Sie den Code nicht einfach kopieren und mit einem Online-Tool minimieren, da das Skript die Liquid-Tags nicht versteht. Tatsächlich werden Sie Ihr CSS völlig zerstören, wenn Sie es versuchen! Die gute Nachricht ist, dass Sie, weil es mit Liquid erstellt wurde, tatsächlich Skripte verwenden können, um die Ausgabe zu minimieren!

Shopify CSS-Minifizierung in Liquid

Shopify ermöglicht es Ihnen, Variablen einfach zu skripten und die Ausgabe zu ändern. In diesem Fall können wir unser CSS tatsächlich in eine Inhaltsvariable packen und es dann manipulieren, um alle Tabulatoren, Zeilenumbrüche und Leerzeichen zu entfernen! Ich habe diesen Code in der gefunden Shopify-Community aus Tim (tairli) und es hat wunderbar funktioniert!

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

Für mein obiges Beispiel würde meine Seite theme.css.liquid also so aussehen:

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

Wenn ich den Code ausführe, sieht das Ausgabe-CSS wie folgt aus, perfekt verkleinert:

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