Home Blogs Vendite veloci: L’eCommerce utilizza AMP, SSR, PWA e Edge Computing per passare alla quinta marcia
Applications

Vendite veloci: L’eCommerce utilizza AMP, SSR, PWA e Edge Computing per passare alla quinta marcia

About The Author

Outline

Man mano che la concorrenza nel settore dell’e-commerce cresce sempre più, i retailer sono alla ricerca di nuovi modi per distinguersi e la frontiera competitiva si muove costantemente verso la tecnologia. L’avvento del multicanale ha reso il percorso del cliente molto complesso, ma una cosa è certa: La velocità è più importante che mai. L’annuncio più recente di Google dell’ aggiornamento Page Experience, un nuovo algoritmo di classificazione progettato per giudicare le pagine web in base al modo in cui gli utenti percepiscono l’esperienza di interagire con loro, è un chiaro segno che il gigante della ricerca sta enfatizzando la velocità percepita la velocità alla quale un utente percepisce una pagina come caricata.

Il nuovo percorso del cliente per l’eCommerce è immediato. il 53% dei visitatori abbandonerà un sito web mobile se il caricamento richiede più di tre secondi. Allo stesso tempo, ogni secondo di ritardo nei tempi di caricamento è stato collegato a un calo del 7% delle conversioni. Le nuove tecnologie consentono ora velocità dei siti Web che in precedenza erano impossibili. Con una combinazione di moderni frontend portatili, Server-Side Rendering (SSR), Accelerated Mobile Pages (AMP) e moderne tecnologie CDN, il caricamento di pagine in meno di secondi non è solo possibile, ma sta diventando il nuovo campo di battaglia competitivo nell’eCommerce.

Sommario

  • L’importanza della velocità del sito Web per l’eCommerce
  • Velocità = denaro
  • Cos’è AMP e come funziona
  • Gli upstart retail superano le prestazioni dei concorrenti multimiliardari
  • Cos’è SSR e come funziona?
  • Che cosa sono le CDN moderne e l’edge computing?
  • Riepilogo

L’importanza della velocità del sito Web per l’eCommerce

La velocità del sito Web influisce sull’intera strategia digitale, dalla visibilità (SEO e SEM), al traffico, all’esperienza utente e, in ultima analisi, alle conversioni e ai ricavi. Questo deriva direttamente dalla crescente attenzione di Google sulla mobilità e la velocità.

Il gigante della ricerca ha intrapreso una ricerca decennale per chiarire che la velocità del sito web è importante. Hanno implementato diversi aggiornamenti incentrati sui dispositivi mobili per consolidare l’importanza della velocità dei siti Web mobili come cruciale per classificarsi ai massimi livelli nei risultati di ricerca e nel SEM.

Questi sforzi includono l’indicizzazione mobile-first nel 2016, l’AMP con annunci mobili nel 2017, l’aggiornamento rapido nel 2019 e il prossimo aggiornamento della classifica dell’esperienza della pagina che sarà disponibile all’inizio del 2021. Ultimo ma non meno importante, il Google Badge of Shame presto verrà lanciato e segnalerà siti Web notoriamente lenti e avviserà gli utenti che navigano sul sito dalla pagina dei risultati dei motori di ricerca (SERP).

In tutta onestà, oltre a introdurre modifiche algoritmiche e a mettere in ombra i siti Web per sottolineare il ruolo della velocità del sito, Google ha anche creato una gamma di strumenti per rendere un Web più veloce una realtà. Sono inclusi vari strumenti per facilitare e misurare la velocità del sito Web, come PageSpeed Insights, AMP, Impact Calculator e Mobile Speed Scorecard, solo per citarne alcuni.

Fonte: Test My Site

Test My Site di Google è uno strumento che consente di effettuare una rapida verifica del sito e stimare il potenziale impatto sulle entrate annuali se vengono implementate raccomandazioni sulla velocità del sito.

Lo sforzo per creare questi strumenti è nell’interesse di Google, in quanto il 58% delle ricerche e il 65% delle entrate pubblicitarie della società provengono dai dispositivi mobili.

Programma una demo individuale

