CSS para Web Vitals
Técnicas relacionadas a CSS para otimizar o Web Vitals
A maneira como você escreve seus estilos e cria layouts pode ter um grande impacto no Core Web Vitals. Isso é particularmente verdadeiro para o Deslocamento cumulativo de layout (CLS) e a Tinta com maior conteúdo (LCP).
Este artigo abrange técnicas relacionadas a CSS para otimizar o 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 artigo, exploraremos como melhorar uma página de exemplo:
Layout #
Inserindo conteúdo no DOM #
Inserir conteúdo em uma página depois que o conteúdo circundante já foi carregado empurra todo o resto da página para baixo. Isso causa mudanças de layout.
Avisos de cookies, especialmente aqueles colocados no topo da página, são um exemplo comum desse problema. Outros elementos da página que costumam causar esse tipo de mudança de layout quando são carregados incluem anúncios e incorporações.
Identificação #
A auditoria do Lighthouse "Evite grandes mudanças de layout" identifica os elementos da página que foram alterados. Para esta demonstração, os resultados são os seguintes:
O aviso de cookies não está listado nessas descobertas porque o aviso de cookies em si não muda quando carrega. Em vez disso, faz com que os itens abaixo dele na página (ou seja, div.hero e article) mudem. Para obter mais informações sobre como identificar e corrigir mudanças de layout, consulte Depuração de mudanças de layout.
Solução #
Coloque o aviso de cookies na parte inferior da página usando posicionamento absoluto ou fixo.
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 do cookies na parte superior da tela. Essa abordagem é igualmente eficaz. Para obter mais informações, consulte Práticas recomendadas de aviso de cookies.
Imagens #
Imagens e tinta com maior conteúdo (LCP) #
As imagens são geralmente o elemento de tinta com maior 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 pôster de vídeo. O tempo que demora para o elemento LCP carregar determina o LCP.
É importante observar que o elemento LCP de uma página pode variar de carregamento de página para carregamento de página, dependendo do conteúdo que é visível para o usuário quando a página é exibida pela primeira vez. Por exemplo, nesta demonstração, o plano de fundo do aviso de cookies, a imagem principal e o texto do artigo são alguns dos elementos potenciais do LCP.
No site de exemplo, a imagem de fundo do aviso de cookies é, na verdade, uma imagem grande. Para melhorar o LCP, você pode pintar o gradiente em CSS, em vez de carregar uma imagem para criar o efeito.
Solução #
Altere 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 carrega. Se o carregamento da imagem ocorrer após a página ter sido renderizada, mas nenhum espaço foi reservado para a imagem, uma mudança de layout ocorre quando a imagem aparece. Na demonstração, a imagem principal está causando uma mudança de layout ao carregar.
Identificação #
Para identificar imagens sem width e height explícitas, use a auditoria do Lighthouse "Elementos de imagem têm largura e altura explícitas".
Neste exemplo, a imagem principal e a imagem do artigo estão sem os atributos de width e height.
Solução #
Defina os 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">Fontes #
As fontes podem atrasar a renderização do texto e causar mudanças no layout. Como resultado, é importante fornecer fontes rapidamente.
Renderização de texto atrasada #
Por padrão, um navegador não renderizará imediatamente um elemento de texto se as fontes da web associadas ainda não tiverem sido carregadas. Isso é feito para evitar uma "piscada de texto sem estilo" (FOUT). Em muitas situações, isso atrasa a primeira tinta com conteúdo(FCP). Em algumas, isso atrasa a tinta com maior conteúdo(LCP).
Mudanças de layout #
A troca de fontes, embora excelente para exibir conteúdo ao usuário rapidamente, tem o potencial de causar mudanças de layout. Essas mudanças de layout ocorrem quando uma fonte da web e sua fonte substituta ocupam diferentes quantidades de espaço na página. O uso de fontes com proporções semelhantes minimizará o tamanho dessas mudanças de layout.
Identificação #
Para ver as fontes que estão sendo carregadas em uma página específica, abra a aba Rede no DevTools e filtre por Fonte. As fontes podem ser arquivos grandes. Portanto, usar apenas menos fontes geralmente é melhor para o desempenho.
Para ver quanto tempo leva para a fonte ser solicitada, clique na aba Tempo. Quanto antes uma fonte for solicitada, mais cedo ela poderá ser carregada e usada.
Para ver a cadeia de solicitação de uma fonte, clique na aba Iniciador. De modo geral, quanto mais curta a cadeia de solicitação, mais cedo a fonte pode ser solicitada.
Solução #
Esta demonstração usa a API Google Fonts. O Google Fonts oferece a opção de carregar fontes por meio de <link> ou uma instrução @import. O fragmento de código <link> inclui uma dica de recurso de preconnect. Isso deve resultar em uma entrega mais rápida da folha de estilo do que usar a versão @import.
Em um nível muito alto, você pode pensar nas dicas de recursos como uma forma de indicar ao navegador que precisará configurar uma conexão específica ou fazer download de um recurso específico. Como resultado, o navegador priorizará essas ações. Ao usar dicas de recursos, lembre-se de que priorizar uma ação específica tira os recursos do navegador de outras ações. Portanto, as dicas de recursos devem ser usadas com atenção e não para tudo. Para obter mais informações, consulte Estabelecer conexões de rede antecipadamente para melhorar a velocidade percebida da página.
Remova a seguinte declaração @import de sua folha de estilo:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');Adicione o seguinte <link> 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 pelo Google Fonts e a carregar a folha de estilo que contém a declaração da fonte para Montserrat e Roboto. Estas marcas <link> devem ser colocadas o mais cedo possível no <head>.
Animações #
A principal maneira pela qual as animações afetam o Web Vitals é quando causam mudanças de layout. Existem dois tipos de animações que você deve evitar usar: animações que acionam o layout e efeitos "semelhantes a animação" que movem os elementos da página. Normalmente, essas animações podem ser substituídas por equivalentes de maior desempenho usando propriedades do CSS, como transform, opacity e filter. Para obter mais informações, consulte Como criar animações CSS de alto desempenho.
Identificação #
A auditoria do Lighthouse "Evitar animações não compostas" pode ser útil para identificar animações sem desempenho.
Solução #
Altere a sequência de animação slideIn para usar transform: translateX() 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 de:
.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 o navegador encontra uma folha de estilo, ele irá parar de baixar outros recursos até que tenha baixado e analisado a folha de estilo. Isso pode atrasar o LCP. Para melhorar o desempenho, considere remover o CSS não utilizado, embutir o CSS crítico embutido e adiar o CSS não crítico.
Conclusão #
Embora ainda haja espaço para melhorias adicionais (por exemplo, usando compactação de imagem para fornecer imagens mais rapidamente), essas alterações melhoraram significativamente os Web Vitals deste site. Se este 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 do Web Vitals para a maioria dos usuários. Para obter mais informações sobre Web Vitals, consulte Saiba mais sobre o Web Vitals.