A maneira mais fácil de minimizar o CSS do Shopify que é construído usando variáveis líquidas
Nós construímos um Shopify Plus site para um cliente que tem várias configurações para seus estilos no arquivo de tema real. Embora isso seja realmente vantajoso para ajustar estilos facilmente, significa que você não tem folhas de estilo em cascata estáticas (APF) que você pode facilmente apoucar (reduzir de tamanho). Às vezes, isso é chamado de CSS compressão e comprimindo seu CSS.
O que é Minificação CSS?
Quando você está escrevendo em uma folha de estilo, você define o estilo para um elemento HTML específico uma vez e, em seguida, o usa repetidamente em qualquer número de páginas da web. Por exemplo, se eu quiser configurar alguns detalhes sobre a aparência das minhas fontes no meu site, posso organizar meu CSS da seguinte forma:
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
p {
font-size: 18px;
}
Dentro dessa folha de estilo, cada espaço, retorno de linha e tabulação ocupam espaço. Se eu remover tudo isso, posso reduzir o tamanho dessa folha de estilo em mais de 40% se o CSS for reduzido! O resultado é esse…
h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}
Minificação CSS é uma obrigação se você deseja acelerar seu site e há várias ferramentas on-line que podem ajudá-lo a compactar seu arquivo CSS com eficiência. Basta procurar compactar ferramenta CSS or ferramenta CSS minify conectados.
Imagine um arquivo CSS grande e quanto espaço pode ser economizado reduzindo seu CSS… normalmente é um mínimo de 20% e pode ser mais de 40% de seu orçamento. Ter uma página CSS menor referenciada em todo o seu site pode economizar tempo de carregamento em cada página, pode aumentar a classificação do seu site, melhorar seu engajamento e, finalmente, melhorar suas métricas de conversão.
A desvantagem, é claro, é que há uma única linha em um arquivo CSS compactado, então eles são incrivelmente difíceis de solucionar ou atualizar.
Shopify CSS Líquido
Em um tema da Shopify, você pode aplicar configurações que podem ser atualizadas facilmente. Gostamos de fazer isso enquanto testamos e otimizamos sites para que possamos personalizar o tema visualmente, em vez de mergulhar no código. Assim, nossa folha de estilo é construída com Liquid (linguagem de script do Shopify) e adicionamos variáveis para atualizar a folha de estilo. Pode parecer assim:
{%- 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 }}
}
Embora isso funcione bem, você não pode simplesmente copiar o código e usar uma ferramenta online para minificá-lo porque o script não entende as tags líquidas. Na verdade, você destruirá totalmente seu CSS se tentar! A grande notícia é que, por ser construído com Liquid… você pode realmente USAR scripts para diminuir a saída!
Shopify minificação CSS em líquido
Shopify permite que você crie facilmente variáveis de script e modifique a saída. Nesse caso, podemos realmente envolver nosso CSS em uma variável de conteúdo e manipulá-lo para remover todas as guias, retornos de linha e espaços! Encontrei esse código no
Comunidade da Shopify da Tim (Tairli) e funcionou brilhantemente!{%- 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 }}
Então, para o meu exemplo acima, minha página theme.css.liquid ficaria assim:
{%- 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 }}
Quando executo o código, o CSS de saída é o seguinte, perfeitamente minificado:
/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}