Home Articoli tecnici Il segreto alla base di un Shopify Plus Stores incredibilmente veloce
Applications

Il segreto alla base di un Shopify Plus Stores incredibilmente veloce

About The Author

Outline

Shopify Plus è una popolare piattaforma di e-commerce SaaS che ha attirato alcuni dei più grandi marchi del mondo come Tesla, Victoria Beckham Beauty, Staples, Oreo/Mondelez e Red Bull. L’elenco continua e continua e l’ampia adozione non è una sorpresa: Shopify Plus è semplice da usare e facilmente personalizzabile. Offre una vasta gamma di plugin e API ed è supportato da un team di supporto incredibilmente reattivo. Cos’altro potresti aspettarti da una piattaforma di e-commerce? Che si tratti di un negozio Shopify o di altro tipo, la risposta rimane la stessa: Caricamento di una pagina in meno di secondo e SEO che batte la concorrenza.

Anche il sito Web Shopify Plus più elegante e bello non avrà alcuna possibilità di competere con la concorrenza schiacciante dei rivenditori più grandi, a meno che l’operatore non faccia il possibile per ottimizzare il sito per velocità inferiori ai secondi.

Rendere il tuo negozio Shopify Plus il più veloce possibile è uno dei modi più semplici per far sì che il tuo negozio si posizioni più in alto nelle SERP e innalzi i tassi di conversione grazie a un’esperienza di acquisto di qualità superiore e senza interruzioni.

Shopify ti consente di offrire prodotti, non esperienze

Molte piattaforme di e-commerce come Shopify Plus, Magento o Salesforce Commerce Cloud sono state realizzate con un approccio back-end e data-first e con una scarsa attenzione all’esperienza del cliente. Si concentrano sulle SKU, non sulle persone. Ciò rende più gravosa l’ottimizzazione della velocità dei siti Web per i clienti delle piattaforme, gli integratori di sistemi, i progettisti e gli sviluppatori.

Sia che il tuo negozio funzioni su Shopify Plus o su qualsiasi altra piattaforma di e-commerce o sistema di back-end, se desideri offrire un’esperienza più veloce, dovrai implementare tecnologie Web avanzate incentrate sulla velocità. Per questo, dovete prima andare senza testa.

I vantaggi dell’eCommerce senza testa

Un’architettura eCommerce senza testa è quella in cui il design frontend di un sito (ossia il livello di presentazione) è disaccoppiato dalla sua infrastruttura backend. È un po ‘come usare WordPress per gestire il contenuto di un’app mobile (per quello che vale, questo è possibile con l’API REST DI WordPress).

Architettura di e-commerce monolitica tradizionale

Going Headless è stata identificata come una delle principali iniziative per molti retailer nel 2020 e oltre. Consente ai retailer di scegliere la soluzione migliore per il loro frontend indipendentemente dal backend, in modo che i negozi possano funzionare più velocemente, favorendo i tassi di conversione e migliorando il posizionamento. Headless eCommerce, noto anche come architettura dei microservizi, è quasi un modo sicuro per ottenere un vantaggio sulla concorrenza.

Un livello API consente il disaccoppiamento del frontend di un sito dal suo backend

Più specificamente, l’eCommerce senza testa offre diversi vantaggi:

1. Velocità più elevate

Andare senza testa è un prerequisito per implementare molte tecnologie mirate alla velocità. Ciò è possibile spostando la logica di visualizzazione sul lato client e ottimizzando il backend per ottenere le migliori prestazioni. Concentrandosi solo sulla distribuzione rapida dei contenuti, il frontend può essere più veloce e reattivo di quello che lascia il lavoro al browser.

2. Libertà di scelta

Molte piattaforme di e-commerce offrono ai propri utenti frontend proprietari. Shopify Plus non è diverso e ha una selezione di temi reattivi basati sul linguaggio di template liquidi di Shopify. Andando senza testa, potete liberarvi completamente dalle catene della dipendenza da un unico fornitore e andare oltre gli strumenti di front-end della piattaforma. Questo porta a una maggiore agilità e consente di sviluppare il frontend indipendentemente dalla roadmap della piattaforma di e-commerce.

