O Shopify Plus é uma popular plataforma de comércio eletrónico de SaaS que atraiu algumas das maiores marcas do mundo, como Tesla, Victoria Beckham Beauty, Staples, Oreo/Mondelez e Red Bull A lista continua e continua, e a ampla adoção não é surpresa. O Shopify Plus é simples de usar e facilmente personalizável. Ele oferece uma infinidade de plug-ins e APIs e é apoiado por uma equipe de suporte incrivelmente responsiva. O que mais poderia esperar de uma plataforma de comércio eletrónico? Seja com uma loja da Shopify ou de outra forma, a resposta permanece a mesma: O carregamento de páginas em sub-segundos e o SEO que supera os seus concorrentes.
Mesmo o site mais elegante e bonito do Shopify Plus não terá nenhuma hipótese contra a esmagadora concorrência de grandes retalhistas – a menos que o operador vá além para otimizar o site para velocidades abaixo do segundo.
Tornar a sua loja do Shopify Plus o mais rápido possível é uma das maneiras mais fáceis de fazer com que a sua loja fique mais bem ranqueada em SERPs e aumentar as suas taxas de conversão graças a uma experiência de compra superior e perfeita.
A Shopify permite que você forneça produtos, não experiências
Muitas plataformas de comércio eletrônico como o Shopify Plus, o Magento ou o Salesforce Commerce Cloud foram construídas com uma abordagem de back-end e data-primeiro e muito pouco foco na experiência real do cliente. O foco deles é em SKUs, não em pessoas. Isso sobrecarrega a otimização da velocidade do site em clientes de plataformas, integradores de sistemas, designers e desenvolvedores.
Quer a sua loja seja executada no Shopify Plus ou em qualquer outra plataforma de comércio eletrónico ou sistema de back-end popular, se quiser proporcionar a experiência mais rápida, terá de implementar tecnologias web avançadas focadas na velocidade. Para isso, primeiro você deve ficar sem cabeça.
Os benefícios do eCommerce sem cabeça
Uma arquitetura de eCommerce sem cabeça é aquela em que o design frontend de um site (ou seja, a camada de apresentação) é dissociado da sua infraestrutura de back-end. É um pouco como usar o WordPress para gerir o conteúdo de um aplicativo móvel (pelo que vale a pena, isso é possível com a API REST do WordPress).
Arquitectura de comércio eletrónico tradicional e monolítica
Ir sem cabeça foi identificado como uma das principais iniciativas para muitos retalhistas em 2020 e mais além. Permite que os retalhistas escolham a melhor solução para o seu frontend independentemente do seu back-end para que as lojas possam correr mais depressa, gerando taxas de conversão e melhorias de classificação. O eCommerce sem cabeça, também conhecido como arquitetura de microsserviços, é quase uma maneira segura de ganhar vantagem sobre a concorrência.
Uma camada de API permite a dissociação do frontend de um site do seu back-end
Mais especificamente, o eCommerce sem cabeça oferece vários benefícios:
1. Velocidades mais rápidas
Ir sem cabeça é um pré-requisito para a implementação de muitas tecnologias focadas na velocidade. Isso é possível através da mudança da lógica de exibição para o lado do cliente e da simplificação do back-end para obter o melhor desempenho. Ao concentrar-se apenas na rápida entrega de conteúdo, o frontend pode ser mais rápido e mais ágil do que um que deixa o trabalho duro para o navegador.
2. Liberdade de escolha
Muitas plataformas de comércio eletrónico oferecem aos seus utilizadores frontends proprietários. O Shopify Plus não é diferente e tem uma seleção de temas responsivos com base na linguagem de modelagem líquida da Shopify. Ao ficar sem cabeça, você pode se livrar completamente dos grilhões do fechamento do fornecedor e alcançar além das ferramentas de frontend da plataforma. Isso leva a uma maior agilidade e permite que você desenvolva seu frontend independentemente do roteiro da sua plataforma de comércio eletrônico.
3. Independência de back-end
Um investimento num website sem cabeça prova o futuro da loja. Você possui o código frontend e pode desenvolver e investir nele com confiança. Isso permite que você mova-o para outra plataforma de comércio eletrônico, mais barata ou melhor, sempre que quiser. Nesse caso, mesmo que a sua loja tenha dezenas de integrações com ferramentas de terceiros, elas não precisam de ser reescritas para a nova plataforma de comércio eletrónico. Só é preciso trocar as APIs da antiga plataforma com as da nova.
4. Melhor SEO
Um site sem cabeça não é apenas mais rápido; também tem um melhor SEO. Com um site sem cabeça, você pode escolher como lidar com URLs, metadados, arquivos robots.txt e outros aspetos do seu SEO técnico. O Shopify Plus não suporta isso fora da caixa.
5. Suporte para casos de uso e endpoints futuros
Com um frontend sem cabeça, como o Progressivo Web Apps (DWAs)/Aplicações de uma única página (SPAs), o operador pode preparar a loja para o futuro, adicionar livremente novos endpoints e desenvolver recursos adicionais. Tudo o que você precisa fazer é se conetar a APIs. Você pode adicionar praticamente qualquer dispositivo ou plataforma como um endpoint e fazer check-out para a sua loja sem cabeça.
O segredo por trás das lojas mais rápidas do Shopify Plus
Ir sem cabeça é a base para a implementação de várias tecnologias avançadas da web e técnicas de otimização que ajudam a desenvolver storefronts mais rápidos e mais responsivos. Combinados, eles podem ajudar a otimizar qualquer site do Shopify Plus para velocidade máxima, SEO e receita.
Portáteis PWA frontends
Ao se tornar sem cabeça e acoplar o Shopify Plus com um frontend portátil PWA, você pode obter velocidades de navegação extremamente rápidas no site em dispositivos móveis. Com o PWA, os seus clientes irão desfrutar de uma experiência melhorada de transições de página instantâneas. Tão rápido como as transições de navegação dos PAWA são, as suas primeiras cargas tendem a demorar mais do que os sites tradicionais de várias páginas. Para combater isso e proporcionar uma experiência incrivelmente rápida desde o check-out, considere adicionar renderização do lado do servidor e suporte a AMP ao seu PWA.
Renderização do lado do servidor (SSR)
A renderização do lado do servidor é uma tecnologia web crucial que acompanha os rápidos DWAs. Sem renderização do lado do servidor, o navegador deve baixar, analisar e executar todo o código JavaScript antes de renderizar qualquer coisa na tela. Os PWAS sem SSR lutam para conseguir uma pintura significativa do tempo para a primeira (TTFMP) abaixo de 2,5 s em 3g simulado. Juntamente com uma CDN moderna com recursos de computação de ponta, um site que usa SSR pode atingir tempos TTFMP quase instantâneos.
O SSR garante que os visitantes de e-mail, redes sociais e referências experimentem rápidos primeiros carregamentos. Com suporte a SSR, o PWA oferece 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.
A renderização do lado do servidor também leva a um melhor SEO. As empresas de comércio eletrónico dependem de SEO, e a única maneira de ter 100% de certeza de que o seu site será entendido por robôs de pesquisa e redes sociais e rastreadores é traduzi-lo em HTML.
Isso é especialmente importante se você criar um frontend PWA de eCommerce pesado para o Shopify Plus. Você deve renderizar as suas páginas no servidor porque os rastreadores e bots não indexam de forma confiável o conteúdo JavaScript.
O Shopify Plus não vem com suporte de SSR integrado.
Páginas móveis aceleradas (AMP)
O Google AMP é uma estrutura de código aberto para criar páginas web super-rápidas, simplificando o HTML e aplicando limitações rigorosas em CSS e JavaScript. A página AMP média é carregada em 500 milissegundos a partir da pesquisa. Essas páginas são armazenadas em cache e pré-renderizadas no servidor do Google, que é como elas são entregues rapidamente.
O Shopify Plus não oferece suporte a AMP ou SSR verdadeiro, o que dificulta significativamente a sua capacidade de otimizar o carregamento de primeira página no celular. Você precisará adicionar essas capacidades ao seu site por conta própria. Para AMP e SSR, você vai querer um back-end para frontend. Mais sobre isso está abaixo.
Back-end para Frontend (BFF)
Os BFFs desempenham um papel central no uso de eCommerce sem cabeça e de APIs de arquitetura baseadas em microsserviço. É uma camada discreta na sua pilha de aplicações que permite a um único cliente, por exemplo, um PWA ou uma aplicação móvel Android ou iOS nativa, usar as APIs partilhadas de forma mais eficiente sem as otimizar para cada cliente. “Intercepta” de forma transparente as chamadas da API e traduz os argumentos passados para torná-los compreendidos por um ponto final específico.
O BFF é o lugar perfeito para fazer renderização no lado do servidor e conversão AMP para o frontend. Um BFF também traz muitos outros benefícios para uma loja da Shopify:
BFF e velocidade
Seu frontend pode precisar orquestrar chamadas para vários serviços e/ou reformatar dados de resposta para melhor se adequarem ao design da página, e esse código precisa ser executado em algum lugar. Um BFF permite que você mantenha este código fora do pacote frontend, mantendo-o pequeno e rápido. Na maioria dos casos, as respostas são armazenadas em cache, portanto, em vez de executar esse código de shim no dispositivo de cada usuário em cada solicitação, ele é executado na nuvem, que pode ser dimensionado para atender a demanda e apenas quando há uma falta de cache.
Para clientes móveis, demasiadas solicitações de HTTP são caras em termos de tempo, adicionando milissegundos desnecessários a cada chamada. Para minimizar o número de pedidos, o frontend geralmente tende a obter dados associados através de uma única API. Isso significa que às vezes o back-end será responsável pelo processamento lógico relacionado à interface do usuário para atender às necessidades de cada cliente. Esta é uma abordagem ineficiente.
Com um back-end para frontend implementado, o frontend (móvel, web) só acessa os microsserviços de back-end através do BFF, e cada cliente recebe um serviço BFF separado. Com um BFF, há menos chamadas mútuas entre microsserviços. Isto acontece porque alguma lógica de interface do utilizador é processada ao nível de BFF.
BFF e velocidade de desenvolvimento
Um BFF aumenta a velocidade do programador permitindo que equipas de desenvolvimento distintas trabalhem de forma independente. Permite que os desenvolvedores adicionem novas funcionalidades sem a necessidade de alterar as principais APIs. Isso é especialmente útil se as APIs forem fornecidas pelo Shopify Plus e não puderem ser alteradas.
Minimizar o bloqueio do fornecedor
Se você precisar mudar a Shopify para outra plataforma de comércio eletrônico, um back-end para frontend reduz o esforço e os custos. Isto oferece um enorme benefício na forma da flexibilidade da arquitetura sem cabeça.
Dissociação de frontend e back-end baseado em BFF
Pré-busca preditiva e CDNs com computação de borda
A pré-busca preditiva é uma capacidade avançada usada para pré-armazenar em cache e renderizar os visitantes da página com maior probabilidade de visitar antes de clicar nela. Uma CDN moderna com recursos de computação de borda permite que você transmita dados dinâmicos para a borda e depois para os navegadores dos usuários antes que eles os solicitem. Combinadas, essas tecnologias permitem que a sua loja do Shopify Plus fique 5 segundos à frente do comprador, independentemente de onde eles toquem.
Ao pesquisar e transmitir dados dinâmicos para a borda, você pode armazenar em cache e servir instantaneamente o que os consumidores que navegam na sua loja da Shopify estão esperando – os dados JSON que se traduzem nos diferentes produtos que você tem em estoque, seus preços e informações. Mas para fazer isso, você precisa de uma CDN sofisticada que entenda o seu aplicativo.
Layer0 CDN-as-JavaScript otimiza as taxas de acerto do cache para níveis inéditos e traz inteligência para o limite. Isso ajuda os empresários a decifrar tendências e oportunidades de otimização categorizando páginas semelhantes como tais (por exemplo, PDP, PLP e carrinho) em vez de simplesmente exibir uma lista interminável de URLs. Isso permite que você tome medidas e veja uma diferença nos tempos de carregamento do site.
Layer0 CDN-as-JavaScript tem uma taxa de acerto de 95% de cache para conteúdo dinâmico na borda, enquanto o site de comércio eletrônico médio tem uma taxa de acerto de cache média de 15%. Esta diferença, juntamente com a pré-busca preditiva, mantém grandes sites de comércio eletrônico 5 segundos à frente do comprador, independentemente de onde eles tocam.
Quão difícil é ficar sem cabeça com o Shopify Plus?
Escolher uma plataforma de comércio eletrónico para gerir a sua loja deve ter em conta o suporte da plataforma para sites sem cabeça e as tecnologias que permitem sites de sub-segundos. Muitas plataformas de comércio eletrónico são monolíticas fora da caixa (ou seja, combinam o frontend com o back-end).
Embora não suporte explicitamente a arquitetura sem cabeça, o Shopify Plus permite que os varejistas executem lojas sem cabeça e usem uma estrutura de frontend diferente (como o React Storefront) ou um CMS sem cabeça como o Contentful, que é usado por muitas construções sem cabeça do Shopify.
O Shopify Plus oferece uma coleção proprietária sólida de APIs do StoreFront, tornando possível o acesso ao conteúdo e aos componentes da plataforma.
Por favor, note que o Shopify Plus não suporta oficialmente sites sem cabeça e não oferece muitas capacidades e tecnologias focadas na velocidade fora da caixa. Isto não é surpreendente – a plataforma destina-se a gerir o seu inventário, preços e dados, e implementar estas tecnologias requer muitas vezes muito esforço. No entanto, com algumas ressalvas, o Shopify Plus ainda é uma ótima escolha, pois torna relativamente fácil para os varejistas irem sem cabeça e implementarem táticas chave centradas na velocidade.
Vantagens do Shopify Plus
- Com a API Storefront, o Shopify Plus oferece uma referência decente para produtos e processamento de pedidos, e as APIs estão bem documentadas.
- O Storefront API está disponível no moderno formato à prova de futuro, o GraphQL.
O Shopify Plus contras
- Nenhuma estrutura PWA pronta para uso O Shopify Plus não oferece suporte nativo aos DWAs. No entanto, alguns comerciantes executam DWAs na plataforma. Para tornar isso possível, a loja pode exigir um back-end para o Frontend (BFF), que permite executar microsserviços entre a API da loja e o frontend PWA. Esta é uma maneira de otimizar as APIs e evitar criar as separadas para cada cliente (e minimizar a quantidade de lógica do lado do cliente).
- O Shopify Plus não oferece nenhuma solução proprietária de Páginas Móveis Aceleradas (AMP) (embora a implementação de AMP seja possível com aplicativos pagos do Shopify App Marketplace).
- Embora a Shopify tenha APIs decentes em torno de produtos, e não haja cobertura total de API para muitas outras coisas. Por exemplo, enquanto o painel de controle do Shopify Plus permite que um comerciante defina os itens no menu de navegação do site, não há uma API para obter esses itens de menu. Uma implementação sem cabeça do Shopify Plus não oferece uma maneira limpa de acessá-los sem um pouco de luta de braço e soluções alternativas.
- Limitar o Shopify Plus limita quantas solicitações você pode fazer como um único usuário. O Shopify Plus tem um cabeçalho especial para chamadas de API, portanto a camada BFF não é contada como um único usuário. No entanto, devido aos problemas de cobertura da API mencionados acima, as solicitações podem nem sempre ser chamadas de API reais, e a camada BFF ainda as contará como vindas de um único usuário. Isso acontece mesmo que a camada de tráfego de proxy para muitos usuários.
Como Edgio (Layer0) pode simplificar o processo
Entendemos que ler sobre todas essas siglas tecnológicas de três letras PWA, SSR, AMP e BFF pode fazer a sua cabeça girar, sem mencionar a implementação dessas tecnologias por si só pode ser um pouco complicado. O Edgio (Layer0) lida com tudo isso para você de uma maneira eficiente e escalável que requer pouco ou nenhum DevOps ou manutenção.
Na Edgio (Layer0), dedicamo-nos a ajudar os nossos clientes a ganhar visibilidade, alcance, receita e satisfação do cliente com a única plataforma que garante o carregamento de páginas de sub-segundos para sites de comércio eletrónico baseados em bases de dados.
Ajudamos websites complexos e dinâmicos a atingir velocidades inferiores ao segundo, aumentando a velocidade de desenvolvimento e o crescimento dos resultados e reduzindo os custos de DevOps.
Não ganhamos a menos que os nossos clientes o façam. Temos lojas da Shopify instantâneas em nosso portfólio que deram o salto de fé para garantir sua posição no cenário altamente competitivo de comércio eletrônico.
Como a Planet Blue lançou com sucesso uma loja instantânea do Shopify Plus no Moovweb XDN
O Planet Blue passou de transições de navegação de 16 segundos para 500 milissegundos em Layer0 (Edgio)
A Planet Blue cresceu de um fornecedor de uma única loja de vestuário orgânico com curadoria para um designer internacional e uma loja de vestuário omnichannel. A loja da Shopify instantânea na ç permite-lhes oferecer uma experiência de compra superior.
Antes de ser lançado em tayer0, as páginas móveis do Planet Blue demoraram 10 segundos a carregar. Mais de 70% do tráfego móvel do retalhista afetou seriamente as suas taxas de conversão. A Planet Blue compreendeu que era necessária uma revisão da sua experiência móvel para satisfazer as exigências dos clientes e permanecer competitiva. O lançamento no Layer0 reduziu o tempo de navegação em 95% (16sec → 0,5sec no desktop e 10sec → 0,5sec no celular), dando a impressão de um catálogo online sem atrito à medida que os utilizadores navegam pelo website.
Resultados do Planet Blue com o Layer0:
- Aumento de 31% em relação ao ano anterior na taxa de conversão com um site instantâneo no Layer0
- transições 16s → 0,5s reduzindo as velocidades em 97% no desktop
- transições 10s → 0,5s reduzindo as velocidades em 95% no telemóvel
- mais de 60% de redução no carregamento da primeira página em média entre dispositivos
- mais de 20% de aumento nas classificações de satisfação dos clientes com páginas a carregar num piscar de olhos
- Um PWA de eCommerce incrivelmente rápido construído com o React Storefront
- Renderização do lado do servidor e suporte a AMP
- Pré-busca preventiva
- CDN-as-JavaScript para otimizar as taxas de acerto do cache para conteúdo dinâmico na borda para que a loja possa prever os cliques do comprador 5 segundos à frente.
Resumo
A transição para uma arquitetura de comércio sem cabeça é uma iniciativa de topo para muitos retalhistas: Macy’s, Walmart, Alvo, Nike, Airbnb, e muito mais já fizeram a mudança. A tendência está a ganhar força por três razões principais: Oferece liberdade às limitações das ferramentas de frontend da plataforma de comércio eletrónico, permite a implementação das melhores tecnologias web que aumentam a velocidade do website e o SEO, e permite implementações fáceis de casos de uso futuro.
Com algumas ressalvas discutidas acima, o Shopify Plus se presta bem à construção de uma loja sem cabeça e implementação de tecnologias centradas na velocidade chave. Pode dar-se ao luxo de ser deixado para trás?
