21 maneiras de otimizar seu CSS e acelerar o seu site

Sep 12, 2025

Como

O CSS deve passar por um pipeline relativamente complexo, assim como HTML e JavaScript. O navegador deve baixar os arquivos do servidor e, em seguida, proceder para analisar e aplicá-los ao DOM. Devido a níveis extremos de otimização, esse processo é geralmente bastante rápido - para projetos da Web menores, não com base nas estruturas, o CSS geralmente compõe apenas uma pequena parte do consumo total de recursos.

Frameworks perturbam este equilíbrio. Inclua uma pilha GUI JavaScript como JQuery UI e assistir a CSS, JS e HTML Size Swyrocket. Muitas vezes, os desenvolvedores geralmente sentem a pinça por último - quando sentados por trás de uma poderosa estação de trabalho de oito núcleos com a Internet T3, ninguém se importa com a velocidade. Isso muda como latências ou dispositivos com restrição de CPU vêm para jogar.

19 Cool CSS animação exemplos para recriar

Otimizar CSS requer uma abordagem multidimensional. Enquanto o código escrito à mão pode ser reduzido usando várias técnicas, passando por código-quadro à mão é ineficiente. Nesses casos, usar um minimizador automatizado produz melhores resultados.

Os seguintes passos nos levarão a uma jornada através do mundo da otimização de CSS. Nem cada um pode ser diretamente aplicável ao seu projeto, mas mantê-los em mente. Quer algo mais simples? Tente A. Construtor de sites .

01. Use taquigrafia

A cláusula CSS mais rápida é aquela que nunca é analisada. Usando cláusulas de taquigrafia, como a Declaração de Margem mostrada abaixo, reduz radicalmente o tamanho dos seus arquivos CSS. Muitas formas abreviadas adicionais podem ser encontradas pelo Googling 'CSS Thathand'.

 p {margin-top: 1px;
    Margem-direita: 2px;
    margem inferior: 3px;
    margem esquerda: 4px; }

p {margem: 1px 2px 3px 4px; }

02. Encontre e remova CSS não utilizados

Eliminar partes desnecessárias do seu marcador, obviamente, causa imensas ganhos de velocidade. O navegador Chrome do Google tem essa funcionalidade fora da caixa. Basta ir para ver & gt; Desenvolvedor e GT; Ferramentas do desenvolvedor e abra a guia Fontes em uma versão recente e abra o menu de comando. Depois disso, selecione Mostrar cobertura e festejar os olhos na janela Análise de cobertura destacando o código não utilizado na página atual.

03. Faça de uma forma mais confortável

Navegar através da análise linha-linha não é necessariamente confortável. A auditoria de desempenho da Web do Chrome retorna informações semelhantes - simplesmente abri-lo da barra de ferramentas, view & gt; Desenvolvedor e GT; Ferramentas de Desenvolvedor e GT; Auditorias e deixe correr. Quando terminar, uma lista de elementos problemáticos aparecerá.

04. Esteja ciente dos problemas

Tenha em mente que uma análise automatizada de um CSS sempre pode levar a erros. Realize um teste completo de todo o site depois de substituir seus arquivos CSS com os minifieds - um nunca sabe que erros o otimizador causou. E seguir em frente, decente hospedagem na web. pode ajudá-lo a passar os vincos em seu site.

05. CSS críticos inline

Carregamento de estilos externos Custa o tempo devido à latência - qualquer pessoa se lembra do 'flash de conteúdo instável'? Os bits mais críticos do código podem, portanto, ir para a tag de cabeçalho. Certifique-se de não exagerar, no entanto. Tenha em mente que o código também deve ser lido por humanos realizando tarefas de manutenção.

 & lt; html & gt;
  & lt; head & gt;
    & lt; estilo & gt;
      .blue {cor: azul;}
    & lt; / style & gt;
    & lt; / head & gt;
  & lt; corpo e gt;
    & lt; div classe = "azul" & gt;
      Olá Mundo!
    & lt; / div & gt;

06. Permitir analgamento antiparalinho

@import adiciona estrutura ao seu código CSS. Infelizmente, os benefícios não são de graça: como as importações podem ninharias, analisando-as em paralelo não é possível. Uma maneira mais paralelizável usa uma série de & lt; link & gt; Tags, que o navegador pode buscar de uma só vez.

 @Import URL ("A.CSS");