3) indipendenza del backend

Un investimento in un sito web senza testa rende il negozio a prova di futuro. Possiedi il codice frontend e puoi svilupparlo e investirci con fiducia. Questo ti consente di spostarlo su un’altra piattaforma di e-commerce più economica o migliore quando vuoi. In tal caso, anche se il tuo negozio dispone di dozzine di integrazioni con strumenti di terze parti, non è necessario riscriverle per la nuova piattaforma di e-commerce: Devi solo scambiare le API della vecchia piattaforma con quelle della nuova.

4. SEO migliore

Un sito headless non è solo più veloce; ha anche un SEO migliore. Con un sito Web headless, potete scegliere come gestire URL, metadati, file robots.txt e altri aspetti del vostro SEO tecnico. Shopify Plus non supporta questa funzione immediatamente.

5. Supporto per casi d’uso e endpoint futuri

Con un frontend senza testa come Progressive Web Apps (PWA)/Single-Page Applications (SPA), l’operatore può preparare il negozio a prova di futuro, aggiungere liberamente nuovi endpoint e sviluppare funzionalità aggiuntive. È sufficiente connettersi alle API. Potete aggiungere praticamente qualsiasi dispositivo o piattaforma come endpoint e acquistare il vostro negozio senza problemi.

Il segreto dietro i negozi Shopify Plus più veloci

L’adozione di Headless è la base per l’implementazione di diverse tecnologie Web avanzate e tecniche di ottimizzazione che aiutano a sviluppare vetrine più veloci e reattive. Insieme, possono contribuire a ottimizzare qualsiasi sito Shopify Plus per la massima velocità, SEO e ricavi.

Frontali PWA portatili

Passando senza testa e abbinando Shopify Plus a un frontend portatile PWA, è possibile ottenere velocità di navigazione estremamente elevate sul sito Web sui dispositivi mobili. Con PWA, i tuoi clienti potranno usufruire di un’esperienza ottimizzata di transizioni istantanee delle pagine. Per quanto veloci siano le transizioni di navigazione PWA, i primi caricamenti tendono a richiedere più tempo rispetto ai tradizionali siti Web a più pagine. Per combattere questo problema e fornire un’esperienza incredibilmente veloce dall’atterraggio al checkout, prendi in considerazione l’aggiunta del rendering lato server e del supporto AMP al tuo PWA.

Rendering lato server (SSR)

Il rendering lato server è una tecnologia Web fondamentale che accompagna PWA veloci. Senza il rendering lato server, il browser deve scaricare, analizzare ed eseguire tutto il codice JavaScript prima di eseguire il rendering sullo schermo. I PWA senza SSR faticano a ottenere un tempo per la prima pittura significativa (TTFMP) inferiore a 2,5 s su 3g. simulato Insieme a una CDN moderna con funzionalità di edge computing, un sito che utilizza SSR può raggiungere tempi TTFMP quasi istantanei.

SSR garantisce ai visitatori di e-mail, social media e referral un’esperienza di caricamento rapida. Grazie al supporto SSR, il PWA offre un’esperienza ottimizzata di caricamento della prima pagina e transizioni istantanee della pagina oltre la prima pagina.

Il rendering lato server consente inoltre di migliorare la SEO. Le aziende di e-commerce dipendono dal SEO e l’unico modo per essere sicuri al 100% che il tuo sito sarà compreso dai bot di ricerca e social e dai crawler è tradurlo in HTML.

Questo è particolarmente importante se si crea un frontend PWA di e-commerce con JavaScript per Shopify Plus. È necessario eseguire il rendering delle pagine sul server perché i crawler e i bot non indicizzano in modo affidabile il contenuto JavaScript.

Shopify Plus non viene fornito con il supporto SSR integrato.

AMP (Accelerated Mobile Pages)

Google AMP è un framework open source per la creazione di pagine Web mobili super veloci semplificando l’HTML e applicando rigide limitazioni su CSS e JavaScript. La pagina AMP media viene caricata in 500 millisecondi dalla ricerca. Queste pagine vengono memorizzate nella cache e pre-renderizzate sul server Google, che è il modo in cui vengono consegnate rapidamente.

