14 Dicas básicas de otimização de Core Web Vitals para E-commerces

Felipe Bazon

Abr 08, 20216 min de leitura
Estudo de CWV para ecommerces

ÍNDICE

Desde que o Google é Google o foco sempre foi o usuário e a pré-anunciada atualização Page Experience composta pelos Core Web Vitals é a forma como o buscador passará a avaliar a UX (user experience) de cada uma das páginas de um site. Por isso analisamos os 100 maiores e-commerces do país para checar como estão sob esses sinais e ajudar na otimização dessas métricas relacionadas à experiência do usuário

Tudo bem que para nós SEOs isso nem sempre foi uma máxima, o dono da bola, no caso o Google, vem nos forçando a focar cada vez mais no usuário e esquecer de querer enganar o algoritmo. Não é de hoje que as atualizações do algoritmo orgânico de ranqueamento do buscador direcionam o foco da otimização de sites para a experiência do usuário.

Tudo começou com o Google Panda, mais tarde o Mobilegeddon, Pages Speed, HTTPS, RankBrain, Hummingbird, Mobile First Index, Medic Update, BERT, SMITH …

O que todas essas atualizações do principal mecanismo de busca do mundo têm em comum?

Se você pensou na experiência do usuário, você acertou em cheio.

Entra a Google Page Experience

Anunciada para 1º de maio de 2021, a atualização Google Page Experience engloba 7 elementos relacionados a UX de uma página.

Sinais de experiência do Google

Observe que mais da metade dos fatores são velhos conhecidos de nós SEOs e donos de sites em geral: Segurança (HTTPS e Safe Browsing), Usabilidade Mobile (Mobile Friendly) e Pop-ups Intrusivos (No Intrusive Interstitials).

Pro tip 1: Teste a segurança (Safe Browsing) do seu site com a ferramenta do Google.

Pro tip 2: Intrusive Interstitials é uma penalização do Google, que basicamente penaliza sites que usam pop-ups no mobile que impedem o usuário de navegar sem antes interagir com eles. Mais detalhes aqui.

Os outros 3 fatores que complementam os sinais que serão avaliados para medir a UX da página são as Core Web Vitals.

Estudo sobre as Core Web Vitals para os e-commerces do Brasil

Pensando nisso resolvemos fazer um levantamento da performance do
as principais lojas virtuais do país. O objetivo inicial do estudo era entender se os grandes players do comércio eletrônico brasileiro estão preparados para a atualização do Google anunciada para maio deste ano.

Como podemos observar, quase nenhum dos top 100 e-commerces do Brasil está em conformidade com as métricas LCP, FID, CLS. Além disso, o estudo revelou uma constante: a não conformidades de programação que deram origem às dicas de otimização que você encontra no final deste artigo.

Análise das páginas das Homepage dos e-commerces

O alto índice de reprovação da LCP e CLS nas homepages é reflexo do uso excessivo de sliders, não compressão das imagens de destaque, uso incorreto de lazy load em imagens e não utilização de rel=preload e display=swap em fontes.

CWV ecommerce homepage

Análise das páginas de categorias dos e-commerces

Os bons índices de FID e CLS revelaram que as principais lojas virtuais do país estão em servidores potentes e utilizam elementos de estabilidade visual como o Lazy Load de imagens corretamente.

CWV ecommerce categorias

Análise das páginas de produtos dos e-commerces

O alto índice de reprovação da LCP pode ser facilmente resolvido com a compressão das imagens de destaque. O tempo até a interatividade (FID) é de suma importância para páginas de produto, uma vez que, tem influência direta na taxa de conversão.

CWV ecommerce produto

Mas afinal, o que são as CWVs?

As Core Web Vitals são 3 métricas que o Google determinou como importantes para medir a experiência de uma página.

Largest Contentful Paint (LCP)

A LCP mede a performance de carregamento da página, que é diferente do tempo de carregamento. A Largest Contentful Paint mede o tempo de renderização do maior elemento (bloco de texto, imagem ou vídeo) dentro da viewport, ou seja, da página.

First Input Delay (FID)

A FID mede a interatividade calculando o tempo que leva para que o usuário possa interagir com a página. First Input Delay mede o tempo entre a interação do usuário com algum elemento da página e a resposta do navegador àquela ação. Em outras palavras, o tempo de processamento do evento.

Cumulative Layout Shift (CLS)

A CLS mede a estabilidade visual da página somando a quantidade de movimentos inesperados que ocorrem durante a renderização de uma página. Layout Shits são movimentos inesperados que ocorrem na página devido ao carregamento assíncrono de elementos de recursos ou elementos que são adicionados dinamicamente para sobrepor outros já existentes. 

Exemplos mais comuns são: imagens ou vídeos que são redimensionados ou carregados com atraso (lazy load), redimensionamento de fontes, anúncios ou widgets de terceiros que redimensionam dinamicamente.

É importante ressaltar que as CWVs não são fixas e podem mudar conforme o Google encontre novas maneiras ainda mais efetivas para a experiência de uma página.

