Home Artigos técnicos O segredo por trás das lojas Shopify Plus incrivelmente rápidas
Applications

O segredo por trás das lojas Shopify Plus incrivelmente rápidas

About The Author

Outline

O Shopify Plus é uma plataforma de comércio eletrônico SaaS popular 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 plugins e APIs e é apoiado por uma equipe de suporte incrivelmente ágil. O que mais você 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 de sub-segundos e o SEO que supera seus concorrentes.

Mesmo o site mais elegante e bonito do Shopify Plus não terá nenhuma chance contra a concorrência esmagadora de varejistas maiores, a menos que o operador vá além para otimizar o site para velocidades abaixo de segundo.

Tornar sua loja do Shopify Plus o mais rápido possível é uma das maneiras mais fáceis de fazer com que sua loja ranque mais alto em SERPs e eleve suas taxas de conversão graças a uma experiência de compra superior e perfeita.

O Shopify permite que você forneça produtos, não experiências

Muitas plataformas de comércio eletrônico como Shopify Plus, Magento ou Salesforce Commerce Cloud foram construídas com uma abordagem de backend e data-first e muito pouco foco na experiência real do cliente. Seu foco é 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.

Se a sua loja é executada no Shopify Plus ou em qualquer outra plataforma de comércio eletrônico ou sistema de back-end popular, se você quiser oferecer a experiência mais rápida, você precisará implementar tecnologias avançadas de web focadas em velocidade. Para isso, você deve primeiro ir 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 de sua infraestrutura de backend. É um pouco como usar o WordPress para gerenciar o conteúdo de um aplicativo móvel (pelo que vale a pena, isso é possível com a REST API do WordPress).

Arquitetura de comércio eletrônico tradicional e monolítica

Ir sem cabeça foi identificado como uma das principais iniciativas para muitos varejistas em 2020 e além. Ele permite que os varejistas escolham a melhor solução para seu frontend independentemente de seu backend, para que as lojas possam correr mais rápido, 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 o desacoplamento do frontend de um site de seu backend

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 backend para o melhor desempenho. Concentrando-se apenas na rápida entrega de conteúdo, o frontend pode ser mais rápido e mais responsivo 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 usuários 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 bloqueio 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 backend

Um investimento em um site sem cabeça prova o futuro da loja. Você possui o código frontend e pode desenvolver e investir com confiança nele. Isso permite que você mova-o para outra plataforma de comércio eletrônico, mais barata ou melhor quando quiser. Nesse caso, mesmo que sua loja tenha dezenas de integrações com ferramentas de terceiros, elas não precisam ser reescritas para a nova plataforma de comércio eletrônico – você só precisa trocar as APIs da plataforma antiga com as da nova.

4. Melhor SEO

Um site sem cabeça não é apenas mais rápido; ele também tem melhor SEO. Com um site sem cabeça, você pode escolher como lidar com URLs, metadados, arquivos robots.txt e outros aspetos de 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 Progressive Web Apps (PWAS)/Single-Page Applications (SPAs), o operador pode preparar a loja para o futuro, adicionar novos endpoints livremente e desenvolver recursos adicionais. Tudo o que você precisa fazer é conetar-se a APIs. Você pode adicionar praticamente qualquer dispositivo ou plataforma como um endpoint e fazer checkout para 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 máxima velocidade, 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, seus clientes desfrutarão de uma experiência aprimorada de transições de página instantâneas. Tão rápido quanto as transições de navegação dos PWAS, suas primeiras cargas tendem a levar mais tempo do que os sites tradicionais de várias páginas. Para combater isso e fornecer uma experiência incrivelmente rápida desde o desembarque até o checkout, 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 PWAS rápidos. Sem a 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 alcançar um tempo para a primeira pintura significativa (TTFMP) abaixo de 2.5s em 3G simulado. Juntamente com uma CDN moderna com recursos de computação de borda, 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 primeiros carregamentos rápidos. Com suporte a SSR, o PWA oferece 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.

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 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 em JavaScript para o Shopify Plus. Você deve renderizar 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 SSR integrado.

