Logo E-Commerce Brasil
8 min

Oito dicas de Core Web Vitals para e-commerces

Foto Felipe Bazon
Por: Felipe Bazon

Felipe Bazon, sócio e diretor de SEO e Content Marketing. Desde 2015 listado entre os top 3 SEOs do Brasil pelo prêmio de profissionais do ano pelo Digitalks, tendo o ganho o prêmio vezes, em 2015 e. 2020. Já liderou mais de 100 projetos de Marketing Digital no Brasil, Reino Unido e Europa em empresa como Editora Abril, Siemens, Brinquedos Estrela entre outras. Além da vasta experiência operacional, é também orador regular em eventos como E-show, OME Expo, Des-Madrid, Digitalks e RD Summit.

Ver página do autor
Qualidade. É isso que o Google quer para os sites que fazem parte do seu índice e para a experiência que oferecem aos usuários. Mas você sabe o que significa qualidade para o buscador? As métricas do Core Web Vitals dão algumas pistas sobre isso. Core Web Vitals é uma iniciativa do Google que reúne importantes métricas que os sites devem monitorar para melhorar a experiência do usuário nas suas páginas. Elas dizem respeito à velocidade e a estabilidade das páginas, que são fatores determinantes para a classificação no ranking das buscas.

Veja as melhores dicas de Core Web Vitals para e-commerce e aplique em sua loja virtual ainda hoje!

Neste artigo, vamos entender melhor essas métricas e quais são as dicas mais importantes de Core Web Vitals para e-commerce. Siga conosco para saber como aplicar!

O que é Core Web Vitals?

Core Web Vitals é um conjunto de métricas vitais para a experiência do usuário na web que o Google considera na avaliação das páginas para a classificação dos resultados do buscador. Elas devem ser monitoradas e revisadas pelos sites, para que tenham uma visão apurada sobre a qualidade de navegação que estão oferecendo aos visitantes. As métricas de Core Web Vitals, chamadas em português de Principais métricas da Web, são as seguintes:
  • Velocidade de carregamento da página (Largest Contentful Paint ou LCP);
  • Velocidade de resposta às interações do usuário (First Input Delay ou FID);
  • Estabilidade visual durante as interações do usuário (Cumulative Layout Shift ou CLS).
Cada métrica representa uma faceta importante da experiência do usuário. Muitas vezes, consideramos apenas o tempo de carregamento, mas é importante entender também a velocidade com que o site responde às interações dos usuários e a estabilidade do site à medida que eles interagem com a página. Além disso, o Core Web Vitals faz parte de um conjunto maior de métricas, o Page Experience, que reúne também outros fatores determinantes para a experiência na página:
  1. Mobile-friendly: compatibilidade com dispositivos móveis;
  2. Safe browsing: navegação segura;
  3. HTTPS: protocolo de segurança;
  4. No Intrusive Intersticials: uso de intersticiais não-intrusivos.

Qual a importância das Principais métricas da Web no marketing digital?

As métricas do Core Web Vitals funcionam como norteadores para melhorar a experiência do usuário nas páginas do seu site. Em um e-commerce, elas podem ser determinantes para você conquistar uma venda ou, por outro lado, perder um cliente. Se as páginas não carregam rapidamente ou se o usuário clica em um elemento da página sem querer, isso pode causar frustração. Mas se você otimizar as métricas, pode ganhar um cliente satisfeito, que vai voltar mais vezes para comprar. Além disso, a otimização das Principais métricas da Web faz você ganhar pontos na classificação do Google. Elas são sinais que o buscador utiliza no algoritmo de busca para ordenar as páginas nos resultados das pesquisas. Por isso, também trazem vantagens para o SEO da sua loja virtual, a fim de ganhar mais visibilidade e cliques na busca orgânica.

Como aplicar o Core Web Vitals no e-commerce?

Vamos entender agora como aplicar as métricas na prática. Veja algumas dicas de como otimizar as métricas de Core Web Vitals para e-commerce:

1. Mensure as métricas do Core Web Vitals

O primeiro passo para aplicar as métricas de Core Web Vitals no e-commerce é mensurá-las. Você deve saber como está o desempenho da sua loja virtual em relação a esses indicadores. Para isso, você pode usar diferentes ferramentas gratuitas. Uma das mais usadas no marketing digital é o PageSpeed Insights, que traz um relatório de desempenho do site baseado nas métricas do Core Web Vitals, com recomendações de otimização. Outra dica é usar a extensão do Google Chrome, chamada de Web Vitals, que faz uma rápida avaliação das métricas da página que você está visitando.

