Sites de negócio podem vender mais se aliarem a ótima experiência de uso ao melhor ranqueamento nos buscadores. Como? Conheça os Core Web Vitals.
Quem começa um negócio na internet tem muitos detalhes para se preocupar: precisa escolher o nome da marca, definir a identidade visual, registrar o domínio, escolher uma hospedagem de site, criar o e-commerce, cadastrar produtos e por aí vai.
Mas se tudo isso não proporcionar uma boa experiência para quem visita o site, a venda não acontece. Aliás, algumas coisas podem até afastar a pessoa antes mesmo de saber direito o que existe na loja virtual.
Isso porque mais de 50% das pessoas que utilizam dispositivos móveis costumam abandonar sites que não carregam em menos de três segundos. Se adicionar um tempo entre 1 e 3 segundos no carregamento do site, a taxa de rejeição pode aumentar em 32%.
Para as pessoas, a interação com um site precisa atender e superar as expectativas. Do ponto de vista de quem visita uma página web, o site precisa ter um bom layout, respostas fáceis de encontrar e fotos com carregamento imediato. Todo o carregamento do site, por sinal, precisa ser imperceptível a quem visita.
Do lado dos buscadores, os sites também precisam atender diversos requisitos – que são aperfeiçoados dia após dia.
Os algoritmos do Google avaliam uma série de parâmetros nas páginas para realizar o ranqueamento orgânico, mas o lado bom é que periodicamente a empresa publica quais são esses critérios.
É aí que entram as Core Web Vitals.
Os parâmetros de Core Web Vitals reúnem critérios sobre como é a experiência da pessoa no site, como anda a segurança das páginas, se ela está indexada direitinho e por aí vai.
E as métricas de Core Web Vitals avaliam o site tanto nos dispositivos móveis quanto em laptops e desktops. Quer dizer, responsividade conta sim.
Parece um pouco complexo? Estamos aqui para ajudar a simplificar.
A Locaweb preparou esse artigo explicando todos os detalhes em uma linguagem possível e com muitos links para você explorar esse mundo do Core Web Vitals com calma. Vamos lá.
Core Web Vitals: o que é e como funciona?
Para ajudar no entendimento do conceito, vamos pensar no significado do próprio termo. Em uma tradução livre, Core Web Vitals seria algo como Sinais Vitais do Site.
Se isolarmos as palavras “sinais vitais” e pensarmos em termos humanos, entendemos que eles compõem os indicadores das principais funções do corpo. Bons sinais vitais indicam o bom funcionamento do organismo.
As Core Web Vitals reúnem métricas e indicadores que também dizem se o site está pleno e saudável, pronto para aparecer em boas colocações no ranking do Google. Caso contrário, seu site precisa ir para a UTI… Mas sem pânico!
Lendo esse artigo, você vai descobrir qual é o caso do seu site ou e-commerce e vai conseguir reverter a situação.
Pessoas no centro da experiência
As métricas fundamentais das Core Web Vitals avaliam pontos técnicos que facilitam a vida de quem visita o site ou e-commerce. Quanto melhor for o projeto de uso, melhor a experiência.
Se a experiência é boa, as pessoas vão navegar mais tempo. Logo, o Google vai entendendo como sua página é relevante para quem a visita.
O legal de tudo isso é que sua base é lógica. Basta nos colocar no lugar de quem usa (e usamos). O que queremos? Que o site carregue rápido, que as coisas estejam em lugares óbvios, que as imagens sejam estáveis e apareçam logo, que o site seja seguro para inserirmos dados sensíveis.
Tudo isso faz parte das Core Web Vitals – talvez com nomes um pouco mais técnicos, mas a Locaweb está aqui para facilitar sua vida e vai explicar tim-tim por tim-tim. Você também está no centro do nosso negócio.
Como as Core Web Vitals impactam no SEO
É muito importante entender que as Core Web Vitals e o SEO – do inglês Search Engine Optimization ou otimização de Mecanismos de Busca – estão estreitamente relacionadas. Elas fazem parte das estratégias de SEO , sendo mais um pilar que estrutura a relevância dos sites e as equipes especialistas em comunicação na web trabalham com atenção nisso.
O próprio Google é muito transparente sobre a relevância da otimização do site para os seus mecanismos de busca. Ele recomenda a utilização das métricas do Core Web Vitals como parte do SEO, fazendo o site ser bem ranqueado e proporcionar uma ótima experiência de uso.
Esse aspecto, aliado a outros pontos técnicos da página, se alinha aos sistemas de classificação dos algoritmos.
Quais são as métricas de avaliação das Core Web Vitals
Como acabamos de ver, as Core Web Vitals trazem indicadores importantes para melhorar o ranqueamento da página, exigindo monitoramento constante das equipes de SEO.
Isso porque os elementos de uma página influenciam uns aos outros e o desempenho como de um modo geral pode ser afetado se um deles não for bem.
Dentro das métricas de Core Web Vitals, o site ou e-commerce precisa atingir pelo menos 75% de visualizações para ser avaliado com Bom. Os índices são atualizados periodicamente, sendo as maiores preocupações: tempo de carregamento, interatividade de quem usa e estabilidade visual.
Vamos, agora, aprofundar nas métricas:
Largest Contentful Paint – LCP
A Largest Contentful Paint – LPC, ou Impressão do Conteúdo Completo, é uma métrica que avalia a velocidade em que o conteúdo da página é totalmente carregado.
Ele é uma evolução de outros dois indicadores: o First Contentful Paint – FCP e o First Meaningful Paint – FMP, que foram descontinuados.
Dentro dos critérios do Largest Contentful Paint – LPC está a avaliação da velocidade de renderização da página. Aqui, se usa como parâmetro principal o tempo de carregamento dos conteúdos protagonistas, como imagem, vídeo ou texto.
Fatores de influência no tempo de carregamento podem estar relacionados ao servidor ou às linguagens de programação utilizadas no site ou e-commerce.
O tempo de Largest Contentful Paint – LCP recomendado pelo Google fica abaixo de 2,5 segundos. Esse é um intervalo de tempo considerado aceitável tanto para uma boa experiência de uso quanto para ser alcançado por meio da programação do site.
Quando o tempo fica acima disso, há grandes chances do site ou e-commerce ser abandonado por quem utiliza, o que prejudica suas vendas e o ranqueamento da página.
Interaction to Next Paint – INP
Tal e qual uma matrioska (aquela boneca russa), aqui temos uma métrica dentro da métrica. A Interaction to Next Paint – INP, ou Impressão da Próxima Interação, analisa o tempo geral de resposta às interações de quem usa o site ou e-commerce durante todo o seu período de permanência. E aí tudo entra na conta, inclusive cliques e digitações. As respostas precisam continuar no mesmo bom ritmo de tempo.
A INP passou a ser considerada nas Core Web VItals em março de 2024, substituindo o First Input Delay (FID) como uma das métricas-chave de análise de desempenho e ranqueamento de sites.
O FID, ou Atraso de Primeira Entrada em português, mede a velocidade da página entre a primeira interação da pessoa até a resposta recebida. Esse atraso pode acontecer por alguns motivos, como a alta latência de um servidor ou a necessidade de carregar um código mais pesado.
É recomendado que a resposta à primeira interação aconteça em até 100 milissegundos. Acima disso já é bandeira amarela – tem que ajustar. Agora, se chegar aos 300 milissegundos, pare tudo e resolva isso: a experiência é classificada como ruim.
Vale lembrar que quanto mais baixa for a latência do servidor, melhor será a resposta do site ou e-commerce. A Locaweb garante uma baixa latência por ter o seu Data Center no Brasil.
Cumulative Layout Shift – CLS
Já aconteceu de você tentar clicar em um botão do site, ou em outro elemento, e ele mudar de lugar do nada? De duas, uma: ou acabou clicando no vácuo ou clicou em outra coisa, abrindo um link que não precisava. Se nunca aconteceu com você, saiba que isso existe e o Google está de olho também.
A Cumulative Layout Shift – CLS, ou Mudança de Layout Cumulativa, trata de acontecimentos desse tipo dentro do site. Essa métrica analisa com qual frequência isso ocorre e o quanto impacta negativamente a experiência de uso.
Isso pode acontecer quanto os elementos do site são carregados fora de sincronia, por problemas nas configurações dinâmicas e quando imagens se redimensionam automaticamente – em um anúncio, por exemplo.
Dentro das Core Web Vitals, o CLS é fundamental. O Google definiu uma equação para calcular a pontuação desse item. Vamos lá:
Fração do Impacto x Fração de Distância = pontuação
- Fração de Impacto: diz sobre como o elemento instável influencia a visualização;
- Fração de Distância: mede o quanto o elemento se deslocou no layout.
A pontuação recomendada pelo Google é qualquer número abaixo de 0,1. Se a página ficou entre 0,1 e 0,25 é necessário implementar mudanças. Se o número ficar acima de 0,25 a experiência de uso é considerada ruim. Chame um desenvolvedor web urgente.
Como melhorar os índices das Core Web Vitals?
Essa é a resposta que a gente vai responder agora. Se você leu esse artigo até aqui, já viu o que seu site ou e-commerce tem de deficiência diante das métricas abordadas nas Core Web Vitals.
Nossa recomendação é entrar em contato com um profissional de desenvolvimento, pois muitos ajustes passam pelo código de programação. Seria imprudente mexer nisso sem conhecimento técnico.
Para apoiar esse importante trabalho de adequação e ter um SEO ajustado aos padrões de qualidade e boas práticas da internet, vamos aprofundar algumas orientações para aumentar a aderência às Core Web Vitals.
Atenção ao uso de fontes
Ao conceber o layout do site, utilizar uma font-family diferente pode trazer mais personalidade à identidade do site, mas também pode se tornar um problema se alguns cuidados não forem tomados.
Lembra das mudanças repentinas apontadas como um problema na Cumulative Layout Shift – CLS? A font-family pode trazer esse tipo de instabilidade ao site.
Isso acontece porque dentro das boas práticas de programação HTML existe uma hierarquia de font-family padrão que o navegador pode adotar caso não encontre a font-family indicada como principal.
Se certos cuidados não forem tomados, o navegador pode demorar a encontrar a font-family principal e ir direto para a font-family padrão.
Mas, geralmente, ele encontra a principal e automaticamente muda todo o texto para ela.
Se você estiver lendo a página, o texto vai correr de lugar, as imagens vão para outras posições e alguns elementos gráficos poderão ajustar seus tamanhos.
Resolva essa questão utilizando uma API de carregamento de font-family. Ele vai deixar a font-family carregada com antecedência e esse problema não vai acontecer mais.
Trabalhe o carregamento de elementos críticos
Medidas práticas podem otimizar o carregamento de elementos importantes (considerados críticos) das páginas e assim melhorar o Largest Contentful Paint – LCP.
Numa página, os elementos críticos são imagens, textos, vídeos e outros tipos de elementos que podem influenciar a experiência de uso. Sugerimos que as imagens (fotos ou vídeos) sejam comprimidas ou convertidas em formatos mais amigáveis à navegação, para que fiquem mais leves.
Compactar textos, implementar um serviço adaptável com base na conexão de rede e ativar o cache com um service worker também são alternativas interessantes.
De qualquer modo, esse é um trabalho feito sob medida. Portanto, a orientação de profissionais de desenvolvimento e SEO é fundamental.
Otimize a resposta do servidor
Lembra que falamos anteriormente que a baixa latência melhora a “conversa” entre o servidor e o navegador?
Quanto maior o tempo de processamento dos elementos no layout, pior a aderência ao padrão de qualidade analisado dentro das Core Web Vitals.
Para trazer mais agilidade à resposta é preciso adotar algumas boas práticas, como indexar as páginas HTML em cache que aparecem antes, configurar a página HTML para armazenar uma parte ou todo o conteúdo em cache, apontar as visitas para o Content Delivery Network – CDN mais próximo e verificar se o servidor contratado é o mais adequado para seu tipo de serviço.
Divida as tarefas mais densas
Tecnicamente falando, o navegador não é capaz de responder às interações do visitante durante a execução do código JavaScript. Por essa razão, a métrica de First Input Delay – FID pode gerar um resultado aquém do desejado.
Solucione esse inconveniente dividindo as tarefas executadas pelo JavaScript. Tarefas longas podem ser transformadas em tarefas assíncronas menores, pois isso reduz o atraso de entrada da página. Com isso é possível ganhar 50 milissegundos ou até mais.
Melhore a leitura do JavaScript e CSS
Os navegadores da internet precisam “ler” o código HTML do site para trazer a página na tela. Eles leem todos os elementos descritos no código antes de exibir o site.
Ou seja: quanto mais scripts (como JavaScript) e folhas de estilo (o CSS) ele precisar dar conta, mais demorado será para entender tudo e mostrar a página. Isso prejudica a métrica de Largest Contentful Paint – LCP.
Para evitar esse problema, o código precisa ser mais limpo e elegante, sem caracteres e linhas desnecessárias, com os arquivos e imagens de tamanho otimizado.
É necessário também melhorar a hierarquia de carregamento, para que os scripts e folhas de estilo com criticidade menor sejam trazidos por último.
Vale também adotar um Web Worker. Uma das grandes sacadas dessa ferramenta é que ela executa o JavaScript em segundo plano. Isso diminui, ainda mais, um possível atraso nas respostas às interações de quem visita a página.
Todas as tarefas que não têm a ver com a interface são movidas para uma linha de execução independente (Thread), embora ela continue relacionada com o processo principal.
Enquanto isso, o navegador executa as tarefas comandadas pela interação da pessoa, evitando problemas com as métricas de First Input Delay – FID ou Interaction to Next Paint – INP.
Preste atenção aos elementos dinâmicos
A falta de estabelecer atributos no tamanho das imagens (estáticas ou vídeos) é uma das maiores razões pelos problemas de desempenho no Cumulative Layout Shift – CLS.
Isso ocorre porque, sem critérios definidos, as imagens podem se ajustar sozinhas no espaço disponível, causando uma grande movimentação no layout e problemas na experiência de uso.
Quando são definidas a width (largura) e a height (altura), os navegadores preveem o espaço para aquele elemento e carregam o conteúdo mais rapidamente.
Para melhorar a distribuição de anúncios e conteúdos dinâmicos no layout é necessário estabelecer um espaço fixo para esse tipo de conteúdo. Por isso, defina as dimensões com base no maior espaço possível dentro da delimitação programada.
Se esse cuidado não for tomado, esse tipo de conteúdo faz seu próprio dimensionamento para se ajustar no local onde vai aparecer, como no caso das imagens.
Como medir as Core Web Vitals?
As métricas citadas até aqui são importantes no contexto das Core Web Vitals, mas atualmente, recomenda-se focar em três delas: LCP, CLS e INP. As demais métricas citadas são mensuradas pelo Google, mas já não fazem parte das Core Web Vitals. Se você pretende se aprofundar mais nessas otimizações propostas, o Google tem conteúdos completos, com dicas para cada uma das métricas: LCP, CLS e INP.
Com simples ajustes já é possível notar um aumento na pontuação das páginas e incremento no desempenho do site. Para garantir o monitoramento adequado, o Google disponibiliza algumas outras ferramentas para medir o desempenho adequado diante dos algoritmos.
Vamos a elas:
PageSpeed Insights – PSI
Na PageSpeed Insights – PSI, os dados apresentados estão ligados à análise de desempenho em dispositivos móveis e computadores pelo período determinado de 28 dias.
Dentro das análises, pode-se verificar o tempo para o carregamento do site por meio de um teste de velocidade.
O PSI classifica a qualidade das experiências do usuário em três grupos: Boa, Precisa Melhorar ou Ruim.
Para testar a URL da sua página, acesse o PageSpeed Insights, digite a URL do site e pressione Avançar.
Lighthouse
Esse é um instrumento que veio para apoiar o trabalho de desenvolvedores web. Concebido em código aberto, o Lighthouse permite acompanhar de perto o desempenho do site ou e-commerce.
No centro da análise feita pela ferramenta, estão cinco requisitos pontuados de 0 a 100: Desempenho (Performance), Acessibilidade (Accessibility), Melhores Práticas (Best Practices), SEO e Aplicação Web Progressiva (Progressive Web App).
A partir dos índices apontados na avaliação do Lighthouse, quem programa pode ajustar o código para alcançar até melhores pontuações e tornar o site ou e-commerce mais “visível” para os buscadores.
A ferramenta pode ser utilizada de duas maneiras: instalando a extensão no Google Chrome ou pelo atalho “Inspecionar” no mesmo navegador.
Google Search Console
Diferentemente do PageSpeed Insights e Lighthouse, em que as análises são feitas pelas URLs indicadas, o Search Console avalia todas as páginas de uma só vez.
Os relatórios emitidos pela ferramenta permitem visualizar como andam o tráfego e o desempenho das pesquisas do site, para ajustar possíveis problemas.
Além disso, o Search Console traz o número de impressões do site, a quantidade de cliques e como o site ou e-commerce está posicionado atualmente no ranking de pesquisa do Google.
Também é possível cadastrar o recebimento de alertas por e-mail. Assim, sempre que algum problema for diagnosticado, você receberá um aviso.
Web Vitals
Essa é uma extensão para o Google Chrome que traz informações sobre como uma página específica está sendo acessada. O objetivo da extensão Web Vitals é levar os feedbacks de desempenho a quem desenvolve, para que as alterações sejam feitas no código de programação. Essa métrica pode e deve ser acompanhada em tempo real.
Biblioteca JavaScript
Essa é uma ferramenta para quem trabalha com desenvolvimento de códigos de programação. A biblioteca JavaScript das Core Web Vitals é open source e pode ser utilizada com qualquer provedor de análise que dê suporte a métricas personalizadas.
Painel CrUX
A abreviação CrUX vem de Chrome User Experience Report, que forma o conjunto de dados oficial do programa Web Vitals.
As informações contidas nele são disponibilizadas publicamente, coletadas a partir de uma experiência legítima de navegação das pessoas em destinos conhecidos na Web.
O CrUX é a base para uma grande quantidade de ferramentas que informam as Core Web Vitals de uma página, mas com limitações. Pelas métricas é possível identificar quando um site tem um problema, mas nem sempre os dados são precisos o suficiente para se identificar qual é exatamente o problema.
O painel do CrUX é do Looker Studio (antigo Google Data Studio) e permite consultar e renderizar dados do CrUX de modo interativo, além de permitir exportar relatórios em PDF. Ele mostra todas as métricas do CrUX em tendências mensais e dados disponíveis desde 2017.
API Chrome UX Report
A API CrUX fornece acesso aos dados do CrUX por página ou origem e pode ser filtrada por diversificados critérios, como formato e tipo de conexão.
A API disponibiliza as Métricas da Web por origem e os dados são atualizados diariamente. Os valores fornecidos para a formação das métricas são calculados com base nos 28 dias anteriores, de maneira contínua.
Segundo o Google, a API CrUX traz os resultados em uma velocidade maior do que a API PageSpeed Insights, mas sem incluir os dados do Lighthouse.
WebPageTest
A WebPageTest é outra ferramenta para analisar como é a experiência de uso da página. Ela utiliza dados de laboratório para informar as métricas do Core Web Vitals. Além disso, permite analisar páginas individualmente e traz orientações para melhorar o desempenho delas.
As Core Web Vitals trazem métricas de requisitos essenciais para garantir uma boa experiência de uso para as pessoas, ao mesmo tempo em que ajuda a página a ser considerada relevante pelos algoritmos. Elas são essenciais para facilitar o engajamento das pessoas e reduzir os índices de rejeição ao site.
Após implementar as recomendações – o que pode dar um pouco de trabalho no início – o acompanhamento e as atualizações vão se tornando mais fáceis e mais fluidas, passando a fazer parte de uma rotina de boas práticas.
Convidamos você a voltar nesse artigo sempre que houver alguma dúvida, afinal muita coisa precisa ser implementada e testada para garantir que seu site ofereça a melhor experiência aos usuários e tenha um excelente ranqueamento no SEO.
