Como conseguimos medir a performance do css?

[renedocket]

Olá pessoal, tudo bem?

Eu gostaria de saber como vocês conseguem prioriar a renderização do css na hora do carregamento da página. Ex: Quando carrego a página, o css demora para carregar, aparentando que o mesmo está 'Quebrado'.

Vocês algumas técnicas que resolvem esse gargalo?

[wilsongomes-swe]

Ele está dentro da tag header do seu código?
Está usando algum framework?

Normalmente estano no header a página ira renderizar só após carregar o css...

[DiogoCercilio]

Teria que olhar o código pra entender onde está o gargalo, mas um dica que eu dou seria melhorar o critical rendering path. Outra seria 'subir' as chamadas aos css`s externos para linhas acima... Para que sejam carregadas antes de quaisquer outros conteúdos bloqueantes.

[felipefialho]

Para melhorar isso, você pode usar técnicas de critical rendering path no CSS.

Libs de CSS-in-JS ajudam a cuidar disso pra você, mas também pode implementar diretamente no Webpack.

[lucasferreiralimax]

Analisar a renderização da página, os reflows de elementos, seletores muito extenso por menores.
Use o audits no inspecionar elemento para ter métricas de carregamento.

A reescrita e sobreposição de propriedades é um ponto para se refatorar também.

Estudar o render tree view e melhorar seu carregamento.

[didiraja]

Bem-vindo a esse buraco sem fundo que é a performance na web.

O mais basico é a concatenação e minificação do código.

Atualmente, tem rolado muito a separação do código por rota e css direto no head (dinamicamente por algum webpack da vida)

[renedocket]

Muito bacana pessoal, obrigado pelas respostas! Vou verificar todas essas possibilidades :)