2. Integre as equipes de marketing e tecnologia

Após medir o Core Web Vitals, você já vai saber algumas medidas que precisa tomar para melhorar seu desempenho nessas métricas. Depois, para colocar em prática, é importante integrar as equipes de marketing e tecnologia. Muitas vezes, a otimização do site foca totalmente na tecnologia, mas o site acaba se tornando menos atrativo para o visitante. Por outro lado, se a otimização foca totalmente no design e no marketing, pode acabar perdendo performance. Por isso, é preciso ter sinergia entre as equipes.

3. Melhore o tempo de resposta do servidor

O tempo de resposta do servidor afeta o carregamento dos elementos da página, quando o usuário acessa ou quando interage com ela. Portanto, se esse tempo é longo, tende a prejudicar os resultados de Largest Contentful Paint (LCP) e First Input Delay (FID). Para melhorar o tempo de resposta do servidor, você pode: Evitar servidores compartilhados; Migrar para sistemas de banco de dados mais rápidos; Atualizar o hardware do servidor para ter mais memória; Usar CDN, quando possível, para ficar mais próximo do usuário.

4. Elimine códigos desnecessários

Códigos desnecessários na programação da sua loja virtual tendem a afetar também o desempenho do carregamento da página (LCP). Afinal, o navegador precisa avaliar os códigos antes de renderizar os conteúdos, e isso vai levar mais tempo se ele precisar passar por elementos em excesso. Por isso, uma das dicas para otimizar o Core Web Vitals para e-commerce é minificar o JavaScript e o CSS, ou seja, eliminar caracteres desnecessários para reduzir os arquivos de scripts e folhas de estilo.

5. Otimize as imagens da página

Imagens, que são essenciais no e-commerce, são recursos críticos para a velocidade de carregamento (LCP) e de resposta às interações dos usuários (FID). Por isso, elas merecem uma atenção especial na otimização das páginas:
  • Evite exageros nos sliders e banners do site, que tendem a incluir imagens mais pesadas;
  • Utilize imagens em formato de última geração (WebP), que oferecem melhor qualidade de compressão do que JPG e PNG;
  • Avalie a necessidade de oferecer zoom em todas as imagens das páginas de produto, que tendem a ser mais pesadas (em vez disso, você pode usar fotos de detalhes);
  • Adie o carregamento das imagens (lazyload), para que carreguem à medida que o usuário navega pela página.

6. Otimize o carregamento das fontes

O carregamento de fontes também pode afetar o Core Web Vitals, especialmente a estabilidade visual durante as interações dos usuários (Cumulative Layout Shift ou CLS). Fontes da web podem demorar mais a carregar e, enquanto isso, o navegador pode usar uma fonte invisível ou genérica no seu lugar. Então, quando a fonte da página carrega, isso pode causar uma mudança repentina no layout. Isso pode fazer com que o visitante perca o que estava lendo ou clique em algum elemento sem querer. Assim, para evitar que isso aconteça, você pode usar uma API de carregamento de fontes, que garante que elas estejam pré-carregadas quando o usuário acessa a página.

7. Inclua os atributos de altura e largura de imagens

O carregamento das imagens também pode afetar a estabilidade visual das páginas (CLS). Como uma imagem pode demorar mais a carregar do que o restante do conteúdo, ela pode causar mudanças repentinas no layout quando finalmente carrega, pois o navegador não estava prevendo que ela ocuparia aquele espaço na página. Então, quando você define os atributos de largura (width) e altura (height) ao subir as imagens para o site, você já avisa o navegador que elas vão ocupar aquele espaço. Assim, o layout não muda quando elas carregam.

8. Reserve espaços fixos para elementos dinâmicos

Conteúdos dinâmicos, como anúncios e banners animados, também podem causar mudanças de layout à medida que se movimentam. E, como você já sabe, isso afeta a experiência do usuário. Portanto, você também pode definir um espaço estático na página para esses elementos via JavaScript, em vez de deixar que eles se redimensionem sozinhos. Assim, o navegador não vai ser surpreendido com a sua dinâmica. Perceba que algumas otimizações que sugerimos acima são mais técnicas e mexem com os códigos do site. Então, você precisará de uma equipe profissional especializada em SEO. Enfim, essas foram algumas dicas para otimizar as métricas de Core Web Vitals para e-commerce. Para melhorar seu desempenho e ganhar pontos com o Google, o segredo é pensar sempre na experiência do usuário - e, no caso do e-commerce, na satisfação do cliente. Leia também: Core Web Vitals e e-commerces: precisamos falar sobre essa relação!