Além da otimização: Os segredos por trás das lojas mais rápidas do Magento 2

Fonte:nngroup.com

Uma loja de comércio eletrónico mais rápida e sem atrito pode mostrar ao utilizador mais produtos numa única sessão. Isto, por sua vez, aumenta as taxas de conversão. Num cenário ideal, a loja e a sua interface devem sair do caminho e ser apenas um pano de fundo para uma ótima experiência de compras.

Além disso, como a maioria das lojas de comércio eletrônico, você provavelmente está oferecendo um produto em um mercado onde as pessoas são muito sensíveis ao preço. O que torna as coisas piores: Os seus concorrentes podem oferecer os mesmos produtos a preços semelhantes. Neste caso, a sua classificação de SEO e experiência no website podem estar entre as poucas maneiras restantes de se diferenciar. E estes dois estão mais ligados do que muitos vendedores percebem.

O Google favorece sites rápidos

Com a atualização da experiência da página do Google ao virar da esquina, é crucial prestar muita atenção à velocidade do seu site. Otimizar sites de comércio eletrônico para velocidade foi identificado como uma das principais iniciativas para muitos varejistas em 2020 e além. E quando a atualização algorítmica da experiência da página for exibida, sites mais lentos vão deslizar rapidamente em classificações de pesquisa e posição de SERP. Agora é a hora de agir.

A primeira página dos resultados de pesquisa do Google recebe quase 95% do tráfego na web, deixando apenas 5% para as restantes páginas de SEP. E embora o Google sempre tenha sido super vago sobre o algoritmo RankBrain e como os seus diferentes componentes foram ponderados, sabemos com certeza que começar a velocidade 2021 vai desempenhar um papel fundamental na classificação da pesquisa. É muito provável que esta seja a primeira vez na história quando o Google está a abrir o quimono nos sinais específicos que afetam os resultados da pesquisa.

Não otimizar a sua loja Magento 2 para velocidade coloca você em risco de perder tráfego orgânico e potenciais clientes. Muitas lojas, mesmo grandes marcas, que não tomam medidas em 2020, podem ver o seu tráfego de pesquisa a diminuir e sofrer perdas substanciais de receitas. Sites que oferecem experiências mais fluidas, melhores e mais rápidas começarão a dominar as palavras-chave orgânicas mais procuradas.

Proporcionar experiências fantásticas, não apenas produtos

Como muitas outras plataformas de comércio eletrônico, o Magento 2 foi originalmente construído com uma abordagem de back-end e data-primeiro, e muito pouco foco na experiência real do cliente final e na velocidade do site. O foco deles é em SKUs, não em pessoas. Isso coloca o fardo da otimização da velocidade do site nos clientes das plataformas, integradores de sistemas, designers e desenvolvedores.

Quer a sua loja funcione no Magento 2 ou em qualquer outra plataforma de comércio eletrónico ou sistema de back-end popular, se quiser oferecer a experiência mais rápida lá fora, terá de implementar tecnologias avançadas focadas na velocidade da web, e para isso, primeiro, deve ficar sem cabeça e construir um frontend portátil.

Para um resumo completo do que é o eCommerce sem cabeça e por que é fundamental para as páginas instantâneas, veja este webinário.

Continue a ler as principais táticas por trás dos sites mais rápidos do Magento.

A tecnologia por trás das lojas Speedy Magento 2

A velocidade do site é especialmente importante para o eCommerce, já que fazer compras online é inerentemente uma experiência muito visual. As lojas são normalmente sites com imagens pesadas e a última coisa que os compradores querem ver é páginas de produtos com carregamento lento, imagens granuladas e jank.

Ao otimizar a sua loja do Magento 2 para velocidade, você pode implementar uma série de táticas para torná-la mais rápida: Usar um tema leve, otimizar imagens, remover o código javascript de bloqueio de renderização, etc. Você pode ter uma equipe inteira otimizando seu site, mas o problema é que todas essas técnicas de otimização de velocidade padrão envolvem ajustes que geralmente acontecem após o toque. Tornar o seu site muito rápido requer uma combinação de tecnologias que funcionam sob o capô antes mesmo de o cliente clicar em qualquer coisa. É preciso passar da reação à torneira para a antecipar (mais sobre isso mais tarde).

