Performance Lab: Como Tags Afetam uma Loja Virtual Perfeitamente Otimizada

Descubra qual é a melhor pontuação de performance que uma loja complexa realmente pode obter
20/03/2024·Leandro Borges e Vinicius Trindade

Sobre

O desempenho do site está cheio de nuances e é um campo de pesquisa por si só. Todos estão procurando ser aprovados pelos Core Web Vitals do Google e é exatamente isso que buscamos na deco.cx. De qualquer forma, o elefante na sala continua sendo "Qual é a melhor pontuação que uma loja complexa pode realmente obter?"

Hoje, colocamos nossas velas para responder: como exatamente as tags de terceiros afetam uma loja perfeitamente otimizada?

Metodologia

Este estudo foi conduzido espelhando uma página inicial típica de comércio eletrônico que carrega:

  • Um cabeçalho com mais de 30 links com navegação de menu de 3 níveis
  • 1 carrossel de banner completo com 2 imagens de alta definição (1200x1200)
  • 1 Contador de Campanha
  • 3 Prateleiras de Produtos exibindo 12 produtos cada
  • 1 Banner Comercializável
  • 1 Grade de Categoria
  • 1 Seção de postagens de blog
  • 1 rodapé com 4 colunas e mais de 20 links

Métricas Chave

Adicionar tags à sua loja terá um impacto direto em duas métricas de desempenho:

  • Tempo Total de Bloqueio: Uma das métricas do Core Web Vitals, mede o tempo total após o Primeiro Conteúdo Exibido (FCP) em que a thread principal foi bloqueada tempo suficiente para evitar a responsividade de entrada.
  • Nota de Desempenho: Usamos a API https://pagespeed.web.dev/ para executar testes porque garante a isonomia das condições gerais (CPU, conexão, etc). Além disso, como é uma ferramenta universal, qualquer um pode verificar este estudo por conta própria.

Calculamos as notas finais para cada cenário executando a auditoria de desempenho 100 vezes e usando a mediana. Essa estratégia nos ajudará a:

  • Evitar o cache do Google Page Speed (os servidores são todos baseados nos EUA)
  • Evitar outliers que poderiam distorcer os resultados

Cenário 1: Loja Perfeitamente Otimizada (sem tags)

Esta é uma loja construída em cima da deco.cx sem nenhuma tag de terceiros, apenas com nossas Ferramentas de Análise integradas (peso 1kb).

Gráfico 1

Gráfico 1: Frequência por pontuação de desempenho com Loja Perfeitamente Otimizada

Nota máxima: 96

Nota mínima: 73

Média: 91

Mediana: 93

Verifique esta loja: https://tag-affect.deco.site

Cenário 2: Loja Perfeitamente Otimizada + GTM/GA

Agora, adicionamos a Tag do Gerenciador de Tags do Google e seu parceiro mais comum, a tag do Google Analytics.

Gráfico 2

Gráfico 2: Frequência por pontuação de desempenho com GTM/GA

Nota máxima: 96

Nota mínima: 68

Média: 86

Mediana: 84

Verifique esta loja: https://tag-affect.deco.site/gtmga

Cenário 3: Loja Perfeitamente Otimizada + GTM Completo

Agora, adicionamos todas as tags que uma operação complexa como uma de nossos clientes mais sofisticados possui.

Gráfico 3

Gráfico 3: Frequência por pontuação de desempenho com GTM sofisticado

Nota máxima: 75

Nota mínima: 60

Média: 69

Mediana: 68

Pensamentos Finais e Conclusão

Gráfico 4

Gráfico 4: Comparação de desempenho

Gráfico 5

Gráfico 5: Comparação do Tempo Total de Bloqueio

Média do TBT da Loja Perfeitamente Otimizada: 184

Média do TBT da Loja Pesada com GTM: 2305,5

Usando deco.cx, você pode alcançar mais de 90 na nota de desempenho do Google enquanto cria uma experiência digital com conteúdo pesado (totalmente dinâmica usando mídia de alta qualidade). À medida que você adiciona mais e mais tags de terceiros, poderá chegar a cerca de 65, aumentando seu TBT em 12 vezes.

Isso aponta algumas percepções relevantes:

  • A métrica Core Web Vital mais prejudicada é o TBT, pois cada tag geralmente envolve execução adicional de JavaScript, o que pode atrasar a renderização de uma página da web e causar bloqueio de outras tarefas críticas, como interação do usuário ou carregamento de recursos.
  • Há um equilíbrio entre adicionar tags de terceiros e o desempenho do seu site

A regra usada para remover outliers no estudo é baseada em quartis. Confira mais em Khan Academy