Combinado com a complexidade dos sites modernos e a forma como os navegadores processam CSS, mesmo uma quantidade moderada de CSS pode se tornar um gargalo para pessoas que lidam com dispositivos restritos, latência de rede, largura de banda ou limites de dados.
Como a performance é uma parte vital de UX, é essencial garantir uma experiência consistente e de alta qualidade em dispositivos de todas as formas e tamanhos, o que também requer otimizar CSS para performance. Então, conheça 5 dicas para melhorar a performance de CSS através de técnicas variadas.
1. Tamanho de CSS
Como diz o velho ditado, a parte boa de CSS é que ele é fácil de escrever; a parte ruim de CSS, é que ele é fácil de escrever.
Talvez a grande dificuldade (e percepção equivocada de como CSS realmente funciona), portanto, esteja no fato de que, para começar a escrever CSS e ver resultados instantaneamente, é algo bem rápido de se fazer.
Entretanto, é preciso atenção ao que todo desenvolvedor front end deve saber sobre renderização de páginas Web, aspectos vitais de renderização que, uma vez entendidos, permitem que o conhecimento avance para o próximo nível.
Um desses aspectos, evidentemente, é o tamanho (ou “peso”) dos arquivos de estilos. Afinal, toda a informação precisa trafegar do servidor para o cliente e isso é uma parte crítica.
Compressão CSS (comprimido) e Minificação CSS (minificado)
Estabelecer uma conexão para baixar uma folha de estilos externa inevitavelmente causa latência, mas é possível acelerar o download minimizando o total de bytes transferidos pela rede.
A compressão (ou compactação) de arquivos pode melhorar significativamente a velocidade; muitas plataformas de hospedagem e CDNs codificam ativos com compactação por padrão (ou permitem configurá-los facilmente). O formato de compactação mais usado para interações cliente/servidor é o Gzip. Há também o Brotli, que pode fornecer resultados de compactação ainda melhores, embora não seja tão suportado quanto o Gzip.
Já a minificação é o processo de remoção de espaços em branco desnecessários de qualquer código. A saída é um arquivo de código menor, mas perfeitamente válido, que o navegador pode analisar e que economizará alguns bytes.
Ou seja, o combo compressão/minificação pode contribuir bastante para a performance CSS de qualquer projeto.
Remoção de CSS não utilizado
A menos que se utilizem variadas técnicas para incluir apenas os componentes visuais necessários, é bastante comum haver CSS não utilizado na base de códigos.
Geralmente, a remoção de CSS não utilizado é um trabalho manual. O principal desafio é a complexidade. É preciso auditar cuidadosamente todo o site, em todos os estados possíveis, em todos os dispositivos possíveis (media queries) e assim por diante.
Também existem algumas ferramentas automatizadas, como UnusedCSS e PurifyCSS, que podem ajudar a identificar estilos desnecessários, mas, geralmente, é preciso combiná-las com testes de visual cuidadosos.
Do uso atual de bibliotecas e frameworks CSS, é bastante comum os desenvolvedores não seguirem suas respectivas instruções de uso e incluírem o pacote completo para usar somente alguns recursos. Para casos assim, a remoção de CSS não-usado traz benefícios mais que desejados.
2. CSS Crítico (Critical CSS)
CSS Crítico (ou Critical CSS) é uma técnica que extrai e incorpora CSS para conteúdo “acima da dobra”. A inserção de estilos extraídos no <head> do documento HTML elimina a necessidade de fazer uma solicitação adicional para buscar esses estilos e acelera a renderização.
Como uma regra geral, para otimizar CSS crítico, mantenha o conteúdo acima da dobra com menos de 14 KB (compactado).
Determinar o CSS crítico não é totalmente preciso porque é necessário fazer suposições sobre a posição da “dobra” (que varia entre os tamanhos de tela do dispositivo). Isso se torna ainda mais difícil para sites altamente dinâmicos.
Mesmo sendo impreciso, ainda é possível almejar melhorias de performance CSS, sendo possíveis automatizações com ferramentas como Critical, CriticalCSS e Penthouse.
3. Carregamento assíncrono de CSS
A parte menos crítica de CSS pode ser carregada de maneira assíncrona. Uma das maneiras de se conseguir isso é definindo o atributo link media para print:
|
1 |
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"> |
O tipo de mídia “print” define regras CSS para impressão de página; o navegador carregará essa folha de estilo sem atrasar a renderização da página. A aplicação dessa folha de estilo a todas as mídias (ou seja, telas e não apenas impressão) usa o atributo onload para definir media para all quando a folha de estilo termina de carregar.
Outra opção é usar <link rel="preload"> (em vez de rel="stylesheet") para obter um padrão semelhante ao acima e alternar o atributo rel para a folha de estilo no evento load. Há vantagens e desvantagens a serem consideradas ao usar cada uma das abordagens.
Uma combinação interessante das técnicas seria:
|
1 2 |
<link rel="preload" href="/path/to/my.css" as="style"> <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> |
Evite @import em arquivos CSS
Usar @import (nativo) em arquivos CSS diminui a velocidade de renderização, consequentemente, afetando negativamente a performance CSS.
Primeiro, o navegador precisa baixar o arquivo CSS para descobrir o recurso importado e, em seguida, iniciar outra solicitação para baixá-lo antes de renderizá-lo.
No cenário em que uma folha de estilo contenha @import url(imported.css); a cascata da rede se parece com isso:
Ao passo que carregar 2 folhas de estilo em elementos link permite download paralelo:
Existe muito mais sobre performance a ser dito, mas, pelo comparativo das 2 leituras da Rede neste cenário fictício, já é possível atestar que downloads em paralelo são bem mais eficientes.
4. Animações CSS eficientes
Quando você anima elementos em uma página, o navegador geralmente precisa recalcular suas posições e tamanhos no documento, o que aciona operações de layout.
Por exemplo, se você alterar a largura de um elemento, qualquer um de seus filhos poderá ser afetado e grande parte do layout da página poderá ser alterado. O layout quase sempre tem o escopo de todo o documento, portanto, quanto maior a árvore de layout, mais tempo ela executa os cálculos de layout.
Ao animar elementos, é essencial minimizar o layouts e repaints. Nem todas as técnicas de animação CSS são iguais e os navegadores podem criar animações de melhor desempenho com position, scale, rotation e opacity.
Outras dicas interessantes para melhorar a performance de animações CSS:
- Em vez de alterar as propriedades de altura (
height) e largura (width), usetransform: scale(); - Para mover elementos, evite alterar as propriedades de posicionamento
top,right,bottomouleft, dando preferência ao uso detransform: translate().
A propriedade contain
A propriedade CSS contain informa ao navegador que o elemento e seus descendentes são considerados independentes da árvore do documento (tanto quanto possível). Ela isola uma subárvore de uma página do restante do documento. O navegador pode otimizar a renderização (style, layout e paint) de partes independentes da página para melhorar a performance.
A propriedade contain é útil em páginas que contêm muitos widgets independentes. Podemos usá-la para evitar que as alterações em cada widget tenham efeitos colaterais fora da caixa delimitadora do widget.
Um site principalmente estático terá pouco benefício com essa estratégia.
5. Otimização de carregamento de fontes
Por fim, também é possível tomar algumas medidas sobre performance CSS relacionadas à otimização do carregamento de fontes.
Evite texto invisível durante o carregamento
Geralmente, as fontes são arquivos grandes que podem demorar um pouco para carregar. Alguns navegadores ocultam o texto até que a fonte seja carregada — causando o “flash de texto invisível” (Flash of Invisible Text ou FOIT) — para lidar com isso.
Ao otimizar para performance, recomenda-se evitar FOIT e mostrar conteúdo para as pessoas imediatamente usando uma fonte do sistema (uma que esteja pré-instalada na máquina). Depois que o arquivo de fonte for carregado, ele substituirá a fonte do sistema conhecida como “flash de texto sem estilo” — Flash of Unstyled Text ou FOUT.
Uma maneira de conseguir isso é usando font-display — uma API para especificar uma estratégia de exibição de fonte. Usar font-display com o valor swap informa ao navegador que o texto usando essa fonte deve ser exibido imediatamente usando uma fonte do sistema.
Use fontes variáveis para reduzir o tamanho do arquivo
As fontes variáveis permitem que muitas variações diferentes de um tipo de letra sejam incorporadas em um único arquivo, em vez de ter um arquivo de fonte separado para cada largura, peso ou estilo.
Basicamente, elas permitem que você acesse todas as variações em um determinado arquivo de fonte com CSS e uma única referência @font-face.
Fontes variáveis podem reduzir significativamente o tamanho do arquivo onde é preciso de variantes de uma fonte. Em vez de carregar os estilos regular e negrito mais suas versões em itálico, por exemplo, é possível carregar um único arquivo contendo todas as informações.
Conclusão sobre performance CSS
Resumidamente, as 5 dicas para melhorar a performance de CSS são:
- Tamanho de CSS
- CSS Crítico (Critical CSS)
- Carregamento assíncrono de CSS
- Animações CSS eficientes
- Otimização de carregamento de fontes
Existem muitas e muitas outras técnicas de otimização de CSS (e performance, em geral), mas, por certo, estas 5 dicas sozinhas já têm potencial absurdo de melhoria de performance em qualquer projeto Web.
Mas qual é a sua dica para melhorar a performance de CSS? Conta pra gente nos comentários.