Desempenho: CSS vs CSS-in-JS · srbrunomelo

Hora de enfrentar a verdade brutal

Sempre quis refazer CSS, mas com uma nova ferramenta/framework?

O que é isso?

styled-components é uma estrutura de estilo CSS-in-JS que usa literais de modelo marcadas em JavaScript e o poder do CSS para fornecer uma plataforma que permite escrever CSS real para estilizar componentes ReactJs, enquanto se vangloria de sua experiência de desenvolvedor (também conhecido como DX) e desempenho.

Mas o hype é bem merecido ou os desenvolvedores estão sendo enganados?

Vamos tirar a primeira coisa do caminho.

Você basicamente escreve CSS, mas em Javascript. Na verdade, você pode nomear suas tags para que seja mais fácil identificá-las. Só por isso, esta ferramenta é um 10/10 automático para a maioria dos desenvolvedores React (inclusive eu).

Você também pode alterar os valores das propriedades com Javascript. Isso é ótimo para aplicativos com conteúdo dinâmico.

Então, por que não usar componentes estilizados para todos os projetos?

A pergunta que quero fazer é: as pessoas ainda o usariam se soubessem que estão deixando 30% ou mais de dinheiro na mesa? Não, eles não se importariam com isso.

Mas, em certos casos, afeta a receita do seu aplicativo. Uma coisa que aprendi durante meu tempo criando aplicativos da web para telefones é que nem todas as pessoas ( surpreendentemente ) usam o iPhone mais recente. Ainda existem pessoas que usam aparelhos com Android 4.4.4. Eu sei, inacreditável!!!

Portanto, antes de criar seu novo projeto com esta tecnologia (ou antes de alterar o atual em produção), reserve um minuto e considere o quão importante é o desempenho do seu aplicativo.

Não consegui encontrar na internet um artigo que falasse sobre isso, mas fazia sentido testar a hipótese de que o CSS modular pode ser mais performático. Então, passei alguns dias e troquei toda a base de código de um aplicativo em produção de componentes estilizados para CSS modular.

Pontos problemáticos de componentes de estilo

um pacote extra
pacote JS maior
afetando o desempenho do CSS? (o que estamos tentando descobrir aqui)
Arquivos CSS e arquivos JS não são processados da mesma forma

Como eu medi

O processo foi bastante direto, mas é claro que tive alguns obstáculos, mais especificamente onde mais lógica estava envolvida no estilo. Os testes mostram a média entre 3 execuções no Lighthouse e na guia Performance no Chrome. Configurei a limitação para 3G lento e a limitação da CPU para 4x.

Sem mais delongas, vamos ver o que Lighthouse tem a dizer sobre as mudanças:

Auditoria de desempenho do Lighthouse

Desempenho de componentes estilizados

Faixa de desempenho médio: 13809 ms
FCP: 2,2
SI: 9,1
LCP: 13,1
TTI: 13,2

Desempenho de CSS modular

Faixa de desempenho médio: 8995 ms
FCP: 2,1
SI: 7,6
LCP: 12
TTI: 12,5

Nossa, essa é uma diferença muito grande, considerando que é quase o mesmo CSS. Na faixa de desempenho, economizamos 4814 ms, quase 5 segundos! Uma redução de 35%. Isso é insano!

O aumento no índice de velocidade e nas outras métricas também é muito grande, considerando o fato de que as regras CSS não são alteradas.

Obviamente, esse aumento ocorre com dispositivos mais antigos, portanto, não espere que o telefone mais recente tenha as mesmas métricas, mas ele mostra a imagem necessária para nós. Se o seu produto é usado por pessoas que usam telefones de baixo custo, você está perdendo receita.

Conclusão

Você pode usar ambas as tecnologias no React e criar sites incríveis. É apenas uma questão de selecionar a ferramenta certa para o trabalho certo.

Se você tiver um painel altamente personalizável, onde seus usuários habituais estão em uma área de trabalho, pode não fazer sentido alterar sua base de código para CSS modular. Considerando que, se seus usuários vêm de dispositivos móveis, sugiro tentar ver o quão rápido seu site é com CSS modular.