Pianifica una conversazione consultiva per scoprire in che modo l’XDN Edgio (Layer0) può aiutarti a caricare pagine in meno di secondi. Fai clic qui!

Velocità = denaro

È risaputo che la velocità del sito web influisce sull’esperienza del cliente e sui ricavi, soprattutto sui dispositivi mobili:Il 70% dei consumatori dichiara che la velocità del sito influisce sulla sua disponibilità all’acquisto. Amazon ha calcolato che un secondo di ritardo nel caricamento delle pagine costerebbe 1,6B di ricavi persi all’anno. Per vendere di più, devi assicurarti che, ovunque un visitatore arrivi, ad esempio, il tuo elenco di prodotti o le pagine di descrizione dei prodotti, il contenuto venga caricato in modo rapido e semplice. Allo stesso modo, il processo di pagamento dovrebbe essere rapido e semplice. Questo crea le basi per il nuovo coinvolgimento e fa sì che l’acquirente sia incline a tornare e acquistare di più da te.

Tuttavia, allo stato attuale delle cose, sta diventando sempre più difficile offrire esperienze mobili veloci. Oltre a siti Web ottimizzati e gonfiati con immagini di grandi dimensioni e codice disordinato, una pagina mobile effettua in media 214 richieste server, di cui un centinaio sono correlati ad annunci pubblicitari. Di conseguenza, una pagina media impiega 15,3 secondi per essere caricata su un dispositivo mobile (4G). Alcuni dei retailer più competitivi possono ridurre i tempi di caricamento delle pagine mobili a soli 3-5 secondi, ma c’è ancora margine di miglioramento. E questo non è un problema che il 5G può risolvere.

È il compromesso inconciliabile tra annunci pubblicitari, personalizzazione, analisi e monitoraggio e un’esperienza utente eccellente

Le basi per la velocità

Il primo elemento fondamentale per la distribuzione di carichi di prima pagina estremamente veloci è l’utilizzo di AMP per il traffico di ricerca e di SSR per gli altri canali. Il secondo passo consiste nel garantire che le pagine successive vengano caricate in modo incredibilmente veloce. Ciò avviene con frontend portatili progettati per la velocità, come ad esempio Progressive Web Apps (PWA). L’ultimo pilastro è una CDN moderna con funzionalità di edge computing per ridurre ogni millisecondo possibile dal caricamento delle pagine.

In effetti, Google ha consigliato un percorso del cliente ideale in cui un sito Web prima distribuisce una pagina AMP per cercare gli utenti e poi li passa alla versione completa PWA del sito nelle pagine successive. E poiché quasi la metà del traffico dei siti Web dei retailer proviene dalla ricerca organica, supportare sia AMP che PWA ha senso.

Questo argomento è stato ampiamente discusso in Google i/o 2017.

Con PWA, gli sviluppatori possono offrire esperienze estremamente coinvolgenti e super veloci che rivaleggiano con le app native. Tuttavia, per quanto riguarda il traffico generato dalla ricerca, AMP è l’opzione più veloce possibile con tempi di caricamento medi di mezzo secondo.

Quindi, in breve, salire più in alto in SERP richiede una combinazione di AMP e SSR per i primi carichi veloci e PWA per transizioni di navigazione estremamente veloci. Il problema è che è più facile a dirsi che a farsi, poiché richiede che i siti Web di eCommerce aziendali aggiungano il supporto SSR, che è un compito complesso da solo, e mantengano due siti Web separati uno per il PWA (in genere scritti in React, Angular, Vue, Next, o Nuxt) e l’altro in AMP HTML.

Le pagine AMP sono così veloci perché sono pre-caricate, pre-renderizzate e memorizzate nella cache da una CDN (Content Delivery Network). La cache AMP di Google fornisce la maggior parte delle pagine AMP.

Quindi, le fondamenta della velocità del sito web sono i seguenti tre elementi chiave:

SSR + AMP per i primi carichi rapidi

Da SERP, gli utenti vengono indirizzati a una versione AMP della pagina per caricamenti della prima pagina incredibilmente veloci. SSR fa lo stesso per i visitatori di ogni altro canale, inclusi e-mail, social network e referral.

