SEO Técnico e como melhorar o Google Core Web Vitals

Hoje vamos explicar o que é SEO técnico e como o Google Web Vitals afeta o ranqueamento do seu site. Além disso, vamos apresentar um guia prático de estratégias de SEO Técnico para melhorar a performance do seu site no Google. Confira!

Índice do Core Web Vitals

• LCP
• CLS
• INP

O que é SEO Técnico?

Otimização de algoritmo de busca (SEO) é a forma como profissionais de marketing digital trabalham para facilitar com que sites sejam encontrados por pesquisa orgânica no google.

Nos primórdios do Google, o algoritmo era focado em conteúdo. Ele simplesmente buscava na internet por páginas que tivessem as “palavras-chave” que o usuário havia pesquisado e então apresentava baseado nessa informação.

Hoje em dia, o algoritmo já é muito mais inteligente. A Google prioriza a “experiência do usuário”, ou seja, a forma como ele se comporta no site.

É por isso que hoje, para SEO, o engajamento na página é algo que se busca: tempo na página, cliques, páginas por sessão, rolagem, download de documentos, assistir vídeos e por aí vai.

Mas ainda existe um critério básico, algo que o Google considera vital para apresentar um site como resultado de uma busca.

Esse critério básico é o que chamamos de Google Core Web Vitals e o SEO Técnico são as estratégias, do ponto de vista de programação, que são tomadas para garantir que um site atende a esses critérios.

E quais são esses critérios? Abaixo vamos resumir, mas se quiser, você pode acessar o seu relatório de Core Web Vitals no Google Search Console do seu site.

Google Core Web Vitals

A Google usa como base a experiência do usuário no celular. De forma geral, os Core Web Vitals foram criados para garantir que o usuário não vai encontrar problemas com o site por questões de performance.

Por anos, os engenheiros da Google trabalharam para mapear os principais problemas de performance em mobile e criaram uma lista de métricas que todo site precisa atender.

Para cada uma dessas métricas é dada uma nota (verde, amarelo e vermelho).

Você pode fazer a checagem dessas métricas e ter um diagnóstico de uma página, agora mesmo, usando o Google Lighthouse (aperte F12 no teclado e na barra em cima faça um teste de performance em “Lighthouse”).

Você também pode acessar o Search Console do seu site e acessar na aba Core Web Vitals um diagnóstico do site completo.

É papel do programador do seu site fazer as melhorias no site para evitar as notas vermelhas e tentar chegar nas notas verdes (apesar de que isso vai depender de vários fatores).

Abaixo, vou mostrar quais são atualmente as métricas usadas no Core Web Vitals, como elas são medidas, para que elas servem e como você pode melhorá-las.

Largest Content Paint (LCP)

Você já entrou num site uma vez e enquanto você navegava uma imagem enorme teve que carregar e travou o site todo?

É para evitar isso que o LCP foi criado. O LCP registra quanto tempo leva para o maior elemento na primeira tela do site carregar.

Essa é a métrica que mais gera problemas, principalmente porque muitas vezes a capa de um site é cheia de elementos dinâmicos, vídeos ou banners enormes.

Um LCP considerado Bom, é quando o elemento leva até 2.5 segundos para carregar. Até 4 segundos ela precisa de melhorias e acima disso a performance é ruim.

O que afeta o LCP?

De forma geral qualquer coisa que afete o carregamento ou renderização do maior elemento de imagem, vídeo ou caixa de texto na capa do seu site, vai afetar o LCP.

Isso significa que qualquer código que precisar carregar antes da imagem, vai atrapalhar o LCP assim como o peso do elemento em si.

Cookies terceiros, integrações ou qualquer tipo de load que acontece na abertura da página vai afetar negativamente o LCP.

Além disso, se o elemento não estiver em um formato otimizado para web mobile, ou se for muito grande ou muito pesada, isso também atrapalha.

O que você pode fazer para melhorar o LCP?

Vamos lembrar que a pontuação dos Core Web Vitals é mobile. Ou seja, o seu problema no LCP vai aparecer na versão do site para celular.

Sendo assim, a primeira solução é pensar no responsivo. Muitos sites optam por carregar banners apenas na versão desktop e aí adaptam o layout no mobile.

Se no seu caso isso é impossível, então primeiro é interessante redimensionar o seu elemento para mobile e alterar imagens para formatos otimizados (converter todos os PNGs em JPGs ou até SVGs).

Outra coisa interessante de se fazer é lazyload. Otimize o load da página para priorizar o maior elemento.

Por último, tente cortar ao máximo a necessidade de código terceiro ser carregado logo de cara. 

Lembre-se que você sempre pode contar com o diagnóstico do Lighthouse para otimizar a página específica que está buscando. 

Tem até um filtro no relatório no Lighthouse que te permite ver apenas os problemas de LCP.

Como eu comentei antes, o LCP é o problema mais comum de SEO técnico. 

Isso é bom, porque significa que, ao melhorar o LCP, seu site provavelmente vai melhorar seu ranqueamento quase de imediato.

Agora vamos para o próximo Core Web Vital.

Cumulative Layout Shift (CLS)

Alguma vez você foi clicar num botão e o botão se mexeu bem na hora e você clicou no lugar errado?

