À medida que a concorrência no comércio eletrónico cresce cada vez mais, os retalhistas estão à procura de novas formas de se destacarem, e a fronteira competitiva avança constantemente para a tecnologia. O advento do multicanal tornou a jornada do cliente muito complexa, mas uma coisa é certa: A velocidade é mais importante do que nunca. O anúncio mais recente do Google sobre a atualização da experiência da página , um novo algoritmo de classificação projetado para avaliar páginas da web com base em como os usuários percebem a experiência de interagir com elas, é um sinal claro que o gigante da pesquisa está enfatizando a velocidade percebida – a velocidade com que um usuário percebe uma página como carregada.
A nova jornada do cliente para o eCommerce é instantânea. 53% dos visitantes abandonarão um site móvel se demorar mais de três segundos a carregar. Ao mesmo tempo, cada atraso de um segundo nos tempos de carregamento foi associado a uma queda de 7% nas conversões. As novas tecnologias estão agora a permitir velocidades de websites que antes eram impossíveis. Com uma combinação de frontends portáteis modernos, renderização no lado do servidor (SSR), páginas móveis aceleradas (AMP) e tecnologias modernas de CDN, o carregamento de páginas de sub-segundos não é apenas possível, eles estão se tornando o novo campo de batalha competitivo no comércio eletrônico.
Índice
- A importância da velocidade do website para o eCommerce
- Velocidade: Dinheiro
- O que é AMP e como funciona
- As empresas de retalho superam os seus concorrentes multimilionários
- O que é o SSR e como funciona?
- O que são os CDNs modernos e a computação de borda?
- Resumo
A importância da velocidade do website para o eCommerce
A velocidade do website afeta toda a estratégia digital, desde a visibilidade (SEO e SEM), passando pelo tráfego, a experiência do utilizador e, por fim, as conversões e receitas. Isso resulta diretamente do crescente foco do Google em dispositivos móveis e velocidade.
O gigante da pesquisa tem estado numa busca de uma década para esclarecer que a velocidade do website é importante. Eles implantaram várias atualizações focadas em dispositivos móveis para solidificar a importância da velocidade do site móvel como crucial para ranquear alto nos resultados de pesquisa e SEM.
Esses esforços incluem a primeira indexação móvel em 2016, a AMP com anúncios para dispositivos móveis em 2017, a atualização de velocidade em 2019 e a próxima atualização de classificação de experiência da página que entrará em ação no início de 2021. Por último, mas não menos importante, o crachá da vergonha do Google irá em breve ser lançado e sinalizará sites notoriamente lentos e avisa os utilizadores que navegam para o site a partir da página de resultados do Search Engine (SERP).
Com toda a justiça, além de introduzir mudanças algorítmicas e envergonhar sites para enfatizar o papel da velocidade do site, o Google também criou uma série de ferramentas para tornar uma web mais rápida uma realidade. Isso inclui várias ferramentas para facilitar e medir a velocidade do site, como o PageSpeed Insights, AMP, a calculadora de impactos e o Mobile Speed Scorecard, para citar alguns.
Fonte: Testar o meu site
O Teste Meu Site do Google é uma ferramenta que permite fazer uma rápida auditoria ao seu site e estimar o potencial impactos na receita anual se as recomendações de velocidade do site forem implementadas.
O esforço para criar essas ferramentas é do interesse do Google, pois 58% das pesquisas e 65% da receita de anúncios da empresa vêm do celular.
Demonstração 1-on-1
Agende uma conversa consultiva para saber como o XDN do Edgio (Layer0) pode ajudá-lo a obter carregamentos de páginas inferiores a segundos. Clique aqui!
Velocidade: Dinheiro
É do conhecimento comum que a velocidade do site afeta a experiência e a receita do cliente, especialmente em dispositivos móveis.70% dos consumidores afirmam que a velocidade do site afeta a sua vontade de comprar. A Amazon calculou que um segundo de atraso no carregamento de páginas custaria 1,6 dólares em receitas perdidas por ano. Para vender mais, você deve garantir que onde quer que um visitante aterrar, por exemplo, a sua lista de produtos ou páginas de descrição de produtos, o conteúdo é carregado de forma rápida e sem esforço. Da mesma forma, o processo de pagamento deve ser rápido e simples. Isso constrói a base para o reenvolvimento e faz com que o comprador se incline a devolver e comprar mais de você.
No entanto, à medida que as coisas se apresentam hoje, está a tornar-se mais difícil proporcionar experiências móveis rápidas. Além de sites mal otimizados e inchados com imagens grandes e código confuso, uma página móvel faz, em média, 214 pedidos de servidor , dos quais cem são relacionados com anúncios. Como resultado, uma página média demora 15,3 segundos a carregar num dispositivo móvel (em 4G). Alguns dos retalhistas mais competitivos podem reduzir o tempo de carregamento de páginas móveis para apenas 3-5 segundos, mas ainda há espaço para melhorias. E este não é um problema que o 5G possa resolver.
É o compromisso irreconciliável entre anúncios, personalização, análise e rastreamento e uma excelente experiência do usuário
A base para a velocidade
O primeiro bloco de construção no fornecimento de cargas de primeira página extremamente rápidas é usar AMP para tráfego de pesquisa e SSR para os outros canais. O segundo passo é assegurar o carregamento de páginas subsequentes incrivelmente rápido. Isto é feito com frontends portáteis construídos para velocidade, como o Progressive Web Apps (DWAs). O último pilar é uma CDN moderna com recursos de computação de ponta para extrair cada milissegundo possível de cargas de página.
Na verdade, a Google recomendou uma jornada ideal para o cliente, na qual um site primeiro entrega uma página AMP para pesquisar os utilizadores e depois os faz passar para a versão PWA completa do site nas páginas seguintes. E como quase metade do tráfego de sites de lojas vem da pesquisa orgânica, apoiar AMP e PWA faz sentido.
Este tópico foi amplamente discutido no Google I/O 2017.
Com os PWAS, os desenvolvedores podem oferecer experiências altamente atraentes e rápidas que rivalizam com aplicativos nativos. No entanto, em relação ao tráfego gerado pela pesquisa, o AMP é a opção mais rápida possível com tempos de carga medianos de meio segundo.
Assim, em poucas palavras, subir mais alto no SERP requer uma combinação de AMP e SSR para primeiras cargas rápidas e PWA para transições de navegação extremamente rápidas. O problema é que é mais fácil dizer do que fazer, pois requer que sites corporativos de comércio eletrônico adicionem suporte a SSR, que é uma tarefa complexa por si só, e mantenham dois sites separados um para o PWA (normalmente escrito em React, Angular, Vue, Next, ou Nuxt) e o outro em AMP HTML.
As PÁGINAS AMP são tão rápidas porque são pré-obtidas, pré-renderizadas e armazenadas em cache por uma CDN (Rede de Entregas de Conteúdo). O cache AMP do Google fornece a maioria das páginas AMP.
Assim, as bases da velocidade do website consistem nestes três elementos-chave:
SSR e AMP para primeiras cargas rápidas
A partir do SERP, os utilizadores são direcionados para uma versão AMP da página para cargas de primeira página incrivelmente rápidas. O SSR faz o mesmo para visitantes de todos os outros canais, incluindo e-mail, redes sociais e referências.
Interface portátil PWA para velocidades de navegação extremamente rápidas
A PWA assume o controlo para fornecer velocidades de navegação instantâneas à medida que o visitante navega nas páginas subsequentes do website. Desta forma, os consumidores desfrutam de uma experiência melhorada de carregamentos rápidos de primeira página e transições instantâneas de página para além da primeira página.
Pré-busca preditiva e CDN moderna
Pré-busca preditiva e uma CDN moderna com recursos de computação de borda permitem que você transmita dados dinâmicos para a borda e a partir daí para os navegadores dos usuários antes que eles os solicitem. Isso permite armazenar em cache e servir o que os consumidores estão à espera – os dados de json que se traduzem nos diferentes produtos que você tem em estoque, seus preços e informações. É assim que os sites de comércio eletrónico e outros websites baseados em bases de dados podem proporcionar experiências instantâneas e permanecer 5 segundos à frente dos toques dos consumidores (por exemplo, pré-busca de uma página de descrição do produto em que um utilizador provavelmente irá clicar antes de clicar no link).
Agora que entendemos os três pilares que formam a base da velocidade do website, podemos mergulhar mais profundamente em cada um deles.
O que é AMP e como funciona
O Google AMP é uma estrutura de código aberto para criar páginas web móveis com tempos médios de carregamento de 500 ms. Amp cria experiências melhores e mais rápidas na web móvel simplificando o HTML e aplicando limitações rigorosas no CSS e JavaScript. Essas páginas são então armazenadas em cache e pré-renderizadas no servidor do Google, que é como elas são entregues tão rapidamente.
Os benefícios da AMP
As PÁGINAS AMP permitem o carregamento médio de páginas de 500 ms para o tráfego a partir do SERP do Google. Essas velocidades são possíveis porque os servidores do Google pré-buscaram e pré-renderizaram conteúdo AMP para o navegador de um usuário antes de clicar no link da página AMP. Para o site de comércio eletrónico médio, a pesquisa Google (orgânica e paga) responde por aproximadamente 50% do seu tráfego, para que estes ganhos possam aplicar-se a uma grande percentagem do seu tráfego.
Os sites que usam AMP também veem benefícios em taxas de rejeição reduzidas, já que os utilizadores que normalmente podem saltar enquanto esperam que uma página seja carregada agora terão uma experiência extremamente rápida.
Como a AMP e a PWA mudam o jogo
A combinação AMP e Progressive Web Apps (PWAS) cobre toda a jornada do cliente desde a pesquisa, tornando-a rápida ponta-a-ponta O comprador carrega a página AMP de um SERP do Google e, ao navegar na página AMP, os recursos necessários para a versão PWA do site carregar em segundo plano. Dessa forma, quando o utilizador toma medidas (por exemplo, cliques em qualquer parte do site), o PWA já começou a pré-carregar o conteúdo para a página seguinte, e a partir daí, todas as transições restantes são transições de navegação renderizadas do lado do cliente e não navegação fresca.
Porque é que todos não usam AMP?
A combinação AMP e PWA é uma combinação feita no céu pela velocidade, mas é um pesadelo em termos de desenvolvimento. Apoiar a tecnologia envolve, efetivamente, criar duas versões do seu site – uma na linguagem em que o frontend está escrito (que tende a ser JavaScript-pesado ou CSS-pesado) e outra que segue os padrões do projeto AMP. E é apenas o começo: Cada correção de erros, alteração de layout, novo recurso, etc. podem exigir ser propagados para as bases de código AMP e PWA.
O framework React Storefront e o Layer0 tornam muito mais fácil para os desenvolvedores suportar AMP em seus aplicativos React.
As empresas de retalho superam os seus concorrentes multimilionários
Ao utilizar a tecnologia Layer0 AMP, a loja de moda AKIRA não só oferece primeiros carregamentos instantâneos da pesquisa, mas também outranks Amazon, Nordstrom, Zappos e outras grandes marcas para frases-chave.
Antes de utilizar a tecnologia Layer0, a primeira página DA AKIRA carrega uma média impressionante de 4,8 segundos, e as páginas subsequentes são carregadas em 2,5 segundos.
A AKIRA conseguiu melhorar estes resultados e chegar a carregamentos de páginas inferiores utilizando tecnologia avançada incorporada no Edgio (Layer0): Um PWA de eCommerce com renderização do lado do servidor e conversão AMP, Layer0 CDN-as-JavaScript oferecendo uma taxa de sucesso de mais de 95% de cache para conteúdo dinâmico na borda (e mantendo o site 5 segundos à frente do comprador), e servidores de JavaScript da Layer0 para otimizar as APIs do Weber0.
Com Edgio (Layer0), o retalhista viu um impulso imediato em muitas áreas:
- O primeiro tempo de carregamento caiu 70,8% para perto de um segundo
- As transições de navegação caíram para uns espantosos 500 ms
- Metade das páginas do website são carregadas em menos de 500 ms
- A taxa de conversão móvel aumentou 37,25%
O Lighthouse também é um grande reflexo dessas melhorias. A pontuação de desempenho DA AKIRA obteve um aumento de 36 pontos, superando 75% dos sites na web e oferecendo uma experiência de navegação de clientes melhorada.
Leia o estudo de caso completo DA AKIRA.
Annie Selke é outro excelente exemplo de como investir na velocidade do website pode ajudar um retalhista a a subir na página de resultados do motor de busca.
Antes de entrar em Edgio (Layer0), a loja de decoração e casa Annie Selke nem sequer apareceu acima da dobra dos resultados de pesquisa do Google. Hoje, com um aumento de 32% no tráfego orgânico e um aumento de 40,41% no tráfego orgânico móvel, supera os seus concorrentes multimilionários.
Se você estiver interessado, há também um estudo de caso Annie Selke no nosso site onde vamos para o nitty-gritty.
Para retalhistas online como A AKIRA e a Annie Selke, um website móvel de bom desempenho é um fruto de baixo custo. Pode ser exatamente o que eles precisam para enfrentar a concorrência implacável de gigantes do comércio eletrônico como Amazon, Nordstrom e Zappos.
Quanto mais rápido o site, mais alto ele ranqueia, como um instante, o SEO garantido. Há muitos exemplos no portfólio de Edgio (Layer0) que provam isso. AKIRA, Annie Selke e Shoe Carnival são apenas alguns que superam muitos grandes nomes, incluindo Amazon.
Layer0 oferece uma combinação de tecnologia avançada para fazer o eCommerce chegar à velocidade:
- PWA de eCommerce com suporte a Rendering do lado do servidor e conversão AMP
- Pré-busca preventiva
- CDN-as-JavaScript oferecendo uma taxa de sucesso de mais de 95% de cache para conteúdo dinâmico na borda que mantém o site 5 segundos à frente do comprador.
- Layer0 Serverless-JavaScript backend para frontend otimiza servidores e APIs.
Demonstração 1-on-1
Agende uma conversa consultiva para saber como o Edgio (Layer0) pode ajudar a obter carregamentos de páginas inferiores a segundos. Clique aqui!
O que é a representação do lado do servidor e como funciona?
A renderização no lado do servidor (também conhecida como SSR)é uma técnica popular para renderizar uma página PWA normalmente apenas no lado do cliente no servidor e depois enviar uma página totalmente renderizada para o navegador. O pacote JavaScript do cliente pode então assumir o controlo e o PWA pode funcionar normalmente. O SSR essencialmente traduz páginas JavaScript para HTML, uma linguagem que tanto os rastreadores de pesquisa como os navegadores entendem no servidor. Isso garante que navegadores e rastreadores de pesquisa possam facilmente entregar e indexar suas páginas.
Um grande benefício de usar o SSR tem um aplicativo que pode ser rastreado e indexado corretamente por todos os motores de busca. Isso ajuda com o SEO e fornece metadados para canais de redes sociais.
Os benefícios da SSR
O SSR também pode ajudar com o desempenho porque um aplicativo totalmente carregado é enviado do servidor na primeira solicitação. No entanto, para aplicações não triviais, a sua quilometragem pode variar porque o SSR requer uma configuração que pode ficar um pouco complicada e criar uma carga de servidor maior. Felizmente existem serviços e ferramentas, como frontends isomórficos e Layer0 com suporte a SSR pronto para uso.
No final, se usar a renderização do lado do servidor para o seu site depende das suas necessidades específicas e de quais os trade-offs mais fazem sentido para o seu caso de uso.
O que são os CDNs modernos e a computação de borda?
Edge computing é uma filosofia de rede focada em aproximar a computação da fonte de dados e reduzir a latência e o uso da largura de banda no processo. O uso de muitas tecnologias diferentes pode implementar isso. Aproximar a computação da borda da rede (computador de um usuário, dispositivo de IoT ou servidor de borda) minimiza a quantidade de comunicação de longa distância que tem que acontecer entre um cliente e um servidor.
CDNs com recursos de computação de ponta Deixe você reduzir o tempo de viagem dos servidores do site para o navegador do usuário, transmitindo o conteúdo para o Ponto de presença (Pop) CDN mais próximo para o usuário (para que um usuário em São Francisco entregasse conteúdo de um pop no Sul de São Francisco enquanto um usuário em Nova York recebe conteúdo de um pop no Brooklyn).
Os benefícios dos CDNs com computação de borda
Os CDNs armazenam uma versão em cache do seu site em vários locais para garantir um carregamento mais rápido de páginas. Cada pop contém vários servidores de armazenamento em cache responsáveis pela entrega de conteúdo aos visitantes na sua proximidade.
O CDN-as-JavaScript da Layer0 leva o conceito a outro nível. É uma CDN com reconhecimento de aplicativos que entende o seu aplicativo. Ele usa a mesma linguagem que os desenvolvedores do frontend já conhecem e dá-lhe total controle sobre o armazenamento em cache. Como resultado, sites que usam Layer0 veem índices de acerto de cache de mais de 95% para conteúdo dinâmico na borda.
Os recursos de computação de borda do Layer0 CDN-as-JavaScript mantêm você 5 segundos à frente do comprador, pré-buscando preditivamente as próximas páginas e transmitindo-as para a borda antes que elas sejam solicitadas, então elas ficam armazenadas em cache e prontas para o usuário antes de tocar em um link para elas.
Resumo
Longos tempos de carregamento podem arruinar a experiência de um utilizador e a classificação de pesquisa de um website. AMP resolve uma parte deste problema – torna a primeira página da pesquisa incrivelmente rápida. Mas isso é apenas metade da batalha. Levar o seu site à velocidade requer uma abordagem mais abrangente e mais holística – uma combinação de tecnologias como as páginas móveis aceleradas (AMP), frontends portáteis modernos, renderização do lado do servidor (SSR) e CDNs com recursos de computação de ponta.
O Layer0 ajuda websites complexos e dinâmicos a chegar a velocidades inferiores ao segundo, aumentando a velocidade de desenvolvimento e o crescimento dos resultados e reduzindo os custos de DevOps. Também inclui uma CDN-como-JavaScript que fornece uma taxa de acerto de cache de 95% ou mais para conteúdo dinâmico, em comparação com apenas 15% para outros CDNs.
O Layer0 fornece consistentemente cargas de páginas médias de 500 ms para grandes sites de comércio eletrônico com dezenas de tags e scripts, para não mencionar preços dinâmicos e pesquisas de inventário em tempo real. Sabe-se que esses ganhos de velocidade levam a aumentos de conversão de 15 a 30%, melhor visibilidade, alcance e, em última análise, maior receita.
Agende uma conversa consultiva com um especialista em velocidade do site para ver como podemos ajudá-lo a ganhar uma vantagem competitiva com um site de comércio eletrônico instantâneo!
