1,908 leituras

As 10 principais dicas de desempenho de CSS

por Nikita Starichenko5m2022/11/14

Muito longo; Para ler

Oi pessoal! Há muitas dicas e truques sobre estilo CSS. Mas não neste artigo. Hoje eu quero falar sobre como usar CSS de forma mais eficiente e fazer

Companies Mentioned

featured image - As 10 principais dicas de desempenho de CSS

Oi pessoal! Há muitas dicas e truques sobre estilo CSS. Mas não neste artigo. Hoje quero falar sobre como usar CSS de forma mais eficiente e deixar sua plataforma mais rápida!

1. Seletores simples

O CSS tem uma variedade ampla e flexível de opções de codificação que você pode usar para direcionar elementos HTML para estilização. Ao longo dos anos, os especialistas aconselharam os desenvolvedores a escrever seletores simples para reduzir a carga no navegador e manter o código limpo e simples. Mesmo os seletores CSS mais complexos levam milissegundos para serem analisados, mas a redução da complexidade reduzirá o tamanho dos arquivos e ajudará na análise do navegador

Não faça:

 main > div.blog-section + article > * { /* Code here */ }

FAZ:

 .hero-image { /* Code here */ }

2. CSS crítico em linha

Você pode inline regras CSS críticas. Isso melhora o desempenho por:

Identificar estilos essenciais usados por elementos acima da dobra (aqueles visíveis quando a página é carregada)
Inlining esse CSS crítico em uma tag <style> em seu <head>
Carregando o CSS restante de forma assíncrona para evitar o bloqueio de renderização. Isso pode ser feito carregando a folha de estilo em um estilo “impresso” que o navegador dá uma prioridade mais baixa. O JavaScript então muda para um estilo de mídia “todos” assim que a página é carregada.

 <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

3. Evite `@import`

A regra @import permite que qualquer arquivo CSS seja incluído em outro. Esta parece ser uma maneira razoável de carregar componentes e fontes menores. Mas não é.

As regras @import podem ser aninhadas para que o navegador carregue e analise cada arquivo em série.

Várias tags <link> dentro do HTML carregarão arquivos CSS em paralelo, o que é consideravelmente mais eficiente — especialmente ao usar HTTP/2.

Não faça:

 /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css");

FAZ:

 <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">

4. Pré-carregar arquivos CSS

A tag <link> fornece um atributo de pré-carregamento opcional que pode iniciar um download imediatamente, em vez de esperar pela referência real no HTML.

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5. Renderização Progressiva

Em vez de usar um único arquivo CSS em todo o site, a renderização progressiva é uma técnica que define folhas de estilo individuais para componentes separados. Cada um é carregado imediatamente antes de um componente ser referenciado no HTML.

Cada <link> ainda bloqueia a renderização, mas por um tempo menor, porque o arquivo é menor. A página pode ser usada antes, porque cada componente é renderizado em sequência; a parte superior da página pode ser visualizada enquanto o conteúdo restante é carregado.

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6. Use a renderização de consulta de mídia

Um único concatenado e minificado beneficiará a maioria dos sites, mas sites que exigem uma quantidade significativa de estilos de tela maiores podem dividir arquivos CSS e carregar usando uma consulta de mídia.

 <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

7. Adote imagens SVG

Gráficos vetoriais escaláveis (SVGs) são normalmente usados para logotipos, gráficos, ícones e diagramas mais simples. Em vez de definir a cor de cada pixel como bitmaps JPG e PNG, um SVG define formas como linhas, retângulos e círculos em XML.

Os SVGs mais simples são menores que os bitmaps equivalentes e podem ser dimensionados infinitamente sem perder a definição. Um SVG pode ser embutido diretamente no código CSS como uma imagem de fundo. Isso pode ser ideal para ícones menores e reutilizáveis e evita solicitações HTTP adicionais.

Exemplo SVG:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>

Exemplo de uso de SVG:

 .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }

8. Estilize SVGs com CSS

Os SVGs podem ser incorporados diretamente em um documento HTML. Isso adiciona os nós SVG diretamente ao DOM. Portanto, todos os atributos de estilo SVG podem ser aplicados usando CSS.

SVG no DOM:

 <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>

Estilos SVG:

 circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; }

O volume do código SVG incorporado é reduzido e os estilos CSS podem ser reutilizados ou animados conforme necessário.

Observe que usar um SVG dentro de uma tag <img> ou como uma imagem de plano de fundo CSS significa que eles estão separados do DOM e o estilo CSS não terá efeito.

9. Evite a codificação Base64

Você pode codificar imagens para strings base64, que você pode usar como URIs de dados em tags HTML <img> e planos de fundo CSS.

Isso reduz o número de solicitações HTTP, mas prejudica o desempenho do CSS:

strings base64 podem ser 30% maiores que seu equivalente binário.
os navegadores devem decodificar a string antes que uma imagem possa ser usada e
alterar um pixel de imagem invalida todo o arquivo CSS.

Considere a codificação base64 apenas se estiver usando imagens muito pequenas, que mudam com pouca frequência, em que a string resultante não é significativamente mais longa que um URL.

Não faça:

 .background { background-image: url('data:image/jpg;base64,ABC123...'); }

FAZ:

 .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }

10. Dicas curtas

Substituir imagens por efeitos CSS - definir uma “imagem” usando código CSS usa consideravelmente menos largura de banda e é mais fácil de modificar ou animar posteriormente.
Use técnicas de layout modernas - Flexbox e grade .
Use animações CSS - transições e animações sempre serão mais rápidas que JavaScript.
Evite propriedades caras - alguns CSS requerem mais processamento do que outros.
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode