Al culmine degli ordini di ricovero in loco degli Stati Uniti, il 94% della popolazione è stata colpita. Mentre le restrizioni si sono allentate, gli americani ancora scelgono di rimanere al sicuro all’interno delle loro case e fare acquisti online. Con il periodo delle festività alle porte, aziende di ogni tipo stanno rapidamente cercando di trovare la soluzione migliore per creare un’esperienza di shopping online di qualità superiore.
La scelta dello stack tecnologico giusto per il vostro sito, 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 frontends moderni: Angular, Next.js, Nuxt.js, React e Vue.js. Abbiamo scoperto rapidamente che Nuxt.js è il leader del gruppo, seguito da Vue.js e Next.js. Continuate a leggere per scoprire i risultati dettagliati.
React, Angular, Vue.js, Next.js, Nuxt.js – come si confrontano?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Abbiamo analizzato i punteggi di Lighthouse 6 per dispositivi mobili 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 quali frontend offrono i siti Web più veloci. Abbiamo subito scoperto che il punteggio medio di Lighthouse sui frontends era 24, con una mediana di 19. Anche se potrebbe sembrare basso, in realtà è superiore del 26% rispetto al punteggio medio delle prestazioni per i principali 500 rivenditori Internet statunitensi per fatturato.
I siti Web Nuxt.js e Vue.js si sono battuti per offrire i siti Web più veloci. I siti Nuxt.js hanno ottenuto in media un punteggio Lighthouse di 27 con una media di 22, mentre i siti Vue.js hanno una media di 27 ma una media bassa di 20. Mentre Vue.js aveva un paio di valori anomali impressionanti, Nuxt.js si è dimostrato il framework più affidabile per la distribuzione dei siti Web con caricamento più rapido.
Al terzo posto è stato Next.js, con un punteggio medio di prestazione di 23 con una mediana di 19,5. I siti web angolari hanno visto la stessa media a 23; tuttavia, la distribuzione dei punteggi delle prestazioni per i siti angolari era più diversificata e la mediana è scesa a 18. Il frontend con le peggiori prestazioni è stato sorprendentemente reagito. Ha avuto un punteggio medio di Lighthouse di 22 e una mediana di 18, anche se ospita alcuni dei più grandi nomi dell’eCommerce, tra cui Amazon e Groupon.
“Il nostro sito Web è il punto di accesso del nostro marchio e deve offrire prestazioni ottimali per favorire conversioni e ricavi. Con la piattaforma di applicazioni Edgio, il nostro sito è ora estremamente veloce e i nostri rilasci sono diventati molto più facili da implementare”.
Joe Schmo – Sviluppatore di software
Nuxt.js è il framework Web di e-commerce 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 Nuxt.js per contribuire a promuovere framework open source moderni che lavorano per facilitare un Web più veloce. Attualmente, Nuxt.js ha 29 stelle su GitHub.
I siti Web che utilizzano Next.js avevano un punteggio medio di Lighthouse di 27, appena un punto sopra la media tra i frontend. Il punteggio mediano per i siti Nuxt.js è sceso a 22, rappresentando una distribuzione positivamente distorta. Su base percentile, un punteggio di 35 segnò il 75° percentile e il punteggio di 49 segnò il 90° percentile. Questo framework presentava meno varianze nei punteggi rispetto ad altri framework, dimostrando la sua capacità di fornire punteggi delle prestazioni Lighthouse costantemente prossimi alla media. Tuttavia, questi dati ci dicono anche che i siti Nuxt.js non sono stati trovati in grado di fornire valori massimi estremi o punteggi quasi perfetti (negli anni ’90), come framework come Vue.js o siti Web angolari, che verranno discussi nelle sezioni successive.
Heavy Industry and Engineering è stata la categoria con i siti Web Nuxt.js più veloci, con un punteggio medio di prestazioni di 37, un incredibile 42% più veloce del solo punteggio medio del framework. A parte le categorie, i siti Web Nuxt.js più veloci sono stati Appycouple.com, NJtransit.com e WPS.com, che hanno totalizzato 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, con punteggi di performance notevoli rispettivamente di 47, 36 e 35. Nintendo è sceso alla media con un punteggio di 20, e non avendo ottenuto un punteggio minimo di 10 sono stati Nespresso.com e DolceVita.com.
Scopri i prodotti per applicazioni Edgio per prestazioni migliori
Applicazioni
Riduzione della latenza, miglioramento delle prestazioni
Prestazioni
Rispondi ai dati in tempo reale per app o giochi di chat dal vivo.
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 in popolarità nel corso di 6 anni dal suo lancio nel 2014. Ha più di 171.000 stelle su GitHub, il che lo rende 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 e React in quanto è leggero e offre solide soluzioni di routing per applicazioni di grandi dimensioni.
I siti web Vue.js hanno registrato il secondo punteggio più alto per le prestazioni, con una media di 27 e un punteggio medio di 20, con metà dei siti che si trovano sopra e sotto un punteggio di 20. Su base percentile, il 75% dei siti Vue.js ha ottenuto un punteggio delle 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 erano quelli di Hobbies e Leisure, con un punteggio medio di 37, inclusi Nikon e FujiFilm. Questa categoria ha ottenuto risultati migliori del 37% rispetto alla media del sito Web Vue.js. 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, con prestazioni quasi perfette.
Scendendo in classifica, i dati rivelano FactoryChryslerParts.com punti con 68, In-n-Out.com con 61, Poshmark.com con 53 e LouisVuitton.com con 34, tutti superiori alla media di 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.
“Bright Pull quote”
Joe Schmo – Sviluppatore di software
Angle si piazza al terzo posto con pochi punteggi quasi perfetti
Angular è il più antico framework del gruppo, creato e sviluppato da Google nel 2010 e ha oltre 65.000 stelle su GitHub. Si tratta di una soluzione popolare per i siti Web aziendali di grandi dimensioni che prevedono di scalare rapidamente il proprio sito, poiché Angular è nota per le applicazioni più complesse.
Il punteggio medio di performance dei siti web Angular era 23 con una mediana di 18, il 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 ottenuto il miglior risultato su questo quadro, con un punteggio medio di 28. Alcuni di questi siti web della 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 5° percentile di Angular per le prestazioni, che erano Cat.com, una potente società di macchine e motori e AerLingus.com, una compagnia aerea.
Alcuni siti angolari che saltavano 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 Nearing Angular è stato pari a 26, Gamefly.com a 25, BaskinRobbins.com a 19, Disney.com a 18 e CocaCola.com a 17. Poco al di sotto della media includevano marchi come Xfinity e Patagonia, con punteggi di 15 e 14. Infine, i dati hanno rivelato che tre compagnie aeree sono i siti web angolari 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 isomorfo open source basato su React per applicazioni di rendering lato server e ha oltre 52.000 stelle su GitHub. Per garantire il caricamento rapido delle pagine, Next.js suddivide automaticamente il codice e genera dinamicamente il codice HTML ogni volta che una nuova richiesta arriva con un server.
I siti Web di questo framework hanno ottenuto in media un punteggio di prestazioni Lighthouse pari a 22, pari all’8% sotto la media. I dati hanno mostrato che il 50% dei siti Next.js ha ottenuto un punteggio inferiore a 20, il 75% ha ottenuto un punteggio inferiore a 30 e il 90% è sceso al di sotto di 43. Categoricamente, i siti di viaggi e turismo offrono i migliori risultati con Next.js, con un punteggio medio del faro di 29. E i tre siti Next.js più veloci sono stati Bartleby.com, Kelloggs.com e Holidayinnclub.com, con un punteggio rispettivamente di 89, 73 e 75.
RetailMeNot.com e HermanMiller.com hanno superato il punteggio medio del Lighthouse 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 prestazioni scarse 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 ottenuto bassi punteggi 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 frontends più maturi del gruppo ed è anche uno dei progetti più popolari su GitHub, con più di 155.000 stelle alla data di pubblicazione di questo blog.
Facebook ha dichiarato che la stabilità è della massima importanza per loro, in quanto 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 React hanno ottenuto un punteggio medio di 22 Lighthouse, inferiore dell’8% rispetto al punteggio medio complessivo del framework. Ha una mediana 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.
Abbigliamento, accessori e scarpe era la categoria con la quota maggiore 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. Categorie a parte, i primi 3 siti Web React più veloci si sono classificati historicrail.com (di proprietà di Amazon) a 98, historicaviation.com (di proprietà di Amazon) a 91 e flipkart.com a 74.
Alcuni 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 che si avvicinavano 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 più grandi 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 di fatto lo strumento per molte aziende di e-commerce per misurare le prestazioni dei propri siti Web. Un punteggio ad alte prestazioni indica che il sito è veloce da caricare e, soprattutto, soddisfa le aspettative degli utenti.
La velocità del sito web è più importante che mai, con i consumatori ovunque si rivolgono online 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 ad alto traffico su moderni framework frontend.
I siti Web Nuxt.js offrono le prestazioni più veloci, con un punteggio medio di prestazioni Lighthouse di 27 e una media di 22. Vue.js è stato il secondo classificato con lo stesso punteggio medio delle prestazioni di 27 e una media di 20. I siti Web Angular e Next.js hanno lo stesso punteggio medio di 23, ma Angular ha una media più alta che lo rende il terzo framework più veloce. Infine, reagisci, sebbene il framework più diffuso, ottenendo i punteggi delle prestazioni più bassi, con un punteggio medio Lighthouse di 22.