Os mais técnicos lembrarão que em um passado não muito distantes FCP (first contentful paint), Speed Index, TTFB (time to first byte) eram as métricas recomendadas pelo buscador. 

Atualmente essas métricas são consideradas Web Vitals e ainda devem ser levadas em consideração.

A evolução das Web Vitals e Core Web Vitals estão sendo documentadas publicamente na página CHANGELOG.

Como medir as Core Web Vitals para o seu e-commerce?

Ferramentas para medir as Core Web Vitals não faltam, só do Google são 4. A Semrush lançou uma ferramenta, GTMetrix também oferece uma solução e por aí vai.

Entretanto, o mais importante é analisar os dados de forma correta. Para isso é importante entender o conceito de Lab Data, Field Data e RUM (real user metrics).

A maioria das ferramentas reporta dados de testes realizados em ambientes de teste, em outras palavras, em laboratórios (Lab Data). Os dados de campo (Field Data) por meio da coleta de dados em tempo real (real user metrics) são os que serão utilizados pelo algoritmo Page Experience (O nome do algoritmo não é oficial. É a apenas a forma que usei para referenciar ele)

Você também pode construir sua própria ferramenta utilizando a API do Google Lighthouse. Na Hedgehog criamos uma ferramenta que mede as CWVs em tempo real como também gera um relatório do que precisa ser otimizado.

Como otimizar seu e-commerce para Core Web Vitals?

Uma vez que as análises de cada página foram concluídas é hora de colocar a mão na massa e otimizar as Core Web Vitals. Como tudo no mundo do SEO, não existem regras básicas ou fórmulas mágicas para otimização as CWVs. 

Contudo algumas recomendações se aplicam a quase todas as plataformas, principalmente as mais populares como WordPress, Drupal, Magento e até mesmo sites utilizam frameworks em JavaScript como React, Angular entre outros.

Minha recomendação é utilizar a API do Lighthouse para extrair os elementos que precisam ser otimizados em cada página para cada métrica.

De todas as formas seguem algumas considerações básicas para cada métrica.

Como otimizar sua loja online para Largest Contentful Paint

  • Comprima a hero image (geralmente imagem de destaque da página)
  • Não carrega hero image com JavaScript
  • Pare de usar sliders
  • Otimize o JavaScript para eliminar Image Reflow

Como otimizar o First Input Delay

img-semblog
  • Transfira a execução do JavaScript para service workers
  • Revise a execução do código para não bloqueia a thread principal
  • Reduza o impacto de scripts terceiros
  • Otimize a entrega do JavaScript e CSS por página (Critical Rendering Path)
  • Melhore o Tempo de Resposta do Servidor ou a performance do servidor em geral

Como otimizar o e-commerce para Cumulative Layout Shift

img-semblog
  • Reserve os espaços para elementos dinâmicos inseridos via JavaScript
  • Para o carregamento de fontes personalizadas utilize rel="preload" e display="swap"
  • Evite Anúncios acima da primeira rolagem
  • Utilize atributos de dimensões exatas para imagens
  • Garanta que o Lazy Load de imagens não altere a posição dos elementos.

Pro tip 3: Em suma, otimizar as Core Web Vitals é trabalhar para reduzir o tempo de carregamento de uma página. Comprimir o HTML, CSS e JS ajuda a melhorar a nota. Assim como otimizar a entrega do JavaScript em cada página. Minificar o CSS e JS continua sendo importante e por ai vai. Confira esse artigo para mais detalhes.

Pro tip 4: Para mais detalhes confira o artigo sobre o Guia Fundamental de Core Vitals na Hedgehog.

Em resmumo, não há motivos para pânico, pois a Page Experience não penalizará sites. Se as páginas do seu site estiverem em conformidade com as métricas das Core Web Vitals é provável que elas melhorem de posicionamento.

Já vimos esse filme antes como o HTTPs, o Mobile First Index e o tempo de carregamento mobile.

O mais importante é começar a atuar o quanto antes para criar páginas com a melhor experiência para seus usuários, não só pensando nas Core Web Vitals e sim no todo.

Compartilhar
Author Photo
CSO (chief SEO officer) at Hedgehog Digital, a digital marketing agency based in Cornwall UK, with offices in Bedford UK, and São Paulo Brasil. Since 2015 Felipe Bazon is listed as one the top 3 SEOs in Brazil, having won the title in the same year. With over 10 years of experience in SEO and Content Marketing, Felipe managed over 100 SEO projects for multinational companies in Brasil, UK and Europe. CSO na agência de Marketing Digital Hedgehog Digital. Desde 2015 listado entre os top 3 SEOs do Brasil, tendo ganho o prêmio no mesmo ano. Há mais de 10 anos apaixonado por SEO, Content Marketing e Marketing Digital em geral. Já liderou mais de 100 projetos de SEO e Content Marketing em empresas no Brasil, Reino Unido e Europa.