Home Artigos técnicos Como otimizar Core Web Vitals para sites de comércio eletrônico
Applications

Como otimizar Core Web Vitals para sites de comércio eletrônico

About The Author

Outline

A próxima atualização de experiência de página do Google introduz sinais derivados do Core Web Vitals (CWV) no algoritmo de classificação oficial. 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. Os sites que falham no teste Core Web Vitals vão ficar mais baixos do que atualmente chegam no início de 2021.

A CWV consiste em métricas de 3 velocidades que têm um impactos significativo na experiência percebida do usuário. Estes incluem o maior Contentful Paint (LCP) para medir os tempos de carregamento, o First Input Delay (FID) para medir a interatividade e a capacidade de resposta, e o Cumulative Layout Shift (CLS) para medir a estabilidade visual. Embora a velocidade do site esteja na vanguarda de muitas empresas de comércio eletrônico, está prestes a se tornar um dos fatores mais importantes no cenário online. Aqui estão as métricas nas quais você deve se concentrar e como melhorar a velocidade para cada um.

Quais são os Core Web Vitals

Fazer uma boa primeira impressão online é fundamental. Os compradores querem ver os produtos imediatamente, navegar rapidamente e fazer o checkout facilmente, sem interrupções. Se suas expetativa não forem atendidas, elas vão saltar e nunca voltar. O Core Web Vitals ajuda a resolver esse problema, medindo as páginas de experiência que fornecem aos compradores móveis enquanto navegam por um site em tempo real.

Embora a maioria das ferramentas do Google dependa de testes sintéticos em ambientes simulados (conhecidos como dados de laboratório), os Core Web Vitals são medidos usando dados de campo coletados da experiência do usuário do Google Chrome (crux), um banco de dados de usuário do Chrome do mundo real. Os dados de campo capturam os efeitos dramáticos de variáveis de usuário real, como dispositivo, condições de rede e/ou configurações. Dependendo das condições de um usuário, o desempenho de um site pode variar drasticamente e impactar suas pontuações vitais do Core Web.

Cada métrica da VOC tem limites diferentes para ser considerada boa, moderada ou ruim. No entanto, todos eles têm uma coisa em comum: O Google usa o percentil 75 ao classificar páginas nesses grupos – uma página que atinge o limite para ser considerada rápida por 75% dos carregamentos de página ou mais é uma boa experiência.

Você não pode otimizar o que você não sabe, então vamos conhecer cada uma das três métricas que compõem o Core Web Vitals.

Fonte: https://web.dev/vitals/

Maior Contentful Paint (LCP)

Os usuários normalmente sentem que a página foi carregada quando o maior elemento de conteúdo é totalmente visível na tela, ou seja, pela velocidade do maior Contentful Paint ou LCP. Os elementos de conteúdo podem incluir elementos de nível de bloco, imagens (incluindo imagens dentro de arquivos SVG) e vídeos. Para o comércio eletrônico, os LCPs geralmente medem a velocidade na qual a imagem do produto/imagem do herói carrega. Se isso for lento, os usuários assumem que toda a experiência será semelhante, o que os leva a sair para o site de um concorrente.

LCPs de 2,5 segundos ou menos são considerados rápidos, páginas com LCPs entre 2,6 e 4,0 segundos precisam de melhorias e LCPs com mais de 4,0 segundos são lentos.

TheTieBar.comcarrega LCP em 800 ms no Layer0 (Edgio)

No exemplo acima, o LCP da Barra de Ligação é marcado a 900 ms quando a imagem principal é totalmente pintada. O Tie Bar fornece consistentemente cargas de páginas inferiores a segundos para compradores móveis, ao mesmo tempo em que oferece personalização, pesquisas de inventário em tempo real e preços dinâmicos em suas milhares de páginas no Edgio.

Normalmente, o LCP é afetado por um dos seguintes:

  • Tempos de resposta lentos do servidor
  • Bloqueio de renderização JavaScript e CSS
  • Longos tempos de carregamento de recursos
  • Problemas de renderização do lado do cliente