Muitas das tecnologias web orientadas para a velocidade exigem separar o back-end do frontend, ou seja, tornar o frontend portátil ou assinar uma arquitetura de comércio sem cabeça. Ficar sem cabeça torna mais fácil usar as melhores soluções para o seu frontend e back-end independentemente um do outro, para que você possa entregar o site mais rápido no back-end de sua escolha.

Uma vez sem cabeça com o seu site de comércio eletrônico do Magento 2, você pode usar um frontend portátil construído para velocidade como um Progressive Web App (PWA). Gerir uma loja sem cabeça do Magento 2 com um frontend PWA requer uma cobertura de API sólida e uma boa documentação.

Ficar sem cabeça também permite que você comece a implementar tecnologias de ponta adicionais que tornarão o seu site incrivelmente rápido, incluindo:

• Frontend portátil para transições rápidas de navegação
• Renderização do lado do servidor (SSR) e suporte para AMP para primeiras cargas extremamente rápidas.
• Pré-busca preventiva
• Uma CDN de última geração com computação de ponta para otimizar as taxas de acerto de cache para conteúdo dinâmico na borda e permanecer 5 segundos à frente do comprador

Vamos investigar o quão adequado é o Magento 2 para implementar essas tecnologias e dar suporte a sites de comércio eletrônico de segunda geração.

1. API do Magento 2

Uma loja sem cabeça liga o frontend à plataforma de comércio eletrónico de back-end através de APIs. Antes de ficar sem cabeça, vale a pena verificar se a sua plataforma de comércio eletrónico tem uma boa cobertura de API e se pode facilmente ligar-se a uma loja de terceiros.

O Magento oferece cobertura de API: Os endpoints SOAP e REST estão disponíveis em todas as versões, e o suporte nativo do GraphQL foi adicionado com a atualização do Magento 2. Os DWAs e os endpoints sem cabeça podem ser criados através da API do GraphQL, no entanto, a personalização do esquema de código e/ou banco de dados da plataforma pode interromper a compatibilidade da API.

• Formatos de API do Magento 1: REST, SOAP
• Formatos de API do Magento 2: REST, SOAP e o mais moderno GraphQL

O Magento 2 torna relativamente fácil criar APIs para suportar websites sem cabeça e DWAs com o GraphQL como uma alternativa às suas APIs web REST e SOAP para desenvolvimento de frontend.

2. Construindo um frontend PWA para o Magento 2

Os frontends portáteis PWA modernos são como aplicativos nativos de muitas maneiras, e seu benefício de velocidade é evidente à medida que explorar o site é mais rápido, o que as pessoas fazem muito quando fazem compras online.

Com uma sensação nativa, um PWA no Magento 2 vai se sentir mais rápido. No entanto, quando a velocidade é mencionada no contexto dos DWAs, é mais sobre estabilidade de layout do que velocidade. À medida que você vai de página em página, essas páginas não se “saltam” como em um site tradicional. E os utilizadores normalmente percebem isso como um carregamento lento de páginas.

Provavelmente já viram isto acontecer muitas vezes, entram num website e depois um anúncio ou um banner carrega alguns segundos depois, e tudo muda, movendo todo o tema para cima ou para baixo. Isso resulta em cliques indesejados, distração e frustração para o comprador.

Um frontend PWA resolve este problema. O Magento PWA Studio é uma coleção de ferramentas que permite aos desenvolvedores criar aplicações web progressivas complexas em cima do Magento 2. Infelizmente, o PWA Studio só está disponível no Magento 2,3 ou superior, versões para as quais a maioria dos vendedores ainda não atualizaram.

Resumindo, aqui estão os prós e os contras de construir um frontend PWA para ficar no topo da sua loja do Magento 2.

Vantagens do Magento 2 em DWAs suportados:

• O Magento oferece algum suporte PWA. O Magento 2 vem com os temas responsivos Base e Luma fora da caixa. Para os PWAS, o Magento 2,3 oferece um kit de ferramentas chamado PWA Studio com um tema base chamado “venia”.
• Melhor estabilidade de layout. Com um PWA frontend, as páginas do Magento 2 são renderizadas mais suavemente, ou seja, as imagens não “saltam” enquanto carregam, mesmo em páginas com imagens pesadas.
• Velocidade. Se o PWA é construído corretamente, torna o site mais rápido.

Por favor, note que as duas últimas vantagens dependem da renderização do lado do servidor, o que é possível, mas nem sempre disponível para interfaces do PWA Studio. Mais sobre isso mais tarde.

Os desafios de oferecer frontends PWA no Magento 2:

• Os PWAS oferecidos nativamente pelo Magento não são muito mais rápidos. Você precisa de uma infraestrutura adequada para se tornar incrivelmente rápido. Às vezes, um PWA pode até abrandar o seu site sem a tecnologia certa para o suportar (como renderização do lado do servidor e CDN com computação de borda). Muitas lojas grandes cometem esse erro. Parece um pouco contra-intuitivo, mas é verdade – você entra no PWA para ganhar velocidade, mas você pode acabar desacelerando o seu site. A nossa análise mostra que os 500 melhores sites de comércio eletrónico dos EUA que fornecem DWAs não carregam muito mais depressa do que os seus homólogos não-PWA, com uma média de cerca de 4 segundos.
• Sem SSR e AMP, o primeiro clique ainda é lento. O Magento PWA Studio não suporta SSR ou AMP fora da caixa, portanto os carregamentos de primeira página não são tão bons. Além disso, a primeira carga não é tão rápida porque quando você acessa um PWA você baixa todo o “aplicativo”. As cargas de DWAs na próxima página são visivelmente mais rápidas do que os sites tradicionais de várias páginas.
• O PWA Studio do Magento é semelhante a outras opções de frontend de código aberto, mas o PWA Studio é voltado especificamente para a plataforma. Isso significa que você permanece preso ao ecossistema do Magento, que desvaloriza um pouco do valor do comércio sem cabeça.
• Construir um PWA no Magento usando o PWA Studio nativo requer uma habilidade e uma cadeia de ferramentas diferentes do desenvolvimento tradicional do Magento.
• O Magento PWA Studio só está disponível no Magento 2,3 ou posterior. A maior parte das lojas do Magento ainda não foi atualizada para o Magento 2,3.

No geral, escolher um framework PWA portátil e de código aberto (ou seja, um framework que não está nativamente embutido na plataforma, mas oferece uma conexão de API natural) é uma opção melhor do que o framework produzido pelo fornecedor que o Magento oferece no PWA Studio.

Frameworks de frontend de terceiros para o Magento 2

As opções de frontend de código aberto e de fornecedor são gratuitas, mas o frontend produzido pelo fornecedor não é portátil. É claro que você provavelmente pode levá-lo para outra plataforma com algum esforço, mas certamente não foi projetado para permitir isso. Os frontends oferecidos pelo vender, como os construídos usando o PWA Studio, são construídos por plataformas de comércio eletrônico para ter uma resposta PWA, não porque eles pretendem deixá-lo levar com você quando você re-plataforma.

Ao procurar um frontend PWA que funcionasse com a sua loja do Magento 2, você está idealmente à procura de um framework isomórfico, ou seja, um que renderize a mesma página em duas versões. Não é preciso escrevê-lo duas vezes, escrevê-lo uma vez. A primeira página é renderizada no lado do servidor, e a navegação é renderizada no lado do cliente.

Há alguns frameworks isomórficos sem cabeça que você pode usar na sua loja do Magento 2 quando não tiver cabeça:

• Next.js – Uma excelente estrutura React para os PWAS criada pela Vercel,
• Nuxt.js – o mesmo que Next.js, mas baseado no vue,
• Reaja Storefront – baseado no Next.js, mas vem com mais recursos de loja, widgets e conetores para certas plataformas como o Magento, o Shopify e o SAP (hybris). Layer0 é um dos principais contribuintes do framework PWA de código aberto React Storefront.
• Angular – permite criar frontends portáteis PWA com renderização do lado do servidor.

Esses quatro frameworks oferecem renderização do lado do cliente e do servidor. Isso significa que não há troca de velocidade para a primeira carga, tanto a primeira como todas as cargas subsequentes na loja serão rápidas. Além disso, sabemos que o Google adora páginas com curtos tempos de renderização, o que dá a aplicativos pesados como lojas menos chances de se posicionar bem sem SSR.

Sites complexos de comércio eletrônico são muitas vezes pesados em JavaScript e precisam de mais esforço do Google para rastrear e fazer sentido deles. Eles vão dizer que não importa, mas o Google não gosta de renderização do lado do cliente. E pode haver erros e problemas se o seu conteúdo não for exibido corretamente. Idealmente, você deve procurar um framework PWA que faça renderização do lado do servidor fora da caixa – e o PWA Studio do Magento não.

Conclusão: A experiência nativa do PWA que você obtém com o PWA Studio no Magento 2,3 não oferece grandes melhorias de velocidade. Mas lançar o Magento PWA Studio no Layer0 vai ter um site mais rápido.

Construindo um Magento 2 mais rápido

Frontends portáteis, sem cabeça, como os PWAS têm muitas vantagens de velocidade. Um bom PWA vai levá-lo de lento para rápido, mas não vai levá-lo instantâneo. Para isso, é necessário combinar corretamente tecnologias de ponta, como:

1. Renderização do lado do servidor (SSR) e AMP

O Magento 2,3 oferece ferramentas limitadas para implementar a renderização do lado do servidor. É implementado através de modelos Moustache como parte da especificação ASCENDENTE do Magento PWA Studio. True SSR executa o código do lado do cliente completo no servidor (não apenas modelos Moustache). Como resultado, o SSR com ASCENDENTE está limitado a áreas específicas (como o shell do aplicativo), ou os desenvolvedores devem duplicar o código tanto no código React do lado do cliente quanto nos modelos Moustache do lado do servidor para cada página ou área que precisa suportar SSR.

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.

Os desafios da implementação de SSR e AMP na loja Magento 2:

• O Magento não oferece suporte embutido para AMP. O suporte a AMP requer extensões de terceiros e/ou a reconstrução do tema existente para adicionar esses recursos por si mesmo. Isso dificulta significativamente a sua capacidade de otimizar as cargas de primeira página no celular.
• No Magento 2, suportar o verdadeiro SSR com UPWARD requer a execução e manutenção de uma frota de servidores Node.js.

2. Uma CDN moderna

Uma rede de distribuição de conteúdo (CDN) pode armazenar arquivos de mídia. Os CDNs foram feitos para fazer o conteúdo do seu site carregar mais rápido (imagens, vídeos e código – JavaScript, CSS – e outras partes do seu site). Quando alguém acessa o seu site, o CDN encurta o caminho para o conteúdo, para que ele não tenha que ser acessado do servidor por todo o país. A CDN coloca-a em todas as grandes cidades, por isso o tempo para aceder a esse conteúdo é muito mais curto. Algumas pessoas podem ter uma CDN, mas nem sequer sabem.

Os CDNs tradicionais são destinados a sites estáticos, para armazenar imagens e texto e outros elementos que não mudam frequentemente. Mas as lojas modernas, com preços dinâmicos e pesquisas de inventário em tempo real, precisam de muito mais do que isso.

Mesmo quando as redes móveis estão a ficar cada vez mais rápidas e temos todas estas velocidades 4G e 5G, os sites móveis continuam a ser as mesmas velocidades, geralmente cerca de 3-5 segundos por carregamento de página. Isso não melhorou muito embora quase todos os principais sites de comércio eletrônico usem uma CDN hoje.

Os desafios de integrar uma CDN com o Magento 2

• A versão local do Magento não vem com uma integração de CDN fora da caixa, embora você ainda possa usar o CDN de sua escolha.
• O Magento Commerce (Cloud) tem um módulo de armazenamento em cache embutido, mas não é uma verdadeira CDN. Falta-lhe os pontos de presença distribuídos (POPs) que uma CDN real teria.

Layer0 CDN-as-JavaScript pode substituir o seu CDN ou trabalhar ao lado dele. Temos quase 100 pops. Os sites no Layer0 veem uma taxa média de acerto de cache de mais de 95% para conteúdo dinâmico na borda.

Agende uma conversa consultiva para saber como o Layer0 pode ajudá-lo a obter carregamentos de páginas inferiores no Magento 2.

Estamos aqui para ajudar

Layer0 torna a rápida e sem cabeça loja Magento super simples, desde o desenvolvimento e implementação até a fácil reversão. Você pode fazer isso para qualquer frontend moderno sem cabeça: Next, Nuxt, React, SAP/Spartacus, React Storefront, Vue Storefront – nós damos suporte a todos eles.

Elevação de velocidade e conversão. Quando combinado, o aumento da taxa de conversão e o aumento orgânico do tráfego geram um efeito sinérgico para o seu site de comércio eletrônico, que se traduzirá diretamente em receita. Ao gerir uma loja mais rápida, não está apenas a ficar mais alto no SERP. Em mercados mais competitivos, significa que os seus concorrentes estão a perder tráfego para o seu website. Os sites na Layer0 veem um aumento médio de 15-30% nas taxas de conversão e no tráfego de busca.

