Olá pessoal, como vai o posicionamento orgânico de vocês? O que? Seu posicionamento caiu nos últimos meses e você não sabe o motivo? Uma das razões pode ser a atualização Core Web Vitals e é justamente sobre isso que vamos falar hoje.
A Core Web Vitals, foi uma atualização da engine do Google lançada em Novembro de 2021 que visa priorizar os resultados da busca pela experiência de navegação em seu site. Ela considera várias métricas para compreender o nível de experiência que os seus usuários tem na sua página. Vamos estudar cada uma delas e como você pode melhorar a experiência de seu site. Boa leitura 🙂
Core Web Vitals (principais métricas da web) é uma atualização feita pela engine de buscas do Google, que a partir deste ano passou a mensurar também a experiência dos usuários nos sites. Mas por que o Google faz essa avaliação? Pelo simples fato de que a experiência dos usuários em seu site é o que realmente vai garantir a sua retenção. Por mais que o seu conteúdo seja sensacional, se a experiência não for boa o usuário sequer chegará a ler. De acordo com o próprio Google, quando um site está de acordo com as boas práticas da Core Web Vitals, há 24% a mais de chances dos usuários ficarem em seu site.
Essas métricas foram organizadas em 3 grupos que avaliam a experiência e usabilidade dos usuários dentro do seu site. São elas:
Essas métricas são mensuradas através de dois grupos,
Agora vamos analisar melhor cada conjunto de métricas da Core Web Vitals para entender o que cada uma delas representa.
A LCP (Largest Contentful Paint ou Impressão do Maior Conteúdo) representa a velocidade de carregamento da página por completo. Ela é calculada tomando como base o início do carregamento até a renderização final do maior elemento da página.
Através de estudos internos do Google e discussões o W3C Web Performance Woking Group foram definidos os melhores caminhos para medir a velocidade de carregamento de um site, neste caso, quando o maior elemento foi renderizado.
De acordo com o Google, uma LCP ruim leva mais de 4 segundos para ser carregada e precisa de otimizações com urgência, entre 2,5 e 4 segundos é um tempo satisfatório, e abaixo de 2,5 é um bom tempo de LCP.
Entre os fatores que podem influenciar a LCP de seu site podemos destacar o tamanho de seu arquivo CSS, Javascript, tempo do seu servidor de hospedagem, entre outros.
Sabe aquela demora do site para executar uma ação que você solicitou, como quando você clica num link e ele demora pra carregar? Pois bem, neste caso a sua experiência de navegação está sendo prejudicada e é justamente disso que trata a métrica FID.
A métrica FID (First Input Delay ou Atraso de Primeira Entrada) está relacionada à velocidade de resposta da primeira interação do usuário com a página. Seria algo como a “primeira impressão” que um usuário tem em seu site. Para calcular esta métrica o Google calcula o tempo entre a primeira interação do usuário com a página (seja através de um clique ou execução de script) e o tempo que o navegador processa os eventos de resposta.
O FID não mede o carregamento de toda a página, mas apenas o tempo que leva entre a primeira interação do usuário e a resposta deste evento. Considerando cada acesso o FID estabelece uma média em milissegundos que, segundo o Google, não deve exceder mais de 100 milissegundos. Com isso os seus usuários terão uma resposta rápida, aumentando as chances de se manterem em seu site, por conta da boa experiência que ele proporciona.
Certamente você já teve essa má experiência num site. Quando você acessa uma página, ela aparentemente termina de carregar, então você mira o botão que vai clicar e záásss, ele foge de você e vai lá pra baixo. Sim, isso é muito comum, mas prejudica a experiência de navegação, não é mesmo?
Isso normalmente ocorre porque os elementos da página foram carregados de forma assíncrona ou dinâmica, como elementos mais pesados ou imagem sem tamanho específico. A métrica CLS (Cumulative Layout Shift ou Mudança de Layout Cumulativa) é responsável justamente por mensurar a frequência e gravidade dessas mudanças inesperadas de layout em uma determinada página, a sua estabilidade visual. Esta métrica atribui uma pontuação na mudança de layout enquanto a sua página é carregada, calculando o quanto os elementos se movem durante o seu carregamento. Páginas com pontuação acima de 0.25 são consideradas ruins pelo Google e precisam de otimização urgente, entre 0.1 e 0.25 é considerada razoável e abaixo de 0.1 é considerada boa.
Vale ressaltar que a métrica CLS considera apenas as mudanças que ocorrem quando os elementos existentes são reposicionados da sua posição inicial.
Existem algumas formas de testar o seu site para saber se ele está de acordo com as recomendações do Google e a Core Web Vitals.
Pois bem, talvez você não esteja lendo este conteúdo apenas de curioso. Talvez você esteja buscando soluções para o seu site neste momento, não é mesmo? Pensando em ti, segue abaixo algumas dicas preciosas que preparamos para você otimizar o seu site para a Core Web Vitals. Vamos lá?
Como dissemos anteriormente, de forma resumida o LCP trata de velocidade. Portanto neste caso é importante analisar e corrigir os pontos abaixo:
Elementos de CSS e Javascript que podem fazer o bloqueio de renderização da página. Para sites em WordPress é possível instalar plugins que permitem manipular o carregamento destes elementos.
A ativação de cache tanto no servidor quanto no navegador do usuário é muito importante para otimizar a velocidade de seu site. O cache é um recurso que separa no servidor um banco de arquivos utilizados com muita frequência e entrega para os navegadores com maior velocidade o que é necessário para carregar a sua página.
Outro ponto importante que poder afetar a sua LCP é o tempo de resposta de seu servidor, que por diversos motivos pode apresentar lentidão em alguns horários do dia. Utilize as ferramentas de teste que sinalizamos acima para identificar se isso esta ocorrendo e, caso esteja, entre em contato com o suporte da sua empresa de hospedagem para avaliar o que pode ser feito para melhorar a performance do seu servidor.
Também é possível antecipar conexões de terceiros, tais como scripts externos de redes sociais ou rastreamento por exemplo. Assim, não é necessário esperar o seu site carregar por inteiro para depois carregar os recursos externos. Através destas configurações os navegadores podem carregar simultaneamente estes arquivos. Em casos de sites em WordPress existem bons plugins que permitem efetuar esta configuração.
Quando falamos de internet, estamos falando de velocidade da luz certo? Mas saiba que a velocidade de carregamento de seu site pode ser afetada em milisegundos dependendo da região em que o seu usuário estiver. Para resolver esse problema existem as CDNs. Uma CDN (Content Delivery Network ou Redes de Entrega de Conteúdo), como a própria tradução diz, são redes que aumentam a velocidade de seu site por entregar o conteúdo mais próximo do usuário, de acordo com a região em que ele estiver acessando o seu site. Ao utilizar uma CDN, na prática, você está distribuindo o seu site em diversos servidores ao redor do mundo. Portanto o seu site não será carregado essencialmente do mesmo servidor, mas sim do servidor que estiver mais próximo geograficamente do usuário que estiver acessando.
Entre as melhores que conhecemos, podemos indicar a CloudFlare (utilizada por nós mesmos), que além de ser uma das mais confiáveis é uma das mais seguras também, pois além de otimizar a entrega de seu site, também ajuda a evitar ataques e invasões.
A minificação é um recurso que remove dados redundantes ou desnecessários para o navegador, tais como comentários de códigos, redução do nome de variáveis ou códigos sem utilidade. Através da minificação de arquivos CSS e Javascript você torna o trabalho do navegador mais fácil e consequentemente entrega um site mais leve.
Outro recurso que também pode ajudar a melhorar a experiência dos seus usuários, é adiar o carregamento de Javascript que não são críticos para o carregamento do site. Através deste recurso o seu site é impresso no navegador do cliente com maior velocidade e os Scripts desnecessários são carregados em segundo plano, conforme o usuário navega na página.
De forma resumida, o FID trata de interação. Portanto, para melhorar esta métrica você deve se atentar a qualquer recurso ou elemento que possa prejudicar a experiência de interação dos seus usuários.
As execuções pesadas de JavaScript normalmente são responsáveis por prejudicar esta métrica. Nestes casos, recomendamos essencialmente otimizar a forma como os arquivos de Javascript de seu site são compilados e executados. Aqui vale evitar ao máximo a utilização de arquivos JS no projeto, reduzindo assim o tempo de execução do javascript, bem como dividir em arquivos menores ou mesmo promover o carregamento de forma assíncrona, reservando apenas os scripts mais importantes do site para serem carregados com prioridade.
Quando falamos de CLS, estamos falando de estabilidade visual. O que o Google avalia nesta métrica é a forma que o seu site é carregado, evitando que elementos fiquem pulando de um lado para o outro do site enquanto carrega. Se o seu site apresenta uma nota ruim para esta métrica, recomendamos as dicas abaixo:
Outro ponto importante, mas que muitos desenvolvedores não se atentam está relacionado ao tamanho das imagens. Muitas vezes durante o desenvolvimento as imagens são definidas com tamanho automático, o que pode prejudicar a métrica CLS. Para solucionar este problema basta definir no código do site o tamanho das imagens, anúncios ou vídeos com width e height definidos.
É muito comum que designers com todo o seu talento e conhecimento recomendem a utilização de fontes personalizadas para os seus projetos, até aqui tudo bem. O problema começa a aparecer quando o navegador do usuário aguarda o carregamento da fonte desejada para exibir o conteúdo. Quando isso acontece, os elementos pré carregados são levados para baixo, prejudicando ou mesmo irritando o usuário do site.
Para resolver isso basta ativar em seu site o recurso de font-swap. Este recurso irá garantir que a fonte padrão e o conteúdo serão carregados o mais breve possível, enquanto a fonte personalizada é carregada em segundo plano. Assim você garante a estabilidade visual do site.
Por fim também não é recomendado o uso de iframes e, se necessário, que o seu tamanho seja definido adequadamente para evitar uma má experiência para os seus usuários.
Outro recurso muito utilizado na criação de sites é o Lazy Load. Através dele é possível adiar o carregamento de elementos do site até que seja necessário, ou seja, até que o usuário role a tela até o elemento em questão. Essa prática é muito boa, contudo ela pode prejudicar algumas métricas da Core Web Vitals, principalmente no carregamento de imagens. Pois, ao adiar o carregamento de uma imagem, é possível que a estabilidade visual do site seja prejudicada durante o seu carregamento.
Por isso recomendamos que este recurso seja utilizado com equilibrio, principalmente evitando fazer o lazy load das principais imagens que se localizam no topo da sua página.
Também vale ressaltar que o Google há muitos anos implementou o conceito de Mobile First. Portanto assim fica evidente que você deve ter uma atenção muito especial para a versão mobile de seu site, que deve ser essencialmente mais leve e objetiva que a versão desktop de seu site.
Por fim, outro ponto que não está diretamente ligado a Core Web Vitals, mas é de extrema importante para o Google é a segurança de seu site. Além de garantir que ele esteja bem protegido, é essencial que ele utilize recursos de criptografia através de certificados SSL que permitam a navegação com https, sendo assim considerados seguros pelos navegadores dos usuários.
Esperamos que as nossas dicas lhe ajude a conquistar métricas melhores para promover a experiência de seus usuários. Caso ainda tenha dúvidas ou não tenha conhecimentos técnicos, entre em contato conosco. Temos uma divisão inteira de Web Design à sua disposição 🙂
