CSS para Métricas da Web

Técnicas relacionadas ao CSS para otimizar as Web Vitals

Katie Hempenius
Katie Hempenius

A maneira como você escreve seus estilos e cria layouts pode ter um grande impacto nas métricas essenciais da Web. Isso é especialmente verdadeiro para Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP).

Este artigo aborda técnicas relacionadas ao CSS para otimizar os Web Vitals. Essas otimizações são divididas por diferentes aspectos de uma página: layout, imagens, fontes, animações e carregamento. Ao longo do caminho, vamos analisar como melhorar uma página de exemplo:

Captura de tela do site de exemplo

Como inserir conteúdo no DOM

Inserir conteúdo em uma página depois que o conteúdo ao redor já foi carregado faz com que tudo o mais na página seja empurrado para baixo. Isso causa mudanças de layout.

Os aviso de cookies, principalmente aqueles colocados na parte de cima da página, são um exemplo comum desse problema. Outros elementos da página que geralmente causam esse tipo de mudança de layout ao carregar incluem anúncios e incorporações.

Identificar

A auditoria "Evitar grandes mudanças no layout" do Lighthouse identifica elementos da página que foram deslocados. Para esta demonstração, os resultados são assim:

Auditoria "Evitar grandes mudanças no layout" do Lighthouse

O aviso de cookie não está listado nessas descobertas porque ele não muda quando é carregado. Em vez disso, ele faz com que os itens abaixo dele na página (ou seja, div.hero e article) mudem de posição. Para mais informações sobre como identificar e corrigir deslocamentos de layout, consulte Como depurar deslocamentos de layout.

Corrigir

Coloque o aviso de cookie na parte inferior da página usando o posicionamento absoluto ou fixo.

Aviso de cookies exibido na parte de baixo da página

Antes:

.banner {
 
position: sticky;
 
top: 0;
}

Depois:

.banner {
 
position: fixed;
 
bottom: 0;
}

Outra maneira de corrigir essa mudança de layout seria reservar espaço para o aviso de cookies na parte de cima da tela. Essa abordagem é igualmente eficaz. Para mais informações, consulte Práticas recomendadas para notificações de cookies.

Imagens

Imagens e maior exibição de conteúdo (LCP)

As imagens geralmente são o elemento de maior exibição de conteúdo (LCP) em uma página. Outros elementos da página que podem ser o elemento LCP incluem blocos de texto e imagens de cartaz de vídeo. O tempo de carregamento do elemento LCP determina a LCP.

É importante observar que o elemento LCP de uma página pode variar de carregamento para carregamento, dependendo do conteúdo que aparece para o usuário quando a página é mostrada pela primeira vez. Por exemplo, nesta demonstração, o plano de fundo do aviso de cookie, a imagem principal e o texto do artigo são alguns dos possíveis elementos de LCP.

Diagrama destacando o elemento LCP da página em diferentes cenários.

No site de exemplo, a imagem de plano de fundo do aviso de cookie é uma imagem grande. Para melhorar a LCP, você pode pintar o gradiente no CSS em vez de carregar uma imagem para criar o efeito.

Corrigir

Mude o CSS .banner para usar um gradiente CSS em vez de uma imagem:

Antes:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

Depois:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

Imagens e mudanças de layout

Os navegadores só podem determinar o tamanho de uma imagem depois que ela é carregada. Se o carregamento da imagem ocorrer depois que a página for renderizada, mas nenhum espaço tiver sido reservado para a imagem, uma mudança de layout vai ocorrer quando a imagem aparecer. Na demonstração, a imagem principal está causando uma mudança de layout quando é carregada.

Identificar

Para identificar imagens sem width e height explícitas, use a auditoria "Os elementos de imagem têm largura e altura explícitas" do Lighthouse.

A auditoria "Os elementos de imagem têm largura e altura explícitas" do Lighthouse

Neste exemplo, a imagem principal e a imagem do artigo não têm os atributos width e height.

Corrigir

Defina os atributos width e height nessas imagens para evitar mudanças de layout.

Antes:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

Depois:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Agora, a imagem é carregada sem causar uma mudança de layout.

Fontes

As fontes podem atrasar a renderização de texto e causar mudanças de layout. Por isso, é importante entregar as fontes rapidamente.

Renderização de texto atrasada

Por padrão, um navegador não renderiza um elemento de texto imediatamente se as fontes da Web associadas ainda não foram carregadas. Isso é feito para evitar um "flash de texto sem estilo" (FOUT, na sigla em inglês). Em muitas situações, isso atrasa a First Contentful Paint (FCP). Em algumas situações, isso atrasa a Maior exibição de conteúdo (LCP).

