5 dicas para o Super-Fast CSS

Jan 24, 2026

Como

Você já pensou no tamanho do CSS do seu site? Se a sua folha de estilo estiver balançando, pode adiar a renderização de páginas.

16 principais exemplos de animação CSS

Embora o CSS não seja o maior tipo de ativo que você servirá, é um dos primeiros que o navegador descobre. Como o navegador está bloqueado de renderizar a página até que o CSS seja baixado e analisado, ele deve ser o mais magro possível. Aqui estão cinco dicas para ajudá-lo a chegar lá.

Tem um site complexo? Você precisa do perfeito hospedagem na web. serviço. Ou, se você quiser fazer um site sem o barulho, tente um Construtor de sites .

01. Use seletores rasos

Seus pais lhe disseram que a superficialeza não é uma virtude, mas quando se trata de CSS, eles estão errados. Usado consistentemente, os seletores rasos podem cortar kilobytes fora de folhas de estilo grande. Tome este seletor:

nav ul li.nav-item

Isso pode ser expresso de forma mais sucinta:

.nav-item

Além de ajudar a manter seu CSS Svelte, o navegador também tornará os elementos direcionados por seletores rasos mais rapidamente. Navegadores lêem seletores da direita para a esquerda. Quanto mais profundo os seletores são, quanto mais tempo necessários para o navegador renderizar e restringir os elementos que esses seletores são aplicados. Para domes complexos que refluem muitas vezes, os seletores curtos também podem reduzir a Jank.

Idealmente, você quer que os seletores sejam tão superficiais quanto possível, mas isso não significa que você deve cortar tudo para o osso. Às vezes você precisa de especificidade adicional para estender componentes. Bater o equilíbrio certo, mas também pragmático.

02. Use propriedades de taquigrafia

Using shorthand CSS will speed up your site — Usando taquigrafia CSS acelerará seu site

Isso parece um bom senso, mas você ficará surpreso com a frequência com que as propriedades de Longhand são usadas desnecessariamente. Aqui está um exemplo de algumas propriedades de Longhand em uso:

 Tamanho da fonte: 1.5rem;
Altura da linha: 1.618;
Font-família: "Arial", "Helvetica", Sans-Serif;

Isso é muito CSS! Vamos arrumar isso:

 Fonte: 1.5rem / 1.618 "Arial", "Helvetica", Sans Serif;

O Fonte A propriedade de taquigrafia condensa várias declarações em um prático um revestimento que ocupa muito menos espaço.

No exemplo mostrado acima, a taquigrafia usa cerca de 40% menos espaço do que o equivalente de Longhand. Não é tão legível à primeira vista, mas a sintaxe se torna segunda natureza depois de passar algum tempo usando-a.

É claro, Fonte não é a única taquigrafia disponível para você. Por exemplo, margem pode ser usado no lugar de propriedades mais longas, como margem-superior , margem-direita. e assim por diante.

O preenchimento propriedade funciona da mesma maneira. Por mais maneiras de limpar o seu CSS, a Mozilla Developer Network oferece uma lista útil de Referências de propriedade de taquigrafia .

E se você precisar substituir um valor mais adiante na cascata? Por exemplo, digamos que você tenha um elemento de cabeçalho que precisa alterar seu tamanho da fonte para exibições maiores.

