Melhore o comércio eletrônico móvel: torne seu site mais rápido

Várias estatísticas observam a diferença que cada segundo de tempo de carregamento faz na taxa de conversão de uma loja de comércio eletrônico. Pessoalmente, tenho algumas dúvidas sobre muitas dessas estatísticas, pois existem muitos outros fatores que podem influenciar a taxa de conversão de uma loja. No entanto, com o domínio do comércio eletrônico móvel e a navegação na área de trabalho para quase todos os sites de varejo, é claramente importante que uma loja de comércio eletrônico seja o mais rápida possível, pois a velocidade afetará diretamente a experiência do usuário.

Existem várias maneiras de otimizar o front-end do seu site; alguns complexos e caros, alguns bastante simples. Muitas vezes você descobrirá que pode obter grandes vitórias rápidas e fáceis no início, mas eventualmente começará a obter retornos decrescentes e melhorias incrementais menores.

Até onde você vai realmente depende do tamanho de sua receita on-line e de quanta receita adicional do comércio eletrônico móvel você provavelmente obterá com as melhorias incrementais menores.

Melhorar a taxa de conversão em 0,1% renderá um retorno sobre o investimento muito maior para um grande varejista do que para um menor.

Otimize imagens para uma experiência de e-commerce móvel premium

A otimização de imagem é uma área onde uma grande redução no tempo de carregamento da página pode ser alcançada de forma rápida e fácil. Muitas vezes vejo um conflito entre designers gráficos, comerciantes e gerentes de comércio eletrônico quando se trata de qualidade e tamanho da imagem. Um designer gráfico quer a imagem com a maior e mais alta resolução possível e nem sempre considera as implicações de velocidade de uma imagem que cria. É provável que um comerciante queira as imagens de produtos maiores e com a mais alta resolução, enquanto o gerente de comércio eletrônico pode ser o único com visibilidade e apreciação da velocidade geral da página.

A otimização de imagem é sempre um equilíbrio entre qualidade e tamanho do arquivo. Quanto maior a qualidade da imagem, maior o tamanho do arquivo. O tamanho nativo e a complexidade da imagem também afetam o tamanho do arquivo. Uma imagem com um plano de fundo detalhado e complexo provavelmente terá um tamanho de arquivo muito maior do que uma com um plano de fundo simples.

Os designers geralmente gostam de criar banners de alto impacto para um site usando muitas cores e um plano de fundo que não seja apenas uma cor simples. Isso pode ter um alto impacto visual, mas a consequência disso será um tamanho de arquivo muito maior do que um banner semelhante com um plano de fundo simples. A introdução de telas de alta resolução como o Retina Display da Apple torna o equilíbrio ainda mais difícil de manter, pois as telas destacam imperfeições em imagens de qualidade inferior.

É importante que todos os membros da equipe tenham uma apreciação da otimização do front-end e do impacto que quaisquer decisões gráficas terão no tamanho das imagens e, portanto, na velocidade da página.

Embora as ferramentas de design padrão, como o Photoshop, permitam que os designers otimizem as imagens, há vários serviços de terceiros disponíveis que podem otimizar automaticamente as imagens em seu site. Tanto a Akamai quanto a Ampliance oferecem serviços de gerenciamento de imagens que otimizam suas imagens com base em um conjunto de regras configuradas. Eles podem até transformar arquivos jpeg em imagens WebP para oferecer suporte a navegadores para garantir que os tamanhos dos arquivos sejam os menores possíveis.

No Envoy, testamos recentemente o gerenciador de imagens Akamai no site de um cliente e observamos uma redução média de 80% no tamanho do arquivo de imagens PLP, sem depreciação perceptível na qualidade visual. Isso resultou em uma grande queda no peso geral das páginas PLP (página de listagem de produtos) e um grande salto imediato nas pontuações do Google Pagespeed. Se você não quiser usar um serviço de terceiros para isso, você pode implementar uma ferramenta de código aberto como o Thumbor, que é um serviço que você instala localmente em seus servidores web. Ferramentas como essa otimizam automaticamente suas imagens em tempo real e as armazenam em um repositório.

