Com previsão de lançamento para maio de 2021, a atualização “Page Experience” mudará o algoritmo de ranqueamento do Google com base nas pontuações do Core Web Vitals e possivelmente indicará a velocidade de um site já nas páginas de resultados. Contudo, pouquíssimos e-commerces estão preparados para essa nova realidade.
Em uma pesquisa realizada pela Moovweb, dos 7000 e-commerces analisados nos EUA, 87% falharam no Core Web Vitals. E isso pode se tornar um problemão para os comércios eletrônicos que geram receita a partir do tráfego orgânico.
Core Web Vitals: quais as principais métricas e como otimizá-las?
Core Web Vitals são um conjunto de métricas que medem a velocidade com que as páginas carregam, tornam-se interativas e estabilizam visualmente para usuários reais que interagem com elas.
Além dessas, outras métricas já estão em vigor e compõem o que o Google chama de “experiência da página em resultados de pesquisa”. São sinais que basicamente avaliam como os usuários percebem a interação com uma página da web. Leia mais aqui.
LCP (Largest Contentful Paint)
É o intervalo de tempo entre o início do carregamento de uma página até quando a maior imagem ou bloco de texto é totalmente renderizado. Sites com LCPs de 2,5 segundos ou menos para pelo menos 75% dos usuários passarão na métrica do Core Web Vitals.
Normalmente, o LCP é afetado por um dos seguintes problemas:
- Tempo de resposta lento do servidor
- JavaScript e CSS bloqueando a renderização
- Carregamento lento de recursos
- Problemas de renderização client-side
Para otimizar seu LCP, considere o seguinte:
- Otimize os tempos de resposta do servidor roteando o tráfego para o CDN PoP mais próximo disponível, armazenando ativos em cache, usando um service worker e estabelecendo conexões de terceiros com “rel=”preconnect”
- Reduza o tempo de bloqueio por JavaScript minimizando o código (por exemplo, removendo espaços em branco), compactando dados com ferramentas como Broti ou Gzip, dividindo pacotes e enviando apenas o que é necessário no início, e servindo código com sintaxe mais recente com ferramentas como Babel.
Reduza o tempo de bloqueio por CSS removendo qualquer CSS não utilizado ou caracteres desnecessários, como espaçamento, recuo ou comentários. Organize o CSS crítico inline incluindo-o diretamente no <head> da página.
- Para reduzir os tempos de carregamento de recursos, otimize e comprima arquivos de imagem e texto, pré-carregue recursos importantes, entregue diferentes ativos com base na conexão de rede e ativos de cache utilizando um service worker.
- Otimize a renderização client-side reduzindo o tempo de bloqueio do JavaScript (consulte o nº 2 para otimizar isso), usando a renderização server-side (SSR) e pré-renderização.
FID (First Input Delay)
É a quantidade de tempo que leva para uma página ficar pronta para interatividade do usuário. Ou seja, durante o carregamento, quanto tempo leva para a página responder a cliques, rolagens ou comandos de teclado. Sites com FIDs de 100 milissegundos ou menos para pelo menos 75% dos usuários serão considerados experiências boas.
Os motivos comuns para FIDs lentos incluem:
- Tarefas longas que bloqueiam o thread principal por 50 milissegundos ou mais.
- Execução de scripts (internos) que atrasam a interação.
- Tempo de execução pesada do JavaScript.
Como otimizar o FID:
- Divida o código de longa execução em tarefas assíncronas menores e aplique o code-splitting.
- Mova o carregamento e a execução de scripts pesados para “componentes não essenciais” e coloque-os fora do critical path. Minimize o carregamento de dados em cascata e a quantidade de dados que precisa ser pós-processada no lado do cliente (client-side).
- Use um web worker, como Comlink, Workway ou Workerize, que possibilita a execução de JavaScript em um thread de segundo plano. Divida o pacote JavaScript em vários blocos (também conhecido como lazy loading) e carregue todos os scripts de terceiros com defer ou async.
(Cumulative Layout Shift)
É a estabilidade visual do layout enquanto a página é montada. Isso evita que o conteúdo carregue de forma desordenada, gerando deslocamento repentino nos textos e imagens. Sites com CLS inferior a 0,1 em pelo menos 75% das vezes oferecem uma boa experiência.
Se você obter um CLS ruim, provavelmente é devido a um dos seguintes fatores:
- Uma imagem ou vídeo se redimensionando durante o carregamento.
- Redimensionamento de anúncios.
- Fonte que carrega tarde e é exibida maior ou menor do que o pretendido.
Para melhorar essa métrica, considere o seguinte:
- Inclua dimensões exatas em suas imagens e elementos de vídeo.
- Evite anúncios pop-up ou banners. Em vez disso, reserve estaticamente um grande espaço para o local do anúncio.
- Evite flashes de texto não estilizado ou invisível (FOIT/FOUT) com ferramentas como font display e API de carregamento de fonte.
Como analisar as Core Web Vitals do seu site
Para gerar relatórios super detalhados de uma página específica, recorra ao PageSpeed Insights, GTmetrix ou Measure. Todos eles possuem as métricas do Core Web Vitals e utilizam as mesmas documentações e sugestões de como corrigir os erros. Portanto, faça uso da ferramenta que for mais intuitiva para você.
Atenção: ao utilizar ferramentas deste tipo, faça teste em diversas páginas diferentes. No caso de e-commerces, teste a home, páginas de categoria e de produtos. Com certeza, cada tipo de página precisará de cuidados diferenciados.
Atualmente, o padrão do PageSpeed Insights se baseia nas estatísticas para smartphone, já que há algum tempo o Google considera somente a performance mobile de um site. Em outras palavras, procure otimizar seu e-commerce para ser o mais rápido e agradável em navegações móveis.
O Google também adicionou as métricas Core Web Vitals aos relatórios do Search Console quando os dados de experiência do usuário do Chrome estão disponíveis. É uma forma de perceber os erros e pontos de atenção de várias páginas ao mesmo tempo.
Existem diversas outras maneiras de analisar o seu e-commerce a partir dessas métricas, por isso, se você quiser considerar todas elas, confira a documentação oficial das Core Web Vitals.
Conclusão
O Google está levando a velocidade do site cada vez mais a sério. E não é sem motivo: a velocidade do site impacta toda a estratégia digital, desde a visibilidade (SEO e SEM), passando pelo tráfego, experiência do usuário e, por fim, as conversões e receitas.
O gigante das buscas está batendo nessa tecla há praticamente uma década para deixar claro que a velocidade do site é importante, e vem lançando várias atualizações para solidificar isso.
As métricas fornecidas pelas Core Web Vitals são apenas a etapa mais visível deste esforço. Por isso, é importante acompanhar todas as atualizações do Google, pois, com certeza, mais métricas entrarão nos sinais de classificação da ferramenta.