Core Web Vitals: otimize seu site para o update de algoritmo do Google (2021)

A partir de Junho, a atualização do algoritmo de experiência da página e o tão esperado Core Web Vitals entrarão em vigor. Apesar de ser tratado como uma novidade, desde meados de 2011 o Google (principal mecanismo de busca do mundo) vem reforçando a importância da experiência do usuário quando acessar qualquer página da internet.

Em resumo, isso pode ser entendido como ter um site com boa navegação para os usuários, com velocidade de carregamento das páginas mais rápidas e sem interrupções desnecessárias. Saiba mais sobre a nova atualização de algoritmo do Google e como se preparar para as mudanças.

O que é o Core Web Vitals (CWV)?

O Core Web Vitals, também conhecido popularmente pela sigla CWV, é um subconjunto do Web Vitals focado em métricas essenciais para a boa performance de um site – avaliada do ponto de vista da experiência do usuário. São tidas como “core”, por serem a principal forma de medir a experiência (User Experience) na prática.

Por se tratarem de diretrizes básicas, todos os proprietários de sites devem implementar as recomendações e acompanhar as métricas que são exibidas nas ferramentas analíticas do Google.

Core Web

O Web Vitals foi uma iniciativa criada pelo Google para fornecer uma visão e orientação unificadas dos indicadores qualificadores de um site, voltados para a experiência dos usuários na web. Integram ainda esse conjunto de métricas: a otimização das páginas web para mobile (baseado no conceito do Mobile Friendly), a navegação segura, o uso do HTTPS e redução no uso de pop-ups ou recursos intrusivos

 

Os 3 pilares do Core Web Vitals

Neste update de algoritmo, que será combinado com o Core Web Vitals, o Google manterá o foco em três pilares:

1. Largest Contentful Paint (LCP);
2. First Input Delay (FID);
3. Cumulative Layout Shift (CLS).

Para simplificar a compreensão: as recomendações do Core Web Vitals Google tratam do tempo de carregamento, da interatividade e da estabilidade visual das páginas online. Veja em detalhes cada um deles a seguir.

1 – Largest Contentful Paint (LCP)

Essa métrica monitora a velocidade de carregamento do conteúdo principal da página. Idealmente, para garantir aos visitantes uma boa experiência o LCP precisa ser de no máximo 2,5 segundos, contados a partir do momento da abertura inicial da página até a renderização do conteúdo na tela.

Acima disto, portanto, é preciso otimizar o tempo de carregamento da página ou do site como um todo.

2 – First Input Delay (FID)

O FID ou First Input Delay, mede o tempo da primeira interação do usuário com o site, até o momento em que o elemento processa a resposta para essa ação que deve ocorrer em até 100 milissegundos. Exemplo: ao clicar em um botão ou link com redirecionamento, em quanto tempo a ação é concluída?

Vale lembrar que, neste caso, a métrica não considera o scroll e também não mede o tempo que o navegador demora para processar o evento em si ou para recarregar a interface depois disso.

3 – Cumulative Layout Shift (CLS)

O terceiro indicador do Core Web Vitals, o Cumulative Layout Shift, ou CLS, avalia a estabilidade visual e recomenda que as páginas devem ter um CLS abaixo de 0,1.

Normalmente, o que ocorre é que os objetos e elementos de uma página “se movimentam”, ou seja, “mudam de lugar” mesmo enquanto a página ainda está renderizando ou carregando para o usuário. Neste caso, o que o Google propõe é que as mudanças de layout interfiram menos nesta experiência sendo mais estáveis.

Diferente das demais métricas, o CLS não é calculado em medida de tempo (segundos), mas sim de acordo com o tamanho do elemento disposto na página e número de movimentos.

Para recapitular e ajudar no seu entendimento sobre o Core Web Vitals, confira a pontuação e resultado da avaliação de cada fator de classificação:

 

Como otimizar seu site para o Core Web Vitals, nova atualização de algoritmo do Google em 2021?

Veja agora quais são os problemas comuns em cada aspecto e como otimizar seu site para os novos fatores do Core Web Vitals:

Largest Contentful Paint (LCP)