Shopify Plus non offre il supporto immediato di AMP o SSR effettivo, il che ostacola notevolmente la tua capacità di ottimizzare i caricamenti della prima pagina su dispositivi mobili. È necessario aggiungere queste funzionalità al proprio sito Web per conto proprio. Sia per AMP che per SSR, vorrai un backend per frontend. Ulteriori informazioni sono riportate di seguito.

Back-end per Frontend (BFF)

I BFF svolgono un ruolo centrale nell’utilizzo di API di architettura basata su microservizi e-commerce senza testa. Si tratta di un livello discreto nello stack di applicazioni che consente a un singolo client, ad esempio un’app mobile PWA o Android o iOS nativa, di utilizzare le API condivise in modo più efficiente senza ottimizzarle per ciascun client. Esso «intercetta» in modo trasparente le chiamate API e traduce gli argomenti passati per farli comprendere da un endpoint specifico.

BFF è il luogo perfetto per eseguire il rendering lato server e la conversione AMP per il frontend. Un BFF porta anche molti altri vantaggi a un negozio Shopify:

BFF e velocità
Il frontend potrebbe dover orchestrare le chiamate a più servizi e/o riformattare i dati di risposta per adattarsi al meglio al design della pagina, e questo codice deve essere eseguito da qualche parte. Un BFF consente di tenere questo codice lontano dal bundle frontend, mantenendolo piccolo e veloce. Nella maggior parte dei casi, le risposte sono memorizzabili nella cache, quindi, anziché eseguire questo codice di shimming in ogni dispositivo dell’utente su ogni richiesta, viene eseguito sul cloud, che può scalare per soddisfare la domanda e solo quando manca una cache.

Per i client mobili, troppe richieste HTTP sono costose in termini di tempo, con l’aggiunta di millisecondi non necessari per ogni chiamata. Per ridurre al minimo il numero di richieste, il frontend generalmente tende ad ottenere dati associati tramite una singola API. Ciò significa che a volte il backend è responsabile dell’elaborazione logica correlata all’interfaccia utente per soddisfare le esigenze di ogni client. Questo è un approccio inefficiente.

Con un back-end per il frontend implementato, il frontend (mobile, Web) accede solo ai microservizi back-end tramite il BFF e ogni client riceve un servizio BFF separato. Con un BFF, ci sono meno chiamate reciproche tra microservizi. Questo perché alcune logiche dell’interfaccia utente vengono elaborate a livello BFF.

BFF e velocità di sviluppo
Un BFF aumenta la velocità degli sviluppatori consentendo a team di sviluppo distinti di lavorare in modo indipendente. Consente agli sviluppatori di aggiungere nuove funzionalità senza la necessità di modificare le API principali. Ciò è particolarmente utile se le API sono fornite da Shopify Plus e non possono essere modificate.

Ridurre al minimo la dipendenza da un unico fornitore
Se hai bisogno di passare a Shopify per un’altra piattaforma di e-commerce, un back-end per il frontend riduce lo sforzo e i costi. Ciò offre un enorme vantaggio sotto forma di flessibilità dell’architettura senza testa.

Disaccoppiamento front-end e back-end basato su BFF

Precaricamento predittivo e CDN con edge computing

Il precaricamento predittivo è una funzionalità avanzata utilizzata per pre-cache e rendering della pagina che i visitatori visitano con maggiore probabilità prima di fare clic su di essa. Una CDN moderna con funzionalità di edge computing consente di trasmettere dati dinamici all’edge e quindi ai browser degli utenti prima che li richiedano. Combinate, queste tecnologie consentono al tuo negozio Shopify Plus di rimanere 5 secondi prima dell’acquirente, indipendentemente da dove tocchi.

Grazie al precaricamento e allo streaming dei dati dinamici alla periferia della rete, è possibile memorizzare nella cache e gestire immediatamente ciò che i clienti che navigano nel tuo negozio Shopify aspettano: I dati JSON che si traducono nei diversi prodotti disponibili, i loro prezzi e le informazioni. Ma per fare questo, hai bisogno di una CDN sofisticata che comprenda la tua app.