Páginas móveis aceleradas (AMP)

O Google AMP é uma estrutura de código aberto para criar páginas da Web móveis 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 sua capacidade de otimizar cargas de primeira página no celular. Você precisará adicionar esses recursos ao seu site por conta própria. Para AMP e SSR, você vai querer um backend para frontend. Mais sobre isso está abaixo.

Back-end para Frontend (BFF)

Os BFFs desempenham um papel central no uso de APIs de arquitetura baseadas em eCommerce e microsserviços sem cabeça. É uma camada discreta em sua pilha de aplicativos que permite que um único cliente, por exemplo, um PWA ou um aplicativo móvel nativo para Android ou iOS, use APIs compartilhadas de forma mais eficiente sem otimizá-las para cada cliente. Ele “interceta” as chamadas da API de forma transparente e traduz os argumentos passados para torná-los compreendidos por um ponto final específico.

O BFF é o lugar perfeito para fazer renderização do 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 adequar ao design da página, e esse código precisa ser executado em algum lugar. Um BFF permite que você mantenha esse código fora do pacote frontend, mantendo-o pequeno e rápido. Na maioria dos casos, as respostas são armazenadas em cache, então, 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 somente quando houver uma falta de cache.

Para clientes móveis, muitas solicitações HTTP são caras em termos de tempo, adicionando milissegundos desnecessários a cada chamada. Para minimizar o número de solicitações, o frontend geralmente tende a obter dados associados por meio de uma única API. Isso significa que às vezes o backend 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 backend para frontend implementado, o frontend (móvel, web) só acessa os microsserviços de backend através do BFF, e cada cliente recebe um serviço BFF separado. Com um BFF, há menos chamadas mútuas entre microsserviços. Isso ocorre porque alguma lógica de UI é processada no nível BFF.

BFF e velocidade de desenvolvimento
Um BFF aumenta a velocidade do desenvolvedor, permitindo que equipes de desenvolvimento distintas trabalhem de forma independente. Ele permite que os desenvolvedores adicionem novas funcionalidades sem a necessidade de alterar as APIs principais. Isso é especialmente útil se as APIs forem fornecidas pelo Shopify Plus e não puderem ser alteradas.

Minimizando o bloqueio do fornecedor
Se você precisar trocar o Shopify por outra plataforma de comércio eletrônico, um backend para frontend reduz o esforço e os custos. Isso oferece um enorme benefício na forma da flexibilidade da arquitetura sem cabeça.

Dissociação de frontend e backend baseado em BFF

Pré-busca preditiva e CDNs com computação de borda

A pré-busca preditiva é uma capacidade avançada usada para pré-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, em seguida, para os navegadores dos usuários antes que eles solicitem. Combinadas, essas tecnologias permitem que sua loja do Shopify Plus fique 5 segundos à frente do comprador, não importa onde eles toquem.

Ao pré-buscar e transmitir dados dinâmicos para a borda, você pode armazenar em cache e servir instantaneamente o que os consumidores que navegam em sua loja da Shopify estão esperando – os dados JSON que se traduzem para os 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 seu aplicativo.

Layer0 CDN-as-JavaScript otimiza as taxas de acerto do cache para níveis inéditos e traz inteligência para a borda. Isso ajuda os proprietários de negócios a decifrar tendências e oportunidades de otimização categorizando páginas semelhantes como tais (por exemplo, PDP, PLP e Cart) em vez de apenas 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 cache de mais de 95% 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%. Essa diferença, juntamente com a pré-busca preditiva, mantém grandes sites de comércio eletrônico 5 segundos à frente do comprador, não importa onde eles toquem.

Quão difícil é ficar sem cabeça com o Shopify Plus?

