Melhore o desempenho do CSS com estas 6 dicas

A instrução @import é usada principalmente para incluir ativos como fontes, embora possa incluir outros arquivos CSS. CSS é o bloqueio de renderização, o que significa que quando você usa a instrução @import em seu arquivo CSS para buscar uma fonte ou outro arquivo CSS, o navegador buscará o ativo antes de continuar processando o código CSS restante.

/* styles.css */
/** * O navegador buscaria base.css antes * processando o código restante em styles.css */
@import url ("base.css"); 

Quando o ativo é um arquivo de fonte, o navegador usará a fonte disponível no sistema enquanto aguarda o download da outra fonte. Após o download, ele trocará a fonte do sistema pela fonte baixada. Portanto, seu usuário pode estar lendo seu conteúdo em uma fonte e, de repente, a fonte muda para outra. Isso é ruim para a experiência do usuário.

Aqui está um exemplo de carregamento de uma fonte com a instrução @import :

/** * Exemplo de carregamento de uma fonte com o * declaração @import. * A fonte só está disponível após o download.
*/
@import url ('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); 

Em vez disso, recomendamos o uso da tag link no head de seu HTML para carregar suas fontes da seguinte maneira:

Aqui, rel="preload" e as="font" informam ao navegador para iniciar o download da fonte o mais rápido possível. Você também pode tomar medidas para garantir que o arquivo de fonte que está pré-carregando corresponda aos do seu CSS para evitar que o usuário baixe duas versões da mesma fonte e desperdice sua largura de banda.

​​5. Otimize o tamanho dos seus arquivos

Em design e desenvolvimento web, o tamanho é importante. Esteja você lidando com uma imagem, um arquivo HTML ou JavaScript ou outros recursos de mídia, existe uma regra de ouro: sempre compactue.

Reduza o tamanho do seu arquivo CSS por minificação. As imagens em seu site devem ser otimizadas para reduzir a velocidade de carregamento, o que pode significar o uso de uma ferramenta online como TinyPNG -ou, se você estiver criando suas próprias imagens, aproveitando ferramentas como Salvar para a Web no Photoshop.

6. Evite imagens de bitmap em base64

Imagens em base64 estão entre as opções para incorporar imagens em uma página da web. Ao longo dos anos, especialistas como Harry Roberts mostraram por que as imagens base64 são ruins para o desempenho por vários motivos:

• Eles aumentam significativamente o tamanho geral do arquivo CSS
• Eles são baixados independentemente de serem usados ​​ou visualizados
• A codificação Base64 resulta em um tamanho de arquivo de imagem maior do que o normal
• O navegador deve analisar toda a string base64 antes que possa ser usada

Na imagem abaixo, observe o aumento no tamanho de cada imagem antes e depois da conversão para base64 :

Veja o que acontece quando adicionamos essas três imagens base64 a um arquivo CSS com apenas 14 linhas de código:

/** * Código Base64 truncado.
*/
@media screen e (min-width: 20em) { html { imagem de fundo: url ('dados: imagem/png; base64, iVBO...'); } rodapé { imagem de fundo: url ('dados: imagem/png; base64, iVBO...'); } .non-existing-class { imagem de fundo: url ('dados: imagem/png; base64, iVBO...'); } } 

O tamanho do arquivo aumentou para mais de 500 KB. Além de ser enorme, o navegador do usuário também gastará tempo baixando esse arquivo, independentemente de a imagem ser usada ou não.

Enquanto isso, no código a seguir, o navegador faria o download da imagem sob demanda com base na janela de visualização do navegador.

 html { preenchimento: 2em; imagem de fundo: url ("images/asnim_mobile.jpg");
} @media screen e (min-width: 20em) { html { imagem de fundo: url ("images/asnim_tablet.jpg"); }
} @media screen e (min-width: 48em) { html { imagem de fundo: url ("images/asnim.jpg"); tamanho do fundo: capa; }
} 

Você pode verificar isso executando as seguintes etapas:

1. Crie três imagens de tamanhos diferentes para pontos de interrupção diferentes, conforme mostrado no bloco de código anterior
2. Replique o bloco de código com suas imagens como imagens de fundo
3. Inicie seu navegador e abra a guia Rede nas ferramentas do desenvolvedor
4. Redimensione a janela de visualização do seu navegador e observe

Conclusão

Quando você pegar as lições aprendidas neste artigo e aplicá-las em seus futuros projetos da web, saiba que estará contribuindo para uma web melhor! Se você tem um site que precisa de uma reformulação de desempenho, refatore seu código usando as lições aprendidas neste artigo e diga-nos como fica nos comentários.

Leituras adicionais

Procure algumas dicas sobre CSS adicional e atualizações gerais de desempenho da web que você pode fazer:

• Como usar a web fontes em CSS
• Melhore o desempenho do site alinhando seu CSS
• Usando CDNs para otimizar o desempenho do site
• Um guia para melhorar acessibilidade na web com CSS

A postagem Melhore o desempenho do CSS com essas 6 dicas apareceu primeiro no LogRocket Blog .