Como as velocidades lentas da página para celular estão arruinando suas taxas de conversão

Há uma boa chance de um design ruim da página de destino pós-clique estar custando pelo menos metade do seu orçamento de PPC, sugere uma pesquisa recente do Google.

Dados do gigante dos mecanismos de busca indicam que mais de um em cada dois usuários de internet móvel abandonará uma página da web se ela não carregar em 3 segundos. E a partir de fevereiro de 2017, a página de destino pós-clique em um celular leva embaraçosos 22 segundos para carregar.

Se você parou para fazer as contas, provavelmente percebeu como uma página de carregamento lento pode ser prejudicial para seus resultados financeiros.

Se você gerar 5.000 visitantes da página de destino pós-clique para celular por mês e converter 5% deles, perderá 1.500 conversões ao longo do ano. Se o carregamento demorar mais de 3 segundos, metade dos seus visitantes - 2.500 por mês neste caso hipotético - nem mesmo verão sua página de destino pós-clique inteira antes de saltar. O que é pior, seu orçamento de PPC é drenado toda vez que isso acontece.

Mas talvez sua página não carregue em 3 segundos. Talvez carregue em 5 segundos, ou 6 segundos ou 10 segundos. Se for esse o caso, os dados do Google mostram que você está perdendo ainda mais.

Novos benchmarks de velocidade de página para celular

Como suas páginas se comparam a outras na web? Para estabelecer alguns novos benchmarks para velocidade de carregamento, o Google analisou 900.000 páginas de destino pós-clique para celular de anúncios em 126 países no início de 2017.

O que eles descobriram foi uma confirmação de sua hipótese: as páginas para celular estão “inchadas” com muitos elementos.

Entre eles, as páginas dos setores automotivo, varejo e tecnologia demoram mais para carregar, em média. Independentemente do setor, no entanto, alguns dados chocantes mostram que as páginas de destino pós-clique para celular em geral deixam muito a desejar.

Por exemplo, 70% das páginas analisadas levaram 7 segundos para carregar o conteúdo logo acima da dobra. Nessas mesmas páginas, demorava mais de 10 segundos no total para carregar o conteúdo visual acima e abaixo da dobra.

Com a ajuda de alguns algoritmos avançados do SOASTA, outro estudo do Google vinculou a velocidade de carregamento da página a indicadores-chave de desempenho mais significativos, como conversões e taxa de rejeição. Em uma postagem do blog, os pesquisadores elaboram:

Construímos dois modelos de aprendizado de máquina: um para prever conversões e outro para prever taxas de rejeição. Cada modelo usou dados do mundo real de uma grande amostra de sites de e-commerce móveis, correlacionando o impacto de 93 métricas de página diferentes de formatos de imagem a vários scripts. Simplificando, os dois modelos procuraram quais fatores do site para celular levariam os compradores a comprar ou rejeitar. O modelo de conversão teve uma precisão de predição de 93%, e o modelo de salto foi ainda mais preciso, de 96%.

Com uma precisão quase exata, os modelos de aprendizado de máquina descobriram que, conforme o tempo de carregamento de uma página aumenta de um para três segundos, a probabilidade de um visitante móvel saltar 32%. A partir daí, um gráfico mostra, as coisas ficam ainda piores:

Junto com a taxa de rejeição, o estudo mostrou que um tempo de carregamento lento da página também pode diminuir as conversões. Então, qual é o culpado?

Os pesquisadores identificaram algumas falhas importantes no design de dispositivos móveis.

Os maiores assassinos de velocidade da página de destino pós-clique para celular

A velocidade não é apenas um detrator de conversões e orçamento de publicidade paga; é também um dos fatores de classificação do mecanismo de pesquisa do Google. Se a sua página não carregar mais rápido do que os 3 segundos recomendados, você está desperdiçando dinheiro e não sendo encontrado. Qualquer um dos problemas a seguir pode ser o motivo.

1. Muitos elementos de página

Hoje, a página da web média tem o mesmo tamanho, em dados, que o clássico videogame “Doom:”

Com 2,3 MB, ele se transformou em uma pilha de elementos desnecessários. E seus designers têm BSO - “síndrome do objeto brilhante e brilhante” - sugere o engenheiro de software, Ronan Cremin:

