A velocidade da página é um fator de conversão que a maioria das lojas ignora, porque não é um problema de design, de marketing, nem sequer de produto. É um problema de infraestrutura. Mas o impacto é tão claro como o de qualquer outro problema de conversão. Cada meio segundo de atraso no carregamento reduz a taxa de conversão de forma mensurável, sobretudo no telemóvel, onde as pessoas já são impacientes e ligam-se muitas vezes a redes mais lentas.
Como é que a velocidade da página afeta a conversão numa loja online?
A relação entre velocidade da página e conversão está bem documentada em investigação da Google, de grandes retalhistas online e de vários estudos independentes. Um segundo de atraso no carregamento da página leva a uma redução de sete por cento nas conversões. Um atraso de cinco segundos pode reduzir a conversão em 40 por cento ou mais. As taxas de conversão no telemóvel caem ainda mais com os atrasos, porque os visitantes móveis têm ligações mais lentas e menos paciência.
O efeito acumula-se por toda a loja. Cada página lenta é uma oportunidade para o visitante ficar frustrado e sair. A tua página inicial, as páginas de produto, o checkout. Um visitante que espera sete segundos por uma página de produto já está irritado antes de ver a imagem do produto. Muitos fecham o separador e procuram o mesmo produto noutro sítio.
A velocidade da página também afeta o posicionamento nos motores de busca. A Google considera a velocidade da página um fator de ranking, tanto na pesquisa em computador como no telemóvel. Uma loja mais lenta fica abaixo de concorrentes mais rápidos para a mesma palavra-chave, o que significa menos visitas logo à partida. A perda de conversão das páginas lentas soma-se ao tráfego direto e ao tráfego orgânico da pesquisa.
O que faz as lojas online carregarem devagar?
A maioria das lojas lentas não é lenta de propósito. Ficam lentas com o tempo, à medida que se juntam imagens, se acumulam plugins ou a infraestrutura do servidor não é otimizada. Perceber estas causas ajuda-te a decidir o que corrigir primeiro. Para saberes mais sobre como cada elemento da tua loja afeta a experiência do visitante, vê como desenhar uma página de checkout que reduz o abandono e como tornar a tua loja online adequada ao telemóvel. Há cinco causas principais.
Imagens demasiado grandes
As imagens são normalmente os ficheiros mais pesados de uma página de produto. Uma fotografia de produto com três megabytes em vez de trezentos kilobytes acrescenta segundos ao carregamento. Muitas lojas carregam imagens em resolução máxima sem otimizar o tamanho do ficheiro para a web. A imagem parece boa, mas demora o dobro do que devia a carregar. Quem usa o telemóvel sofre mais, porque a ligação é mais lenta e o ecrã é mais pequeno, o que torna as imagens de alta resolução um desperdício.
Código e scripts não otimizados
À medida que as lojas acrescentam funcionalidades, avaliações, widgets de chat, ferramentas de análise e pixels de marketing, cada um carrega mais um script. Os scripts bloqueiam a apresentação da página enquanto carregam. Uma loja com 15 scripts de terceiros pode gastar segundos só para os carregar todos antes de a página aparecer. Alguns scripts são essenciais. Muitos não são, ou podiam ser adiados para carregar depois de a página estar visível para o visitante.
Alojamento ou entrega de conteúdos lentos
Alguns fornecedores de alojamento são mais rápidos do que outros. Uma loja alojada em infraestrutura desatualizada, que não guarda em cache os ficheiros estáticos ou que serve o conteúdo a partir de servidores distantes, demora mais a responder aos pedidos do que uma alojada em infraestrutura moderna e distribuída geograficamente. Os visitantes de países diferentes têm velocidades diferentes, consoante a distância a que o servidor está deles.
Respostas do servidor não otimizadas
O tempo que o teu servidor leva a responder a um pedido de página depende da eficiência com que processa os pedidos e constrói as páginas. Bases de dados sem índices adequados, páginas que executam consultas complicadas em cada carregamento ou código de servidor não otimizado para desempenho podem acrescentar um segundo inteiro, ou mais, antes de qualquer conteúdo começar a aparecer. Isto é menos visível do que a otimização de imagens, mas muitas vezes traz grandes ganhos.
Recursos que bloqueiam a apresentação
Os ficheiros CSS e JavaScript que bloqueiam a apresentação podem acrescentar segundos ao tempo até a página aparecer ao visitante. Se a tua loja carrega ficheiros CSS ou JavaScript que têm de ser processados antes de qualquer coisa ser mostrada, o visitante vê um ecrã em branco até esses ficheiros acabarem de carregar. Reorganizar quais os recursos que bloqueiam a apresentação e quais podem carregar em segundo plano melhora muito a velocidade percebida, mesmo que o tempo total de carregamento não mude.
Como medes a velocidade de página da tua loja?
Não podes melhorar o que não medes. Começa por definir uma base de referência: quão depressa a tua loja carrega neste momento.
Google PageSpeed Insights
A ferramenta PageSpeed Insights da Google dá-te uma pontuação de velocidade para qualquer URL e lista os problemas específicos que identifica. A ferramenta é gratuita e não exige configuração. Vai a pagespeed.web.dev, escreve o teu URL e recebes pontuações para telemóvel e computador, com recomendações concretas de melhoria. As recomendações estão ordenadas pelo impacto estimado. Começa pelas de maior impacto.
Uma ferramenta de teste detalhado
Existem ferramentas de teste de velocidade que mostram gráficos de cascata mais detalhados, com exatamente os recursos que demoram mais a carregar e onde ocorrem os atrasos. Permitem testar a partir de diferentes localizações geográficas e em diferentes tipos de dispositivos e velocidades de rede. Isto é útil para perceber se a lentidão é global ou específica de certas regiões, ou do telemóvel em comparação com o computador.
As tuas estatísticas
A tua ferramenta de estatísticas deve mostrar o tempo de carregamento das páginas e das fontes de tráfego. Na Análise e estatísticas da WEMASY, isto aparece como uma métrica de desempenho das páginas. Compara os tempos de carregamento das tuas páginas principais. Se as páginas de produto carregam bem mais devagar do que a página inicial, é um problema concreto a investigar. Se as páginas no telemóvel são mais lentas do que no computador, isso aponta para um problema de imagens ou de apresentação. Para um guia completo sobre como perceber o comportamento dos visitantes através das estatísticas, vê como usar as estatísticas para perceber como os visitantes se comportam na tua loja.
Testa em dispositivos reais
Não confies só nas ferramentas. Abre a tua loja num smartphone a sério, com uma ligação 4G normal, e vê quanto tempo as páginas demoram a carregar. Isto mostra-te como a tua loja se sente para um cliente real. As ferramentas medem métricas específicas, mas a perceção do utilizador importa mais. Uma loja que parece instantânea é mais rápida do que uma que tecnicamente tem boa pontuação mas frustra os utilizadores com atrasos que se sentem.
Quais são as vitórias mais rápidas para melhorar a velocidade da página?
Algumas melhorias levam horas de trabalho. Outras levam minutos e dão resultados mensuráveis de imediato.
Otimiza as imagens
A otimização de imagens é normalmente a melhoria de maior impacto e menor esforço que tens ao teu alcance. Usa uma ferramenta de compressão de imagens para reduzir o tamanho do ficheiro sem perder qualidade de forma visível. Uma fotografia de produto de 3 MB pode muitas vezes ser comprimida para 300 KB sem diferença visível. Comprime todas as imagens antes de as carregar, não depois. Usa o formato certo: JPEG para fotografias, PNG para imagens com transparência, WebP para a máxima compressão em navegadores modernos. Serve tamanhos de imagem diferentes a dispositivos diferentes. Um telemóvel não precisa de uma imagem de 4000x4000 píxeis. Para saberes mais sobre imagens de produto eficazes que também têm bom desempenho técnico, vê como desenhar páginas de produto que levam as pessoas a comprar.
Remove plugins e scripts que não usas
Faz uma auditoria a todos os scripts de terceiros que correm na tua loja. Estatísticas, chat, avaliações, pixels de marketing, widgets. Desativa os que não contribuem ativamente para o teu negócio. Cada script acrescenta peso e abranda a página. Se não o usas, remove-o. Se precisas de várias ferramentas, pensa em juntá-las. Em vez de cinco serviços diferentes para fins diferentes, uma plataforma que combina várias funcionalidades carrega mais depressa do que cinco separados.
Ativa a cache
A cache guarda ficheiros estáticos no navegador do visitante ou em servidores intermédios, para não terem de ser descarregados de novo em cada visita. A cache do navegador poupa bastante tempo de carregamento a quem volta. A cache do servidor guarda versões já preparadas das tuas páginas, para o servidor não ter de as reconstruir de raiz em cada pedido. A maioria das plataformas de alojamento modernas suporta ambas. Consulta a documentação do teu fornecedor de alojamento ou pede-lhe para ativar a cache, se ainda não estiver ligada.
Reduz o CSS e o JavaScript
A minificação remove caracteres desnecessários dos ficheiros de código sem alterar o seu funcionamento. Um ficheiro CSS ou JavaScript bem minificado é 20 a 30 por cento mais pequeno do que o original. Se tens acesso ao código da tua loja, a minificação é simples. Se não, pergunta ao teu fornecedor de alojamento ou ao programador se a minificação já está ativa. Deve estar ligada por defeito em qualquer plataforma de alojamento moderna.
Adia o JavaScript não crítico
O JavaScript que não é preciso logo quando a página carrega pode esperar. Widgets de chat, estatísticas, pixels de marketing. Não precisam de carregar antes de a página aparecer ao visitante. Adiá-los para depois de a página principal estar visível melhora bastante a velocidade percebida. A página parece rápida mesmo que o tempo total de carregamento se mantenha, porque o visitante vê conteúdo logo, em vez de olhar para um ecrã em branco enquanto os scripts carregam.
Quanto tempo demora a ver resultados das melhorias de velocidade?
As alterações à velocidade da página dão resultados imediatos. Um visitante que entre na tua loja amanhã de manhã vai ter a página mais rápida. As melhorias de conversão resultantes aparecem em poucos dias, se o teu tráfego for suficiente para as medir, porque a alteração afeta todos os visitantes ao mesmo tempo.
Ao contrário dos testes A/B, não precisas de fazer da melhoria de velocidade um teste. Se o PageSpeed Insights identifica um problema e o corriges, a tua loja fica mais rápida. Uma página mais rápida não tem desvantagens. Todos os visitantes beneficiam de imediato.
A única ressalva é que a velocidade é um fator entre muitos que afetam a conversão. Se a tua loja tem um checkout avariado, uma página de produto confusa ou problemas de confiança de fundo, otimizar só a velocidade não vai mexer muito na conversão. As melhorias de velocidade funcionam melhor quando fazem parte de uma estratégia mais ampla de otimização da conversão. Para uma visão completa de todos os fatores que afetam a taxa de conversão, vê o que é a otimização da taxa de conversão e porque importa.
A velocidade da página importa de forma diferente no telemóvel e no computador?
A velocidade da página importa mais no telemóvel do que no computador. Os visitantes móveis têm ligações mais lentas, estão muitas vezes com pressa e saem logo se a página não carregar depressa. A diferença no impacto sobre a conversão é grande. Uma loja que converte cinco por cento no computador pode converter dois por cento no telemóvel, e a velocidade explica boa parte dessa diferença.
Os visitantes móveis também são mais sensíveis a ficheiros de imagem grandes. Uma imagem de produto de três megabytes que demora três segundos a carregar numa ligação de computador com boa largura de banda pode demorar dez segundos num telemóvel com 4G. Testa a tua loja num dispositivo móvel a sério para teres uma noção realista de como se sente.
Um problema móvel específico a ter em conta é que as imagens otimizadas para o ecrã do computador são muitas vezes grandes demais para os ecrãs de telemóvel. Servir imagens responsivas, que se ajustam a cada tamanho de ecrã, em vez de forçar uma imagem do tamanho de computador num ecrã de telemóvel, reduz o tamanho do ficheiro e o tempo de carregamento.
Como é que a velocidade da página interage com os outros fatores de conversão?
A velocidade da página não existe isolada. Funciona em conjunto com a confiança, o design, as páginas de produto e o checkout. Uma página rápida com um layout confuso continua a perder visitantes. Uma página lenta com um design bonito perde-os mais depressa. A relação é multiplicativa, não aditiva.
Uma loja que é rápida, transmite confiança e tem um caminho de compra claro converte bastante mais do que uma loja que é só rápida. A melhoria de velocidade acontece no contexto de todos os outros fatores. É por isso que a otimização da conversão é um processo sistemático e não uma correção única. Para veres em detalhe como os testes A/B te ajudam a identificar o que está a travar a tua taxa de conversão, vê como fazer testes A/B à tua loja online.
Como a WEMASY ajuda com a velocidade da página e a conversão
O sistema de e-commerce da WEMASY assenta em infraestrutura de alojamento otimizada, com compressão de imagens, cache do navegador e otimização de desempenho incluídas. As páginas de produto carregam depressa por defeito, porque a plataforma trata dos tamanhos das imagens, da minificação e das respostas do servidor sem exigir qualquer configuração da tua parte. As páginas móveis são otimizadas automaticamente para ecrãs mais pequenos e ligações mais lentas. As estatísticas de carregamento de páginas estão incluídas na Análise e estatísticas, por isso podes acompanhar a velocidade das tuas páginas e identificar quais precisam de atenção. Vê todas as funcionalidades nos planos.
Perguntas frequentes
Qual é um bom tempo de carregamento para uma loja online?
A maioria das fontes recomenda um tempo inferior a dois segundos para a primeira apresentação da página e inferior a três segundos para o carregamento completo, com todas as imagens e recursos. Tudo abaixo de dois segundos dá uma experiência rápida que minimiza o abandono. Entre dois e quatro segundos é aceitável, mas tem impacto mensurável na conversão. Acima de quatro segundos é lento e deve ser corrigido. São orientações, não regras rígidas. Uma loja que carrega em 1,5 segundos converte melhor do que uma que carrega em 2,5 segundos, embora ambas estejam dentro do intervalo aceitável. Com o criador de websites da WEMASY, podes configurar isto diretamente na tua loja.
A velocidade da página afeta o posicionamento na pesquisa orgânica?
Sim. A Google considera explicitamente a velocidade da página um fator de ranking, tanto na pesquisa em computador como no telemóvel. Em igualdade de condições, uma loja mais rápida fica acima de uma mais lenta para a mesma palavra-chave. Isto significa que a velocidade da página afeta a tua taxa de conversão por dois caminhos: diretamente, porque páginas mais rápidas convertem mais visitantes, e indiretamente, porque um melhor posicionamento na pesquisa traz mais visitantes. Para uma visão completa da otimização para motores de busca em lojas online, vê como criar uma estratégia de SEO para a tua loja online.
Posso melhorar a velocidade da página sem um programador?
Muitas melhorias de alto impacto não exigem código. A otimização de imagens, a remoção de plugins desnecessários e a ativação da cache estão disponíveis na maioria das interfaces de administração das plataformas. Algumas melhorias, como adiar JavaScript ou alterar respostas do servidor, podem exigir acesso ou conhecimentos de programador. Se a tua loja está numa plataforma moderna como a WEMASY, a maioria destas otimizações já está feita por defeito. Se tens uma loja à medida ou uma plataforma mais antiga, um programador pode ajudar a identificar ganhos rápidos e a implementá-los.
Qual é a diferença entre first contentful paint e tempo de carregamento da página?
O first contentful paint é o momento em que o primeiro conteúdo (texto, imagem, etc.) aparece na página. O tempo de carregamento da página é o momento em que todos os recursos principais acabaram de carregar. O first contentful paint acontece primeiro e é o que o visitante percebe como "quão rápida me parece esta página?" Uma página com um first contentful paint de dois segundos mas um carregamento completo de oito segundos parece rápida ao visitante, porque o conteúdo aparece depressa, mesmo que alguns recursos de fundo ainda estejam a carregar.
Devo dar prioridade à velocidade da página ou ao design?
Ambos importam, mas a velocidade importa mais, porque uma página bonita que demora dez segundos a carregar perde conversões mais depressa do que uma página simples que carrega em dois. A resposta certa é uma página rápida e bem desenhada. Se tiveres de escolher, dá prioridade à velocidade. Uma página rápida e simples converte melhor do que uma lenta e bonita. Mas não aceites a falsa escolha. As ferramentas e plataformas de design modernas produzem páginas bonitas e rápidas.