Para otimizar o LCP, considere o seguinte:

  1. Otimize os tempos de resposta do servidor roteando o tráfego para o pop CDN mais próximo disponível, armazenando ativos em cache, usando um service worker e estabelecendo conexões de terceiros antecipadamente com “rel
  2. Reduza o tempo de bloqueio de JavaScript minificando código (por exemplo, removendo espaços em branco), compactando dados com ferramentas como Broti ou gzip ,dividindo pacotes e enviando apenas o necessário no início, e servindo código com sintaxe mais recente com ferramentas como Babel. Reduza o CSS removendo qualquer CSS não utilizado ou carateres desnecessários, como espaçamento, indentação ou comentários, e inlining CSS crítico, incluindo-o diretamente no cabeçalho da página.
  3. Para reduzir os tempos de carregamento de recursos, otimizar e compactar arquivos de imagem e texto, pré-carregar recursos essenciais e fornecer ativos diferentes com base na conexão de rede e ativos de cache usando um service worker.
  4. Otimize a renderização do lado do cliente reduzindo o tempo de bloqueio de JavaScript (consulte o nº 2 para otimizar para isso), usando a renderização do lado do servidor (SSR) e a pré-renderização.

Primeiro Atraso de Entrada (FID)

Embora a primeira impressão de um usuário seja impactada pela velocidade na qual a maior imagem é renderizada, é tão crucial que seu site seja responsivo quando seu usuário tentar interagir com ele. First Input Delay (Atraso de Entrada), ou FID, mede o tempo desde quando um usuário interage pela primeira vez com uma página (cliques, toques ou pressionam uma tecla) até o momento em que o navegador pode responder a essa interação.

Normalmente, um atraso de entrada ocorre porque o JavaScript é executado no thread principal e todo o JavaScript é renderizado por padrão. Isso significa que quando o navegador se deparar com um arquivo JavaScript, ele deve pausar o que está fazendo para baixar, analisar, compilar e executar esse JavaScript. Quanto mais tempo isso demorar, mais demora as experiências do usuário e menos Google verá a página como utilizável.

O Google considera um FID de 100 milissegundos ou menos tão rápido, entre 1,1 e 3,0 segundos como necessitando de melhoria e mais de 3,0 segundos como lento. Embora seja importante buscar o percentil 75 para todos os Core Web Vitals, o Google recomenda analisar os percentis 95 a 99 para FID em dispositivos móveis e desktop, pois isso representará as piores experiências do usuário e verificará as áreas que mais precisam ser melhoradas (como ele vai se concentrar no FID para mais de 95% dos carregamentos de página).

Também é importante notar que, ao contrário do LCP e CLS, o FID só pode ser medido no campo (e não será encontrado em dados de laboratório), pois requer interação real do usuário.

Razões comuns para FIDs lentos incluem:

  1. Tarefas longas que bloqueiam o thread principal por 50 milissegundos ou mais
  2. Execução de script em primeira parte atrasando a prontidão da interação
  3. Tempo de execução de JavaScript pesado

‍How para optime para FID:

  1. Divida o código de longa duração em tarefas menores e assíncronas e utilize a divisão de código.
  2. Mova o carregamento pesado de script (e a execução) para componentes não essenciais fora do caminho crítico e minimize a busca de dados em cascata e quantos dados precisam ser pós-processados no lado do cliente.
  3. Use um web worker, como Comlink , Workway ou Workerize ,o que torna possível executar JavaScript em um thread de fundo, dividir o pacote JavaScript em vários blocos (também conhecidos como lazy-loading) e carregar todos os scripts de terceiros com defer ou async.

Mudança de esquema cumulativa (CLS)

A estabilidade visual de uma página é outro fator que afeta a experiência do usuário e pode impedir que os compradores continuem no caminho para comprar. A terceira e última métrica no Core Web Vitals é a Mudança de Layout Cumulativa, ou CLS, que mede a frequência com que os usuários experimentam mudanças inesperadas de layout.

Você já experimentou essas instâncias: Você está prestes a tocar em um link ou imagem de produto, mas logo antes de tocar na tela, a página se move e bam ,você clica em outra coisa sem querer. No melhor cenário, essas situações são um leve aborrecimento, mas o pior caso, você envia compradores à procura de uma experiência mais suave e menos zelosa na web.

