NodeJs — Obtendo Css Critico de um Site

Otimizando a velocidade de carregamento com CSS crítico utilizando Penthouse

Paloma Macetko

• 2 min read
NodeJs — Obtendo Css Critico de um Site

Olá Gente!

Se você já otimizou a velocidade de um site sabe que precisa incluir o Css Critico no topo.

Este Css Critico é o Css antes de começar a rolagem da página, desta forma, a primeira parte do site é renderizada antes dos arquivos de estilo serem carregados, o que torna muito rápido o primeiro carregamento.

Porem, gerar o Css Critico manualmente gera um gasto de tempo enorme.

Para isto, iremos utilizar o repositório penthouse:

GitHub - pocketjoso/penthouse: Generate critical css for your web pages
Generate critical css for your web pages. Contribute to pocketjoso/penthouse development by creating an account on GitHub.
GitHubpocketjoso

O funcionamento é bem simples:

Aqui precisamos configurar alguns campos:

  • [CSS_SITE]: Aqui precisamos inserir todo o site do site
  • width e height: Estes dois campos permitem personalizar o tamanho da Janela, isto permite gerar o Css Critico para várias resoluções
  • userAgent: Se seu site faz algo quando alguem acessa por celular, você pode informar um userAgent de um celular para simular o acesso de um celular

O retorno será o css critico no campo “criticalCss”.

Porem, desta forma ainda teremos muito trabalho.

Então criei uma API para gerar o Css Critico utilizando o repositório ”express”:

GitHub - cmacetko/util_css_critico
Contribute to cmacetko/util_css_critico development by creating an account on GitHub.
GitHubcmacetko

Para utilizar, basta enviar um POST para o endpoint da API “http://127.0.0.1:9000/gerar” enviando Json no Body:

{ 
  "url": "https://www.meusite.com.br/", 
  "css": "https://www.meusite.com.br/css_completo.css", 
  "device": "Desktop" 
}

Aqui temos alguns campos a serem preenchidos:

  • url: A url completa do site
  • css: O link do arquivo de css completo (Aqui já presumo que todos os arquivos de css estão mimificados em um arquivo único)
  • device: Informe “Desktop” ou “Mobile”, isto ira controlar as dimensões da janela e o navegador

O retorno em caso de Falha é um HttpCode 500 e a mensagem de erro:

{ 
"Msg": "Url nao informada" 
}

Em caso de Sucesso é um HttpCode 200 com todo o Css Critico:

{ 
"Arquivo": "html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}" 
}

Você pode incluir autenticação para maior segurança também!

E assim terminamos, pessoal! 👩‍💼

Até a próxima! 👋