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 pagesGenerate critical css for your web pages. Contribute to pocketjoso/penthouse development by creating an account on GitHub.github.com

O funcionamento é bem simples:

penthouse({
    url: "http://www.meusite.com.br/",
    css: "[CSS_SITE]",
    width: 1920,
    height: 1000,
    userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0",
    timeout: 10000
})
.then(function (criticalCss, error) {

    if( error )
    {

        console.log("error", error);

    }else{

        console.log("criticalCss", criticalCss);

    }

});

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_criticoContribute to cmacetko/util_css_critico development by creating an account on GitHub.github.com

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! 👋