Usar um CDN

Redes de entrega de conteúdo (CDNs) são serviços que armazenam seu conteúdo em cache em uma rede de servidores comumente conhecida como borda. Esses servidores normalmente são hospedados globalmente em muitos locais para garantir que seu conteúdo seja armazenado em cache em um local fisicamente mais próximo dos usuários do que seus servidores de origem. Embora os CDNs sejam frequentemente usados ​​apenas para armazenar em cache imagens, css, JavaScript e vídeos, você também pode usá-los para armazenar em cache páginas HTML completas.

Ao armazenar em cache páginas HTML completas, você pode acelerar significativamente a entrega de páginas para seus usuários. Como o HTML é armazenado em cache, sua aplicação web de origem não precisa criar a página e devolvê-la ao usuário toda vez que for solicitada e o servidor de cache das CDNs (ponto de presença) provavelmente estará fisicamente mais próximo do usuário do que sua origem servidores. As CDNs também possuem tecnologia para compactar e acelerar a entrega de conteúdo aos usuários, resultando em uma experiência muito mais rápida.

As CDNs também podem reduzir significativamente a carga em seus servidores de origem. Uma página PLP é muitas vezes uma página com demanda de processador para seu aplicativo da web gerar em tempo real. Pode conter um grande número de produtos e facetas, todos somando muito processamento. Na maioria dos casos, uma página PLP não mudará de uma hora para outra, portanto, armazenar em cache essa página por uma hora é perfeitamente viável. Em vez de potencialmente ter que gerar essa página milhares de vezes em uma hora, seu servidor de origem terá que fazer isso uma vez. Na realidade, não funciona assim, pois muitos CDNs terão vários caches independentes, mas você ainda pode esperar um descarregamento de cerca de 60%. Isso significa que seus servidores e aplicativos de origem receberão 60% menos solicitações do que sem a CDN instalada.

Use ferramentas de análise de velocidade para otimizar a experiência de e-commerce móvel

Existem várias ferramentas online gratuitas e pagas que podem analisar uma página da Web e fornecer recomendações sobre como tornar seu site mais rápido. Provavelmente as três ferramentas gratuitas mais utilizadas são Google PageSpeed ​​Insights, Yslow e Webpagetest. Cada uma dessas ferramentas é um pouco diferente, mas todas analisam sua URL e enviam um relatório contendo recomendações, juntamente com uma pontuação.

Essas ferramentas podem ser muito valiosas para mostrar rapidamente quais elementos de uma página da Web estão deixando-a lenta, e algumas ferramentas até fornecem soluções para resolver esses problemas. Embora não sejam abrangentes, eles são uma maneira rápida e fácil de encontrar as alterações que podem causar um grande impacto.

Minimize o uso de scripts de terceiros

A maioria dos sites de comércio eletrônico B2C contém uma série de recursos de terceiros, desde scripts de rastreamento de rede de afiliados até testes MVT. Eles podem conter um feed do Twitter, rastreamento do Facebook ou até fontes externas. Esses recursos externos podem desacelerar significativamente um site se não forem gerenciados com muito cuidado.

Ao usar um analisador de velocidade de página da Web, você geralmente descobrirá que esses recursos aparecem constantemente na lista de elementos que contribuem para a velocidade da página. Um dos maiores desafios é que você não tem controle sobre o tamanho e a otimização desses recursos, pois eles são desenvolvidos e hospedados por terceiros.

Você deve auditar periodicamente os recursos de terceiros que estão sendo chamados pelo seu site e garantir que todos sejam acionados no local correto e da maneira correta, e que você os esteja realmente usando. Já vi muitos casos em que um script de rastreamento para um serviço que não é mais usado ainda está sendo acionado porque foi adicionado usando o GTM e alguém esqueceu de removê-lo quando o serviço parou de ser usado.