Trocas de layout

A troca de fontes, embora seja excelente para mostrar conteúdo ao usuário rapidamente, pode causar mudanças no layout. Essas mudanças de layout ocorrem quando uma fonte da Web e a fonte de substituição ocupam espaços diferentes na página. Usar fontes com proporções semelhantes vai minimizar o tamanho dessas mudanças de layout.

Diagrama mostrando uma mudança de layout causada por uma troca de fonte
Nesse exemplo, a troca de fontes fez com que os elementos da página fossem movidos para cima em cinco pixels.

Identificar

Para ver as fontes que estão sendo carregadas em uma página específica, abra a guia Network no DevTools e filtre por Font. As fontes podem ser arquivos grandes. Portanto, usar menos fontes geralmente é melhor para a performance.

Captura de tela de uma fonte exibida no DevTools

Para saber quanto tempo leva para a fonte ser solicitada, clique na guia Tempo. Quanto mais cedo uma fonte for solicitada, mais cedo ela poderá ser carregada e usada.

Captura de tela da guia &quot;Timing&quot; no DevTools

Para conferir a cadeia de solicitações de uma fonte, clique na guia Iniciador. De modo geral, quanto menor a cadeia de solicitações, mais cedo a fonte pode ser solicitada.

Captura de tela da guia &quot;Initiator&quot; no DevTools

Corrigir

Esta demonstração usa a API Google Fonts. O Google Fonts oferece a opção de carregar fontes usando tags <link> ou uma instrução @import. O snippet de código <link> inclui uma sugestão de recurso preconnect. Isso deve resultar em uma entrega de folha de estilo mais rápida do que usar a versão @import.

De modo geral, as dicas de recurso são uma forma de indicar ao navegador que ele precisará configurar uma conexão específica ou fazer o download de um recurso específico. Como resultado, o navegador vai priorizar essas ações. Ao usar dicas de recursos, lembre-se de que priorizar uma ação específica retira recursos do navegador de outras ações. Portanto, as dicas de recursos devem ser usadas com cuidado e não para tudo. Para mais informações, consulte Estabelecer conexões de rede antecipadamente para melhorar a velocidade percebida da página.

Remova a seguinte instrução @import da folha de estilo:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

Adicione as tags <link> a seguir ao <head> do documento:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Essas tags de link instruem o navegador a estabelecer uma conexão inicial com as origens usadas pelas Google Fonts e a carregar a folha de estilos que contém a declaração de fonte para Montserrat e Roboto. Essas tags <link> precisam ser colocadas o mais cedo possível no <head>.

Animações

A principal forma como as animações afetam os Web Vitals é quando elas causam mudanças no layout. Evite usar dois tipos de animações: animações que acionam o layout e efeitos "semelhantes a animações" que movem elementos da página. Normalmente, essas animações podem ser substituídas por equivalentes com melhor desempenho usando propriedades CSS como transform, opacity e filter. Para mais informações, consulte Como criar animações CSS de alto desempenho.

Identificar

A auditoria "Evitar animações não compostas" do Lighthouse pode ser útil para identificar animações que não têm bom desempenho.

Auditoria &quot;Evitar animações não compostas&quot; do Lighthouse

Corrigir

Mude a sequência de animação slideIn para usar transform: translateX() em vez de fazer a transição da propriedade margin-left.

Antes:

.header {
 
animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from
{
   
margin-left: -100%;
 
}
  to
{
   
margin-left: 0;
 
}
}

Depois:

.header {
 
animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from
{
   
transform: translateX(-100%);
 
}

  to
{
   
transform: translateX(0);
 
}
}

CSS crítico

As folhas de estilo bloqueiam a renderização. Isso significa que, quando o navegador encontra uma folha de estilo, ele para de fazer o download de outros recursos até que faça o download e analise a folha de estilo. Isso pode atrasar o LCP. Para melhorar o desempenho, considere remover CSS não utilizado, inlinear CSS essencial e adiar CSS não essencial.

Conclusão

Embora ainda haja espaço para melhorias (por exemplo, usando a compressão de imagens para exibir imagens mais rapidamente), essas mudanças melhoraram significativamente os Web Vitals desse site. Se fosse um site real, a próxima etapa seria coletar dados de desempenho de usuários reais para avaliar se ele está atendendo aos limites das Core Web Vitals para a maioria dos usuários. Para mais informações sobre as Métricas da Web, consulte Saiba mais sobre as Métricas da Web.