Layer0 CDN-as-JavaScript ottimizza i rapporti di hit della cache a livelli inauditi e porta l’intelligenza alla periferia della rete. In questo modo, i proprietari delle aziende decifrano le tendenze e le opportunità di ottimizzazione classificando pagine simili come tali (ad esempio PDP, PLP e carrello) invece di visualizzare semplicemente un elenco infinito di URL. In questo modo è possibile agire e vedere una differenza nei tempi di caricamento dei siti Web.

Layer0 CDN-as-JavaScript ha un tasso di hit cache di oltre il 95% per i contenuti dinamici alla periferia della rete, mentre il sito Web di eCommerce medio ha un tasso di hit cache medio del 15%. Questa differenza, insieme al precaricamento predittivo, mantiene i grandi siti Web di e-commerce 5 secondi prima dell’acquirente, indipendentemente da dove toccano.

Quanto è difficile andare senza testa con Shopify Plus?

La scelta di una piattaforma di e-commerce per gestire il tuo negozio dovrebbe tenere in considerazione il supporto della piattaforma per i siti web headless e le tecnologie che consentono i siti sub-secondi. Molte piattaforme di e-commerce sono monolitiche pronte all’uso (ad esempio, combinano il frontend con il backend).

Sebbene non supporti esplicitamente l’architettura headless, Shopify Plus consente ai rivenditori di gestire negozi headless e utilizzare un framework frontend diverso (come React Storefront) o un CMS headless come Contentful, utilizzato da molte build headless Shopify.

Shopify Plus offre una solida raccolta proprietaria di API di storefront, rendendo possibile l’accesso senza precedenti ai contenuti e ai componenti della piattaforma.

Tieni presente che Shopify Plus non supporta ufficialmente i siti Web headless e non offre molte funzionalità e tecnologie pronte all’uso per la velocità. Questo non sorprende: La piattaforma è progettata per gestire l’inventario, i prezzi e i dati e l’implementazione di queste tecnologie richiede spesso molto impegno. Tuttavia, con alcuni accorgimenti, Shopify Plus è ancora un’ottima scelta in quanto consente ai rivenditori di andare senza testa e implementare tattiche chiave incentrate sulla velocità.

Shopify Pro Plus

  • Ottime API per informazioni sui prodotti con Storefront API, Shopify Plus offre un riferimento decente per la gestione dei prodotti e degli ordini e le API sono ben documentate.
  • Formato API GraphQL l’API Storefront è disponibile nel formato moderno e a prova di futuro GraphQL.

Shopify Plus contro

  • Nessun framework PWA pronto all’uso Shopify Plus non supporta i PWA a livello nativo. Tuttavia, alcuni commercianti eseguono PWA sulla piattaforma. Per rendere possibile questo, lo store potrebbe richiedere un back-end per Frontend (BFF), che consente di eseguire microservizi tra l’API storefront e il frontend PWA. Questo è un modo per ottimizzare le API ed evitare di crearne di separate per ogni client (e ridurre al minimo la quantità di logica lato client).
  • No AMP pronto all’uso Shopify Plus non offre alcuna soluzione proprietaria AMP (Accelerated Mobile Pages) (sebbene l’implementazione di AMP sia possibile con le app a pagamento dal Shopify App Marketplace).
  • Copertura API mentre Shopify ha API decenti intorno ai prodotti e non c’è copertura API completa per molte altre cose. Ad esempio, mentre il pannello di controllo Shopify Plus consente a un commerciante di impostare gli elementi nel menu di navigazione del sito, non esiste un’API per ottenere tali elementi di menu. Un’implementazione Headless Shopify Plus non offre un modo pulito per accedervi senza un po’ di lotta al braccio e soluzioni alternative.
  • Strozzamento Shopify Plus limita il numero di richieste che è possibile effettuare come singolo utente. Shopify Plus ha un’intestazione speciale per le chiamate API, quindi il livello BFF non viene conteggiato come un singolo utente. Tuttavia, a causa dei problemi di copertura delle API menzionati in precedenza, le richieste potrebbero non essere sempre chiamate API effettive e il livello BFF le conterà comunque come provenienti da un singolo utente. Questo accade anche se il livello è proxy traffico per molti utenti.

