As Cascading Style Sheets (CSS) são essenciais para estilizar um site, mas arquivos CSS grandes podem retardar ou bloquear a renderização da página. A minificação de CSS torna os arquivos CSS menores.
Após ler este artigo, você será capaz de:
Conteúdo relacionado
Por que minificar o Javascript?
Performance e taxas de conversão
Como a velocidade do site aumenta o SEO
Core Web Vitals
O que é HTTP/3?
Assine o theNET, uma recapitulação mensal feita pela Cloudflare dos insights mais populares da internet.
Copiar o link do artigo
A minificação de CSS reduz o tamanho dos arquivos de Cascading Style Sheets (CSS) para que sejam carregados mais rapidamente. A minificação de CSS funciona eliminando todos os caracteres e espaços desnecessários da marcação CSS sem afetar a interpretação dos navegadores.
Os arquivos CSS contêm instruções para a formatação de elementos HTML. Quando carregam com mais velocidade, as páginas web carregam mais rapidamente em geral, assim como usar roupas leves ajuda um corredor a correr mais rápido. O carregamento rápido melhora a experiência do usuário e o valor de SEO da página, e as melhorias na velocidade da página podem até ajudar a aumentar as taxas de conversão.
Como exemplo, esta folha de estilo simples tem várias linhas de código, juntamente com comentários para os desenvolvedores que a estão lendo:
/* paragraph styling here */
p {
font-family: arial;
color: green;
background-color: white;
}
/* links */
a:link {
color: blue;
}
a:visited {
color: white;
}
Após a minificação do CSS, é apenas uma linha compactada, e os comentários são removidos:
p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;}
Embora esse texto seja menos legível para humanos, um navegador lê e interpreta a segunda versão exatamente da mesma forma que a primeira. A versão reduzida tem a vantagem de carregar mais rapidamente porque ocupa menos espaço.
Antes que um navegador possa exibir uma página web, ele precisa saber quais elementos (como texto, imagens e outros recursos multimídia) estão na página web e onde tudo está na página. Assim como os empreiteiros precisam das plantas de um edifício antes de iniciar a construção, os navegadores precisam das "plantas" de uma página web antes de começar a renderizar a página.
Ao receber um arquivo HTML para uma página web, os navegadores começam a construir algo chamado árvore do modelo de objeto de documento (DOM); isso é como um esboço de todos os elementos da página. Os navegadores também analisam todas as tags <style> e os arquivos CSS vinculados para criar uma árvore CSSOM, que mapeia como todos esses elementos da página serão estilizados.
Por fim, os navegadores combinam o DOM e o CSSOM para criar uma "árvore de renderização". Depois que a árvore de renderização é criada, o navegador começa a exibir a página. Até que isso aconteça, o usuário está vendo uma tela em branco.
Resultado: até que o navegador conclua o download e a leitura do CSS, a página não poderá ser exibida.
No desenvolvimento da web, qualquer elemento ou recurso que precise ser carregado antes que a página possa ser exibida para o usuário final é chamado de "recurso de bloqueio de renderização". O CSS é um desses recursos. Os recursos de bloqueio de renderização devem ser otimizados para carregamento rápido sempre que possível.
Os recursos grandes de bloqueio de renderização demoram mais para serem baixados, fazendo com que o navegador espere, literalmente bloqueando a página, de modo que pareça ao usuário como se nada estivesse acontecendo. Atrasos como esse geralmente fazem com que os usuários abandonem a página ("bounce").
Eles também afetam as Core Web Vitals, as métricas que o Google usa para medir o desempenho da página, especialmente o Largest Contentful Paint (LCP), que mede o tempo que o maior elemento de uma página leva para carregar. As pontuações ruins do Core Web Vitals podem fazer com que o Google classifique a página em uma posição inferior nos resultados de pesquisa, de modo que a página pode receber menos tráfego em geral.
Felizmente, há muitas ferramentas de minificação de CSS disponíveis. Talvez a abordagem mais conveniente seja usar as ferramentas de minificação integradas à rede de distribuição de conteúdo (CDN) de um site, um serviço que armazena em cache e distribui o conteúdo. As CDNs devem ser capazes de fornecer serviços de minificação para aumentar ainda mais o desempenho.
O Cloudflare Auto Minify está incluído na CDN da Cloudflare. Os proprietários de sites podem selecionar os arquivos CSS (juntamente com os arquivos JavaScript e HTML) a serem minificados no painel da Cloudflare.
Tecnicamente, a minificação de CSS é diferente da compactação de CSS, embora o objetivo de ambas seja o mesmo: reduzir o tamanho do arquivo. A minificação altera o código, removendo comentários e caracteres. A compactação torna o arquivo menor por meio do uso de um algoritmo de compactação (como o gzip) e não altera de fato o conteúdo do arquivo.
Como o CSS minificado geralmente é menos legível, a minificação pode dificultar para os desenvolvedores a identificação e correção manual de erros na marcação CSS.
Além disso, a minificação do CSS por si só não é suficiente para melhorar o desempenho de um site. Isso pode fazer com que um site ganhe milissegundos, mas há outras ações que os operadores de sites devem realizar para obter melhorias de desempenho significativas, incluindo a otimização de imagens, o armazenamento em cache HTTP do navegador e muito mais.
A minificação de JavaScript é um conceito semelhante, mas para código JavaScript executável. Comentários, espaços e outros caracteres extras são removidos para que o arquivo .js possa ser carregado e executado mais rapidamente. A minificação de JavaScript e de CSS contribuem para um site de carregamento mais rápido e podem resultar em melhor engajamento do usuário e maior tráfego orgânico.
Os operadores de sites podem usar a CDN da Cloudflare para minificar o CSS e o JavaScript — Saiba mais sobre os planos disponíveis da Cloudflare aqui.