Al culmine degli ordini di ricovero negli Stati Uniti, il 94% della popolazione è stata colpita. Mentre le restrizioni si sono allentate, gli americani scelgono ancora di rimanere al sicuro nelle loro case e fare acquisti online. Con le festività natalizie alle porte, aziende di ogni tipo stanno cercando rapidamente di trovare la soluzione migliore per creare un’esperienza di shopping online di livello superiore.
Scegliere lo stack tecnologico più adatto al tuo sito, uno progettato per le prestazioni, è fondamentale e non è affatto facile. Le aziende devono scegliere la piattaforma di e-commerce, la CDN e il frontend giusti per la propria attività. Abbiamo già confrontato le piattaforme Shopify, Magento 2 e Salesforce Commerce Cloud e le principali CDN. In questo articolo, ci concentreremo sulle prestazioni dei frontend moderni: Angular, Next.js, Nuxt.js, React e Vue.js. È stato rilevato rapidamente che Nuxt.js è il leader del pacchetto, seguito da Vue.js e Next.js. Continuate a leggere per scoprire i nostri risultati dettagliati.
React, Angular, Vue.js, Next.js, Nuxt.js – come si confrontano?
Abbiamo analizzato i punteggi di Lighthouse 6 per un sottoinsieme di quasi 2.000 siti Web ad alto traffico che eseguono Angular, Next.js, Nuxt.js, React e Vue.js per scoprire quale frontend offre i siti Web più veloci. Abbiamo scoperto rapidamente che il punteggio medio di Lighthouse tra i frontend era 24, con una media di 19. Anche se potrebbe sembrare basso, è in realtà superiore del 26% al punteggio medio delle prestazioni dei 500 principali retailer online statunitensi in termini di ricavi.
I siti Web Nuxt.js e Vue.js si sono battuti per offrire i siti Web più veloci. I siti Nuxt.js avevano una media di 27 punti di Lighthouse con una mediana di 22, mentre i siti Vue.js avevano una media di 27, ma una media bassa di 20. Mentre Vue.js ha avuto un paio di straordinari risultati, Nuxt.js si è rivelato il framework più affidabile per la distribuzione dei siti Web a caricamento più rapido.
Il terzo posto è stato Next.js, con un punteggio medio di 23 con una media di 19,5. I siti web angolari hanno visto la stessa media a 23; tuttavia, la distribuzione dei punteggi di performance per i siti angolari era più diversificata e la mediana era inferiore a 18. Il frontend con le prestazioni peggiori è stato sorprendentemente reagito. Ha avuto un punteggio medio di 22 faro e una media di 18, anche se ospita alcuni dei più grandi nomi dell’e-commerce, tra cui Amazon e Groupon.
Nuxt.js è il framework Web di eCommerce più veloce
Nuxt.js è un framework open source senza server basato su Vue.js, Node.js, Webpack e Babel.js creato per creare rapidamente applicazioni isomorfe complesse e veloci. I vantaggi di questo framework includono la suddivisione automatica del codice, la memorizzazione nella cache delle pagine e il precaricamento. Layer0 è orgogliosa di essere uno sponsor di Nuxt.js per contribuire a promuovere framework open source moderni che lavorano per facilitare un Web più veloce. Attualmente, Nuxt.js ha 29.4K stelle su GitHub.
I siti Web che utilizzano Next.js hanno ottenuto un solido punteggio medio di Lighthouse pari a 27, appena un punto al di sopra della media tra i frontend. Il punteggio mediano per i siti Nuxt.js è sceso a 22, il che rappresenta una distribuzione fortemente distorta. Su base percentile, un punteggio di 35 segnò il 75° percentile e un punteggio di 49 segnò il 90° percentile. Questo framework ha avuto meno varianze nei punteggi rispetto ad altri framework, dimostrando la sua capacità di fornire punteggi prestazionali di Lighthouse costantemente prossimi alla media. Tuttavia, questi dati indicano anche che i siti Nuxt.js non sono stati in grado di fornire alti estremi o punteggi quasi perfetti (negli anni ’90), come framework come Vue.js o siti Web Angular, che verranno discussi nelle sezioni successive.
Heavy Industry and Engineering è stata la categoria con i siti Web Nuxt.js più veloci, con una media di 37 risultati, un incredibile 42% più veloce del punteggio medio del suo framework. Le categorie a parte, i siti Web Nuxt.js più veloci erano Appycouple.com, NJtransit.com e WPS.com, che hanno ottenuto rispettivamente 68, 63 e 48. Anche il Trivago.com, il TrueandCo.com e il Garmin.com sono saliti al di sopra della media del quadro di riferimento, con punteggi prestazionali notevoli rispettivamente di 47, 36 e 35. Nintendo è sceso in media con un punteggio di 20, e scendendo al di sotto di un punteggio basso di 10 sono stati Nespresso.com e DolceVita.com.
Vue.js si posiziona come secondo classificato
Vue.js è un framework JavaScript open source per la creazione di applicazioni a pagina singola che sono rapidamente aumentate nel corso di 6 anni dal suo lancio nel 2014. Ha oltre 171.000 stelle su GitHub, rendendolo il framework moderno più popolare. Il suo aspetto principale è che consente agli sviluppatori di creare rapidamente applicazioni JavaScript in rapida crescita. È abbastanza simile a Angular and React in quanto è leggero e offre soluzioni di routing robuste per applicazioni di grandi dimensioni.
I siti Web Vue.js hanno ottenuto il secondo punteggio più alto in termini di prestazioni, con una media di 27 e un punteggio mediano di 20, con la metà dei siti sopra e sotto un punteggio di 20. Su base percentile, il 75% dei siti Vue.js ha ottenuto un punteggio di prestazioni pari o inferiore a 34 e il 90% ha ottenuto un punteggio pari o inferiore a 55.
La categoria di siti web più veloce all’interno di questo dominio sono stati quelli di Hobbies e Leisure, con un punteggio medio di 37, tra cui Nikon e FujiFilm. Le prestazioni di questa categoria sono migliori del 37% rispetto al sito Web Vue.js medio. I primi 3 siti Vue.js più veloci sono stati PaintScratch.com, iMobie.com e EmmaOneSock.com con punteggi rispettivamente di 96, 93 e 92, ovvero punteggi di prestazioni quasi perfette.
Scendendo in classifica, i dati rivelano che FactoryChryslerParts.com hanno ottenuto 68, In-n-Out.com 61, Poshmark.com 53 e LouisVuitton.com 34, superando tutti la media Vue.js. Meno impressionanti sono stati Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com e Chewy.com, con punteggi bassi di 10-15. Chipotle, Subaru e BMW hanno avuto prestazioni ancora peggiori, con punteggi inferiori a 10.
Angle si piazza al terzo posto con pochi punteggi quasi perfetti
Angular è la struttura più antica del gruppo, creata e sviluppata da Google nel 2010 e ha oltre 65.000 stelle su GitHub. Si tratta di una soluzione molto diffusa per i siti Web di grandi aziende che prevedono di scalare rapidamente il proprio sito, poiché Angular è nota per le applicazioni più complesse.
Il punteggio medio delle prestazioni dei siti web Angular è stato di 23 con una media di 18, che indica una distribuzione positivamente distorta. Il 75% dei siti Web Angular ha ottenuto un punteggio Lighthouse pari o inferiore a 30 e il 90% ha ottenuto un punteggio pari o inferiore a 50. A livello categorico, i siti web di salute hanno dato il meglio su questo framework, con un punteggio medio di 28. Alcuni di questi siti di salute includevano CVS.com, VitaminShoppe.com, LifetimeFtiness.com e Plexus.com.
Deichmann.com, MegaBus.com e ShopStyle.com sono stati i primi 3 siti angolari più veloci con punteggi impressionanti di 98, 95 e 83, rispettivamente. Solo altri due siti sono caduti nel quinto percentile di Angular per le prestazioni, che erano Cat.com, una potente compagnia di macchine e motori e AerLingus.com, una compagnia aerea.
Alcuni siti angolari che saltano al di sopra del punteggio medio includevano Android.com a 51, Expedia.com a 44, PepsiCo.com a 42 e Lamborghini.com a 31. Il punteggio medio complessivo di Lighthouse di Angular è arrivato a Sears a 26, Gamefly.com a 25, BaskinRobbins.com a 19, Disney.com a 18 e CocaCola.com a 17. A poco inferiore alla media, sono stati inclusi marchi come Xfinity e Patagonia, con punteggi di 15 e 14. Infine, i dati hanno rivelato che tre compagnie aeree sono i siti web Angular più lenti: Delta at 3, Frontier at 2 e Spirit at 1.
Next.js è inferiore dell’8% al punteggio medio delle prestazioni
Next.js è un framework isomorfico open source basato su React per applicazioni con rendering lato server e ha oltre 52.000 stelle su GitHub. Per garantire un caricamento rapido delle pagine, Next.js suddivide automaticamente il codice e genera dinamicamente l’HTML ogni volta che una nuova richiesta viene inviata con un server.
I siti Web su questo framework hanno ottenuto una media di 22 risultati, pari all’8% in meno rispetto alla media. I dati hanno mostrato che il 50% dei siti Next.js ha ottenuto un punteggio inferiore al 20, il 75% ha ottenuto un punteggio inferiore al 30 e il 90% è sceso al di sotto del 43. Categoricamente, i siti turistici e turistici offrono il meglio con Next.js, ottenendo un punteggio medio di 29. E i tre siti Next.js più veloci sono stati Bartleby.com, Kelloggs.com e Holidayinnclub.com, con 89, 73 e 75 rispettivamente.
RetailMeNot.com e HermanMiller.com hanno superato ciascuno il punteggio medio dei quadri di riferimento di almeno il 21%, mentre Sears.com, AlexanderMcQueen.com, Ticketmaster.com e RedRobin.com forniscono punteggi mediocri rispettivamente di 26, 23, 22 e 22. Alcune grandi aziende con scarse prestazioni includono EddieBauer.com, TragerGrills.com, Bonobos.com e Smirnoff.com, con punteggi compresi tra 10 e 15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com e Farri.com hanno portato a bassi punteggi di Lighthouse sotto i 10.
React ospita marchi straordinari con punteggi non impressionanti
React è una libreria JavaScript open source sviluppata da Facebook nel 2013. A differenza del resto dei framework trattati in questo articolo, React non è un framework, ma una libreria UI per creare in modo semplice e rapido interfacce utente o componenti UI. È uno dei frontend più maturi del gruppo ed è anche uno dei progetti più popolari su GitHub, con più di 155.000 stelle a partire dalla data di pubblicazione di questo blog.
Facebook ha dichiarato che la stabilità è della massima importanza per loro, come grandi aziende come Twitter e Airbnb usano React. È interessante notare che le prestazioni non hanno la stessa priorità. I dati rivelano che i siti Web di React hanno ottenuto una media di 22 punti di Lighthouse, con un calo dell’8% rispetto al punteggio medio complessivo del framework. Ha una media di 18, con il 75% dei suoi siti che ha ottenuto un punteggio inferiore a 29 e il 90% che scende al di sotto di 40.
Apparel, Accessories, and Shoes era la categoria con la più grande quota di domini React, ma la categoria con il punteggio medio più alto di Lighthouse era quella di Mass Merchant, tra cui Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon e Overstock. A parte le categorie, i primi 3 siti Web React più veloci si sono classificati historicrail.com (di proprietà di Amazon) su 98, historicaviation.com (di proprietà di Amazon) su 91 e flipkart.com su 74.
Altri grandi nomi al di sopra della media della biblioteca erano Amazon a 57, VRBO a 49, Priceline a 47, Wayfair a 39, Lowes a 33 e Netflix a 31. I nomi vicini al punteggio medio della biblioteca erano Target a 25, Sur la Tab e StitchFix a 24, Gap e Glossier a 21, Victoria’s Secret a 20 e Crate and Barrel a 19. Alcuni dei maggiori perdenti del settore sono 23andMe.com a 9, Best Buy e Tory Burch a 8, ProFlowers a 6 e Dior a 3.
In sintesi
Google Lighthouse è diventato lo strumento di fatto per molte aziende di e-commerce per misurare le prestazioni dei loro siti web. Un punteggio ad alte prestazioni indica che il tuo sito è veloce da caricare e, soprattutto, soddisfa le aspettative degli utenti.
La velocità dei siti web è più importante che mai, con i consumatori che si connettono ovunque per evitare negozi affollati durante questa pandemia. Le performance dei siti Web possono variare notevolmente a seconda del framework utilizzato, con un notevole impatto sull’esperienza utente. Abbiamo scoperto quale framework fornisce le velocità più elevate analizzando i punteggi delle prestazioni di Lighthouse di quasi 2.000 siti Web altamente trafficati su moderni framework frontend.
I siti Web Nuxt.js offrono le prestazioni più veloci, con un punteggio medio di 27 e una media di 22. Vue.js è stato secondo classificato con lo stesso punteggio medio di 27 e una media di 20. I siti Web Angular e Next.js hanno ottenuto lo stesso punteggio medio di 23, ma Angular ha mantenuto una mediana più alta rendendolo il terzo framework più veloce. Infine, React, sebbene sia il framework più popolare, che produce i punteggi più bassi delle prestazioni, con un punteggio medio di Lighthouse pari a 22.
Lavorare con il livello 0 (ora Edgio)
Layer0 consente ai team di sviluppo di creare e distribuire in modo rapido e semplice app Web native all’edge. Si tratta della piattaforma Jamstack più completa sul mercato, costruita per eseguire oltre 40 framework moderni come React, Angular, Vue e Next.js, ed è in grado di raddoppiare la velocità degli sviluppatori.
Le architetture Web tradizionali sono inoltre supportate per migrare gradualmente verso l’architettura headless. Per i siti che necessitano di flessibilità e modernizzazione, Layer0 aiuta a ridurre i rischi e ad aumentare il ritmo della migrazione senza dover modificare l’architettura sottostante o riscrivere completamente il sito.
