Em maio de 2020 o Google anunciou a chegada de novos indicadores de SEO para 2021. As novas métricas, chamadas Core Web Vitals, avaliam o nível de performance dos sites.
O objetivo da empresa é garantir uma melhor experiência aos usuários dentro dos sites, o que já vem sendo alvo de diversas modificações, a exemplo do Mobile-Friendly em 2015 e do Bidirectional Encoder Representations (BERT) em 2019.
A última novidade, lançada em 2021, é composta por 3 fatores: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Velocidade, interatividade e estabilidade visual, respectivamente.
É preciso estar atento às atualizações para não perder posições. Continue a leitura e entenda melhor quais foram as mudanças e descubra como otimizar o seu site.
O que é Core Web Vitals?
Core Web Vitals são as novas métricas do Google para SEO. Complementando o que já estava valendo, elas têm como objetivo melhorar a experiência do usuário nos sites e estão relacionadas ao ranqueamento nos resultados orgânicos.
São três os aspectos que compõem a atualização:
Largest Contentful Paint (LCP): se relaciona ao desempenho de carregamento do conteúdo das páginas, o que deve ocorrer em 2 segundos e meio.
First Input Delay (FID): se relaciona a interatividade dos sites, o FID das páginas deve ser menor que 100 milissegundos.
Cumulative Layout Shift (CLS): se relaciona a estabilidade visual da página e deve se manter abaixo de 0,1.
A seguir entraremos em detalhes sobre cada um desses fatores, descrevendo o que pode os prejudicar e como otimizar cada um deles.
Largest Content Paint (LCP)
O LCP mensura o tempo que os conteúdos mais importante da página levam para ser exibidos para o usuário. A métrica indica o momento exato em que o maior item do conteúdo é carregado, incluindo imagens, textos e vídeos.
De acordo com o Google, para uma boa experiência, esse tempo deve ser de até 2,5 segundos.
O que pode prejudicar o LCP
Veja quais são os principais fatores por trás de um baixo LCP:
- Baixo tempo de resposta do servidor (slow server response time)
- Bloqueio da renderização por JavaScript ou CSS (Render-Blocking JavaScript and CSS)
- Tempo de carregamento lento dos recursos (slows Resource load times)
- Renderização do lado do cliente (client-side Rendering)
Como otimizar o LCP
A seguir, algumas técnicas de otimização:
Reduza o tempo de resposta do servidor
- Use um CDN
- Armazene ativos em cache
- Use um service worker
- Estabeleça conexões de terceiros com “rel=”preconnect”
Otimize o tempo de bloqueio por JavaScript
- Minimize o código, compactando dados, dividindo pacotes, enviando apenas o que é necessário, e sirva código com sintaxe mais recente.
Reduza o tempo de bloqueio por CSS
- Remova qualquer CSS não utilizado ou caracteres desnecessários
- Organize o CSS crítico inline incluindo-o diretamente no <head> da página
First Input Delay (FID)
O FID também está relacionado com a velocidade do site. Aqui é mensurado o tempo que o conteúdo leva para ser visualmente processado, ou seja, o tempo que o site leva para estar pronto, com seus elementos clicáveis em funcionamento, para navegação e pesquisa.
O Google coloca como um tempo de espera ideal até 100 milissegundos para que a experiência do usuário não seja prejudicada.
O que pode prejudicar o FID
Veja quais são os principais fatores por trás de um baixo FID:
- Tarefas longas que bloqueiam o thread principal
- Execução de scripts (internos) que atrasam a interação
- Tempo de execução pesada do JavaScript
Como otimizar o FID
A seguir, algumas técnicas de otimização:
- Divida o código de longa execução em tarefas assíncronas menores
- Mova o carregamento e a execução de scripts pesados para “componentes não essenciais” e coloque-os fora do critical path
- Minimize o carregamento de dados em cascata
- Reduza a quantidade de dados que precisa ser pós-processada no lado do cliente (client-side)
- Divida o pacote JavaScript em vários blocos (também conhecido como lazy loading)
- Use um web worker
Cumulative Layout Shift (CLS)
O CLS é um indicador de estabilidade do layout quando em carregamento. Sendo assim, verifica se o usuário tem alguma dificuldade de navegar pelo site, como clicar em um elemento indesejado porque a página mudou de formatação.
A métrica, diferente das anteriores, não tem relação com a velocidade de carregamento, mas sim com a intensidade de mudanças na página.
Segundo o Google, um bom CLS tem valor menor do que 0,1. A pontuação considera o tamanho da janela de visualização e o movimento dos elementos instáveis na janela entre dois quadros renderizados.
O que pode prejudicar o CLS
Veja quais são os principais fatores por trás de um baixo CLS:
- Imagens grandes demais
- Propagandas, transições, animações e frames mal dimensionados
- Mudanças inesperadas de layout e conteúdo
- Web fontes que sofrem alterações
- HTML mal compactado
Como otimizar o CLS
A seguir, algumas técnicas de otimização:
- Inclua dimensões exatas em suas imagens e vídeos
- Evite anúncios pop-up ou banners
- Evite flashes de texto não estilizado ou invisível (FOIT/FOUT)
- Use uma API de carregamento de fontes pode reduzir seu tempo de carregamento
A melhor opção para quem não é programador e está trabalhando com um site WordPress é utilizar plugins que fazem todas essas coisas, como WPRocket. Você também pode optar para contratar um profissional e assim evitar dores de cabeça.
Como mensurar o Core Web Vitals
Implementada todas as técnicas sugeridas, você provavelmente vai querer descobrir como ficou o Core Web Vitals do seu site e existem algumas ótimas ferramentas para isso.
Google PageSpeed
O PageSpeed pode te ajudar a identificar quais ações são necessárias para melhorar as métricas do seu site. A avaliação varia entre 0 e 100 e inclui todos os fatores descritos ao longo deste artigo.
GTMétrix
O GTMétrix funciona de forma similar ao Google PageSpeed, porém, é ainda mais completo. A avaliação é feita em porcentagem, especificando performance e estrutura, e a plataforma dá também uma nota de A a E ao site.
Search Console
No Google Search Console você encontrará na aba “Experiência” o item “Core Web Vitals” ou, em português, “Principais Métricas da Web. Nessa página você irá encontrar a avaliação de cada uma das páginas do seu site e ainda como otimizá-las.
A WTA3 conta com programadores experientes e capacitados a trabalhar o Core Web Vitals do seu site. Entre em contato e faça agora mesmo o seu orçamento!
