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.
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.
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.
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.
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
- 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
- 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.