Conheça a mais nova atualização do Google, a Core Web Vitals

O que mudou?

Em Maio de 2020 o Google anunciou uma nova atualização de seu algoritmo de ranqueamento, o Core Update como ficou mais conhecido. Com esse update, o Google começou a avaliar mais a fundo a forma com que os usuários interagem com o site que estão acessando. Pontos como "O usuário espera muito pelo carregamento do site", "Tem quebra de layout no site" entre outros pontos.

Para verificar a efetividade desses e outros pontos, foram criadas três novas métricas, LCP, FID e CLS, chamadas de Core Web Vitals ou Métricas Essenciais da Web, que foram efetivadas em Junho deste ano, com foco na experiência do usuário em relação a estrutura, velocidade e responsividade do site.

Carregamento - Largest Contentful Paint (LCP)

O LCP mede quanto tempo o maior elemento do site demora para carregar e exibir seu principal conteúdo, seja ele um banner, um vídeo ou qualquer outro elemento. Para uma boa experiência do usuário, recomenda-se que esse carregamento ocorra em até 2,5 segundos.

Dicas para otimizar o LCP do seu site

O LCP é influenciado principalmente por três itens: o tempo de resposta do servidor (Hospedagem do site), Javascripts contidos no site e CSS de bloqueio de rendenização.

Você pode também tomar outras medidas afim de otimizar o tempo de resposta do servidor:

• Minificar (compactar) e adiar o carregamento dos arquivos em JavaScript e CSS que não influenciam diretamente no site, ou seja, você pode carregar esses arquivos depois de carregar os principais conteúdos do site, dessa forma o site carrega mais rapidamente sem influenciar a experiência do usuário.
• Ativar o cache do site, dessa forma sempre que voltar ao site, uma parte dos conteúdos já estarão "pré-carregados" no navegador do usuário, e consequentemente agilizar o carregamento.

Interatividade - First Input Delay (FID)

O FID (First Input Delay) mede qual o tempo de resposta que a página dá ao usuário assim que ele efetua qualquer comando no site, como por exemplo o clique em um botão. O tempo ideal de resposta para uma boa interação não deve ultrapassar 100 milissegundos.

Dicas para otimizar o FID do seu site

Melhorar o FID do seu site não é um bicho de sete cabeças, mas também não é tão simples assim. Seguem algumas dicas:

• Reduza o impacto de códigos de terceiros em seu site, ou seja, adie sempre que possível o carregamento desses arquivos, pois normalmente são mais pesados do que os nativos do seu site.
• Reduza o tempo de execução de arquivos JS, utilize somente arquivos que seu usuário realmente precisa, ou seja, tome cuidado com a utilização de frameworks prontos, pois normalmente eles carregam vários arquivos que não são necessários para o seu site.
• Sempre otimize os arquivos, e tente deixá-los o mais leve possível, sejam eles imagens, vídeos, arquivos grandes e etc. Evite sempre que possível utilizar arquivos grandes em seu site, pense sempre no usuário que está abrindo o seu site através de uma internet móvel, que nem sempre é rápida.

Estabilidade visual - Cumulative Layout Shift (CLS)

O CLS diz respeito a estabilidade visual do site, o quanto os elementos do site são deslocados. Por exemplo, ao navegar em um site os elementos são deslocados conforme vai descendo na página. Para o Google isso prejudica a experiência do usuário em sua página, e agora o buscador irá medir o quão estável é o layout do seu site e irá penalizar site que possuírem pontuação acima de 0,25, e irá beneficiar sites com notas abaixo de 0,1.

Dicas para otimizar o CLS do seu site

Dentre as três novas regras, essa a meu ver é a mais simples de se corrigir em um site pois depende mais do desenvolvedor do site. Algumas sugestões de otimizações:

• Defina sempre que possível o width (largura) e o height (altura) dos elementos do site, para evitar os "pulos" do layout na hora do carregamento.
• Sempre que houver em seu site conteúdos dinâmicos, tente reservar já o espaço para evitar as quebras
• Utilize API de carregamento de fontes e imagens afim de otimizar o tempo de carregamento do site.