Técnicas relacionadas a CSS para otimizar as Métricas da Web
A maneira como você escreve seus estilos e layouts de criação pode ter um grande impacto nas Core Web Vitals. Isso é particularmente verdadeiro para a Mudança de layout cumulativa (CLS) e a Maior exibição de conteúdo (LCP).
Este artigo aborda técnicas relacionadas a CSS para otimizar as Métricas da Web. Essas otimizações são divididas por aspectos diferentes de uma página: layout, imagens, fontes, animações e carregamento. Ao longo do caminho, veremos como melhorar uma página de exemplo:
Layout
Como inserir conteúdo no DOM
A inserção de conteúdo em uma página depois que o conteúdo ao redor já foi carregado empurra todo o restante na página para baixo. Isso causa mudanças de layout.
Os avisos de cookies, especialmente aqueles colocados na parte superior da página, são um exemplo comum desse problema. Outros elementos de página que geralmente causam esse tipo de mudança de layout quando são carregados incluem anúncios e incorporações.
Identificar
A auditoria "Evitar grandes mudanças de layout" do Lighthouse identifica elementos da página que mudaram. Para esta demonstração, os resultados vão ficar assim:
O aviso de cookie não está listado nessas descobertas porque ele não está mudando quando é carregado. Em vez disso, ele faz com que os itens abaixo dele na
página (ou seja, div.hero e article) mudem. Para mais informações sobre
como identificar e corrigir mudanças de layout, consulte Como depurar mudanças
de layout.
Corrigir
Coloque o aviso de cookie na parte de baixo da página usando o 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 é 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 de notificação de cookies.
Imagens
Imagens e Maior exibição de conteúdo (LCP)
Geralmente, as imagens são o elemento da Maior exibição de conteúdo (LCP, na sigla em inglês) de uma página. Outros elementos de página que podem ser o elemento da LCP incluem blocos de texto e imagens de pôster de vídeo. O horário em que o elemento da LCP é carregado determina a LCP.
É importante observar que o elemento da LCP de uma página pode variar de acordo com o carregamento de página, dependendo do conteúdo que fica 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 possíveis elementos da LCP.
No site de exemplo, a imagem de plano de fundo do aviso de biscoitos é, na verdade, 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 de 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%);
Mudanças de imagens e 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 tiver sido 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 ao carregar.
Identificar
Para identificar imagens sem width e height explícitos, use a auditoria
"Os elementos de imagem têm largura e altura explícitas" do Lighthouse.
Nesse exemplo, as imagens principais e 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">
Fontes
As fontes podem atrasar a renderização do texto e causar mudanças de layout. Como resultado, é importante enviar fontes rapidamente.
Renderização de texto atrasada
Por padrão, um navegador não vai renderizar imediatamente um elemento de texto se as fontes da Web associadas ainda não tiverem sido carregadas. Isso é feito para evitar um "flash de texto sem estilo" (FOUT, na sigla em inglês). Em muitas situações, isso atrasa a primeira exibição de conteúdo (FCP, na sigla em inglês). 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, tem o potencial de causar mudanças de layout. Essas mudanças de layout ocorrem quando uma fonte da Web e a fonte substituta ocupam diferentes quantidades de espaço na página. O uso de fontes de proporção semelhante minimiza o tamanho dessas mudanças de layout.
Identificar
Para conferir as fontes que estão sendo carregadas em uma página específica, abra a guia Rede no DevTools e filtre por Fonte. As fontes podem ser arquivos grandes, então usar menos fontes geralmente é melhor para o desempenho.
Para ver quanto tempo leva para a fonte ser solicitada, clique na guia Timing. Quanto mais cedo uma fonte for solicitada, mais cedo ela poderá ser carregada e usada.
Para ver a cadeia de solicitações de uma fonte, clique na guia Initiator. De modo geral, quanto menor a cadeia de solicitações, mais cedo a fonte pode ser solicitada.
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 dica de recurso preconnect. Isso resultará em uma entrega
de folha de estilo mais rápida do que usar a versão @import.
De modo geral, pense nas dicas de recursos como uma maneira de indicar ao navegador que será necessário 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 apaga os recursos do navegador de outras ações. Assim, as dicas de recursos precisam 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 sua folha de estilo:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Adicione as seguintes tags <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 antecipada com as origens usadas pelo Google Fonts e carregar a folha de estilo 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
As animações afetam as Métricas da Web principalmente quando causam mudanças
de layout. Há dois tipos de animações que você precisa evitar:
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 de melhor performance 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 com baixo desempenho.
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 essencial
As folhas de estilo bloqueiam a renderização. Isso significa que o navegador encontra uma folha de estilo e interrompe o download de outros recursos até que o download e a análise sejam concluídos. Isso pode atrasar a LCP. Para melhorar a performance, remova CSS não usado, in-line CSS essencial e adiie CSS não essenciais.
Conclusão
Embora ainda haja espaço para outras melhorias (por exemplo, o uso da compactação de imagem para entregar imagens mais rapidamente), essas mudanças melhoraram significativamente as Métricas da Web do site. Se o site fosse real, a próxima etapa seria coletar dados de desempenho de usuários reais para avaliar se ele está atendendo aos limites das Métricas da Web para a maioria dos usuários. Para mais informações sobre as Métricas da Web, consulte Aprender sobre as Métricas da Web.