Oltre l’ottimizzazione: I segreti dietro i più veloci negozi Magento 2

Fonte:nngroup.com

Un negozio di eCommerce più veloce e senza problemi può mostrare all’utente più prodotti in un’unica sessione. Questo, a sua volta, aumenta i tassi di conversione. In uno scenario ideale, il negozio e la sua interfaccia dovrebbero uscire di mano e costituire solo lo sfondo per una grande esperienza di shopping.

Inoltre, come la maggior parte dei negozi di eCommerce, molto probabilmente stai offrendo un prodotto in un mercato in cui le persone sono molto sensibili ai prezzi. Ciò che peggiora le cose: I vostri concorrenti potrebbero offrire gli stessi prodotti a prezzi simili. In questo caso, il tuo posizionamento SEO e l’esperienza del sito Web potrebbero essere tra i pochi modi rimanenti per differenziarti. E questi due sono più connessi di quanto molti venditori si rendano conto.

Google favorisce siti Web veloci

Con l’aggiornamento dell’esperienza Google Page dietro l’angolo è fondamentale prestare molta attenzione alla velocità del tuo sito web. Ottimizzare la velocità dei siti Web di e-commerce è stata identificata come una delle principali iniziative per molti retailer nel 2020 e oltre. E quando l’aggiornamento algoritmico dell’esperienza di pagina viene implementato, i siti più lenti scivolano rapidamente nelle classifiche di ricerca e nella posizione SERP. E’ giunto il momento di agire.

La prima pagina dei risultati di ricerca di Google riceve quasi il 95% del traffico web, lasciando solo il 5% per le restanti pagine SERP. E mentre Google è sempre stato molto vago riguardo al loro algoritmo RankBrain e a come sono stati ponderati i suoi diversi componenti, sappiamo per certo che la velocità di partenza 2021 svolgerà un ruolo chiave nella classifica di ricerca. Questa è molto probabilmente la prima volta nella storia quando Google apre il kimono sui segnali specifici che influenzano i risultati della ricerca.

La mancata ottimizzazione della velocità del tuo negozio Magento 2 ti mette a rischio di perdere traffico organico e potenziali clienti. Molti negozi, anche i grandi marchi, che non intervengono nel 2020, potrebbero vedere il traffico di ricerca diminuire e subire notevoli perdite di ricavi. I siti Web che offrono esperienze più fluide, migliori e più veloci inizieranno a dominare le parole chiave organiche più ricercate.

Offrire esperienze straordinarie, non solo prodotti

Come molte altre piattaforme di e-commerce, Magento 2 è stato originariamente costruito con un approccio back-end e data-first, e con pochissima attenzione all’esperienza del cliente finale e alla velocità del sito Web. Si concentrano sulle SKU, non sulle persone. Ciò pone il peso dell’ottimizzazione della velocità dei siti web sui clienti delle piattaforme, sugli integratori di sistemi, sui progettisti e sugli sviluppatori.

Sia che il tuo negozio esegua Magento 2 o qualsiasi altra piattaforma di eCommerce o sistema di back-end, se vuoi offrire l’esperienza più veloce sul mercato, dovrai implementare tecnologie Web avanzate incentrate sulla velocità e per questo devi prima andare headless e creare un frontend portatile.

Per un riepilogo completo di ciò che è l’e-commerce headless e del perché è fondamentale per caricare pagine istantanee, guardate questo webinar.

Continuate a leggere per scoprire le tattiche principali dietro i siti Web Magento più veloci.

La tecnologia alla base dei negozi Speedy Magento 2

La velocità del sito è particolarmente importante per l’e-commerce, in quanto lo shopping online è di per sé un’esperienza visiva molto coinvolgente. I negozi sono in genere siti Web ricchi di immagini e l’ultima cosa che gli acquirenti desiderano vedere è il caricamento lento delle pagine dei prodotti, le immagini sgranate e jank.

Per ottimizzare la velocità del tuo negozio Magento 2, puoi implementare una serie di tattiche per velocizzarlo: Utilizza un tema leggero, ottimizza le immagini, rimuovi il codice javascript che blocca il rendering e così via Puoi avere un intero team che ottimizza il tuo sito web, ma il problema è che tutte queste tecniche standard di ottimizzazione della velocità comportano modifiche che di solito accadono dopo il tap. Rendere il vostro sito Web davvero veloce richiede una combinazione di tecnologie che funzionano sotto il cofano prima che il cliente faccia clic su qualsiasi cosa. È necessario passare dalla reazione al tocco all’anticipazione (ulteriori informazioni in seguito).