Frontend portatile PWA per velocità di navigazione super veloci

PWA assume il controllo per fornire velocità di navigazione istantanee mentre il visitatore naviga attraverso le pagine successive del sito Web. In questo modo, i consumatori possono godere di un’esperienza ottimizzata con caricamenti della prima pagina estremamente veloci e transizioni istantanee della pagina oltre la prima pagina.

Precaricamento predittivo + CDN moderna

Il precaricamento predittivo e una CDN moderna con funzionalità di edge computing consentono di trasmettere dati dinamici all’edge e da lì ai browser degli utenti prima che li richiedano. Ciò consente di memorizzare nella cache e servire ciò che i clienti aspettano: I dati JSON che si traducono nei diversi prodotti in stock, i loro prezzi e le informazioni. È così che i siti web di e-commerce e altri siti web basati su banche dati possono offrire esperienze istantanee e rimanere 5 secondi prima dei controlli dei consumatori (ad esempio, precaricare una pagina di descrizione del prodotto su cui è più probabile che un utente faccia clic prima di fare clic sul link).

Ora che abbiamo compreso i tre pilastri che costituiscono la base della velocità dei siti Web, possiamo approfondire ciascuno di essi.

Cos’è AMP e come funziona

Google AMP è un framework open source per la creazione di pagine Web mobili con tempi di caricamento medi di 500 ms. AMP crea esperienze migliori e più veloci sul Web mobile semplificando l’HTML e applicando rigide limitazioni su CSS e JavaScript. Queste pagine vengono quindi memorizzate nella cache e pre-renderizzate sul server Google, che è il modo in cui vengono distribuite così rapidamente.

I vantaggi di AMP

Le pagine AMP consentono di caricare pagine mediane di 500 ms per il traffico dal SERP di Google. Queste velocità sono possibili perché i server di Google hanno pre-caricato e pre-reso i contenuti AMP nel browser di un utente prima di fare clic sul collegamento alla pagina AMP. Per il sito di e-commerce medio, la ricerca di Google (sia organica che a pagamento) rappresenta circa il 50% del loro traffico, quindi questi guadagni possono essere applicati a una grande percentuale del traffico.

Anche i siti che utilizzano AMP presentano vantaggi in termini di velocità di rimbalzo ridotte, poiché gli utenti che solitamente potrebbero rimbalzare in attesa del caricamento di una pagina ora potranno contare su un’esperienza estremamente veloce.

Come AMP + PWA cambia il gioco

La combinazione AMP e Progressive Web Apps (PWA) copre l’intero percorso del cliente dalla ricerca, rendendolo rapido end-to-end L’acquirente carica la pagina AMP da un SERP di Google, quindi mentre naviga nella pagina AMP vengono caricate in background le risorse necessarie per la versione PWA del sito. In questo modo, quando l’utente interviene (ad esempio, fa clic in un punto qualsiasi del sito) il PWA ha già avuto un vantaggio nel precaricare il contenuto per la pagina successiva e da lì, tutte le transizioni rimanenti sono transizioni di navigazione con rendering sul lato client e non nuove navigazioni.

Perché non tutti usano AMP?

La combinazione AMP e PWA è un abbinamento fatto in paradiso per la velocità, ma è un incubo per lo sviluppo. Supportare efficacemente la tecnologia implica la creazione di due versioni del sito: Una nella lingua in cui è scritto il frontend (che tende ad essere pesante JavaScript o CSS) e un’altra che segue gli standard del progetto AMP. Ed è solo l’inizio: Ogni correzione di bug, modifica del layout, nuova funzionalità, ecc. potrebbe richiedere la propagazione sia ai codebase AMP che PWA.

Il framework React Storefront e Layer0 rendono molto più facile per gli sviluppatori supportare AMP nelle loro app React.

Gli upstart retail superano le prestazioni dei concorrenti multimiliardari

Utilizzando la tecnologia AMP Layer0, il rivenditore di moda AKIRA non solo fornisce i primi carichi istantanei dalla ricerca, ma supera anche Amazon, Nordstrom, Zappos e altri grandi marchi per le frasi chiave.

Prima di utilizzare la tecnologia Layer0, il caricamento della prima pagina di AKIRA ha raggiunto una media di 4,8 secondi, mentre le pagine successive sono state caricate in 2,5 secondi.

AKIRA è stata in grado di migliorare questi risultati e di ottenere caricamenti di pagine in meno di secondi utilizzando la tecnologia avanzata integrata in Edgio (Layer0): PWA e-commerce con rendering lato server e conversione AMP, Layer0 CDN-as-JavaScript offre un tasso di hit rate cache di oltre il 95% per i contenuti dinamici all’edge (e mantiene il sito Web 5 secondi prima dell’acquirente) e il backend JavaScript senza server di Layer0 per il frontend per ottimizzare server e API.

Con Edgio (Layer0) il rivenditore ha visto un immediato aumento in molte aree:

  • I tempi di primo caricamento sono diminuiti del 70,8% a quasi un secondo
  • Le transizioni di navigazione sono scese a 500 ms.
  • Metà delle pagine del sito Web vengono caricate in meno di 500 ms.
  • Il tasso di conversione dei dispositivi mobili è aumentato del 37,25%

Lighthouse è anche un ottimo riflesso di questi miglioramenti: Il punteggio delle prestazioni di AKIRA ha ottenuto un incremento di 36 punti, superando il 75% dei siti Web e offrendo ai clienti un’esperienza di navigazione migliorata.

Leggete il case study completo DI AKIRA.

Annie Selke è un altro esempio lampante di come investire nella velocità dei siti Web può aiutare un rivenditore a scalare la pagina dei risultati dei motori di ricerca.

Prima di passare a Edgio (Layer0), il rivenditore di arredamento e casa Annie Selke non era nemmeno apparso sopra la piega dei risultati di ricerca di Google. Oggi, con un aumento del 32% del traffico organico e del 40,41% del traffico organico mobile, supera i suoi concorrenti multimiliardari.

Se sei interessato, c’e’ anche un caso di studio di Annie Selke sul nostro sito web dove andiamo al Nitty-Gritty.

Per i rivenditori online come AKIRA e Annie Selke, un sito web mobile dalle prestazioni eccellenti è un risultato a basso costo. Può essere proprio quello di cui hanno bisogno per resistere alla concorrenza incessante dei giganti dell’e-commerce come Amazon, Nordstrom e Zappos.

Più veloce è il sito, più alto è il suo livello, come un SEO istantaneo e garantito. Ci sono molti esempi nel portafoglio Edgio (Layer0) che lo dimostrano. AKIRA, Annie Selke e Shoe Carnival sono solo alcuni dei personaggi più famosi, tra cui Amazon.

Layer0 offre una combinazione di tecnologie avanzate per velocizzare l’e-commerce:

  • ECommerce PWA con supporto per il rendering lato server e conversione AMP
  • Precaricamento predittivo
  • CDN-as-JavaScript offre un tasso di hit cache superiore al 95% per contenuti dinamici all’edge, che mantiene il sito Web 5 secondi in anticipo rispetto all’acquirente.
  • Il backend Layer0 Serverless-JavaScript per frontend ottimizza server e API.

Programma una demo individuale

Pianifica una conversazione consultiva per scoprire in che modo Edgio (Layer0) può aiutarti a caricare pagine in meno di secondi. Fai clic qui!

Che cos’è il rendering lato server e come funziona?

Server-side Rendering (noto anche come SSR) è una tecnica comune per il rendering di una pagina PWA normalmente solo lato client sul server e quindi l’invio di una pagina completamente renderizzata al browser. Il pacchetto JavaScript del client può quindi assumere il controllo e il PWA può funzionare normalmente. SSR traduce essenzialmente le pagine JavaScript in HTML, una lingua che sia i crawler di ricerca che i browser sono in grado di comprendere sul server. In questo modo, i browser e i crawler di ricerca possono facilmente distribuire e indicizzare le pagine.

Uno dei principali vantaggi dell’utilizzo di SSR è rappresentato da un’app che può essere sottoposta a scansione e indicizzata correttamente da ogni motore di ricerca. Questo aiuta con SEO e fornisce metadati ai canali dei social media.

I vantaggi di SSR

SSR può anche aiutare con le prestazioni perché un’app completamente caricata viene inviata dal server alla prima richiesta. Per le app non banali, tuttavia, il chilometraggio può variare perché SSR richiede una configurazione che può diventare un po’ complicata e creare un carico di lavoro maggiore sul server. Per fortuna esistono servizi e strumenti, come frontends isomorfi e Layer0 con supporto SSR pronto all’uso.

Alla fine, se utilizzare il rendering lato server per il vostro sito Web dipende dalle vostre esigenze specifiche e da quali compromessi hanno più senso per il vostro caso d’uso.

Che cosa sono le CDN moderne e l’edge computing?

L’edge computing è una filosofia di networking che mira ad avvicinare il computing alla fonte dei dati e a ridurre la latenza e l’utilizzo della larghezza di banda nel processo. L’uso di molte tecnologie diverse può implementare questo. Avvicinando il calcolo alla periferia della rete (computer di un utente, dispositivo IoT o edge server) si riduce al minimo la quantità di comunicazione a lunga distanza che deve avvenire tra un client e un server.

CDN con funzionalità di edge computing Consente di ridurre il tempo di viaggio dai server del sito Web al browser dell’utente, trasmettendo i contenuti al punto di presenza CDN (POP) più vicino all’utente (in modo che un utente di San Francisco distribuisca contenuti da un pop nel sud di San Francisco mentre un utente a New York riceve contenuti da un pop a Brooklyn).

I vantaggi delle CDN con edge computing

Le CDN memorizzano una versione memorizzata nella cache del sito Web in più posizioni per garantire un caricamento più rapido delle pagine. Ogni POP contiene diversi server di memorizzazione nella cache responsabili della distribuzione dei contenuti ai visitatori che si trovano nelle vicinanze.

La CDN-as-JavaScript di Layer0 porta il concetto a un altro livello. Si tratta di una CDN sensibile alle applicazioni che comprende la tua app. Utilizza lo stesso linguaggio che gli sviluppatori frontend già conoscono e ti offre il pieno controllo sulla memorizzazione nella cache. Di conseguenza, i siti Web che utilizzano Layer0 vedono rapporti di successo della cache pari al 95%+ per i contenuti dinamici all’edge.

Le funzionalità di edge computing di Layer0 CDN-as-JavaScript consentono di anticipare di 5 secondi l’acquirente precaricando in modo predittivo le pagine successive più probabili e trasferendole all’edge prima che vengano richieste, in modo che vengano memorizzate nella cache e pronte per l’utente prima di toccare un collegamento.

Riepilogo

I lunghi tempi di caricamento possono rovinare l’esperienza di un utente e il ranking di ricerca di un sito web. AMP risolve una parte di questo problema: Rende la prima pagina della ricerca incredibilmente veloce. Ma questa è solo metà della battaglia. Velocizzare il vostro sito Web richiede un approccio più olistico e una combinazione di tecnologie come AMP (Accelerated Mobile Pages), frontend portatili moderni, SSR (Server-Side Rendering) e CDN con funzionalità di edge computing.

Layer0 consente ai siti di e-commerce complessi e dinamici di raggiungere velocità inferiori al secondo, aumentando al contempo la velocità di sviluppo e la crescita dei profitti e riducendo i costi DevOps. Include anche una CDN-as-JavaScript che offre un tasso di hit cache del 95% o superiore per i contenuti dinamici, rispetto al 15% per le altre CDN.

Layer0 offre costantemente carichi di pagina mediani inferiori a 500 ms per grandi siti di eCommerce con decine di tag e script, per non parlare dei prezzi dinamici e delle ricerche di inventario in tempo reale. Questi guadagni di velocità portano al 15-30% di aumenti di conversione, a una migliore visibilità, sbraccio e, in ultima analisi, maggiori entrate.

Pianifica una conversazione consultiva con un esperto di velocità del sito per scoprire come possiamo aiutarti a ottenere un vantaggio competitivo con un sito Web di e-commerce istantaneo!