La forma más fácil de minimizar su Shopify CSS que se crea utilizando variables líquidas

Minify Script para Shopify Liquid CSS Archivos

Construimos un Shopify Plus sitio para un cliente que tiene una serie de configuraciones para sus estilos en el archivo de tema real. Si bien eso es realmente ventajoso para ajustar estilos fácilmente, significa que no tiene hojas de estilo en cascada estáticas (CO) archivo que puede fácilmente minify (reducir de tamaño). A veces esto se conoce como CSS compresión y comprimir tu CSS.

¿Qué es la minificación de CSS?

Cuando está escribiendo en una hoja de estilo, define el estilo para un elemento HTML en particular una vez y luego lo usa una y otra vez en cualquier cantidad de páginas web. Por ejemplo, si quisiera configurar algunos detalles sobre cómo se verían mis fuentes en mi sitio, podría organizar mi CSS de la siguiente manera:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dentro de esa hoja de estilo, cada espacio, retorno de línea y pestaña ocupan espacio. Si elimino todos esos, puedo reducir el tamaño de esa hoja de estilo en más del 40% si se minimiza el CSS. El resultado es este…

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

minificación de CSS es imprescindible si desea acelerar su sitio y hay una serie de herramientas en línea que pueden ayudarlo a comprimir su archivo CSS de manera eficiente. solo busca Herramienta para comprimir CSS or Minificar herramienta CSS en línea.

Imagine un archivo CSS grande y cuánto espacio se puede ahorrar minimizando su CSS... normalmente es un mínimo del 20 % y puede representar más del 40 % de su presupuesto. Tener una página CSS más pequeña referida en todo su sitio puede ahorrar tiempos de carga en cada página, puede aumentar la clasificación de su sitio, mejorar su participación y, en última instancia, mejorar sus métricas de conversión.

La desventaja, por supuesto, es que hay una sola línea en un archivo CSS comprimido, por lo que son increíblemente difíciles de solucionar o actualizar.

Shopify CSS líquido

Dentro de un tema de Shopify, puedes aplicar configuraciones que puedes actualizar fácilmente. Nos gusta hacer esto mientras probamos y optimizamos los sitios para que podamos personalizar el tema visualmente en lugar de profundizar en el código. Entonces, nuestra hoja de estilo está construida con Liquid (el lenguaje de secuencias de comandos de Shopify) y agregamos variables para actualizar la hoja de estilo. Puede verse así:

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

Si bien esto funciona bien, no puede simplemente copiar el código y usar una herramienta en línea para minimizarlo porque su secuencia de comandos no comprende las etiquetas líquidas. De hecho, ¡destruirás totalmente tu CSS si lo intentas! La buena noticia es que debido a que está construido con Liquid... ¡en realidad puedes UTILIZAR secuencias de comandos para minimizar la salida!

Minificación de Shopify CSS en líquido

Shopify le permite escribir variables fácilmente y modificar la salida. En este caso, podemos envolver nuestro CSS en una variable de contenido y luego manipularlo para eliminar todas las tabulaciones, retornos de línea y espacios. Encontré este código en el Comunidad Shopify del Tim (tairli) ¡y funcionó de maravilla!

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

Entonces, para mi ejemplo anterior, mi página theme.css.liquid se vería así:

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

Cuando ejecuto el código, el CSS de salida es el siguiente, perfectamente minimizado:

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