Come Edgio (Layer0) può semplificare il processo

Sappiamo che leggere tutti questi acronimi tecnologici PWA, SSR, AMP e BFF a tre lettere può farti girare la testa, per non parlare dell’implementazione di queste tecnologie da sola potrebbe essere un po’ complicato. Edgio (Layer0) gestisce tutto questo per voi in modo scalabile e performante che richiede poco o nessun DevOps o manutenzione.

In Edgio (Layer0), ci impegniamo ad aiutare i nostri clienti a ottenere visibilità, portata, ricavi e soddisfazione dei clienti con l’unica piattaforma che garantisce il caricamento di pagine in meno di secondi per i siti Web di e-commerce basati su database.

Aiutiamo i siti Web di e-commerce complessi e dinamici a raggiungere velocità inferiori al secondo, aumentando al contempo la velocità di sviluppo e la crescita dei profitti e riducendo i costi DevOps.

Non vinciamo se non lo fanno i nostri clienti. Abbiamo Instant Shopify negozi nel nostro portafoglio che hanno fatto il salto di fiducia per assicurarsi la loro posizione nel panorama altamente competitivo dell’e-commerce.

In che modo Planet Blue ha lanciato con successo un negozio Shopify Plus istantaneo su Moovweb XDN

Planet Blue è passato da transizioni di navigazione di 16 secondi a 500 millisecondi su Layer0 (Edgio)

Planet Blue è cresciuto da fornitore di abbigliamento organico curato in un unico negozio a designer internazionali e rivenditore di abbigliamento omnicanale. Il loro Shopify Store on the j istantaneo consente loro di offrire un’esperienza di acquisto superiore.

Prima del lancio su tayer0, le pagine mobili di Planet Blue impiegavano 10 secondi per caricarsi. Oltre il 70% del traffico mobile del rivenditore ha seriamente influenzato i tassi di conversione. Planet Blue era consapevole della necessità di una revisione della sua mobile experience per soddisfare le esigenze dei clienti e rimanere competitivi. Il lancio su Layer0 ha ridotto il tempo di navigazione del 95% (16 sec → 0,5 sec sul desktop e 10 sec → 0,5 sec sui dispositivi mobili), dando l’impressione di un catalogo online senza problemi quando gli utenti navigano sul sito Web.

Risultati di Planet Blue con Layer0:

  • Aumento del tasso di conversione del 31% su base annua con un sito istantaneo sul Layer0
  • transizioni di 16 s → 0,5 s che riducono la velocità del 97% sui pc desktop
  • transizioni di 10 s → 0,5 s che riducono la velocità del 95% sui dispositivi mobili
  • oltre il 60% di riduzione dei caricamenti della prima pagina in media su tutti i dispositivi
  • aumento del 20%+ nelle valutazioni di soddisfazione dei clienti con il caricamento delle pagine in un batter d’occhio

  • Un PWA eCommerce incredibilmente veloce costruito con React Storefront
  • Rendering lato server e supporto AMP
  • Precaricamento predittivo
  • CDN-as-JavaScript per ottimizzare i tassi di hit della cache per i contenuti dinamici all’edge del negozio, in modo che il negozio possa prevedere i clic dell’acquirente 5 secondi prima.

Riepilogo

Il passaggio a un’architettura commerciale senza testa è un’iniziativa importante per molti rivenditori: Macy’s, Walmart, Target, Nike, Airbnb, e molti altri hanno già fatto il cambio. La tendenza sta prendendo piede per tre motivi principali: Offre libertà dai limiti degli strumenti frontend della piattaforma di e-commerce, consente l’implementazione di tecnologie web migliori che aumentano la velocità dei siti web e il SEO, e consente facili implementazioni di casi d’uso futuri.

Con alcune avvertenze discusse in precedenza, Shopify Plus si presta bene alla creazione di un negozio senza testa e all’implementazione di tecnologie chiave incentrate sulla velocità. Potete permettervi di essere lasciati indietro?