{"id":44427,"date":"2021-10-01T15:13:44","date_gmt":"2021-10-01T13:13:44","guid":{"rendered":"https:\/\/kinsta.com\/?p=102244"},"modified":"2023-08-22T05:58:25","modified_gmt":"2023-08-22T08:58:25","slug":"otimizar-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/otimizar-css\/","title":{"rendered":"Como Otimizar o CSS para o M\u00e1ximo Desempenho do Site"},"content":{"rendered":"

Mesmo em 2021, o desempenho da web continua sendo um problema. De acordo com o HTTP Archive, a p\u00e1gina m\u00e9dia requer um download de 2 MB<\/a>, faz mais de 60 solicita\u00e7\u00f5es HTTP, e pode levar 18 segundos<\/a> para carregar em um dispositivo m\u00f3vel completamente. As folhas de estilo s\u00e3o respons\u00e1veis por 60 kB divididos em sete solicita\u00e7\u00f5es, ent\u00e3o raramente \u00e9 uma prioridade m\u00e1xima quando se tenta resolver problemas de desempenho.<\/p>\n

Entretanto, o CSS tem um efeito, por mais leve que possa parecer. Uma vez que voc\u00ea tenha endere\u00e7ado seu JavaScript<\/a>, aprender a otimizar o CSS corretamente deve ser a pr\u00f3xima prioridade.<\/p>\n

Vamos direto ao assunto!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Como o CSS afeta o desempenho da p\u00e1gina<\/h2>\n

O CSS parece inocente, mas pode exigir algum processamento pesado.<\/p>\n

CSS de bloqueio de renderiza\u00e7\u00e3o<\/h3>\n

Quando seu navegador encontra uma tag <link><\/code>, ele interrompe o download e o processamento de outros navegadores enquanto recupera e analisa o arquivo CSS.<\/p>\n

O JavaScript tamb\u00e9m pode bloquear a renderiza\u00e7\u00e3o do navegador<\/a>, mas o processamento ass\u00edncrono \u00e9 poss\u00edvel com:<\/p>\n

    \n
  1. O atributo async<\/code> para download de scripts em paralelo, que s\u00e3o executados imediatamente, eles est\u00e3o prontos.<\/li>\n
  2. O atributo defer<\/code> para download em paralelo, ent\u00e3o executado em ordem quando o DOM estiver pronto.<\/li>\n
  3. O atributo type=\"module\"<\/code> para carregar um m\u00f3dulo ES (que se comporta como defer<\/code>).<\/li>\n<\/ol>\n

    Recursos como imagens muitas vezes requerem mais largura de banda, mas formatos eficientes est\u00e3o dispon\u00edveis<\/a>, e podem ser carregados de forma pregui\u00e7osa<\/a> (atributo loading=\"lazy\"<\/code>) sem bloquear a renderiza\u00e7\u00e3o do navegador.<\/p>\n

    Nada disso \u00e9 poss\u00edvel com o CSS. O arquivo \u00e9 armazenado em cache, portanto, o carregamento de p\u00e1ginas subseq\u00fcentes deve ser mais r\u00e1pido, mas o bloco de renderiza\u00e7\u00e3o permanece.<\/p>\n\n

    Grandes arquivos CSS levam tempo para serem processados<\/h3>\n

    Quanto maior a sua folha de estilo, mais tempo leva para baixar e processar em um CSS Object Model (CSSOM), que o navegador e as APIs JavaScript podem usar para exibir a p\u00e1gina. Embora as folhas de estilo CSS sejam menores do que a maioria dos outros arquivos do site, elas n\u00e3o est\u00e3o imunes \u00e0 regra de “menor \u00e9 melhor”.<\/p>\n

    Os arquivos CSS ficam maiores<\/h3>\n

    Pode ser dif\u00edcil identificar estilos que n\u00e3o s\u00e3o mais usados, e remover os errados pode causar estragos em um site. Os desenvolvedores normalmente optam pela abordagem mais segura de “reter tudo”. Os estilos de p\u00e1gina<\/a>, componentes<\/a> e widgets que n\u00e3o s\u00e3o mais usados continuam a existir no CSS. O resultado? O tamanho do arquivo, a complexidade e o esfor\u00e7o de manuten\u00e7\u00e3o aumentam exponencialmente, tornando os desenvolvedores cada vez menos propensos a remover o c\u00f3digo redundante.<\/p>\n

    As folhas de estilo podem fazer refer\u00eancia a outros recursos<\/h3>\n

    O CSS pode fazer refer\u00eancia a outras folhas de estilo usando @import rules. Estas importa\u00e7\u00f5es bloqueiam o processamento da folha de estilo atual e carregam outros arquivos CSS em s\u00e9rie<\/strong>.<\/p>\n

    Outros ativos, tais como fontes e imagens, tamb\u00e9m podem ser referenciados. O navegador tentar\u00e1 otimizar os downloads, mas quando em d\u00favida, ele ir\u00e1 busc\u00e1-los imediatamente. Os arquivos codificados na base64 incorrem ainda em mais processamento.<\/p>\n

    Renderiza\u00e7\u00e3o de efeitos CSS<\/h3>\n

    Os navegadores t\u00eam tr\u00eas fases de renderiza\u00e7\u00e3o<\/a>:<\/p>\n

      \n
    1. A fase de layout<\/strong> (ou redesenho<\/strong>) calcula as dimens\u00f5es de cada elemento e como ele afeta o tamanho ou posicionamento dos elementos ao seu redor<\/li>\n
    2. A fase paint\u00a0<\/strong>desenha as partes visuais de cada elemento em camadas separadas: texto, cores, imagens, bordas, sombras, etc.<\/li>\n
    3. O composto <\/strong>desenha cada camada na p\u00e1gina na ordem correta de acordo com os contextos de empilhamento, posicionamento, \u00edndices z, etc.<\/li>\n<\/ol>\n

      Se voc\u00ea n\u00e3o tiver cuidado, as mudan\u00e7as de propriedade e anima\u00e7\u00f5es do CSS podem fazer com que as tr\u00eas fases sejam renderizadas novamente. Algumas propriedades, tais como sombras e gradientes, tamb\u00e9m s\u00e3o computacionalmente mais caras do que cores e margens do bloco.<\/p>\n

      Ferramentas de an\u00e1lise de desempenho do CSS<\/h2>\n

      Admitir que voc\u00ea tem um problema de desempenho do CSS \u00e9 o primeiro passo no caminho da recupera\u00e7\u00e3o! Encontrar e corrigir as causas \u00e9 outra quest\u00e3o.<\/p>\n

      As seguintes ferramentas e servi\u00e7os (n\u00e3o classificados em nenhuma ordem) podem ajud\u00e1-lo a identificar gargalos de estilo em seu c\u00f3digo.<\/p>\n

      1. Painel da rede DevTools<\/h3>\n

      Especialistas em desempenho Web passam um tempo consider\u00e1vel no DevTools<\/a> e no painel da Rede<\/strong> em particular. DevTools \u00e9 nativo da maioria dos navegadores modernos<\/a>, embora n\u00f3s estaremos usando o Google Chrome em nossos exemplos.<\/p>\n

      DevTools pode ser aberto no menu do navegador, normalmente em Mais ferramentas<\/strong> > Ferramentas do desenvolvedor<\/strong>, ou atrav\u00e9s dos atalhos de teclado Ctrl | Cmd + Shift + I<\/strong> ou F12<\/strong>.<\/p>\n

      Mude para a aba Network (Rede)<\/strong> e certifique-se de que a op\u00e7\u00e3o Disable cache<\/strong> esteja marcada para evitar que arquivos em cache afetem o relat\u00f3rio. Voc\u00ea tamb\u00e9m pode mudar a op\u00e7\u00e3o de estrangulamento para simular redes m\u00f3veis mais lentas.<\/p>\n

      Atualize a p\u00e1gina para ver o gr\u00e1fico da queda d’\u00e1gua para download e processamento:<\/p>\n

      \"Painel<\/a>
      Painel da rede DevTools<\/figcaption><\/figure>\n

      Qualquer barra longa \u00e9 motivo de preocupa\u00e7\u00e3o, mas voc\u00ea deve ser especialmente cauteloso com barras longas bloqueadas\/estagadas (mostradas em branco). Neste exemplo, a linha destacada e todas as linhas seguintes n\u00e3o puderam come\u00e7ar o download at\u00e9 que os arquivos CSS e JavaScript de renderiza\u00e7\u00e3o fossem processados no topo da p\u00e1gina HTML.<\/p>\n

      A caixa Filtro <\/strong>permite que voc\u00ea mostre ou esconda ativos espec\u00edficos:<\/p>\n