@Import URL ("B.CSS");
@Import URL ("C.css");
v & lt; link rel = "Stylesheet" href = "a.css" & gt;
& lt; link rel = "stylesheet" href = "b.css" & gt;
& lt; link rel = "stylesheet" href = "c.css" & gt;

07. Substitua imagens com CSS

Anos atrás, um conjunto de PNGs semi-transparentes para criar efeitos translúcidos em sites era comum. Hoje em dia, os filtros CSS fornecem uma alternativa de salvamento de recursos. Como exemplo, o snippet que acompanha esta etapa garante que a imagem em questão apareça como uma versão em escala de cinza de si mesmo.

 img {
    -Webkit-Filter: Grayscale (100%); /* velho
Safari * /
    Filtro: escala de cinza (100%);
}

08. Use atalhos de cor

A sabedoria comum ensina que os descritores de cores de seis dígitos são a maneira mais eficiente de expressar cores. Este não é o caso - em alguns casos, descrições de taquigrafia ou nomes de cores podem ser mais curtos.

 Alvo {background-cor: #ffffff; }
alvo {fundo: #fff; }

09. Eliminar zeros e unidades desnecessários

CSS suporta uma ampla variedade de unidades e formatos numéricos. Eles são um alvo agradecido para otimização - ambos os zeros à direita e seguindo podem ser removidos, como é demonstrado no snippet abaixo. Além disso, tenha em mente que um zero sempre é um zero, e que adicionar uma dimensão não agrega valor às informações contidas.

 preenchimento: 0.2em;
Margem: 20.0em;
Avalue: 0px;
preenchimento: .2em;
Margem: 20EM;
Avalue: 0;

10. Elimine os semicolons excessivos

Essa otimização é um pouco crítica, pois afeta as mudanças de código. A especificação CSS permite omitir o último ponto e vírgula em um grupo de propriedades. Como a poupança obtida por este método de otimização é mínima, mencionamos isso principalmente para aqueles que estão trabalhando em um otimizador automatizado.

 p {
. . .
Tamanho da fonte: 1.33EM
}

11. Use um atlas de textura

Carregar vários pequenos sprites é ineficiente devido a sobrecargas de protocolo. Os Sprites CSS combinam uma série de pequenas fotos em um grande arquivo PNG, que é então quebrado através das regras CSS. Programas como Texturepacker. Simplifique muito o processo de criação.

 .download {
  Largura: 80px;
  Altura: 31px;
  Fundo-posição: -160px -160px
}
.download: pairar {
  Largura: 80px;
  Altura: 32px;
  Fundo-posição: -80px -160px
}

12. perseguir o px

Uma maneira interessante de aumentar o desempenho usa uma especialidade do padrão CSS. Valores numéricos sem uma unidade são assumidos como pixels - removendo o PX salva dois bytes para cada número.

 H2 {preenchimento: 0px; Margem: 0px;}
H2 {PADDING: 0; Margem: 0}

13. Evite propriedades caras

A análise mostrou que algumas tags são mais caras do que outras. A lista que acompanha esta etapa é considerada especialmente com fome de desempenho - evitá-los quando tiver a oportunidade de fazê-lo.

 raio de fronteira
    Sombra da caixa
    transformar
    filtro
    : nth-criança
    Posição: fixo;
    etc.

14. Remova o espaço em branco

Espaço em branco - Pense guias, retornos de carruagem e espaços - torna o código mais fácil de ler, mas serve pouco propósito do ponto de vista de um analisador. Elimine-os antes do envio. Uma maneira ainda melhor envolve delegar este trabalho para um script shell ou aparelho similar.

15. Eliminar comentários

Comentários também não servem a propósito para o compilador. Crie um analisador personalizado para removê-los antes da entrega. Não só isso economiza largura de banda, mas também garante que atacantes e cloners tenham dificuldade em entender o pensamento por trás do código em mãos.

16. Use compressão automática

A equipe de experiência do usuário do Yahoo criou um aplicativo que lida com muitas tarefas de compactação. Ele é enviado como um arquivo jar, disponivel aqui e pode ser executado com uma JVM de escolha.

 Java -jar yuicompressor-x.y.z.jar
Uso: Java -jar yuicompressor-x.y.z.jar
 [Opções] [Arquivo de entrada]
Opções globais
    -h, --help exibe isso
 em formação
    --type & lt; js | CSS & GT; Especifica o
 Tipo do arquivo de entrada

17. Corra da NPM

Se você preferir integrar o produto em Node.js, visite npmjs.com/package/yuicompressor. . O repositório mal mantido contém um conjunto de arquivos wrapper e uma API JavaScript.

 Var Compressor = requer ('yuicompressor');
compressor.compess ('/ caminho / para /
arquivo ou string de js ', {
// Opções do compressor:
charset: 'utf8',
Tipo: 'JS',

18. Mantenha o Sass et al em cheque

Embora o desempenho do seletor CSS não seja quase tão crítico quanto alguns anos atrás (ver recurso), estruturas como SASS às vezes emitem código extremamente complexo. Dê uma olhada nos arquivos de saída de vez em quando e pense em maneiras de otimizar os resultados. Tem resultados para compartilhar com uma equipe? Mantenha arquivos em compartilháveis armazenamento na núvem .

O que é sass?

19. Configurar cache

Um velho ditado afirma que o arquivo mais rápido é aquele que nunca é enviado através dos fios. Fazer as solicitações de cache do navegador alcança isso eficientemente. Infelizmente, a configuração dos cabeçalhos de cache deve ocorrer no servidor. Faça um bom uso das duas ferramentas mostradas nas capturas de tela - elas fornecem uma maneira rápida de analisar os resultados de suas alterações.

20. Bust o cache

Os designers geralmente não gostam de cache devido ao medo de problemas com as próximas mudanças. Uma maneira perfeita em torno do problema envolve incluindo tags com o nome do arquivo. Infelizmente, o esquema descrito no código que acompanha esta etapa não funciona em todos os lugares, pois alguns proxies se recusam ao cache arquivos com caminhos "dinâmicos".

 & lt; link rel = "stylesheet" href = "style.css? V = 1.2.3" & gt;

21. Não esqueça o básico

Otimizar CSS é apenas parte do jogo. Se o seu servidor não usar a compactação HTTP / 2 e GZIP, é perdido muito tempo durante a transmissão de dados. Felizmente, consertar esses dois problemas geralmente é simples. Nosso exemplo mostra alguns ajustes para o servidor Apache comumente usado. Se você se encontrar em um sistema diferente, basta consultar a documentação do servidor.

 pico /etc/httpd/conf/httpd.conf
AddoutPutFilterbytype Defla texto / html
AddoutPutFilterbyType Deflate Text / CSS

Este artigo foi originalmente publicado em emissão 282 da revista Creative Web Design Web designer . Comprar edição 282 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

10 técnicas incríveis novas CSS
Qual é o melhor pré-processador CSS?
Uma introdução às propriedades personalizadas CSS

21 maneiras de otimizar seu CSS e acelerar o seu site

01. Use taquigrafia

02. Encontre e remova CSS não utilizados

03. Faça de uma forma mais confortável

04. Esteja ciente dos problemas

05. CSS críticos inline

06. Permitir analgamento antiparalinho

07. Substitua imagens com CSS

08. Use atalhos de cor

09. Eliminar zeros e unidades desnecessários

10. Elimine os semicolons excessivos

11. Use um atlas de textura

12. perseguir o px

13. Evite propriedades caras

14. Remova o espaço em branco

15. Eliminar comentários

16. Use compressão automática

17. Corra da NPM

18. Mantenha o Sass et al em cheque

19. Configurar cache

20. Bust o cache

21. Não esqueça o básico

Como - Artigos mais populares

Como desenhar um cavalo

Como usar o Adobe Capture CC

Atualize suas texturas no designer de substâncias

Adicionar vibração às suas pinturas a óleo com essas principais pontas

Pintura como um impressionista

Crie texturas tileable deslumbrantes no Blender

Como esculpir e posar uma cabeça de desenho animado em Zbrush

Top Dicas para esculpir uma criatura em Zbrush

Categorias