Google Tag Manager vai deixar o meu site lento?

Está aí um post que demorei para fazer, mas esses dias estava em uma auditoria de container do Google Tag Manager e, sinceramente, vocês tem me assustado muito. E não pega ar não!

Um cliente pediu para nosso time homologar um workspace que estava sendo inserido por um fornecedor de performance. O container em si já precisava de uma limpeza, com a atualização em questão o container chegaria a 100KB de tamanho. Nessa versão, foram adicionadas ao container mais de 4k de linhas de código, isso sem falar do teor das implementações: criação de novas sessões, controle das origens de acesso ao site e etc.

Questionamos a necessidade da implementação e o fornecedor do cliente relatou que o código era "imprescindível" para monitoramento de possíveis bugs que poderiam ocorrer.

Vou ser duro no que vou falar agora, pode parecer bobagem, mas sendo bem sincero, ambiente de produção não é lugar para debug. Agora, o que siginfica ambiente de produção e porque o ambiente de produção não é lugar para debug?

Entendendo o ambiente de produção

Simplificando, um ambiente de produção é onde a versão mais recentes do seu site/software, são enviadas ao vivo para os usuários pretendidos. É a fase final do seu ambiente, ali quem acessa é somente os seus clientes, este inclusive é o ambiente onde o usuário final pode ver, experimentar e interagir com um novo produto ou funcionalidade que você tenha lançado.

A idéia do ambiente de produção, no que diz respeito ao código, é ter o ambiente mais limpo e mais performático possível para não impactar a experiência do usuário, e principalmente a conversão. Por isso inclusive, existem uma série de boas práticas para minificar arquivos, diminuir o tamanho de imagens, etc. Tudo isso com o objetivo de não impactar a experiência do usuário pelo tempo de carregametno do site em si.

O quanto eu devo pensar em peformance de carregamento

O Google em 2017 (Google/SOASTA Research, 2017) fez uma pesquisa para mostrar o quanto pensar em performance é importante, vamos dar uma olhada nesses números:

• A probabilidade de rejeição aumenta em 32% à medida que o tempo de carregamento da página passa de 1 segundo para 3 segundos.
• A probabilidade de rejeição aumenta em 90% à medida que o tempo de carregamento da página passa de 1 segundo para 5 segundos.
• A probabilidade de rejeição aumenta em 106% à medida que o tempo de carregamento da página passa de 1 segundo para 6 segundos.
• A probabilidade de rejeição aumenta em 123% à medida que o tempo de carregamento da página passa de 1 segundo para 10 segundos.

Fonte: thinkwithgoogle

Acredito que você ja tenha entendido que quanto mais rápido o site maior a probabilidade do usuário não rejeitar o seu site, logo temos que ter o cuidado em todas as esferas inclusive quando estamos falando de implementação de tags de terceiros, vamos parar de enrolação e vamos para o conteúdo kkkk

O que é o Google Tag Manager?

Não custa nada reexplicar né? Vai que algum desavizado caiu aqui nesse post e ainda não sabe o que é o Google Tag Manager? O Google Tag Manager é uma ferramenta SASS para implementação de tags de terceiros, a premissa básica de um container do Google Tag Manager é ser um centralizador de implementação dessas tags. Funciona assim, ao invés de você implementar dezenas de tags de terceiros diretamente no seu código fonte, você instala apenas o container do Google Tag Manager e através dele realiza a implementação das suas tags de terceiros, sacaram?

Dentro de um container você pode fazer inumeras coisas, instalar sua tag do Google Analytics, instalar sua tag do Google Ads, instalar seu pixel do facebook enfim, instalar todas as tags de terceiros que você precisar, entretanto, temos que pensar na qualidade e quantidade de código que estamos inserindo dentro dos nossos containers.

Google Tag Manager tem limite ?

A resposta é sim pessoal, um container do Google Tag Manager tem o limite de 200KB isso já contando inclusive com basico que ele precisa para poder rodar, já parou para pensar quanto de tamanho tem um container totalmente vazio?

Criamos um container totalmente vazio e instalamos em um site para você visualizar:

Como você pode ver um container por padrão, sem absolutamente nada, sem sequer estar publicado tem 37.8KB, ou seja 18,9% do tamanho que seu container tem é basicamente para o funcionamento do Google Tag Manager. E não é só sobre os limites do Google Tag Manager são os impactos que ele pode gerar durante o processo de carregamento, não sei se você sabe mais durante o processo de carregamento existem métricas que te ajudam a medir o impacto de tudo que é carregado dentro do seu site.

A utilização de scripts externos dentro de um container do Google Tag Manager pode por exemplo gerar alertas sobre utilização de cookies e acabar piorando sua pontuação na métrica LCP, um outro exemplo são scripts de teste A/B que alteram os elementos da página após o download do script causando um grande impacto negativo na métricas CLS

E liberdade extrema que o Google Tag Manager nos proporciona é em grande parte o motivo do porque seu desenvolvedor não quer que você o instale, nenhum dos scripts que estarão ali é controlado pelo seu time de desenvolvimento. Dificultando inclusive ao time de tecnologia controle dessas métricas de performance.

Dicas para um container mais rápido

Sem muita enrolação separei algumas dicas para te ajudar a manter saudavel o seu container do Google Tag Manager:

• Exclua as tags pausadas do seu container;
• Exclua as tags sem acionador do seu container;
• Exclua os acionadores sem tags do seu container;
• Exclua as variáveis sem referência em tags;
• Procure e exclua por acionadores duplicados;
• Procure e exclua variáveis duplicadas;
• Carregue menos scripts;
• Verifique a real necessidade de scripts que disparam no carregamento da página;
• Pense em utilizar o GTM server side;
• Não execute alterações no DOM;

Como eu descubro o tamanho do meu container

Sendo bem sincero, você tem 2 opções para entender o impacto do seu container dentro do carregamento do seu site.

Primeira opção: você pode utilizar o Chrome Developer Tools na area de rede e procurar pela requisição do cotainer e visualizar o tamanho do container.

Segunda opção: você pode utilizar uma extensão do Google Chrome chamada Get Google Tag Manager Size que vai medir o processo de carregamento do Google Tag Manager de qualquer site que você acesse.

Como funciona o Get Google Tag Manager Size?

A Extensão do Chorme Get Google Tag Manager Size, demonstra em qualquer site que você esteja, qual é o tamanho em peso do GTM do site e diz quantos % do limite total de 200kb o site está.

A extensão é dividida em 3 cores:

Verde - Significa que o GTM desse site está abaixo dos 50% e você pode respirar de forma aliviada, pois tá seguindo os mandamentos perfeitamente, mesmo assim, fique ligado se não está próximo de chegar em 50%;

Amarelo - Sinal de alerta ligado! Quando a cor amarela é ativada, significa que o seu GTM está com 50% da capacidade ou mais e já te deixa um alerta que existem otimizações a serem realizadas para diminuir o tamanho do seu Google Tag Manager;

Vermelho - FUUUUUUU! Com o alerta vermelho ligado, o tamanho do seu tag manager está no limite total e isso será um GRANDE problema para seu site ou App. Primeiramente por conta do tamanho e também dos possíveis problemas já listados nesse post, mas também por que você não poderá mais incluir NADA no seu GTM!

Qual a parte boa de tudo isso, é que a extensão é gratuita e você poderá de forma simples, clara e prática controlar o tamanho do seu GTM e não viver no desespero, além de ter argumento quando alguém vier te perguntar....

"O GTM VAI DEIXAR O SITE MAIS LENTO?

Dê o play no nosso podcast de dicas