Simplicidade. No Layer0, o nosso objetivo é tornar a Web instantânea e simples, mesmo que estejamos a apoiar a tendência sem cabeça, o que não é uma tarefa simples. Os sites na Layer0 veem um aumento de 20% na velocidade do desenvolvedor e na agilidade empresarial simplesmente por colocar o código no centro do seu fluxo de trabalho com a nossa plataforma JavaScript sem servidor.

Colaboração. Sempre que se escreve um novo código, é gerado automaticamente um ambiente de pré-produção. As pessoas de GQ e as partes interessadas de negócios podem testá-lo e fornecer feedback antes mesmo de o código ser incorporado.

Faça o upgrade do Magento 1 para o Magento 2 em 12 SEMANAS e obtenha um site de sub-segundos.

Verdadeiro Teste A/B. Testes A/B irão abrandar o seu website. Não adianta ter um site otimizado para velocidade e, em seguida, Testes A/B arruinam os seus esforços. Com Layer0 (Edgio), você pode experimentar no seu site, mas ainda assim tê-lo instantâneo. Por exemplo, você pode fazer o canary implanta para 5% dos usuários. Com Layer0, você escreve regras de rota como você escreve seu aplicativo e você tem total controle sobre a divisão de tráfego.

O Layer0 também vem com monitoramento de desempenho e painéis para rastrear tudo.

Escala ilimitada. Mesmo na Black Friday, o Layer0 será dimensionado automaticamente para absorver o aumento do tráfego para a sua loja. Com um terço dos consumidores dos EUA a visitar um website no Layer0 todos os meses, sabe que está em boas mãos.

Segurança. O Layer0 está pronto para empresas, com certificação de nível 1 de PCI, com WAF, DDoS e mitigação de bots suportados fora da caixa.

Como as lojas de sucesso o fazem: A loja instantânea DA AKIRA, no Layer0, 2

Um site de comércio eletrónico instantâneo pode ter um enorme impactos nos seus resultados. Já vimos isso muitas vezes com os nossos clientes. Por exemplo, o gigante dos presentes e das flores, 1-800-flowers, viu um aumento de 50% nas conversões do seu sub-segundo website. Venus Fashion é outro exemplo, a loja de moda passou de 15,25% do seu site a carregar menos de um segundo para 72,75% no Layer0, resultando num aumento de 24% para as conversões.

A loja de moda AKIRA aumentou a sua taxa de conversão em 37,25% com um site de sub-segundos no Layer0. A AKIRA passou instantaneamente por uma combinação de tecnologias avançadas:

• 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 com capacidades de computação de ponta

Os dois primeiros garantem velocidades de página extremamente rápidas desde a chegada até ao check-out. Os dois últimos garantem que o site fique 5 segundos à frente do comprador, prevendo o próximo passo, pré-obtendo os dados do json da borda onde foram armazenados em cache e transmitindo-os para o navegador. Desta forma, o utilizador sente que todo o site já está no seu telemóvel e que já não existe uma noção de “carregamento de página”.

Suporte a AMP sem atrito para tráfego de pesquisa mais rápido e melhor SEO

A AKIRA supera a Amazon, a Nordstrom, a Zappos e outros concorrentes multimilionários por frases-chave. Como? A loja de moda oferece primeiros carregamentos instantâneos a partir da pesquisa utilizando a tecnologia de conversão AMP da React Storefront.

Cada página do site do retalhista recebe uma versão AMP gerada automaticamente. Isto dá ao retalhista a a vantagem competitiva necessária para superar os gigantes do comércio eletrónico com equipas e orçamentos muito maiores dedicados à otimização dos motores de busca.

SSR para tráfego não pesquisado mais rápido

O AKIRA usa a capacidade de renderização integrada do lado do servidor Layer0 para fornecer primeiras cargas instantâneas para canais que não são de pesquisa. Display, social, email, referência e outras médias de tráfego não pesquisado a norte de um segundo, com páginas subsequentes a serem carregadas em 500 ms. Esta é uma vantagem bastante competitiva num mercado que tem uma média de 3-5 segundos por carregamento de página.