À medida que a concorrência no comércio eletrônico cresce cada vez mais forte, os varejistas estão à procura de novas maneiras de se destacar, e a fronteira competitiva se move constantemente em direção à tecnologia. O advento do multicanal tornou a jornada do cliente muito complexa, mas uma coisa é certa: A velocidade importa mais 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 julgar páginas da Web com base em como os usuários percebem a experiência de interagir com eles, é um sinal claro que o gigante da busca está enfatizando a velocidade percebida a velocidade na qual 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 para 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 website que antes eram impossíveis. Com uma combinação de frontends portáteis modernos, renderização do lado do servidor (SSR), páginas móveis aceleradas (AMP) e tecnologias modernas de CDN, cargas de páginas de sub-segundos não são apenas possíveis – eles estão se tornando o novo campo de batalha competitivo no comércio eletrônico.
Índice
- A importância da velocidade do site para o eCommerce
- Velocidade: Dinheiro
- O que é AMP e como funciona
- Os upstarts do varejo superam seus concorrentes multibilionários
- O que é SSR e como funciona?
- O que são CDNs modernos e computação de borda?
- Resumo
A importância da velocidade do site para o eCommerce
A velocidade do site afeta toda a estratégia digital, desde a visibilidade (SEO e SEM), passando pelo tráfego, a experiência do usuário e, finalmente, conversões e receita. Isso resulta diretamente do crescente foco do Google em dispositivos móveis e velocidade.
O gigante da busca tem estado em uma busca de uma década para esclarecer que a velocidade do site é 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 o ranking alto nos resultados de pesquisa e SEM.
Esses esforços incluem indexação mobile-first em 2016, AMP com anúncios mobile em 2017, Atualização de velocidade em 2019 e a próxima atualização de classificação de experiência de página que entrará em ação no início de 2021. Por último, mas não menos importante, o Google Badge of Shame em breve será lançado e sinalizará sites notoriamente lentos e avisa os usuários 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 Impacto e o Mobile Speed Scorecard, para citar alguns.
Fonte: Teste Meu Site
O Test My Site do Google é uma ferramenta que permite fazer uma auditoria rápida do seu site e estimar o impactos potencial 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.
Programação 1-on-1 Demo
Agende uma conversa consultiva para saber como o XDN do Edgio (Layer0) pode ajudá-lo a obter cargas de páginas de sub-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 sua vontade de comprar. A Amazon calculou que um segundo de atraso no carregamento de páginas custaria 1,6 bilhões de dólares em perda de receita por ano. Para vender mais, você deve garantir que onde quer que um visitante aterrissar, por exemplo, 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 re-engajamento e faz o comprador inclinado a retornar e comprar mais de você.
No entanto, à medida que as coisas estão hoje, está se tornando mais difícil oferecer 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 solicitações de servidor, das quais cem são relacionadas a anúncios. Como resultado, uma página média leva 15,3 segundos para ser carregada em um dispositivo móvel (em 4G). Alguns dos varejistas mais competitivos podem reduzir os tempos de carregamento de páginas móveis para apenas 3-5 segundos, mas ainda há espaço para melhorias. E isso 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 na entrega 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 é garantir cargas de página subsequentes incrivelmente rápidas. Isso é feito com frontends portáteis criados para velocidade, como o Progressive Web Apps (PWAS). O último pilar é uma CDN moderna com recursos de computação de borda para espremer cada milissegundo possível fora das cargas de página.
Na verdade, o Google recomendou uma jornada ideal para o cliente, na qual um site primeiro entrega uma página AMP para pesquisar usuários e, em seguida, os faz a transição para a versão completa do PWA do site em páginas subsequentes. E como quase metade do tráfego de sites de varejo vem de pesquisa orgânica, o suporte a 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 envolventes 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 de comércio eletrônico corporativos adicionem suporte SSR, que é uma tarefa complexa por conta própria, e mantenham dois sites separados um para o PWA (normalmente escrito em React, Angular, Vue, Next, etc. ou Nuxt) e o outro em AMP HTML.
As PÁGINAS AMP são tão rápidas porque são pré-buscadas, pré-renderizadas e armazenadas em cache por uma CDN (Content Delivery Network). O cache AMP do Google fornece a maioria das páginas AMP.
Assim, as bases da velocidade do site consistem nestes três elementos-chave:
SSR e AMP para primeiras cargas rápidas
A partir do SERP, os usuários 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 controle para fornecer velocidades de navegação instantâneas à medida que o visitante navega através de páginas subsequentes do site. Dessa forma, os consumidores desfrutam de uma experiência aprimorada de cargas de primeira página ultrarrápidas e transições de página instantâneas além da primeira página.
Pré-busca preditiva e CDN moderna
A 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 solicitem. Isso permite que você armazene em cache e atenda o que os consumidores estão esperando – os dados JSON que se traduzem para os diferentes produtos que você tem em estoque, seus preços e informações. É assim que sites de comércio eletrônico e outros sites baseados em banco de dados podem oferecer experiências instantâneas e permanecer 5 segundos à frente dos toques dos consumidores (por exemplo, pré-buscar uma página de descrição do produto na qual um usuário provavelmente clicará antes de clicar no link).
Agora que entendemos os três pilares que formam a base da velocidade do site, podemos mergulhar mais profundamente em cada um.
O que é AMP e como funciona
O Google AMP é uma estrutura de código aberto para criar páginas da Web móveis com tempos de carregamento medianos de 500ms. AMP cria experiências melhores e mais rápidas na web móvel, simplificando o HTML e aplicando limitações rigorosas em 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 cargas de página medianas de 500ms para tráfego do SERP do Google. Essas velocidades são possíveis porque os servidores do Google pré-buscaram e renderizaram conteúdo AMP pré-renderizado 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 do Google (orgânica e paga) responde por aproximadamente 50% de seu tráfego, então esses ganhos podem se aplicar a uma grande porcentagem de seu tráfego.
Os sites que usam AMP também veem benefícios em taxas de rejeição reduzidas, já que os usuários que normalmente podem saltar enquanto esperam que uma página carregue agora serão atendidos com uma experiência extremamente rápida.
Como AMP e PWA muda 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, em seguida, enquanto navega na página AMP, os recursos necessários para a versão PWA do carregamento do site em segundo plano. Dessa forma, quando o usuário toma ação (por exemplo, cliques em qualquer lugar no site), o PWA já começou a pré-carregar o conteúdo para a página subsequente, e a partir daí, todas as transições restantes são transições de navegação renderizadas no lado do cliente e não navegações novas.
Por 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 a criação de duas versões do seu site – uma na linguagem em que seu frontend está escrito (que tende a ser JavaScript-heavy ou CSS-heavy) e outra que segue os padrões do projeto AMP. E é apenas o começo: Cada correção de bug, 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 facilitam muito para os desenvolvedores o suporte a AMP em seus aplicativos React.
Os upstarts do varejo superam seus concorrentes multibilionários
Ao utilizar a tecnologia Layer0 AMP, a Varejista 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 em média 4,8 segundos, e as páginas subsequentes são carregadas em 2,5 segundos.
A AKIRA conseguiu melhorar esses resultados e chegar a cargas de páginas de sub-segundos utilizando tecnologia avançada incorporada ao Edgio (Layer0): um PWA de comércio eletrônico 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 o backend JavaScript sem servidor da Layer0 para frontend para otimizar servidores e APIs.
Com Edgio (Layer0), o Varejista viu um impulso imediato em muitas áreas:
- Os primeiros tempos de carga caíram 70,8% para perto de um segundo
- As transições de navegação caíram para uns impressionantes 500 ms
- Metade das páginas do site agora são carregadas em menos de 500ms
- 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 impulso de 36 pontos, superando 75% dos sites na web e oferecendo uma experiência de navegação aprimorada do cliente.
Leia o estudo de caso completo DA AKIRA.
Annie Selke é outro exemplo estelar de como investir na velocidade do site pode ajudar um Varejista a subir na página de resultados do mecanismo de busca.
Antes de pular em Edgio (Layer0), a Varejista de casa e decoração 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, ela supera seus concorrentes multibilionários.
Se você está interessado, há também um estudo de caso Annie Selke em nosso site onde vamos para o nitty-gritty.
Para varejistas on-line como AKIRA e Annie Selke, um site móvel de bom desempenho é uma fruta de baixo custo. Pode ser exatamente o que eles precisam para enfrentar a concorrência implacável de gigantes de comércio eletrônico como Amazon, Nordstrom e Zappos.
Quanto mais rápido o site, mais alto ele ranqueia, como um instante, SEO garantido. Há muitos exemplos no portfólio 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 com que o eCommerce fique à velocidade:
- PWA de comércio eletrônico com suporte a renderização do lado do servidor e conversão AMP
- Pré-obtenção preditiva
- 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.
Programação 1-on-1 Demo
Agende uma conversa consultiva para saber como o Edgio (Layer0) pode ajudá-lo a obter cargas de páginas de sub-segundos. Clique aqui!
O que é a renderização do lado do servidor e como ela funciona?
A renderização do lado do servidor (também conhecida como SSR )é uma técnica popular para renderizar uma página PWA normalmente somente do lado do cliente no servidor e, em seguida, enviar uma página totalmente renderizada para o navegador. O pacote JavaScript do cliente pode então assumir o controle e o PWA pode operar como normal. SSR essencialmente traduz páginas JavaScript para HTML, uma linguagem que tanto os rastreadores de pesquisa quanto 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 SSR tem um aplicativo que pode ser rastreado e indexado corretamente por cada mecanismo de pesquisa. Isso ajuda com SEO e fornecendo metadados para canais de mídia social.
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 aplicativos não triviais, 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 SSR pronto para uso.
No final, se usar renderização do lado do servidor para o seu site depende de suas necessidades específicas e de quais trade-offs fazem mais sentido para o seu caso de uso.
O que são CDNs modernos e computação de borda?
A computação de borda é 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 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 borda 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 ao 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 é entregue 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 cargas de página mais rápidas. Cada pop contém vários servidores de cache responsáveis pela entrega de conteúdo aos visitantes dentro de sua proximidade.
O CDN-as-JavaScript da Layer0 leva o conceito para outro nível. É uma CDN que reconhece o aplicativo. Ele usa a mesma linguagem que seus desenvolvedores do frontend já conhecem e lhe dá controle total sobre o cache. Como resultado, sites que usam Layer0 veem taxas 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, para que elas sejam 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 usuário e a classificação de pesquisa de um site. 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 Accelerated Mobile Pages (AMP), modernos frontends portáteis, Server-Side Rendering (SSR) e CDNs com recursos de computação de borda.
Layer0 ajuda sites de comércio eletrônico complexos e dinâmicos a chegar a velocidades de sub-segundos, aumentando a velocidade de desenvolvimento e o crescimento de linha de fundo e reduzindo os custos de DevOps. Ele também inclui uma CDN-como-JavaScript que oferece uma taxa de acerto de cache de 95% ou mais para conteúdo dinâmico, em comparação com apenas 15% para outros CDNs.
Layer0 consistentemente fornece cargas de página mediana 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. Esses ganhos de velocidade são conhecidos por levar a 15-30% de elevadores de conversão, melhor visibilidade, alcance e, em última análise, maior taxa de conversão. maior receita.
Agende uma conversa consultiva com um especialista em velocidade do site para ver como podemos ajudá-lo a obter uma vantagem competitiva com um site de comércio eletrônico instantâneo!
