CSS Crítico no Shopify
CSS Crítico no Shopify - em resumo
CSS Crítico é uma coleção de regras CSS necessárias para a primeira renderização. Essas regras CSS são colocadas no cabeçalho da página. Isso garante que o navegador comece a renderizar sem ter que baixar todos os arquivos CSS que bloqueiam a renderização
Shopify é uma solução de loja online tudo-em-um amplamente utilizada, onde qualquer pessoa pode facilmente construir sua própria loja online. Infelizmente, o Shopify não foi construído com uma pontuação de velocidade de página perfeita e não suporta CSS Crítico automatizado. CSS Crítico no Shopify só pode ser adicionado manualmente.
Neste artigo, mostrarei como adicionar rapidamente CSS Crítico à sua loja Shopify.
O que é CSS Crítico?
Devido à forma como todos os navegadores modernos funcionam, a renderização da página é bloqueada por arquivos CSS externos. Quando um navegador precisa baixar 1 ou mais arquivos CSS, a renderização de uma página pode facilmente bloquear 100ms ou até mais.
Uma maneira de evitar isso é usar CSS Crítico. CSS Crítico é uma coleção de CSS necessária para renderizar apenas a parte visível da página. Este CSS Crítico é frequentemente colocado inline, no cabeçalho da página. Isso garante que o navegador não precise baixar 1 ou mais arquivos CSS antes de começar a renderizar. Enquanto isso, enquanto a página é exibida, seu navegador baixa os arquivos CSS finais em segundo plano.
Comece rapidamente: CSS Crítico no Shopify!
Shopify é uma solução de loja online tudo-em-um popular. Funciona muito facilmente, mas a velocidade da página não é o ponto mais forte do Shopify. Por exemplo, não há suporte bom e automatizado para CSS Crítico por padrão. Portanto, teremos que adicionar o suporte para CSS Crítico manualmente. Felizmente, isso não é muito trabalho. Siga o guia passo a passo abaixo para usar CSS Crítico no Shopify.
1. Criar um novo tema
Ao editar o comportamento principal de um modelo no Shopify, é melhor criar um novo tema. Navegue até seu tema atual via 'Loja Online'> 'Temas' e copie seu tema atual para um novo tema clicando em 'Ações'> 'Duplicar'
2 Gerar CSS Crítico
Existem inúmeras maneiras de gerar CSS Crítico de várias formas. Eu mesmo uso o módulo NodeJs Critical em combinação com alguns ajustes manuais. É um pouco complicado, mas geralmente é a melhor solução.
Se isso for um pouco técnico demais para você, você pode tentar um dos muitos Geradores de CSS Crítico online. Digite o url do seu site aqui e a ferramenta irá gerar automaticamente seu CSS Crítico para você. Copie este CSS Crítico e prossiga para o próximo passo.
3. Fazer upload do CSS Crítico
No seu novo tema, navegue até a pasta snippets e crie um novo arquivo chamado critcal.css.liquid. Cole o conteúdo do CSS Crítico gerado na etapa 2 no seu novo arquivo.
4. Editar os arquivos de modelo
Abra seu modelo na pasta Layout. Precisamos fazer 2 ajustes aqui. Primeiro, adicionamos o CSS Crítico no cabeçalho da página:
<head>
{% include 'critical.css'%}
Em seguida, edite as referências CSS existentes para baixar os arquivos CSS originais em segundo plano. Para isso, usaremos a tag preload. A tag preload indica ao seu navegador que um arquivo será usado posteriormente na página. O navegador então baixará este arquivo em paralelo. Depois que esses arquivos forem baixados, ative os arquivos CSS através de JavaScript:
<link
rel = "preload"
href = "{{'theme.scss.css' | asset_url}}"
type = "text / css" as = "style"
onload = "this.onload = null; this.rel = 'stylesheet';" />
4. Testar novo tema
Agora você está pronto para testar o CSS Crítico no Shopify. Na página de temas, clique em 'Ações' > 'Visualizar' do tema copiado. Teste o novo tema completamente, prestando atenção especial ao valor do Layout Shift (CLS) no lighthouse. CSS Crítico incompleto ou incorreto pode causar uma mudança de layout significativa.
5. Publicar novo tema
Navegue até Temas no menu esquerdo em 'Loja Online' e em 'Ações' selecione 'Publicar' para o seu novo tema.
CSS Crítico está no ar!
Parabéns, sua loja Shopify agora está usando CSS Crítico. Isso faz sua loja carregar muito mais rápido! Você precisa de ajuda para acelerar sua loja? Eu gostaria de ajudá-lo!
Limitações do Shopify
Normalmente, você só quer entregar CSS Crítico para visitantes que não têm os arquivos CSS finais no cache do navegador. Servir os arquivos CSS originais através do cache do navegador é geralmente mais rápido do que usar CSS Crítico.
Isso é feito enviando um cookie na primeira solicitação e alguma renderização do lado do servidor. Infelizmente, o Shopify não permite ler e enviar cookies no editor liquid do Shopify. Isso é uma pena, mas o que você pode fazer?
Ainda assim, faz sentido adicionar CSS Crítico à sua loja Shopify. O ganho de velocidade valerá a pena!
Performance is a Feature.
Treating speed as an afterthought fails. Build a performance culture with a dedicated 2-sprint optimization overhaul.
- 2-Sprint Overhaul
- Culture Building
- Sustainable Speed
