Quando falamos em internet, a primeira coisa que pensamos são sites. No entanto, não basta apenas ter um site e torcer para dar certo: precisamos de diversos requerimentos, ainda mais com as constantes atualizações do Google.
Há alguns anos atrás, era muito fácil ranquear páginas nas primeiras colocações.
Em resumo, era necessário escolher uma palavra-chave e repeti-la ao longo da página. Isso gerava estratégias estranhas, como páginas repetindo um KW (keyword) milhares de vezes.
Hoje, no entanto, o UX, design, responsividade e diversos outros detalhes fazem parte do ranqueamento. Então, criar um site que fica na primeira página não é fácil como antes.
Neste post, vamos comentar sobre um elemento importantíssimo: as Web Core Vitals. Não deixe de ler até o final!
O que são os Web Core Vitals?
As Web Core Vitals nada mais são do que práticas que auxiliam no ranqueamento de uma página. Calma, não estamos falando apenas de SEO: há centenas de métricas que precisam ser otimizadas, além de estratégias de palavras-chave.
Conforme o Google foi evoluindo, ficar na primeira posição foi ficando mais difícil. No caso, o mecanismo, além de uma resposta adequada, também quer uma página otimizada. Nada de experiências ruins para os usuários!
Por causa da concorrência mundial pelas primeiras posições, detalhes sutis são levados em conta, em vista de escolher a melhor resposta possível para o usuário. As WCV se resumem nas três características a seguir:
- Largest Contentful Paint (LCP).
- First Input Delay (FID).
- Cumulative Layout Shift (CLS).
Há ainda o FCP, sendo o precursor dos outros requerimentos. Mesmo não valendo hoje, vamos comentar sobre ele. Afinal, o Google nunca abandona, de fato, suas raízes.
Considerações sobre o Largest Contentful Paint (LCP)
A ideia do LCP e o motivo de ser uma das Web Core Vitals é a impressão que os conteúdos grandes passam para os usuários. Traduzindo livremente o termo, podemos dizer que se trata do tempo que o maior elemento da página leva para ser apresentado.
Mas por que o maior elemento? Simples: em geral, são os maiores elementos que transmitem a mensagem ao usuário. No caso, são eles que dão impacto para a resposta — a não ser que o webmaster coloque imagens aleatórias no conteúdo.
Tome cuidado: LCP é o tempo para carregar o maior elemento da página, não ela como um todo!
A importância do First Input Delay (FID)
O carregamento de conteúdo é muito importante, porém, a interatividade também o é. O FID mede o tempo de resposta a uma determinada ação do usuário. Ou seja, quanto mais rápida a resposta, melhor o FID.
A ideia por trás dessa métrica é a seguinte: quanto mais rápido um site responde ao usuário, mais funcional ele tende a ser; então, mais tempo o usuário vai permanecer em suas páginas.
Um dos maiores vilões do FID são os códigos em JavaScript. O Google recomenda reduzir o tempo de execução desses códigos, assim como minimizar o thread principal.
O ideal é que o tempo de resposta seja menor que 100 ms.
O Cumulative Layout Shift (CLS)
Todos os sites têm elementos móveis, ou seja, botões, imagens e demais coisas do tipo que se movem. No caso, isso pode acontecer para se enquadrar em uma tela, ou até como atrativo estético.
O problema é que esses movimentos podem atrapalhar a experiência do usuário. Embora sejam elegantes, eles podem causar problemas, quando usados de maneira imprudente.
Em resumo, a CLS mede a estabilidade dos elementos de uma página. Portanto, leva em conta dezenas de métricas, todas relacionadas à ao movimento dos elementos do site.
Um dos maiores vilões da CLS são os anúncios. De fato, mesmo sendo uma ótima fonte de renda, eles tendem a alterar os elementos da página, podendo diminuir a CLS da mesma.
O precursor First Contentful Paint (FCP)
Lá em 2019, a Google adicionou a métrica FCP ao mecanismo de busca. No caso, essa métrica avaliava o tempo necessário para um elemento se tornar visível ao usuário. Ou seja, era uma métrica problemática, servindo apenas para dar origem às Web Core Vitals.
Um dos maiores problemas com a FCP é, justamente, o elemento que se torna visível. Afinal, nem sempre será o conteúdo que o usuário está procurando, o que pode proporcionar uma experiência ruim.
Atualmente ela não está mais em uso, pois foi substituída por um conjunto muito mais complexo de métricas.
As WCV serão métricas em 2021
As Web Core Vitals terão um peso excepcional em 2021, e isso acontece por dois grandes motivos: a concorrência na internet está gigantesca e apenas ter a resposta certa não basta para o Google.
Dessa forma, é vital que todos os sites façam atualizações periódicas, visando se adequar às atualizações do Google. Via de regra, a tendência do mecanismo é se tornar human-friendly.
Em outras palavras, as pessoas vão usar frases completas para realizar as buscas, ao invés de apenas usar palavras-chave.
O grande aumento no uso dos comandos de voz corrobora para isso. Afinal, buscas como "tênis corrida melhor” estão se tornando “qual o melhor tênis de corrida?”.
Isso significa que o SEO vai mudar muito nos próximos anos, e as WCV serão fundamentais para um bom ranqueamento!
Por que as Web Core Vitals existem?
As WCV existem para entregar uma melhor experiência ao usuário. Ou seja, ao invés de enviar apenas a resposta para ele, o Google deseja a melhor página também.
Esse perfeccionismo faz parte da empresa como um todo.
Em resumo, os colaboradores da Google são instruídos a fazerem projetos que sejam inovadores, incríveis e eficientes. Seu mecanismo de busca resume muito bem as políticas da empresa.
Quanto mais sites existem na internet, mais fácil é encontrar respostas. Porém, como saber como ranquear uma mesma resposta, mas em sites diferentes? É aí que detalhes como tempo de carregamento, imagens e coisas do gênero entram em ação.
Por que devemos otimizar o site com base neles?
É importante otimizar o site com base nos elementos da Web Core Vitals para eliminar a concorrência no mundo digital. Ou seja, essas otimizações tornam o site — e seu negócio — muito mais competitivo.
Por exemplo, se você e seu concorrente investiram em conteúdos para usuários, e obtiveram a mesma qualidade de trabalho, as WCV vão apontar quem ficará por cima de quem.
Se ambos têm um conteúdo sobre tênis para corrida, praticamente com as mesmas informações, o “desempate” será feito pelas métricas.
Por isso investir nessas otimizações é, de fato, um investimento!
Quais otimizações devem ser feitas no site?
Em resumo, existem centenas de otimizações que devem ser realizadas para se ter páginas que ranqueiam bem. No entanto, a maioria está relacionado com os códigos do site, principalmente JavaScript, e as imagens que compõem a página.
As imagens são muito perigosas, e a maneira de utilizá-las deve seguir diversas regrinhas básicas. Elas precisam ser leves, mas de alta qualidade; grandes e chamativas, mas devem carregar rápido.
Bem complicado, não é verdade?
Vamos comentar sobre algumas das otimizações mais importantes para as Web Core Vitals. São elas:
- Evitar o bloqueio de renderização.
- Utilizar imagens adequadas no site.
- Carregamento lento em imagens e aplicativos.
- Priorizar os arquivos CSS.
- Informar a largura e altura das imagens do site.
- Usar notificações de cookies.
Evitar o bloqueio de renderização
Sites mais antigos, principalmente os que usam métodos ultrapassados de codificação, sofrem com um problema bastante grave: o bloqueio de renderização.
Os sites que são feitos por leigos costumam carregar todo o conteúdo JavaScript e CSS de uma vez. Esses códigos formam o design do site, e sem seu carregamento a página trava até que o loading esteja concluído.
Uma maneira de solucionar esse problema é fazer o carregamento conforme o necessário.
Ou seja, somente certas partes do código são chamadas para a ativa, tornando o processo mais rápido e eficiente — sem nenhum bloqueio de renderização também, é claro.
Utilizar imagens adequadas no site
As imagens são problemáticas em todos os sentidos. Um dos principais, todavia, é seu dimensionamento. Você se lembra da métrica CLS? Se as imagens não estiverem adequadas, as aplicações do site ficam comprometidas.
O ideal é que todo o conteúdo visual do site se adeque ao dispositivo que o está rendendo. Então, as dimensões das imagens devem mudar, mas sempre se enquadrando nos requisitos de design.
Ou seja, todos os botões que funcionam na versão desktop precisam estar funcionais para quem acessar o site por mobile. A única maneira de se fazer isso é, justamente, a readequação automática de conteúdo.
Carregamento lento em imagens e aplicativos
Os aplicativos, ou aplicações, são chamados de widgets. Em resumo, são elementos que possuem códigos próprios, feitos para executar certas instruções quando acionados.
Botões, ícones clicáveis e qualquer outro elemento dessa natureza são considerados widgets.
Em alguns casos, essas aplicações são lentas, aumentando o tempo de resposta da página. Isso deve ser evitado a todo custo, seja escolhendo outras aplicações equivalentes ou até mesmo removendo o widget do site.
Já as imagens precisam ser legíveis, ao passo que não podem ser pesadas demais e nem lentas para carregar. Uma maneira de satisfazer esses requisitos é através da compressão.
Dessa forma, além de manter uma excelente qualidade, elas vão carregar rapidamente, sem gerar “engasgos” na renderização.
Priorizar os arquivos CSS
Os arquivos CSS formam o visual de seu site. São eles que definem o design, onde cada elemento vai ficar, e coisas do tipo. O problema é que cada parte do site, em geral, vai ter arquivos diferentes.
Quando o navegador abre um site, ele precisa saber o que deve carregar primeiro. Como foi dito anteriormente, sites feitos por amadores tendem a carregar todos os códigos de uma vez, causando problemas de renderização.
Priorizar arquivos CSS, em resumo, significa apontar para o navegador o que ele deve ou não carregar. Isso ajuda muito na hora de otimizar os tempos de suas páginas, podendo até beneficiar a estabilidade do site como um todo.
Informar a largura e altura das imagens do site
E mais uma vez temos as imagens aparecendo como vilãs… bem, um dos problemas aqui é a falta de informações quanto ao tamanho das imagens.
No caso, o tamanho original da imagem é de extrema importância para os navegadores, dado que vão apresentá-la da maneira como foi colocada na página.
O problema disso é que, a depender do tamanho da imagem e de onde o usuário está acessando a página, isso pode causar um caos visual.
Se o tamanho não for informado ao navegador, ele vai baixar e apresentar a imagem ao natural, podendo comprimir o layout da página.
A solução para isso é alterar o tamanho da imagem de maneira dinâmica, de acordo com a tela em que o site será apresentado.
Usar notificações de cookies
As notificações de cookies são obrigatórias no mundo todo. No Brasil, a LGPD veio para impor mais rigor na proteção de dados dos usuários — inclusive os cookies. Então, ter essa notificação é vital.
O problema é que ela pode atrapalhar bastante a estabilidade do site. Antigamente, por exemplo, a notificação ficava no cabeçalho da página, empurrando todos os elementos para baixo.
Uma solução usualmente empregada é deixar a notificação sobre a página. Dessa forma, nenhum elemento é empurrado ou tem sua posição alterada.
Apenas otimizando as Web Core Vitals vai ranquear seu site?
Infelizmente, não. Existem centenas de métricas que o Google leva em consideração na hora do ranqueamento, e as Web Core Vitals são apenas algumas delas. No caso, uma boa parte do trabalho reside em SEO, tanto Off quanto On Page;.
Outro detalhe importante diz respeito ao tráfego pago. Quando iniciamos um site, ele leva um tempo até conseguir uma quantidade significativa de visualizações. Uma forma de melhorar isso é pagando ao mecanismo de busca para ranqueá-lo melhor.
Em geral, conteúdos de qualidade e importantes para sua persona ajudam (muito) no ranqueamento de suas páginas. Publiposts e links internos também são valiosíssimos para isso.