O CLS foi criado para evitar esse problema. A mudança cumulativa do layout mede o quanto o layout se move quando todos os elementos carregam.

A nota verde indica que menos de 10% do layout se mexe, enquanto que ruim seria acima de 25%.

O problema de CLS é mais fácil de resolver porque é um problema que está completamente sob o controle do programador de front-end.

Tudo que nós precisamos fazer é dimensionar os espaçamentos dos elementos de maneira fixa. Ou seja, pré-definir as dimensões de width e height do elemento em pixels.

Essa é uma prática um pouco complicada se tratando de responsivo: como existem muitas dimensões de telas diferentes de celular, é comum que programadores deixem as dimensões de elementos como uma porcentagem do tamanho da tela direto pelo CSS.

Exemplo:

Para evitar que essa movimentação aconteça, mas que o responsivo ainda funcione, nós podemos definir uma proporção padrão na imagem e incluir o responsivo na folha de estilo do CSS:

Exemplo:

Evitar o CLS é relativamente fácil e só precisa mesmo que o seu programador de front-end siga boas práticas de responsivo. 

Se o programador não tem conhecimento técnico sobre CLS, você pode simplesmente compartilhar esse guia de estilização e otimização da Google.

Vamos para o próximo Core Web Vital.

Interação com a Próxima Exibição (INP)

Você já clicou em um botão num site e ele travou?

O INP foi criado para evitar isso. Ele mede quanto tempo leva do momento que você clicar num elemento, para ele reagir.

O ideal é abaixo de 200ms, enquanto que uma performance ruim é acima de 500ms.

O INP é uma métrica nova. Ele substituiu esse ano o FID (latência na primeira entrada), o que nos mostra como a Google sempre está avançando na questão da qualidade da experiência do usuário.

O INP é mais complicado de resolver porque ele é difícil de medir e de saber onde está o problema.

Diferente do LCP e do CLS o INP é medido a partir dos dados de usuários no site. 

A interação do usuário com o site é medida toda vez que o usuário clica em um elemento e esse elemento precisa carregar uma ação.

O tempo que leva do click até a resposta do sistema é o INP. 

Para identificar problemas de INP em uma página é necessário estudar elemento por elemento, click a click. 

Existem várias estratégias para isso, você pode conferir como diagnosticar problemas de INP aqui. 

A solução para problemas de INP também é complexa e envolve mexer nos eventos de callback do site.

Do ponto de vista de design do site, o que você pode fazer é reduzir a quantidade de elementos interativos na tela, especialmente na versão mobile.

Elementos com drop down como menu sanduíche ou carregamento de modais: se forem eles que estão gerando problemas, opte por mudar para elementos estáticos. 

Corrigindo e validando o SEO Técnico

Agora que nós conhecemos as métricas que o Google está usando para julgar nosso site, vamos mapear os problemas e corrigi-los.

Para isso, acesse o Search Console, na aba Core Web Vitals > Celular > Abrir Relatório.

Você vai encontrar uma lista de problemas. Sempre comece pelas páginas com desempenho “Ruim”, já que essas atrapalham mais o ranqueamento do seu site.

Ao clicar no problema embaixo, você vai ver uma lista com todas as páginas no site que estão com a métrica do Core Web Vital Ruim.

Agora, começa o trabalho de verdade. O que você vai precisar fazer é visitar as páginas uma por uma e entender a origem do problema com o Google Lighthouse.

Na maior parte das vezes o problema é geral porque tem um elemento que aparece no site inteiro e tem uma performance ruim.

Pode ser uma imagem de capa mal otimizada ou dimensionada, algum código terceiro que carrega em todas as páginas, lazyload que não foi aplicado no site todo ou código que não foi minificado.

Esses problemas de performance são resultado de um site que foi mal planejado para navegação no celular ou até mal programado.

Corrigir um elemento em uma página é fácil. Você pode começar pelas páginas mais valiosas do site.

Porém, se o problema de performance é generalizado, aí podemos ter que repensar o design inteiro da versão mobile, ou até mudar o site inteiro.

Se você usa uma plataforma digital, por exemplo, como Wix ou então uma plataforma de ecommerce e ela tem performance ruim, é difícil encontrar uma solução que não seja fazer seu próprio site.

Validando SEO Técnico

Não basta apenas corrigir os problemas do SEO Técnico do site, você precisa avisar o Google que eles foram corrigidos para agilizar o processo.

Depois de feitas as correções, você pode voltar ao Search console e clicar no botão “Validar a correção”.

O Google vai iniciar um processo de reanálise do site que pode durar até 30 dias e, então, mudar o ranqueamento do site baseado nos resultados.

Os problemas de SEO Técnico são em maioria problemas de programação e design.

Se você não é programador, o seu papel como webmaster ou dono de empresa é não atrapalhar, ou seja, não exigir elementos mirabolantes na versão mobile que vão comprometer a performance.

Se você é programador, seu papel é conhecer os Web Vitals e lembrar deles já na etapa de projeto do site, para evitar problemas futuros.

É importante que ambos entendam o seu papel, assim o SEO Técnico pode ser uma força e não uma fraqueza do projeto.

Espero ter ajudado, até a próxima!