Molte delle tecnologie web orientate alla velocità richiedono la separazione del backend dal frontend, ovvero rendere il frontend portabile, o l’iscrizione a un’architettura di commercio headless. L’headless semplifica l’utilizzo delle migliori soluzioni per frontend e backend indipendentemente l’uno dall’altro, in modo da poter offrire il sito Web più veloce sul backend di vostra scelta.

Una volta eseguito l’headless con il sito Web di e-commerce Magento 2, è possibile utilizzare un frontend portatile progettato per la velocità come un’app Web Progressive (PWA). L’esecuzione di un negozio Magento 2 headless con un frontend PWA richiede una solida copertura API e una buona documentazione.

L’headless ti consente inoltre di iniziare a implementare tecnologie all’avanguardia aggiuntive che renderanno il tuo sito Web incredibilmente veloce, tra cui:

• Frontend portatile per transizioni di navigazione rapide
• Rendering lato server (SSR) e supporto AMP per i primi caricamenti super veloci.
• Precaricamento predittivo
• Una CDN all’avanguardia con edge computing per ottimizzare i tassi di hit della cache per i contenuti dinamici all’edge della rete e rimanere 5 secondi prima dell’acquirente

Esaminiamo quanto Magento 2 sia adatto per l’implementazione di queste tecnologie e il supporto di siti Web di e-commerce sub-secondi.

1. API Magento 2

Un negozio headless collega il frontend alla piattaforma di eCommerce di back-end tramite API. Prima di passare a headless, vale la pena verificare se la tua piattaforma di eCommerce ha una buona copertura API e se puoi facilmente connetterti a uno storefront di terze parti.

Magento offre una copertura API: Gli endpoint SOAP e REST sono disponibili in tutte le versioni e il supporto GraphQL nativo è stato aggiunto con l’aggiornamento Magento 2. I PWA e gli endpoint headless possono essere creati tramite l’API GraphQL, tuttavia la personalizzazione del codice della piattaforma e/o dello schema del database può compromettere la compatibilità delle API.

• Formati API Magento 1: REST, SOAP
• Formati API Magento 2: REST, SOAP e il più moderno GraphQL

Magento 2 rende relativamente facile creare API per supportare siti Web headless e PWA con GraphQL come alternativa alle API Web REST e SOAP per lo sviluppo frontend.

2) costruire un frontend PWA per Magento 2

I frontend portatili PWA moderni sono come le app native in molti modi e il loro vantaggio in termini di velocità è evidente poiché esplorare il sito Web è più veloce, cosa che le persone fanno molto quando fanno acquisti online.

Con un’atmosfera nativa, un PWA su Magento 2 si sentirà più veloce. Tuttavia, quando la velocità è menzionata nel contesto dei PWA, si tratta più di stabilità di layout che di velocità. Mentre vai da pagina a pagina, queste pagine non “rimbalzano” come su un sito web tradizionale. “E gli utenti percepiscono questo “rimbalzo” come un caricamento lento delle pagine.”

Probabilmente hai visto questo accadere molte volte: Inserisci un sito Web e poi un annuncio o un banner viene caricato un paio di secondi dopo, e tutto cambia, spostando l’intero tema verso l’alto o verso il basso. Ciò si traduce in scatti non intenzionali, distrazioni e frustrazione per l’acquirente.

Un frontend PWA risolve questo problema. Magento PWA Studio è una raccolta di strumenti che consente agli sviluppatori di creare complesse applicazioni Web progressive su Magento 2. Sfortunatamente, PWA Studio è disponibile solo su Magento 2,3 o versioni successive, versioni a cui la maggior parte dei venditori deve ancora eseguire l’aggiornamento.

Per riassumere, ecco i pro e i contro della costruzione di un frontend PWA che si sieda in cima al tuo negozio Magento 2.

Vantaggi di Magento 2 nei PWA supportati:

• Magento offre supporto PWA. Magento 2 include i temi reattivi base e Luma già pronti all’uso. Per i PWA, Magento 2,3 offre un toolkit chiamato PWA Studio con un tema di base chiamato “venia”.
• Migliore stabilità del layout. “Con un frontend PWA Magento 2 le pagine vengono visualizzate in modo più fluido, ovvero le immagini non “rimbalzano” durante il caricamento, anche su pagine con un elevato numero di immagini.”
• Velocità. Se il PWA è costruito correttamente, rende il sito Web più veloce.

