Quando uma loja parece lenta, normalmente a primeira culpa recai sobre imagens pesadas ou um tema inchado. Mas existe uma coisa que pouca gente percebe: como um app de menu afeta a velocidade de carregamento da página. O menu fica logo no topo da página, então é uma das primeiras coisas que o navegador precisa processar. Um app de navegação que não foi construído com cuidado pode arrastar a loja inteira para baixo.
Este artigo tem duas partes. A primeira trata da mecânica: por que um app de menu deixa as coisas mais lentas. A segunda trata dos sinais de alerta, para que você consiga checar a sua própria loja em vez de ficar no achismo.
Por Que um App de Menu Afeta a Velocidade da Loja
À primeira vista, um app de menu é só alguns botões. Mas, nos bastidores, ele geralmente puxa JavaScript, fontes, ícones e imagens. Cada um deles tem um custo de velocidade. Aqui estão as quatro causas mais comuns.
JavaScript Pesado Que Precisa Rodar Antes do Menu Aparecer
Muitos apps de menu montam sua interface com JavaScript. Quando o cliente abre a página, o navegador precisa baixar o arquivo, interpretá-lo (parse) e então executá-lo — só depois disso o menu aparece.
Quanto mais pesado o JavaScript, mais demorada é essa etapa. Em um computador potente, você quase não percebe. Mas a maioria dos compradores faz suas compras pelo celular, e os celulares intermediários processam JavaScript bem mais devagar. Um arquivo de algumas centenas de KB leva um instante em um desktop, mas em um Android barato pode levar um segundo inteiro.
Para uma loja, esse um segundo é o tempo que o cliente passa encarando uma tela em branco, sem nenhum menu para tocar.
Render Blocking: O App Segura a Página Inteira Enquanto Espera Pelo Menu
Esse ponto costuma passar despercebido. Segundo a documentação do Google, o JavaScript é parser-blocking por padrão: enquanto o navegador está construindo a página e encontra uma tag de script, ele tem que parar, terminar de rodar aquele script e só então continuar a construção.
Isso se chama render blocking. Um app de menu que coloca seu script em um lugar ruim e não usa o atributo async ou defer pode bloquear a renderização da página inteira, não apenas a do menu.
O resultado na prática: o cliente clica no link de um produto, mas a página congela por um momento porque está esperando o script do menu terminar. Ele ainda não vê a imagem, o preço, nada. Enquanto isso, o que realmente precisa carregar rápido é o conteúdo que vende, não a barra de menu.
Cada Ícone, Fonte e Imagem É uma Requisição HTTP
Um menu bonito muitas vezes vem com ícones de uma fonte personalizada, às vezes até com uma imagem de fundo ou um logo para cada item. Cada recurso é uma requisição HTTP — uma ida e volta em que o navegador pede ao servidor para enviar um arquivo.
Cada requisição leva tempo para estabelecer a conexão e esperar pela resposta. Dez ícones significam dez idas e voltas. Acrescente uma fonte personalizada só para o menu e a lista cresce ainda mais. Cada uma é pequena, mas, somadas, fazem diferença — especialmente para clientes em uma conexão 3G/4G fraca, numa região com sinal ruim.
Um menu enxuto que usa ícones SVG inline ou a fonte do sistema já presente no aparelho consegue cortar boa parte dessas requisições.
CLS: Um Menu Que Carrega Tarde Desloca o Layout
O CLS (Cumulative Layout Shift) é uma das métricas dos Core Web Vitals do Google. Ele mede o quanto a interface se desloca conforme a página carrega. Segundo o Google, um bom limite é manter o CLS abaixo de 0,1.
Ainda segundo o Google, o CLS costuma acontecer quando o JavaScript insere conteúdo na página tarde demais, empurrando os elementos existentes para baixo. Uma barra de menu ou um banner de navegação que carrega depois do conteúdo principal é um exemplo clássico: ele aparece, ocupa espaço e empurra tudo o que está abaixo para baixo.
Você provavelmente já passou por isso comprando: vai tocar em “Adicionar ao carrinho”, mas, bem nesse momento, o menu surge, o layout se desloca e você acaba tocando na coisa errada. Isso é o CLS — irritante e, ao mesmo tempo, um motivo para o cliente ir embora.
Sinais de Que o Seu Menu Está Deixando a Loja Mais Lenta
Agora que você entende a mecânica, vem a parte prática: como saber se o seu app de menu está causando problemas. Você não precisa de conhecimento técnico profundo, apenas de algumas ferramentas gratuitas.
Rode o PageSpeed Insights
Acesse pagespeed.web.dev, cole o endereço da sua loja e clique em analisar. Essa ferramenta do Google dá uma nota à sua página e lista os problemas em duas seções: Oportunidades e Diagnósticos.
Fique de olho nas linhas que mencionam recursos com render blocking (render-blocking resources) ou reduzir o tempo de execução de JavaScript (reduce JavaScript execution time). Se o nome de um arquivo ou a descrição mencionar navigation, menu ou drawer, há uma boa chance de o app de menu fazer parte do que está deixando tudo mais lento.
Rode tanto no modo Mobile quanto no Desktop. A nota do Mobile costuma ser mais baixa e mais próxima da experiência real dos seus clientes, já que a maioria compra pelo celular.
Use a Aba Network no Chrome DevTools
Abra a sua loja no Chrome, pressione F12 para abrir o DevTools e escolha a aba Network. Recarregue a página e filtre pelo tipo JS para ver apenas os arquivos JavaScript.
A tabela que aparece mostra o quanto cada arquivo é pesado e quanto tempo ele leva. Procure por arquivos com nomes que lembrem o seu app de navegação. Se um arquivo de menu pesa algumas centenas de KB e demora um bom tempo para terminar de carregar, isso é uma evidência concreta, e não um palpite.
Uma dica rápida: o DevTools tem opções para simular uma rede lenta (throttling) e uma CPU fraca. Ative-as para imitar o aparelho de um cliente real, e você verá números muito mais próximos da realidade do que os da sua própria máquina.
Compare as Notas Antes e Depois de Instalar o App
A abordagem mais honesta é medir antes e depois. Antes de instalar um novo app de menu, rode o PageSpeed Insights e anote a nota junto com as métricas LCP, INP e CLS. Depois de instalar o app e montar o menu, rode de novo e compare.
Segundo o Google, os bons limites são: LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos e CLS abaixo de 0,1. Se, depois de instalar o app, o LCP subir ou o CLS ultrapassar 0,1, esse app está custando velocidade.
Isso importa porque a loja média não roda apenas um app. Segundo dados citados por muitas fontes, uma loja Shopify típica tem cerca de seis apps instalados, e algumas lojas usam até trinta. Cada app adiciona um pouco de peso e, somados, isso vira um número que não é pequeno. E a velocidade está diretamente ligada a quantas pessoas abandonam a página — com a taxa média de abandono de carrinho já em torno de 70%, segundo o Baymard Institute, cada segundo a mais pode piorar esse número.
Escolha um App de Menu Que Se Preocupe com a Velocidade
Nem todo app de menu deixa as coisas mais lentas. A questão é se o app foi construído pensando em velocidade: JavaScript enxuto, sem render blocking, poucas requisições desperdiçadas e espaço reservado para o menu, para que ele não desloque o layout.
Essa é a principal prioridade para nós ao construir o Navi+. O Navi+ cria menus sem código para Shopify e qualquer site — Tab Bar, Mega Menu, Slide Menu, FAB, Grid Menu — com configurações separadas para mobile e desktop, e é otimizado para não arrastar os seus Core Web Vitals para baixo. Mesmo assim, você deve medir por conta própria usando os passos acima, antes e depois de instalar; essa é a forma mais confiável de verificar.
Em resumo, o app de menu faz parte da experiência, mas não deixe que ele deixe a sua loja inteira mais lenta sem você perceber. Alguns minutos rodando o PageSpeed Insights e checando a aba Network já vão te dar uma resposta clara.
Este artigo faz parte do guia mais amplo sobre Navegação e Velocidade de Carregamento — Como Escolher um App de Menu Que Não Prejudica os Core Web Vitals.