Google AMP

O projeto Google Accelerated Mobile Pages é uma tecnologia de publicação na Web de código aberto que visa melhorar a velocidade e o desempenho do conteúdo, entregue especificamente para dispositivos móveis. Liderada pelo Google e iniciada em 2015, a tecnologia AMP foi originalmente projetada para a entrega de conteúdo de notícias. As páginas AMP são muito leves e tendem a usar cerca de 10 vezes menos dados do que suas contrapartes não AMP equivalentes e geralmente carregam em menos de 1 segundo. Há uma grande captura embora. As páginas AMP oferecem suporte a um conjunto muito limitado de funcionalidades e, portanto, não são apropriadas para muitos aplicativos, especialmente sites de comércio eletrônico ricos e funcionais.

Um punhado de varejistas experimentou o AMP para comércio eletrônico com sucesso misto. Embora tenham páginas muito mais rápidas, eles tiveram que redesenhar completamente a funcionalidade e a experiência do usuário em torno das limitações do AMP. Áreas complexas do site, como o checkout, não podem ser criadas em AMP, portanto, o usuário é direcionado para o HTML padrão ou para o checkout de um aplicativo da Web progressivo (PWA).

Embora o AMP seja um projeto muito interessante e tenha sido bem adotado na indústria de notícias, ainda não mostrou qualquer tração real com o comércio eletrônico. Se o Google continuar expandindo a funcionalidade disponível, posso ver isso se tornando uma ferramenta viável para o comércio eletrônico.

Torne-se adaptável

A maioria dos sites de comércio eletrônico agora são construídos de forma responsiva, onde o layout se adapta dinamicamente para caber na tela em que está sendo visualizado. Isso certamente é preferível a ter versões separadas para dispositivos móveis e desktop do seu site e geralmente significa que seu site funcionará bem em vários tamanhos de tela disponíveis.

No entanto, com um design responsivo, os mesmos ativos tendem a ser usados ​​independentemente do dispositivo em que o site está sendo visualizado. Banners e imagens de produtos geralmente são exibidos apenas em um tamanho menor ou até mesmo ocultos em uma visualização móvel, mas o arquivo grande ainda é baixado.

É aqui que os elementos do design adaptativo podem ser usados. Em vez de criar um design fluido que muda dinamicamente para o tamanho da tela, um site adaptável tem vários layouts fixos projetados para tamanhos de tela específicos. Isso permite que os designers controlem e otimizem rigorosamente a experiência do usuário para cada tamanho de tela específico.

Embora isso seja mais complexo e demorado para implementar, um dos principais benefícios de velocidade é que, em vez de apenas exibir uma imagem maior em um tamanho menor em um dispositivo móvel, você carregará uma imagem específica otimizada para dispositivos móveis nesse dispositivo, reduzindo o tempo de carregamento. Em um design responsivo, você pode ocultar certos elementos da área de trabalho quando o site é visualizado em dispositivos móveis. Em um design adaptável, você nem os carrega.

Uma alternativa pragmática para se tornar totalmente adaptável é usar JavaScript em seu design responsivo para detectar o tamanho da tela que está sendo usado e garantir que as imagens otimizadas para dispositivos móveis sejam solicitadas e exibidas em vez de simplesmente exibir imagens maiores em um tamanho menor. Isso garante que apenas as imagens e o conteúdo exibidos sejam solicitados e, portanto, baixados, enquanto ainda oferece os benefícios de um design responsivo.

Há uma infinidade de maneiras diferentes de acelerar as páginas do seu site de comércio eletrônico para dispositivos móveis. Alguns envolvem desenvolvimento, alguns envolvem o uso de serviços de terceiros e alguns envolvem um equilíbrio entre design e função.