Si noti che gli ultimi due vantaggi si basano sul rendering lato server, che è possibile ma non sempre disponibile per i frontend di PWA Studio. Più avanti.

Le sfide legate alla fornitura di frontend PWA su Magento 2:

• I PWA offerti nativamente da Magento non sono davvero più veloci. È necessaria un’infrastruttura adeguata per diventare incredibilmente veloce. A volte un PWA può persino rallentare il vostro sito Web senza la tecnologia appropriata per supportarlo (ad esempio, rendering lato server e CDN con edge computing). Molti grandi negozi fanno questo errore. Sembra un po’ controintuitivo, ma è vero: Si entra nel PWA per guadagnare velocità, ma si potrebbe finire per rallentare il tuo sito web. La nostra analisi mostra che i primi 500 siti web di eCommerce degli Stati Uniti che forniscono PWA non si caricano molto più velocemente delle loro controparti non PWA, con una media di circa 4 secondi.
• Senza SSR e AMP il primo clic è ancora lento. Magento PWA Studio non supporta SSR o AMP immediatamente, quindi i caricamenti della prima pagina non sono così grandi. Inoltre, il primo carico non è così veloce perché quando si accede a un PWA si scarica l’intera “app”. I caricamenti di pagine successive di PWA sono notevolmente più veloci rispetto ai tradizionali siti Web a più pagine.
• PWA Studio di Magento è simile ad altre opzioni frontend open source, ma PWA Studio è specificamente orientato per la piattaforma. Ciò significa che rimanete bloccati nell’ecosistema del Magento, che schiaccia parte del valore del commercio senza testa.
• La creazione di un PWA su Magento utilizzando il PWA Studio nativo richiede competenze e toolchain diversi rispetto allo sviluppo Magento tradizionale.
• Magento PWA Studio è disponibile solo su Magento 2,3 o versioni successive. La maggior parte dei negozi Magento non è ancora stata aggiornata a Magento 2,3.

Nel complesso, la scelta di un framework PWA open source e portatile (ovvero, un framework che non sia integrato nativamente nella piattaforma ma che offra una connessione API naturale) è un’opzione migliore rispetto al framework prodotto dal fornitore che Magento offre in PWA Studio.

Framework frontend di terze parti per Magento 2

Le opzioni di frontend open source e offerte dal fornitore sono gratuite, ma il frontend prodotto dal fornitore non è portatile. Naturalmente, è possibile probabilmente portarlo su un’altra piattaforma con un certo sforzo, ma di certo non è stato progettato per consentire questo. I frontend offerti dal fornitore, come quelli realizzati utilizzando PWA Studio, sono costruiti da piattaforme di e-commerce per avere una risposta PWA, non perché intendono permettervi di portarla con voi quando rieseguite la piattaforma.

Quando cerchi un frontend PWA che funzioni con il tuo negozio Magento 2, sei idealmente alla ricerca di un framework isomorfico, cioè uno che renda la stessa pagina in due versioni. Non devi scriverlo due volte, lo scrivi una volta. La prima pagina viene resa sul lato server e la navigazione viene eseguita sul lato client.

Ci sono alcuni framework isomorfi headless che puoi utilizzare per il tuo negozio Magento 2 una volta che vai headless:

• Next.js – un ottimo framework React per i PWA creato da Vercel,
• Nuxt.js – uguale a Next.js, ma basato su Vue,
• React Storefront – basato su Next.js ma dotato di più funzionalità, widget e connettori per alcune piattaforme come Magento, Shopify e SAP (Hybris). Layer0 è uno dei principali contributori del framework open source PWA React Storefront.
• Angolare: Consente di creare frontend PWA portatili con rendering lato server.

Questi quattro framework offrono il rendering lato client e lato server. Ciò significa che non vi è alcun compromesso di velocità per il primo carico: Sia il primo che tutti i successivi carichi nel punto vendita saranno veloci. Inoltre, sappiamo che Google ama le pagine con tempi di rendering brevi, il che offre ad applicazioni pesanti come i negozi minori possibilità di posizionarsi bene senza SSR.

I siti di e-commerce complessi sono spesso pesanti da JavaScript e necessitano di maggiore impegno da parte di Google per eseguire la scansione e dare un senso a tali siti. Diranno che non importa, ma a Google non piace il rendering lato client. E possono verificarsi bug e problemi se i contenuti non vengono visualizzati correttamente. Idealmente, dovreste cercare un framework PWA che esegua il rendering sul lato server immediatamente disponibile, e PWA Studio di Magento non lo fa.

