Preloader no WooCommerce: como configurar sem prejudicar a experiência de compra

Panorama: páginas WooCommerce e preloader

Uma loja WooCommerce tem pelo menos 5 tipos de páginas com características muito distintas. Tratar todas da mesma forma — ativando ou desativando o preloader em bloco — é uma decisão rasa que pode tanto prejudicar a experiência visual quanto criar fricção nos momentos errados.

A regra geral para e-commerce é: o preloader faz mais sentido nas páginas de descoberta (loja, produto) e menos sentido nas páginas de conversão (carrinho, checkout).

Página da loja (shop)

Quando o preloader faz sentido

A página de loja costuma ter uma grade de produtos com múltiplas imagens carregando em paralelo. Dependendo da quantidade de produtos e da resolução das imagens, o layout pode se montar de forma progressiva e parecer "quebrado" por alguns momentos.

Nesse caso, um preloader bem configurado — especialmente com um tempo mínimo de 300 a 500ms — entrega uma transição mais limpa para a grade completa.

Quando evitar

Se a sua loja tem paginação leve (15 a 20 produtos) e imagens otimizadas, o carregamento é rápido o suficiente para o preloader ser desnecessário — ou, pior, aparecer por um piscar de olhos e parecer um bug.

Também evite se a sua loja depende de busca orgânica para tráfego: lembre-se do impacto no LCP discutido em Preloader e performance no WordPress.

Página de produto

Páginas de produto com galeria de imagens, variações e tabs de descrição podem se beneficiar de um preloader — o layout é mais complexo e o FOUC é mais perceptível.

Porém, para produtos simples (uma imagem, descrição curta, botão de compra), o preloader adiciona uma etapa desnecessária. O usuário quer ver o produto — não uma tela de espera.

Uma solução intermediária: ativar o preloader em produtos com galeria e desativar em produtos simples. Isso exige controle por ID ou por slug — leia mais em Como mostrar preloader somente em páginas específicas.

Carrinho

A página do carrinho no WooCommerce geralmente é leve (sem muitas imagens grandes) e carrega rápido. O preloader não agrega valor aqui — só cria fricção.

Checkout

O checkout é o momento mais crítico da jornada de compra. O usuário está prestes a finalizar — qualquer elemento que pareça obstáculo pode levar ao abandono.

Não use preloader no checkout. Ponto final.

Se o seu plugin de preloader está ativo em todo o site, certifique-se de que o checkout está explicitamente excluído. No WooCommerce, o slug padrão é checkout, mas pode ter sido personalizado. Verifique em WooCommerce → Configurações → Avançado.

Minha conta

A página "Minha conta" é acessada por clientes já logados para verificar pedidos, dados pessoais e endereços. É uma página funcional, não estética.

Se o seu plugin tem a opção de ocultar o preloader para usuários logados, ative-a — isso resolve o caso automaticamente. Caso contrário, exclua explicitamente a URL da "Minha conta".

Considerações mobile

Lojas WooCommerce têm uma proporção significativa de acessos mobile, frequentemente em conexões 4G ou até 3G. Nesse contexto, o preloader pode permanecer visível por mais tempo do que em desktop.

Boas práticas para mobile:

• Configure um safety timeout razoável (5 a 8 segundos é o máximo recomendado)
• Use animações CSS leves — não carregue GIFs ou Lottie externos
• Se o seu público mobile é majoritário, avalie se o preloader vale o custo na experiência
• Teste em dispositivos reais com conexão 4G simulada via DevTools

Como configurar no plugin

Um plugin de preloader com suporte nativo ao WooCommerce oferece opções específicas para cada tipo de página do WooCommerce — sem precisar saber os slugs ou IDs de cada uma.

O fluxo recomendado para lojas:

1. Ative o preloader em "todas as páginas"
2. Exclua explicitamente: Carrinho, Checkout, Minha Conta
3. Avalie a loja (shop) e páginas de produto caso a caso
4. Ative a opção "ocultar para usuários logados"
5. Configure um safety timeout de 5–6 segundos para conexões lentas