Neste caso, você deve usar o mais específico tamanho da fonte Imóvel em vez disso:

 h1 {
    Fonte: 1.5Rem / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@media (largura mínima: 60rem) {
    h1 {
        Tamanho da fonte: 2rem;
    }
}

Isso não é apenas conveniente, também aumenta a flexibilidade do componente. Se qualquer outra parte do subjacente Fonte A propriedade é modificada, essas alterações serão perccionadas até exibições maiores. Isso funciona ótimo para o componente substitui onde um novo contexto requer um tratamento diferente.

03. Use a sugestão de recursos de pré-carga

O pré-carga A dica de recursos pode dar ao navegador uma cabeça comece a carregar o CSS do seu site. O pré-carga A dica de recursos informa ao navegador iniciar um busca antecipado para um ativo.

Você pode configurá-lo como um & lt; link & gt; Tag em HTML:

& lt; link rel = "pré-carregamento" href = "/ css / styles.css" como = "estilo" & gt;

Ou como um cabeçalho HTTP na configuração do seu servidor:

link: & lt; / ccss/styles.css> ;; rel = pré-carga; como = estilo

Em ambos os cenários, pré-carga dá ao navegador uma cabeça começando no carregamento /css/styles.css. . Usando pré-carga Em um cabeçalho HTTP é preferível, uma vez que isso significa que o navegador descobrirá a sugestão anterior nos cabeçalhos de resposta, em vez de mais tarde no corpo de resposta.

Outra razão para usar pré-carga Em um cabeçalho HTTP é que ele iniciará um evento de envio do servidor na maioria das implementações HTTP / 2. O push do servidor é um mecanismo pelo qual os ativos são pré-fixados para o cliente quando as solicitações de conteúdo são feitas, e oferece benefícios de desempenho semelhantes ao Inlining CSS.

O Push do servidor não está disponível no http / 1. No entanto, usando pré-carga Em um ambiente HTTP / 1 ainda pode melhorar o desempenho.

04. Cull redundância com csscss

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS analisará todos os arquivos CSS que você der e avisá quais regras de regras duplicaram declarações

Pode pagar para verificar o seu CSS para regras duplicadas com um verificador de redundância. Pegue a ferramenta baseada em rubi Csscss, por exemplo.

Os usuários do Ruby podem instalá-lo com:

Gem Instalar Csscss

Uma vez instalado, você pode examinar seu CSS para redundâncias como assim:

Csscss -V Styles.css

Este comando lista quais selecionadores compartilham regras que você pode desduplicar para economizar espaço:

 {h1} e {p} compartilham 3 declarações
  - Cor: # 000
  - Altura da linha: 1.618
  - Margem: 0 0 1.5rem

Você pode mover regras duplicadas em um seletor:

 h1, p {
    cor: # 000;
    Altura da linha: 1.618;
    Margem: 0 0 1.5Rem;
}

Você ficaria surpreso com quanto espaço esse processo pode economizar em grandes projetos. Use o --ajuda Opção para ver mais comandos que você pode usar para ajustar ainda mais.

05. Vá a milha extra com cssnano

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — O CSSNANO leva sua CSS bem formatada e a correia por muitas otimizações focadas

Para a cereja no topo, você pode usar cssnano. - uma ferramenta de nó e postcs-dependente. O CSSNano não apenas minifica CSS, faz muitas otimizações focadas que podem reduzir ainda mais o CSS. Instale-o no seu sistema com npm como assim:

 npm i -g cssnano-cli

Em seguida, use-o para otimizar seu CSS:

 CSSNANO Styles.css Otimizado-Styles.css

Se executando comandos ad hoc não é seu estilo, você poderá automatizar o CSSNANO com um sistema de compilação. Veja como usar cssnano em um gulpfile:

 const gulp = requer ("gulp");
Const Postcss = requer ("Gulp-Postcss");
const cssnano = requer ("cssnano");

const buildcss = () = & gt; {
    Return gulp.src ("CSS / Styles.css")
        .pipe (postcss ([cssnano ()])
        .pipe (gulp.dest ("CSS / otimizado"));
};
const relógio = () = & gt; {
    gulp.watch ("CSS / Styles.css", buildcss);
};
exportações.Buildcss = buildcss;
Exportações.Watch = Watch;

O buildcss. tarefa lê o CSS que você escreve CSS / Styles.css. , então canaliza a saída otimizada para o CSS / Otimizado diretório. O Assistir Tarefa começa fora buildcss. Sempre que ocorrerem mudanças em CSS / Styles.css. .

O Assistir tarefa pode então ser invocada no terminal como assim:

 Gulp Watch

Com alguns ajustes, você pode criar um fluxo de trabalho que realiza essa otimização específica, além de outras tarefas relacionadas ao CSS, como construir arquivos Sass / Menos, Autoprefixação e mais.

Quer salvar suas páginas do site? Exportar como pdfs e economizar em confiável armazenamento na núvem .

Este artigo originalmente apareceu em internet , a principal revista do mundo para web designers. Inscreva-se aqui .

Artigos relacionados:

Entendendo a propriedade de exibição CSS
A nova fronteira da animação CSS
Como construir layouts complexos usando CSS

5 dicas para o Super-Fast CSS

01. Use seletores rasos

02. Use propriedades de taquigrafia

03. Use a sugestão de recursos de pré-carga

04. Cull redundância com csscss

05. Vá a milha extra com cssnano

Como - Artigos mais populares

Como limpar os pincéis: o guia definitivo

Composição em animação: Aprenda o básico

é o seu armazenamento da Apple Icloud completo? Veja como liberar espaço

Como trazer um personagem 2D para a vida em VR

Tinta ondulando água em óleos

4 dicas para melhorar o desempenho da sua página

Criar visuais 3D interativos com três.js

Geometria complexa de modelagem: 5 principais pontas

Categorias