In conclusione: L’esperienza PWA nativa che si ottiene con PWA Studio su Magento 2,3 non offre enormi miglioramenti in termini di velocità. Ma il lancio di Magento PWA Studio su Layer0 vi farà ottenere un sito Web più veloce.

Costruire un Magento 2 più veloce

I frontend senza testa, portatili come i PWA, offrono molti vantaggi in termini di velocità. Un buon PWA ti porterà da lento a veloce, ma non ti farà arrivare istantaneamente. A tal fine, è necessario combinare correttamente tecnologie all’avanguardia, quali:

1. Rendering lato server (SSR) e AMP

Magento 2,3 offre strumenti limitati per l’implementazione del rendering lato server. È implementato attraverso i modelli di baffi come parte delle specifiche di Magento PWA Studio. True SSR esegue l’intero codice lato client sul server (non solo i modelli baffi). Di conseguenza, SSR con VERSO L’ALTO è limitato ad aree specifiche (come la shell dell’app), oppure gli sviluppatori devono duplicare il codice sia nel codice React lato client che nei modelli baffi lato server per ogni pagina o area che deve supportare SSR.

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

Le sfide dell’implementazione di SSR e AMP nel negozio Magento 2:

• Magento non offre supporto integrato per AMP. Il supporto di AMP richiede estensioni di terze parti e/o la ricostruzione del tema esistente per aggiungere queste funzionalità autonomamente. Ciò ostacola notevolmente la possibilità di ottimizzare i caricamenti della prima pagina su dispositivi mobili.
• In Magento 2, il supporto di True SSR con VERSIONI SUPERIORI richiede l’esecuzione e la manutenzione di un parco di server Node.js.

2) una CDN moderna

Una CDN (Content Delivery Network) può memorizzare i file multimediali. Le CDN sono state create per velocizzare il caricamento dei contenuti del vostro sito Web (immagini, video e codice—JavaScript, CSS—e altri elementi del vostro sito Web). Quando qualcuno accede al tuo sito web, la CDN accorcia la strada ai contenuti, in modo che non debba essere accessibile dal server in tutto il paese. La CDN lo colloca in ogni grande città, quindi il tempo per accedere a tali contenuti è molto più breve. Alcune persone possono avere una CDN, ma non lo sanno nemmeno.

Le CDN tradizionali sono concepite per i siti Web statici, per archiviare immagini, testo e altri elementi che non cambiano spesso. Ma i negozi moderni, con prezzi dinamici e ricerche in tempo reale dell’inventario, hanno bisogno di molto di più.

Anche quando le reti mobili diventano sempre più veloci e abbiamo tutte queste velocità 4G e 5G, i siti Web mobili rimangono sempre alla stessa velocità, di solito circa 3-5 secondi per caricamento pagina. Questo non è migliorato anche se quasi tutti i principali siti di e-commerce utilizzano una CDN oggi.

Le sfide dell’integrazione di una CDN con Magento 2

• La versione locale di Magento non è dotata di integrazione CDN immediata, sebbene sia comunque possibile utilizzare la CDN desiderata.
• Magento Commerce (Cloud) ha un modulo di caching integrato, ma non è una vera CDN. Manca dei POP (Distributed Points of Presence) che una vera CDN avrebbe.

Layer0 CDN-as-JavaScript può sostituire la CDN o lavorare insieme. Abbiamo quasi 100 POP. I siti Web su Layer0 registrano un tasso medio di hit della cache pari al 95%+ per i contenuti dinamici all’edge della rete.

Pianificate una conversazione consultiva per scoprire in che modo Layer0 può aiutarvi a caricare pagine di meno di secondo su Magento 2.

Siamo qui per aiutare

Layer0 rende estremamente semplice avere uno store Magento veloce e senza headless, dallo sviluppo e la distribuzione a semplici rollback. È possibile farlo per qualsiasi frontend headless moderno: Next, Nuxt, React, SAP/Spartacus, React Storefront, Vue Storefront, tutti supportati.

Velocità e conversione sollevamento. Se combinati, l’aumento del tasso di conversione e l’aumento del traffico organico generano un effetto sinergico per il sito di e-commerce, che si traduce direttamente in entrate. Eseguendo un negozio più veloce, non solo si ottiene un livello superiore nel SERP. In mercati più competitivi, ciò significa che i vostri concorrenti stanno perdendo traffico sul vostro sito Web. I siti Web su Layer0 registrano un aumento medio del 15-30% dei tassi di conversione e del traffico di ricerca.