O que pode causar problemas?

• Respostas lentas do servidor;
• Render-blocking do Javascript ou CSS;
• Tempos de carregamento lento (causados por arquivos de mídia como imagem e vídeos);
• Dificuldade de renderização.

Como otimizar?

• Otimizar imagens (formatos mais eficientes e modernos);
• Usar lazy loading nas páginas;
• Minificar e adiar CSS e Javascript não críticos (critical CSS – carregar CSS da primeira dobra separado, primeiro);
• Otimizar o servidor;
• Ativar o cache da página;
• Usar Service Worker.

First Input Delay (FID)

O que pode causar problemas?

• Tarefas longas, que consomem mais tempo e banda para execução;
• Execução longas de JavaScript;
• Blocos grandes de JavaScript;
• Render blocking JavaScript.

Como otimizar?

• Dividir JavaScripts pesados em tarefas menores e assíncronas;
• Reduzir impacto de código de terceiros;
• Reduzir o tempo de execução do JavaScript;
• Usar Web Worker.

Cumulative Layout Shift (CLS)

O que pode causar problemas?

• Imagens sem dimensões ou muito pesadas;
• Ads (anúncios), conteúdos embedados e iframes sem dimensões;
• Banners e avisos de cookies;
• Conteúdo injetado de forma dinâmica no site;
• Web fonts causando FOIT/FOUT.

Como otimizar?

• Reservar um espaço, com dimensões definidas (height e width) para imagens e elementos (imagens, ads, iframes) na página;
• Dar preferência para conteúdos estáticos;
• Reservar espaço para anúncios e conteúdo dinâmico;
• Usar API de carregamento de fontes para reduzir o tempo de carregamento.

Diagnóstico e monitoramento: ferramentas para acompanhar as métricas do Core Web Vitals

Você já pode fazer o diagnóstico do seu site e descobrir quais pontos precisa atuar ao utilizar qualquer uma das ferramentas básicas abaixo:

Web.dev

O Google disponibilizou uma ferramenta de diagnóstico online que faz a avaliação do seu domínio. Para isso, é preciso ter uma conta @google e logar em seu perfil.

 

Google Search Console

Se o seu site já estiver integrado ao Google Search Console, você pode utilizar o novo relatório “Experiência na página”, disponível na seção “Experiência”.

 

Chrome User Experience Report

O Relatório de experiência do usuário do Chrome fornece métricas de experiência do usuário, a partir de um dos navegadores mais utilizados hoje em dia, globalmente.

 

Entenda os impactos e relação entre CWV, SEO e o ranqueamento

Pensar na experiência do usuário ao criar um site, é premissa básica: desde a escolha da hospedagem, ao planejamento do projeto e estrutura (layout), assim como do próprio conteúdo.

Embora muito se fale em estratégias de SEO e em conquistar novas posições no ranking do Google e escrever “pensando nos algoritmos”, nada disso se sustentará durante muito tempo, se você não tiver um site com desempenho aceitável. Basta pensar que um usuário que nunca visitou seu site, pode entrar uma vez e nunca mais retornar por ter tido uma má experiência.

Assim, implementar as boas práticas de desempenho e design do seu site, desde o início do projeto é indiscutível. E, como o Google está propondo, será não só um pré-requisito, mas também uma das maiores prioridades daqui pra frente.

A briga para aparecer nas primeiras posições das páginas de resultado será cada vez maior. Os fatores de ranqueamento por trás dos algoritmos são inúmeros. No entanto, certamente estará mais propenso a “ganhar”, quem:

• oferecer a melhor experiência ao seu usuário;
• tiver conteúdo de alta relevância;
• corresponder às intenções de buscas.

Então, pense que o Core Web Vitals é uma forma didática de entregar valor para os usuários web.

Se você estiver centrado no usuário e em gerar experiências de valor, as demais conquistas – diretas ou indiretas – sejam elas posição no Google, maior tráfego ou conversão – serão consequências.

Gostou do conteúdo? Continue acompanhando o nosso blog para mais assuntos sobre tecnologia, negócios e marketing!

Fonte: hostgator