À medida que a web passava por seus estranhos anos de adolescência, deixamos que as características rastejantes assumissem o controle e, eventualmente, a desordem simplesmente levou a melhor sobre nós. Novo módulo de galeria JavaScript? Claro, por que não? Oooh essa nova fonte da web ficaria bem aqui, mas por que não adicionar outra ferramenta de análise enquanto estamos lá? Devo me preocupar em redimensionar esta imagem de 6.000 pixels? Nah, deixe o navegador fazer isso, funciona para mim.

O Google descobriu que “featuritus”, como Cremin o chama, pode ter impactos drasticamente negativos na velocidade de carregamento. A página média agora apresenta centenas a milhares de elementos - manchetes, imagens, botões - armazenados em dezenas de servidores. Quando esses elementos não são otimizados, o resultado pode ser uma experiência de carregamento “imprevisível” e “volátil”.

Os pesquisadores chegaram a identificar o número de elementos em uma página como o preditor mais preciso de conversões. Menos, eles afirmam, é mais. Quando os elementos de uma página aumentam de 400 para 6.000, as chances de conversão de um visitante caem 95%.

Os principais designers da Internet, sugerem os dados, sabem disso desde 2014. Embora o tamanho médio da página tenha crescido continuamente para a maioria dos sites, os 10 principais deram uma virada:

Para eles, o “peso” da página (tamanho dos dados) vem diminuindo nos últimos anos. Todos os outros, ao que parece, são vítimas de featuritus.

De acordo com o Google, 70% das páginas testadas tinham mais de 1 MB, 36% tinham 2 MB e 12% tinham mais de 4 MB. Como resultado, há poucas chances de os visitantes permanecerem por muito tempo. Por meio de uma conexão 3G rápida (a velocidade da maioria das conexões de celular em todo o mundo), 1,49 MB leva cerca de 7 segundos para carregar.

Resolvendo o problema

No caso de uma página com muito peso, a melhor solução é a prevenção. Felizmente, a prevenção é tão fácil quanto definir o que o Google chama de “orçamentos de desempenho”. Antes de começar a construir sua página, determine a rapidez com que deseja que ela carregue (o “orçamento”). Em seguida, projete sua página dentro dos limites de seu orçamento.

“É muito mais eficiente entregar algo rápido se fizer parte dos critérios de design”, diz Hakan Nizam, da L'Oreal. “Isso liberaria largura de banda do desenvolvedor. Isso permitiria que os desenvolvedores se concentrassem em outros fatores que estão afetando as taxas de conversão. A conversa de velocidade deve ser resolvida a fim de passar para outros diferenciais. ”

Em uma postagem do blog do Google, Jason Cohen compara o orçamento a outras limitações criativas:

Incluir a velocidade como parte do processo de design não é diferente de levar em conta as limitações de outras mídias criativas. Os designers não criariam um anúncio em quatro cores para uma publicação impressa em preto e branco, nem produziriam um vídeo de 30 segundos para um espaço de 15 segundos. Se não projetarmos dentro das limitações do meio, o resultado será uma experiência ruim.

Apesar da superação do tráfego da Internet no desktop pelos celulares, o canal ainda está atrás do desktop na maioria das métricas de experiência do usuário. Os designers precisam parar de tratar o celular como algo secundário. É seu próprio meio e a experiência do usuário deve refletir isso.

Obviamente, a técnica de “orçamento” pressupõe que você está começando do zero. Se você está tentando otimizar uma página de destino pós-clique já lenta, os pesquisadores recomendam realizar uma auditoria de seus elementos e monitorar seus scripts de terceiros para descobrir quais estão contribuindo mais para seu peso. Em seguida, reduza para otimizar de acordo.

2. Muitas imagens

Em sua pesquisa, uma imagem em particular chamou a atenção dos testadores do Google. Ele pesava impressionantes 16 MB. Repetidamente, eles continuaram a encontrar imagens que atolavam páginas.

“Elementos gráficos como favicons, logotipos e imagens de produtos podem facilmente compreender até dois terços (em outras palavras, centenas de kilobytes) do peso total de uma página”, alertaram os pesquisadores.

Com a ajuda de seus módulos de aprendizado de máquina, eles descobriram que o segundo preditor mais preciso de conversões era o número de imagens em uma página. Em comparação com páginas que não conseguiram converter visitantes, páginas que podem apresentar 38% menos imagens.

