Uma ótima experiência do usuário está diretamente ligada ao tempo de carregamento do site e vai influenciar a sua taxa de conversão, indexação em motores de busca e custo por cliques em ferramentas de tráfego pago.
Neste artigo vou te apresentar o Partytown que é uma solução de código aberto que ajuda a melhorar a velocidade de sites alterando como são carregados plugins que são praticamente obrigatórios para vender como Facebook Pixel e Google Tag Manager.
O usuário médio não gasta muito tempo esperando que uma página da web carregue. De acordo com o Google, se o tempo de carregamento de uma página aumentar de 1 segundo para 3 segundos, a probabilidade de o usuário sair do site aumenta em 32%. No entanto, nem sempre é fácil manter um alto desempenho em sites.
Sites lentos são, de certa forma, discriminatórios. A maioria da população mundial, assim como no Brasil, não tem acesso à Internet de alta velocidade e/ou a CPUs rápidas. Mesmo que o seu site seja projetado com usabilidade em mente, esses fatores podem impedir que os usuários aproveitem os recursos do site.
É por isso que a performance é crucial ao construir sites. O desempenho precisa ser incorporado desde o nível do código, e métricas centradas no usuário, como tempo de interação (TTI), tempo total de bloqueio (TBT) e Tempo para primeira entrada (FID), ajudam a avaliar a velocidade de um site.
No entanto, as páginas da web modernas são pesadas e estão sempre aumentando de tamanho. Um site médio tem mais de 2 megabytes de tamanho com mais de 200 requests. Sites grandes e pesados, com diversos scripts de terceiros embutidos, normalmente são responsáveis por uma experiência de usuário frustrante. Quando você precisa desses scripts de terceiros no seu site para executar o seu negócio, assim como na maioria dos sites, você enfrenta um desafio enorme:
Como melhorar as métricas de desempenho-chave e manter seus usuários satisfeitos sem comprometer recursos importantes?
O excesso de JavaScript é um dos principais culpados pela lentidão da maioria dos sites. Para um site ter uma experiência rica e interativa, pode requerer ativos adicionais que consomem recursos dos dispositivos dos usuários, como processador, memória e rede.
Além das imagens grandes e vídeos, os scripts de terceiros, como rastreadores de pixel, testes A/B, anúncios, widgets, etc., geralmente são os maiores elementos do quebra-cabeça da performance. Esses scripts de terceiros, que são códigos incorporados ao seu site e não estão diretamente sob o controle dos desenvolvedores, competem com o código do site pela thread principal do navegador, o que atrasa a renderização do conteúdo e torna os sites lentos.
É importante lembrar também que os dispositivos móveis dos usuários finais são muito menos sofisticados do que aqueles em que o seu site foi construído. Esse amontoado de JavaScript é a razão pela qual uma página web média leva mais de 14 segundos para carregar e se tornar interativa em dispositivos móveis. Isso leva a um efeito negativo nas métricas do Lighthouse, Core Web Vitals e rankeamento de pesquisa, além de reduzir o engajamento do usuário.
De acordo com o Google Web Fundamentals, os scripts de terceiros podem causar vários problemas, incluindo:
-
Muitas solicitações de rede para vários servidores;
-
Envio de muito JavaScript;
-
Análise e execução de scripts que consomem muitos recursos;
-
Bloqueio da exibição do conteúdo até que eles terminem de ser processados;
-
Uso de APIs legadas conhecidas por prejudicar a experiência do usuário;
-
Elementos DOM excessivos ou seletores CSS pesados.
Quando você tem muitos scripts de terceiros na sua página, eles bloqueiam seu próprio JavaScript. Isso se torna especialmente crítico para e-commerces, pois esses precisam de scripts de terceiros para conduzir seus negócios, nesse caso, o tempo realmente é dinheiro.
Transferir os scripts de terceiros para web workers em threads de execução em segundo plano é uma solução potencial que permite que os usuários mantenham seus scripts cruciais mas minimizando seu impacto no desempenho do site.
Aí que entra o Partytown.
O Partytown é uma solução de código aberto que reduz os atrasos de execução causados por JavaScripts de terceiros, transferindo esses scripts para web workers que rodam em threads em segundo plano. Isso libera a thread principal do navegador para executar o seu próprio código.
Embora o Partytown não resolva todos os gargalos causados por scripts de terceiros, ele aborda os maiores desafios na construção de sites de alto desempenho, proporcionando:
-
Liberação de recursos da thread principal para serem usados apenas na execução do aplicativo web principal;
-
Isolamento de tarefas de longa duração dentro da thread do web worker;
-
Redução da “layout thrashing” proveniente de scripts de terceiros, agrupando operações de definição/obtenção do DOM em atualizações em grupo;
-
Limitação do acesso de scripts de terceiros à thread principal;
-
Permissão para que scripts de terceiros sejam executados exatamente como foram codificados, sem alterações;
-
Leitura e escrita de operações DOM da thread principal de forma síncrona a partir do web worker, permitindo que os scripts em execução no web worker funcionem conforme o esperado.
Apesar das inovações que aceleram a entrega de JavaScript para o navegador (minificação, compressão, distribuição, code-splitting, async, defer), a execução do código, uma vez no navegador, é limitada pelo fato de que o JavaScript é uma linguagem de execução em uma única thread — apenas um script pode ser executado de cada vez.
O Partytown é uma biblioteca JavaScript com lazy loading para ajudar a redirecionar scripts que consomem muitos recursos para um web worker, assim não atrasando o carregamento dos scripts do site essenciais para a experiência do usuário.
A E-Com Plus tem como objetivo tornar o alto desempenho o padrão para sites por isso fomentamos esse tipo de solução e implementamos essa tecnologia no site de nossos clientes.
O Partytown é mantido pela Builder.io e ainda está em fase beta, então nem todos os scripts funcionam.