Escolher uma plataforma de comércio eletrônico para executar sua loja deve considerar 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 backend).

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 React Storefront) ou um CMS sem cabeça como Contentful, que é usado por muitas compilaçõ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.

Observe que o Shopify Plus não oferece suporte oficial a sites sem cabeça e não oferece muitos recursos e tecnologias focados em velocidade. Isso não é surpreendente – a plataforma destina-se a gerenciar seu inventário, preços e dados, e a implementação dessas tecnologias muitas vezes requer 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 centradas na velocidade.

Prós 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.
  • A API Storefront está disponível no formato moderno e à prova de futuro GraphQL.

Shopify Plus contras

  • O Shopify Plus não oferece suporte nativo aos PWAS. No entanto, alguns comerciantes executam PWAS na plataforma. Para tornar isso possível, a loja pode exigir um backend para Frontend (BFF), que permite executar microsserviços entre a API storefront e o frontend PWA. Essa é uma maneira de otimizar as APIs e evitar a criação de APIs 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 Accelerated Mobile Pages (AMP) (embora a implementação de AMP seja possível com aplicativos pagos do Shopify App Marketplace).
  • Embora o 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 contra o 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, de modo que 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 provenientes 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 todos esses acrônimos de tecnologia de três letras PWA, SSR, AMP e BFF pode fazer sua cabeça girar, sem mencionar a implementação dessas tecnologias por conta própria 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), nos dedicamos a ajudar nossos clientes a ganhar visibilidade, alcance, receita e satisfação do cliente com a única plataforma que garante cargas de páginas secundárias para sites de comércio eletrônico baseados em banco de dados.

Ajudamos sites de comércio eletrônico complexos e dinâmicos a atingir velocidades de sub-segundos, aumentando a velocidade de desenvolvimento e o crescimento dos resultados e reduzindo os custos de DevOps.

Nós não ganhamos a menos que nossos clientes o façam. Temos lojas instantâneas da Shopify em nosso portfólio que deram o salto de fé para garantir sua posição no cenário de comércio eletrônico altamente competitivo.

Como a Planet Blue lançou com sucesso uma loja instantânea do Shopify Plus no Moovweb XDN

Planet Blue passou de transições de navegação de 16 segundos para 500 milissegundos em Layer0 (Edgio)

A Planet Blue cresceu de uma única loja de vestuário orgânico com curadoria para um designer internacional e Varejista de vestuário omnichannel. Sua loja instantânea da Shopify na ç permite que eles ofereçam uma experiência de compra superior.

Antes de ser lançado em tayer0, as páginas móveis do Planet Blue demoraram 10 segundos para carregar. Mais de 70% do tráfego móvel do Varejista impactou seriamente suas taxas de conversão. A Planet Blue entendeu que era necessária uma revisão da sua experiência móvel para atender às demandas 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 on-line sem atrito à medida que os usuários navegam pelo site.

Resultados do Planet Blue com Layer0:

  • Elevação de 31% YoY na taxa de conversão com um site instantâneo no Layer0
  • transições 16s → 0.5s reduzindo velocidades em 97% no desktop
  • transições 10s → 0.5s reduzindo velocidades em 95% no celular
  • mais de 60% de redução em cargas de primeira página em média entre dispositivos
  • aumento de 20% nas classificações de satisfação do cliente com páginas carregadas num piscar de olhos

  • Um PWA de eCommerce incrivelmente rápido construído com React Storefront
  • Renderização do lado do servidor e suporte a AMP
  • Pré-obtenção preditiva
  • CDN-as-JavaScript para otimizar as taxas de acerto de 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 varejistas – Macy’s, Walmart, Target, Nike, Airbnb, e mais já fizeram o interrutor. A tendência está ganhando força por três razões principais: Oferece liberdade das limitações do ferramental frontend da plataforma de eCommerce, permite a implementação de melhores tecnologias web que aumentam a velocidade do site e 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. Você pode se dar ao luxo de ser deixado para trás?