O Google compartilha novas recomendações do Core Web Vitals que são realistas para a maioria dos desenvolvedores e aplicáveis à maioria dos sites.
-
Core Web Vitals são três métricas que medem o tempo de carregamento, a interatividade e a estabilidade visual.
-
A equipe do Chrome do Google passou um ano imaginando o conselho mais importante que poderia dar sobre o Core Web Vitals.
-
Estas são as recomendações que você deve priorizar quando o tempo é limitado.
O Google está compartilhando um conjunto atualizado de recomendações para otimizar o Core Web Vitals para ajudar você a decidir o que priorizar quando o tempo é limitado.
Core Web Vitals são três métricas que medem o tempo de carregamento, a interatividade e a estabilidade visual.
O Google considera essas métricas essenciais para fornecer uma experiência positiva e as utiliza para classificar sites em seus resultados de pesquisa.
Ao longo dos anos, o Google forneceu inúmeras sugestões para melhorar as pontuações do Core Web Vitals.
Embora valha a pena implementar cada uma das recomendações do Google, a empresa percebe que não é realista esperar que alguém faça tudo.
Se você não tem muita experiência em otimizar o desempenho do site, pode ser um desafio descobrir o que terá o impacto mais significativo.
Você pode não saber por onde começar com tempo limitado para se dedicar à melhoria do Core Web Vitals. É aí que entra a lista revisada de recomendações do Google.
Em uma postagem no blog, o Google diz que a equipe do Chrome passou um ano tentando identificar o conselho mais importante que pode dar sobre o Core Web Vitals.
A equipe elaborou uma lista de recomendações que são realistas para a maioria dos desenvolvedores, aplicáveis à maioria dos sites e têm um impacto significativo no mundo real.
Aqui está o que a equipe do Chrome do Google aconselha
Otimizando a Maior Pintura de Conteúdo (LCP)
A métrica Largest Contentful Paint (LCP) mede o tempo que leva para o conteúdo principal de uma página se tornar visível para os usuários.
O Google afirma que apenas cerca de metade de todos os sites atendem ao limite LCP recomendado.
Estas são as principais recomendações do Google para melhorar o LCP.
Certifique-se de que o recurso LCP seja facilmente encontrado na fonte HTML
De acordo com o 2022 Web Almanac by HTTP Archive, 72% das páginas da web para dispositivos móveis têm uma imagem como conteúdo principal. Para melhorar o LCP, os sites devem garantir que as imagens sejam carregadas rapidamente.
Pode ser impossível atender ao limite de LCP do Google se uma página aguardar que os arquivos CSS ou JavaScript sejam totalmente baixados, analisados e processados antes que a imagem possa começar a carregar.
Como regra geral, se o elemento LCP for uma imagem, a URL da imagem deve sempre ser descoberta a partir da fonte HTML.
Certifique-se de que o recurso LCP seja priorizado
Além de ter o recurso LCP no código HTML, o Google recomenda priorizá-lo e não ficar atrás de outros recursos menos críticos.
Mesmo que você tenha incluído sua imagem LCP na fonte HTML usando uma tag <img> padrão, se houver várias tags <script> na seção <head> de sua página da Web antes da tag < img>, isso pode atrasar o tempo de carregamento do seu recurso de imagem.
Seria melhor se você também evitasse quaisquer ações que possam diminuir a prioridade da imagem LCP, como adicionar o atributo loading=”lazy”.
Tenha cuidado ao usar qualquer ferramenta de otimização de imagem que aplique automaticamente o carregamento lento a todas as imagens.
Use uma rede de entrega de conteúdo (CDN) para reduzir o tempo até a primeira mordida (TTFB)
Um navegador deve receber o primeiro byte da resposta inicial do documento HTML antes de carregar quaisquer recursos adicionais.
A medida desse tempo é chamada de Time to First Byte (TTFB), e quanto mais rápido isso acontecer, mais cedo outros processos podem começar.
Para minimizar o TTFB, forneça seu conteúdo de um local próximo aos seus usuários e utilize o cache para o conteúdo solicitado com frequência.
A melhor maneira de fazer as duas coisas, diz o Google, é usar uma rede de entrega de conteúdo (CDN).
Otimizando a mudança cumulativa de layout (CLS)
Cumulative Layout Shift (CLS) é uma métrica usada para avaliar a estabilidade do layout visual de um site. Segundo o Google, cerca de 25% dos sites não atendem ao padrão recomendado para essa métrica.
Estas são as principais recomendações do Google para melhorar o CLS.
Definir tamanhos explícitos para conteúdo na página
Mudanças de layout podem ocorrer quando o conteúdo de um site muda de posição após o carregamento. É importante reservar o espaço com a maior antecedência possível para evitar que isso aconteça.
Uma causa comum de mudanças de layout são imagens sem tamanho, que podem ser resolvidas definindo explicitamente os atributos de largura e altura ou propriedades CSS equivalentes.
As imagens não são o único fator que pode causar mudanças de layout nas páginas da web. Outros conteúdos, como anúncios de terceiros ou vídeos incorporados que carregam posteriormente, podem contribuir para o CLS.
Uma maneira de resolver esse problema é usar a propriedade aspect-ratio no CSS. Essa propriedade é relativamente nova e permite que os desenvolvedores definam uma proporção para imagens e elementos não-imagem.
Fornecer essas informações permite que o navegador calcule automaticamente a altura apropriada quando a largura é baseada no tamanho da tela, semelhante ao que faz para imagens com dimensões definidas.
Certifique-se de que as páginas são elegíveis para o Bfcache
Os navegadores usam um recurso chamado cache de retorno/avanço, ou abreviado bfcache, que permite que as páginas sejam carregadas instantaneamente do início ou do fim do histórico do navegador usando um instantâneo da memória.
Esse recurso pode melhorar significativamente o desempenho, eliminando mudanças de layout durante o carregamento da página.
O Google recomenda verificar se suas páginas são qualificadas para o bfcache usando o Chrome DevTools e trabalhar em qualquer motivo pelo qual elas não sejam.
Evite animações/transições
Uma causa comum de mudanças de layout é a animação de elementos no site, como banners de cookies ou outros banners de notificação, que deslizam de cima para baixo.
Essas animações podem tirar outro conteúdo do caminho, impactando o CLS. Mesmo quando não o fazem, animá-los ainda pode afetar o CLS.
O Google diz que as páginas que animam qualquer propriedade CSS que possa afetar o layout têm 15% menos probabilidade de ter um CLS “bom”.
Para atenuar isso, é melhor evitar animar ou fazer a transição de qualquer propriedade CSS que exija que o navegador atualize o layout, a menos que seja em resposta à entrada do usuário, como um toque ou pressionamento de tecla.
O uso da propriedade CSS transform é recomendado para transições e animações quando possível.
Otimizando o Primeiro Atraso de Entrada (FID)
First Input Delay (FID) é uma métrica que mede a rapidez com que um site responde às interações do usuário.
Embora a maioria dos sites tenha um bom desempenho nessa área, o Google acredita que há espaço para melhorias.
A nova métrica do Google, Interação com a próxima pintura (INP), é um possível substituto para o FID, e as recomendações fornecidas abaixo são relevantes para o FID e o INP.
Evite ou interrompa tarefas longas
Tarefas são qualquer trabalho distinto que o navegador executa, incluindo renderização, layout, análise, compilação e execução de scripts.
Quando as tarefas demoram muito, mais de 50 milissegundos, elas bloqueiam o thread principal e dificultam a resposta rápida do navegador às entradas do usuário.
Para evitar isso, é útil dividir tarefas longas em outras menores, dando ao encadeamento principal mais oportunidades para processar trabalhos críticos visíveis ao usuário.
Isso pode ser obtido cedendo ao encadeamento principal com frequência, para que as atualizações de renderização e outras interações do usuário possam ocorrer mais rapidamente.
Evite JavaScript desnecessário
Um site com uma grande quantidade de JavaScript pode levar a tarefas que competem pela atenção do thread principal, o que pode afetar negativamente a capacidade de resposta do site.
Para identificar e remover códigos desnecessários dos recursos do seu site, você pode usar a ferramenta de cobertura no Chrome DevTools.
Ao diminuir o tamanho dos recursos necessários durante o processo de carregamento, o site gastará menos tempo analisando e compilando o código, resultando em uma experiência de usuário mais integrada.
Evite grandes atualizações de renderização
O JavaScript não é a única coisa que pode afetar a capacidade de resposta de um site. A renderização pode ser cara e interferir na capacidade do site de responder às entradas do usuário.
A otimização do trabalho de renderização pode ser complexa e depende do objetivo específico. No entanto, existem algumas maneiras de garantir que as atualizações de renderização sejam gerenciáveis e não se transformem em tarefas longas.
O Google recomenda o seguinte:
-
Evite usar requestAnimationFrame() para fazer qualquer trabalho não visual.
-
Mantenha o tamanho do seu DOM pequeno.
-
Use a contenção CSS.