O Google calcula esses movimentos de página multiplicando a fração de impactos, ou a quantidade de conteúdo visível deslocado na janela de visualização, pela fração de distânciaou a distância que um elemento instável se moveu no quadro dividido pela maior dimensão da tela (altura ou largura). O total de todas as pontuações individuais (fração de impactos x fração dedistância ) para cada deslocamento inesperado de layout que ocorre enquanto um comprador navega resulta em CLS de uma página.

O Google considera um CLS inferior a 0,1 como bom, entre 0,1 e 0,25 como moderado e superior a 0,25 como ruim.

Se você encontrar um CLS ruim, é provável que seja devido a um dos seguintes:

  1. Uma imagem ou redimensionamento de vídeo em si
  2. Redimensionamento de anúncios
  3. Uma fonte que carrega tarde e é exibida maior ou menor do que o pretendido

Para melhorar essa métrica, considere o seguinte:

  1. Inclua as dimensões exatas de suas imagens e elementos de vídeo.
  2. Evite anúncios pop-up ou banners. Em vez disso, reserve estaticamente um grande espaço para o slot de anúncio.
  3. Evite flashes de texto sem estilo ou invisível (FOIT/FOUT) com ferramentas como exibição de fontes e API de carregamento de fontes.

Como Layer0 ajuda a otimizar a velocidade para cada métrica Core Web Vitals

Sites de comércio eletrônico grandes e complexos com milhões de páginas, milhares de SKUs, testes A/B e personalização, preços dinâmicos e pesquisas de inventário em tempo real podem atingir velocidades de sub-segundos com Layer0. Na verdade, Layer0 é a única plataforma no mercado a garantir LCPs medianos de sub-500 ms.

No Layer0, o conteúdo renderiza instantaneamente, ou pinta, em uma página e torna-se imediatamente gravado devido ao nosso CDN configurável, com reconhecimento de aplicativos , chamado CDN-as-JavaScript . Ele utiliza pré-busca preditiva avançada e computação de borda para transmitir conteúdo dinâmico (JSON/SSR/HTML) da borda para o navegador do usuário, antes mesmo de ser solicitado. Isso mantém os sites 5 segundos à frente dos toques dos compradores em todos os momentos.

Os sites na Layer0 têm uma taxa de sucesso de cache de mais de 95% para dados HTML e JSON na borda, enquanto sites em CDNs tradicionais têm uma média de 6%. Essa é uma enorme diferença na entrega do conteúdo que normalmente faz um site lento.

Linha inferior

As cargas rápidas de páginas diferenciam-se entre encantar os compradores e assustá-los para o site do seu concorrente. Considere a primeira impressão de um usuário de velocidade, interatividade e estabilidade visual medindo o maior Contentful Paint, Primeiro Atraso de Entrada e Mudança de Layout Cumulativa. Se as velocidades forem maiores que 2,5 s para LCP, 100 ms para FID ou .1 para CLS, você pode assumir que tanto os usuários quanto o Google percebem seu site como lento. O Google vai diminuir sua classificação, e os consumidores vão saltar e nunca voltar.

Em apenas alguns meses, uma má experiência de página prejudicará a reputação da sua marca e afetará seu ranking de SEO. Proteja seu SEO arduamente ganho usando as táticas de otimização oferecidas acima, ou vá instantaneamente com Layer0 (agora Edgio).

Layer0 é a sua solução completa para desenvolver, implantar, visualizar, experimentar, monitorar, e execute seu frontend. Shoe Carnival, REVOLVE, e 1-800-Flowers, são apenas alguns exemplos de sites de comércio eletrônico que oferecem velocidades de sub-segundos e estão colhendo os benefícios dele. Se você tiver alguma dúvida sobre a atualização da experiência da página ou como acelerar seu site, ficaremos felizes em colocá-lo em contato com um especialista em velocidade do site hoje.

A próxima atualização de experiência de página do Google introduz sinais derivados do Core Web Vitals (CWV) no algoritmo de classificação oficial. 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. Os sites que falham no teste Core Web Vitals vão ficar mais baixos do que atualmente chegam no início de 2021.