Semplicità. A Layer0, il nostro obiettivo è rendere il Web istantaneo e semplice, anche se stiamo supportando la tendenza headless, che non è un compito semplice. I siti Web su Layer0 registrano un aumento del 20% della velocità degli sviluppatori e dell’agilità aziendale grazie alla semplice collocazione del codice al centro del flusso di lavoro con la nostra piattaforma JavaScript senza server.

Collaborazione. Ogni volta che si scrive un nuovo codice, viene generato automaticamente un ambiente di pre-produzione. Il personale addetto al controllo della qualità e gli stakeholder aziendali possono testarlo e fornire un feedback prima ancora che il codice venga Unito.

Passate da Magento 1 a Magento 2 in 12 settimane E otterrete un sito Web in meno di secondo.

Test A/B vero. I test a/B rallenteranno il tuo sito Web. Non avrebbe senso avere un sito web ottimizzato per la velocità e poi i test A / B rovinano i vostri sforzi. Con Layer0 (Edgio), puoi sperimentare sul tuo sito web ma lo hai ancora istantaneo. Ad esempio, è possibile eseguire distribuzioni canary per il 5% degli utenti. Con Layer0, si scrivono regole di instradamento come scrivere l’applicazione e si ha il pieno controllo sulla suddivisione del traffico.

Layer0 è dotato anche di monitoraggio delle prestazioni e dashboard per monitorare tutto.

Scalabilità illimitata. Anche durante il Black Friday, Layer0 scalerà automaticamente per assorbire l’aumento del traffico verso il tuo negozio. Con un terzo degli acquirenti statunitensi che visitano un sito web su Layer0 ogni mese, sai che sei in buone mani.

Sicurezza. Layer0 è predisposto per le aziende, certificato PCI livello 1 DSS con supporto immediato di WAF, DDoS e mitigazione dei bot.

Come i negozi di successo lo fanno: Il negozio Magento 2 istantaneo DI AKIRA sul Layer0

Un sito Web di e-commerce istantaneo può avere un impatto enorme sui vostri profitti. Lo abbiamo visto molte volte con i nostri clienti. Ad esempio, il gigante dei regali e dei fiori, 1-800-Flowers ha visto un aumento del 50% nelle conversioni dal suo sito web sotto il secondo. Venus Fashion è un altro esempio, il rivenditore di moda è passato dal 15,25% del caricamento del suo sito Web in meno di un secondo al 72,75% sul Layer0, con un conseguente aumento del 24% delle conversioni.

Il rivenditore di moda AKIRA ha aumentato il tasso di conversione del 37,25% con un sito Web di secondo livello su Layer0. AKIRA ha subito sperimentato una combinazione di tecnologie avanzate:

• Un PWA di eCommerce incredibilmente veloce costruito con React Storefront
• Rendering lato server e supporto AMP
• Precaricamento predittivo
• CDN-as-JavaScript con funzionalità di edge computing

I primi due garantiscono una velocità di pagina estremamente elevata dall’arrivo al pagamento. Gli ultimi due garantiscono che il sito Web rimanga 5 secondi prima dell’acquirente, prevedendo la sua prossima mossa, precaricando i dati JSON dall’edge in cui sono stati memorizzati nella cache e trasmettendoli in streaming al browser. In questo modo l’utente si sente come se l’intero sito fosse già sul proprio telefono e non ci fosse più la nozione di un “caricamento di pagina”.

Supporto AMP senza attrito per un traffico di ricerca più veloce e un SEO migliore

AKIRA supera Amazon, Nordstrom, Zappos e altri concorrenti da miliardi di dollari per frasi chiave. Come? Il rivenditore di moda fornisce i primi carichi istantanei dalla ricerca utilizzando la tecnologia di conversione AMP di React Storefront.

Ogni pagina del sito Web del rivenditore riceve una versione AMP generata automaticamente. Ciò offre al rivenditore il vantaggio competitivo necessario per superare i giganti dell’eCommerce con team e budget molto più ampi dedicati all’ottimizzazione dei motori di ricerca.

SSR per un traffico non di ricerca più veloce

AKIRA utilizza la funzionalità di rendering integrata Layer0 lato server per fornire primi caricamenti istantanei per i canali non di ricerca. Media del traffico di visualizzazione, social, e-mail, referral e altro tipo non di ricerca a nord di un secondo, con pagine successive caricate in 500 ms. Si tratta di un vantaggio competitivo considerevole in un mercato che ha una media di 3-5 secondi per ogni pagina di caricamento.