Resolvendo o problema

Uma das maneiras mais fáceis de aumentar a velocidade de sua página é com uma rápida otimização de imagem. Faça o seu melhor para ...

• Reduza as imagens desnecessárias

Você realmente precisa mostrar seis ângulos diferentes de seu produto? Essa foto de estoque está realmente agregando valor à sua página de destino pós-clique? Você precisa codificar o texto em uma imagem ou pode, em vez disso, integrar a fonte escolhida com o Google Fonts ou Adobe Typekit? Se a resposta for “não”, considere cortar algumas imagens de seu design.

• Diminua o tamanho das imagens necessárias

Se você precisar de todas essas imagens, algumas ferramentas e estratégias diferentes podem ajudá-lo a economizar largura de banda. Primeiro, conheça o formato do arquivo de imagem. Substituir um PNG por um JPEG pode economizar muito tamanho e, consequentemente, velocidade. Por outro lado, também reduzirá a qualidade da imagem. Para mais informações sobre como decidir qual formato usar, verifique este post.

Em segundo lugar, pense em usar uma ferramenta. Os pesquisadores afirmam que 30% das páginas poderiam economizar 250 KB de dados com a ajuda de um compressor de imagem. Guetzli e Zopfli do Google são dois que vale a pena tentar.

3. Uso de JavaScript, tempo de carregamento de página inteira

Antes que elementos como imagens e botões possam ser exibidos para um usuário, o código HTML com o qual uma página é construída precisa ser recebido e interpretado pelo navegador. O tempo que leva é conhecido como “tempo pronto para DOM” - o preditor mais preciso de salto de página, descobriram os pesquisadores.

Os dados do Google mostram que as sessões de usuário que retornaram tiveram tempos de preparação do DOM 55% mais lentos do que as sessões não rejeitadas. As lentidões dessa importância costumam ser causadas por JavaScript - um tipo de código que interrompe a análise do código HTML - usado em muitas ferramentas analíticas de terceiros, anúncios e widgets sociais.

Daniel An e Pat Meenan comparam a desaceleração a um restaurante desorganizado:

Imagine que você está em um restaurante e seu garçom está pronto para trazer sua refeição, mas primeiro tem que esperar que o sal e a pimenta sejam entregues de outro restaurante.

Mas JavaScript não é o único tipo de código que torna as páginas móveis mais lentas. CSS, HTML e as inúmeras solicitações necessárias para processar elementos como imagens e fontes criam um atraso no tempo de carregamento da página inteira - o segundo preditor mais preciso da taxa de rejeição. A média da página da web que os usuários saltaram foi 2,5 segundos mais lenta do que a página média da qual eles não voltaram.

Resolvendo o problema

Na tentativa de melhorar a experiência de navegação móvel, o Google desenvolveu AMP e AMP para programas de anúncios. Ambas as estruturas fornecem aos desenvolvedores as ferramentas de que precisam para fornecer experiências móveis na velocidade da luz. Eles incluem:

• AMP HTML: esta é uma versão simplificada e básica do que reconhecemos como linguagem de marcação de hipertexto - o sistema de tags, números e letras usado para construir a base da maioria das páginas da web.

• JavaScript AMP: a versão AMP do código popular do Google restringe o uso de JavaScript de terceiros e escrito pelo autor.

• O AMP CDN: permite que os desenvolvedores armazenem uma versão em cache de sua página da web nos servidores do Google. Essa versão em cache é um instantâneo digital da página que contém todos os seus dados em um só lugar. Como resultado, ele pode ser servido ao usuário com mais rapidez.

Juntos, os elementos da estrutura formam a base de páginas que usam 10 vezes menos dados do que a média e de anúncios que carregam 6 vezes mais rápido.

Acesse aqui para saber mais sobre os primeiros passos com AMP.

Qual é a velocidade da sua página móvel?

Suas páginas de destino pós-clique são otimizadas para celular? Eles estão livres de imagens inúteis, elementos desajeitados e JavaScript pesado?

Descubra com um teste de compatibilidade com dispositivos móveis do Google e, em seguida, confira nosso guia para otimizar a experiência da página de destino pós-clique antes de criar sua próxima página: