Mentre la concorrenza nell’e-commerce diventa sempre più forte, i retailer sono alla ricerca di nuovi modi per distinguersi e la frontiera competitiva si sposta 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’ultimo annuncio di Google relativo all’aggiornamento dell’esperienza di pagina , un nuovo algoritmo di classificazione progettato per giudicare le pagine web in base a come gli utenti percepiscono l’esperienza di interazione con loro, è un chiaro segno che il gigante della ricerca sta sottolineando la velocità percepita – la velocità con cui un utente percepisce una pagina come caricata.
Il nuovo customer journey per l’eCommerce è immediato. il 53% dei visitatori abbandona un sito web mobile se il caricamento richiede più di tre secondi. Allo stesso tempo, ogni ritardo di un secondo nei tempi di caricamento è stato collegato a un calo del 7% nelle conversioni. Le nuove tecnologie stanno ora consentendo velocità dei siti Web che in precedenza erano impossibili. Con una combinazione di frontend portatili moderni, Rendering lato server (SSR), Accelerated Mobile Pages (AMP) e moderne tecnologie CDN, i caricamenti di pagine inferiori al secondo non sono solo possibili, ma stanno diventando il nuovo campo di battaglia competitivo nell’eCommerce.
Sommario
- L’importanza della velocità del sito Web per l’e-commerce
- Velocità = denaro
- Cos’è l’AMP e come funziona
- I riavvii del settore retail superano i loro concorrenti multimiliardari
- Cos’è SSR e come funziona?
- Che cosa sono le moderne CDN e l’edge computing?
- Riepilogo
L’importanza della velocità del sito Web per l’e-commerce
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. Ciò deriva direttamente dalla crescente attenzione di Google verso il mobile e la velocità.
Il gigante della ricerca ha intrapreso una missione decennale per chiarire che la velocità del sito è importante. Hanno implementato diversi aggiornamenti focalizzati sui dispositivi mobili per consolidare l’importanza della velocità del sito Web mobile come cruciale per il posizionamento in alto nei risultati di ricerca e nel SEM.
Queste iniziative includono l’indicizzazione mobile-first nel 2016, AMP con annunci mobili nel 2017, l’aggiornamento della velocità nel 2019 e il prossimo aggiornamento della classifica dell’esperienza di pagina che sarà disponibile all’inizio del 2021. Infine, ma non meno importante, il Google Badge of Shame verrà presto lanciato e contrassegnerà siti Web notoriamente lenti e avviserà gli utenti che navigano verso il sito dalla pagina dei risultati dei motori di ricerca (SERP).
In tutta onestà, oltre a introdurre modifiche algoritmiche e a mettere in discussione i siti web per sottolineare il ruolo della velocità del sito, Google ha anche creato una serie 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, il Calcolatore d’impatto e la Mobile Speed Scorecard, per citarne alcuni.
Fonte: Test My Site
Test My Site di Google è uno strumento che consente di eseguire un rapido controllo del sito e stimare il potenziale impatto sulle entrate annuali se vengono implementate le raccomandazioni sulla velocità del sito.
Lo sforzo di creare questi strumenti è nell’interesse di Google, in quanto il 58% delle ricerche e il 65% delle entrate pubblicitarie dell’azienda provengono da dispositivi mobili.
Demo 1-on-1 pianificata
Pianificate una conversazione consultiva per scoprire in che modo Edgio (Layer0) XDN può aiutarvi a caricare pagine di secondo. 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 afferma che la velocità del sito influisce sulla loro disponibilità all’acquisto. Amazon ha calcolato che un secondo di ritardo nel caricamento delle pagine costerebbe $1,6 miliardi di ricavi persi all’anno. Per vendere di più, è necessario assicurarsi che ovunque un visitatore atterri, ad esempio, l’elenco dei 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 veloce e semplice. Questo crea le basi per il nuovo impegno e rende l’acquirente incline a tornare e acquistare di più da te.
Tuttavia, allo stato attuale delle cose, sta diventando sempre più difficile fornire esperienze mobili veloci. Oltre a siti web gonfiati e mal ottimizzati con immagini sovradimensionate e codice disordinato, una pagina mobile fa in media 214 richieste di server , di cui cento sono legate agli annunci pubblicitari. Di conseguenza, una pagina media impiega 15,3 secondi per essere caricata su un dispositivo mobile (su 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, personalizzazione, analisi e monitoraggio e un’eccellente esperienza utente
La base per la velocità
Il primo elemento fondamentale per la distribuzione di caricamenti della prima pagina estremamente veloci è utilizzare AMP per il traffico di ricerca e SSR per gli altri canali. Il secondo passo è garantire un caricamento delle pagine incredibilmente rapido. Ciò avviene con frontend portatili progettati per la velocità, come Progressive Web Apps (PWA). L’ultimo pilastro è una CDN moderna con funzionalità di edge computing per ridurre ogni millisecondo possibile i carichi di pagine.
In effetti, Google ha consigliato un percorso del cliente ideale in cui un sito Web distribuisce prima una pagina AMP per cercare gli utenti e poi li trasferisce alla versione PWA completa del sito nelle pagine successive. E poiché quasi la metà del traffico dei siti Web dei retailer proviene da ricerche organiche, supportare sia AMP che PWA ha senso.
Questo argomento è stato ampiamente discusso in Google i/o 2017.
Con i 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 poche parole, salire più in alto in SERP richiede una combinazione di AMP e SSR per i primi carichi veloci e PWA per transizioni di navigazione super veloci. Il problema è che è più facile a dirsi che a farsi, in quanto richiede ai siti web di eCommerce aziendali di aggiungere il supporto SSR, che è un compito complesso da solo, e mantenere due siti web separati uno per il PWA (in genere scritto in React, Angular, Vue, Next o Nuxt) e l’altro in AMP HTML.
Le pagine AMP sono così veloci perché vengono pre-caricate, pre-rendering e memorizzate nella cache da una CDN (Content Delivery Network). La cache AMP di Google offre la maggior parte delle pagine AMP.
Quindi, le basi della velocità del sito Web consistono in questi tre elementi chiave:
SSR + AMP per i primi carichi rapidi
Da SERP, gli utenti vengono indirizzati a una versione AMP della pagina per caricare la prima pagina in modo incredibilmente veloce. SSR fa lo stesso per i visitatori di tutti gli altri canali, inclusi e-mail, social e referral.
Frontend portatile PWA per velocità di navigazione super veloci
PWA subentra per fornire velocità di navigazione immediate mentre il visitatore naviga attraverso le pagine successive del sito Web. In questo modo, i consumatori possono usufruire di un’esperienza ottimizzata con caricamenti della prima pagina estremamente veloci e transizioni istantanee della pagina oltre la prima pagina.
Prefetching predittivo + CDN moderna
Il prefetching 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 lo richiedano. Ciò consente di memorizzare nella cache e servire ciò che i consumatori stanno aspettando: I dati JSON che si traducono nei diversi prodotti disponibili in magazzino, i loro prezzi e le informazioni. È così che i siti web di e-commerce e altri siti web basati su database possono offrire esperienze istantanee e rimanere 5 secondi avanti rispetto al tocco dei consumatori (ad esempio, precarica una pagina di descrizione del prodotto su cui un utente è più probabile che 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’è l’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 severe limitazioni a CSS e JavaScript. Queste pagine vengono quindi memorizzate nella cache e pre-rendering 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 il contenuto AMP nel browser di un utente prima di fare clic sul collegamento della 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 tuo traffico.
Anche i siti che utilizzano AMP presentano vantaggi in termini di velocità di rimbalzo ridotte, in quanto gli utenti che in genere rimbalzano in attesa del caricamento di una pagina ora avranno un’esperienza estremamente veloce.
Come AMP + PWA cambia il gioco
La combinazione di AMP e Progressive Web Apps (PWA) copre l’intero percorso del cliente dalla ricerca, rendendolo veloce end-to-end L’acquirente carica la pagina AMP da un SERP di Google e, durante l’esplorazione della pagina AMP, le risorse necessarie per la versione PWA del caricamento del sito in background. In questo modo, quando l’utente interviene (ad esempio fa clic in un punto qualsiasi del sito), il PWA ha già avuto un vantaggio sul precaricamento del contenuto per la pagina successiva e da lì, tutte le transizioni rimanenti sono transizioni di navigazione effettuate sul lato client e non nuove navigazioni.
Perché non tutti usano AMP?
La combinazione di AMP e PWA è una partita fatta in paradiso per la velocità, ma è un incubo per lo sviluppo. Il supporto della tecnologia implica in modo efficace la creazione di due versioni del sito, una nella lingua in cui è scritto il frontend (che tende ad essere pesante in 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 di essere propagata sia ai codebase AMP che PWA.
Il framework React Storefront e Layer0 rendono molto più semplice per gli sviluppatori supportare AMP nelle loro app React.
I riavvii del settore retail superano i loro concorrenti multimiliardari
Utilizzando la tecnologia Layer0 AMP, 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 frasi chiave.
Prima di utilizzare la tecnologia Layer0, la prima pagina di AKIRA viene caricata in media in 4,8 secondi, mentre le pagine successive vengono caricate in 2,5 secondi.
AKIRA è stata in grado di migliorare questi risultati e ottenere caricamenti di pagine inferiori al secondo utilizzando la tecnologia avanzata integrata in Edgio (Layer0): Un PWA di eCommerce con rendering lato server e conversione AMP, Layer0 CDN-as-JavaScript che offre un tasso di hit di cache superiore del 95% per contenuti dinamici all’edge (e mantenere il sito Web 5 secondi prima dell’acquirente) e il backend JavaScript Serverless di Layer0 per frontend per ottimizzare server e API.
Con Edgio (Layer0) il rivenditore ha visto una spinta immediata in molte aree:
- I primi tempi di caricamento sono diminuiti del 70,8% fino a quasi un secondo
- Le transizioni di navigazione sono scese a un incredibile valore di 500 ms.
- La metà delle pagine del sito Web viene caricata in meno di 500 ms.
- Il tasso di conversione mobile è 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 un’esperienza di navigazione migliore per i clienti.
Leggi il case study completo DI AKIRA .
Annie Selke è un altro esempio stellare di come investire nella velocità del sito Web possa aiutare un rivenditore a salire sulla pagina dei risultati dei motori di ricerca.
Prima di passare a Edgio (Layer0), la casa e la casa di arredamento Annie Selke non è nemmeno apparsa al di sopra dei risultati di ricerca di Google. Oggi, con un aumento del 32% del traffico organico e un aumento 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 nel dettaglio.
Per i rivenditori online come AKIRA e Annie Selke, un sito Web mobile dalle prestazioni eccellenti è un risultato a portata di mano. Può essere proprio ciò di cui hanno bisogno per resistere alla concorrenza incessante di giganti dell’eCommerce come Amazon, Nordstrom e Zappos.
Più veloce è il sito, più alto è il posizionamento, come un SEO immediato e garantito. Ci sono molti esempi nel portafoglio Edgio (Layer0) che lo dimostrano. AKIRA, Annie Selke e Shoe Carnival sono solo alcuni dei nomi più famosi, tra cui Amazon.
Layer0 offre una combinazione di tecnologie avanzate per accelerare l’eCommerce:
- PWA eCommerce con supporto di rendering lato server e conversione AMP
- Precaricamento predittivo
- CDN-as-JavaScript che offre un tasso di hit della cache superiore del 95% per contenuti dinamici all’edge della rete, mantenendo il sito Web 5 secondi prima dell’acquirente.
- Layer0 Serverless-JavaScript backend per frontend ottimizza server e API.
Demo 1-on-1 pianificata
Pianificate una conversazione consultiva per scoprire in che modo Edgio (Layer0) può aiutarvi a caricare pagine di meno di secondo. Fai clic qui!
Che cos’è il rendering lato server e come funziona?
Il rendering lato server (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 con rendering completo al browser. Il pacchetto JavaScript del cliente può quindi subentrare e il PWA può funzionare normalmente. SSR traduce essenzialmente le pagine JavaScript in HTML, un linguaggio che sia i crawler di ricerca che i browser comprendono sul server. In questo modo, i browser e i crawler di ricerca possono distribuire e indicizzare facilmente le pagine.
Uno dei principali vantaggi dell’utilizzo di SSR è un’app che può essere sottoposta a scansione e indicizzata correttamente da ogni motore di ricerca. Questo aiuta con SEO e fornendo metadati ai canali di social media.
I vantaggi di SSR
SSR può anche aiutare a migliorare le prestazioni perché un’app completamente caricata viene inviata dal server alla prima richiesta. Tuttavia, per le applicazioni non banali, il chilometraggio può variare perché SSR richiede una configurazione che può complicarsi e creare un carico di server maggiore. Per fortuna ci sono servizi e strumenti, come frontend isomorfi e Layer0 con supporto SSR immediato.
Alla fine, l’utilizzo del rendering lato server per il sito Web dipende dalle esigenze specifiche e dai compromessi più appropriati per il caso di utilizzo.
Che cosa sono le moderne CDN e l’edge computing?
L’edge computing è una filosofia di networking che mira a 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 obiettivo. Avvicinando il calcolo all’edge della rete (computer di un utente, dispositivo IoT o edge server) si riduce al minimo la quantità di comunicazioni 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 in streaming il contenuto al più vicino punto di presenza CDN (POP) all’utente (in modo che un utente di San Francisco distribuisca contenuti da un POP a San Francisco mentre un utente di New York riceve contenuti da un POP a Brooklyn).
I vantaggi delle CDN con l’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 caching responsabili della distribuzione dei contenuti ai visitatori nelle vicinanze.
CDN-as-JavaScript di Layer0 porta il concetto a un altro livello. È una CDN sensibile alle applicazioni che comprende la tua app. Utilizza lo stesso linguaggio che gli sviluppatori frontend già conoscono e offre il pieno controllo sulla memorizzazione nella cache. Di conseguenza, i siti Web che utilizzano Layer0 vedono un tasso di hit della cache pari al 95%+ per i contenuti dinamici all’edge della rete.
Le funzionalità di edge computing di Layer0 CDN-as-JavaScript ti consentono di anticipare di 5 secondi l’acquirente, precaricando in modo predittivo le pagine successive più probabili e trasmettendole in streaming all’edge prima che vengano richieste, in modo che siano memorizzate nella cache e pronte per l’utente prima che tocchi un collegamento ad esse.
Riepilogo
I lunghi tempi di caricamento possono compromettere l’esperienza dell’utente e la classifica 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. Per aggiornare il vostro sito Web è necessario fare di più e adottare un approccio più olistico: Una combinazione di tecnologie come AMP (Accelerated Mobile Pages), frontend portatili moderni, SSR (Server-Side Rendering) e CDN con funzionalità di edge computing.
Layer0 aiuta 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. Include anche una CDN-as-JavaScript che offre un tasso di hit della cache pari o superiore al 95% per i contenuti dinamici, rispetto a appena il 15% per le altre CDN.
Layer0 fornisce costantemente caricamenti di pagine mediane inferiori a 500 ms per siti Web di e-commerce di grandi dimensioni con decine di tag e script, per non parlare dei prezzi dinamici e delle ricerche di inventario in tempo reale. Questi guadagni in termini di velocità portano a aumenti di conversione del 15-30%, maggiore visibilità, portata e, in ultima analisi, maggiori ricavi.
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!
