En el pico de las órdenes de refugio en el lugar de Estados Unidos, el 94% de la población se vio afectada. Si bien las restricciones se han relajado, los estadounidenses todavía eligen mantenerse seguros dentro de sus hogares y hacer compras en línea. Con la temporada navideña a la vuelta de la esquina, las empresas de todo tipo están tratando rápidamente de encontrar la mejor solución para crear una experiencia de compra en línea superior.
Elegir la pila de tecnología adecuada para su sitio, una diseñada para el rendimiento, es crucial y de ninguna manera fácil. Las empresas deben elegir la plataforma de comercio electrónico adecuada, CDN y frontend para su negocio. Ya hemos comparado las plataformas Shopify, Magento 2 y Salesforce Commerce Cloud y las principales CDN. En este artículo, nos centraremos en el rendimiento de las frontend modernas: Angular, Next.js, Nuxt.js, React y Vue.js. Rápidamente descubrimos que Nuxt.js lidera el paquete, seguido por Vue.js y Next.js. Siga leyendo para nuestros hallazgos detallados.
React, Angular, Vue.js, Next.js, Nuxt.js – ¿cómo se comparan?
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
Analizamos las puntuaciones móviles de Lighthouse 6 para un subconjunto de casi 2.000 sitios web de alto tráfico que ejecutan Angular, Next.js, Nuxt.js, React y Vue.js para revelar qué frontend ofrece los sitios web más rápidos. Rápidamente descubrimos que la puntuación promedio de Lighthouse en las frontend era 24, con una mediana de 19. Si bien esto podría sonar bajo, en realidad es un 26% más alto que el puntaje promedio de rendimiento de los 500 principales minoristas de Internet en los EE.UU. Por ingresos.
Los sitios web de Nuxt.js y Vue.js lucharon para ofrecer los sitios web más rápidos. Los sitios de Nuxt.js promediaron una puntuación de Lighthouse de 27 con una mediana de 22, y los sitios de Vue.js promediaron 27 pero una mediana baja de 20. Mientras que Vue.js tenía un par de valores atípicos impresionantes, Nuxt.js demostró ser el marco más confiable en la entrega de los sitios web de carga más rápida.
En tercer lugar fue Next.js, con una puntuación media de rendimiento de 23 con una mediana de 19.5. Los sitios web angulares registraron el mismo promedio en 23; sin embargo, la distribución de las puntuaciones de rendimiento para los sitios angulares fue más diversa y la mediana se quedó corta en 18. El frontend con el peor rendimiento fue sorprendentemente React. Tuvo una puntuación promedio de Lighthouse de 22 y una mediana de 18, a pesar de que alberga algunos de los nombres más grandes en comercio electrónico, incluidos Amazon y Groupon.
«Nuestro sitio web es la puerta de entrada de nuestra marca, y debe funcionar de manera óptima para impulsar conversiones e ingresos. Con la plataforma de aplicaciones Edgio, nuestro sitio es ahora muy rápido, y nuestras versiones se han vuelto mucho más fáciles de implementar».
Joe Schmo – Desarrollador de software
Nuxt.js se acumula para ser el marco web de comercio electrónico más rápido
Nuxt.js es un framework de código abierto, sin servidor basado en Vue.js, Node.js, Webpack y Babel.js creado para crear rápidamente aplicaciones isomórficas complejas y rápidas. Los beneficios de este marco incluyen división automática de código, almacenamiento en caché de páginas y preobtención. Layer0 se enorgullece de ser un patrocinador de Nuxt.js para ayudar a promover marcos modernos de código abierto que trabajan para facilitar una Web más rápida. Actualmente, Nuxt.js tiene 29.4K estrellas en GitHub.
Los sitios web que usaban Next.js tenían un promedio sólido de puntuación de Lighthouse de 27, solo un punto por encima del promedio en las frontend. La puntuación media para los sitios de Nuxt.js cayó a 22, lo que representa una distribución sesgada positivamente. En base al percentil, una puntuación de 35 marcó el percentil 75 y una puntuación de 49 marcó el percentil 90. Este marco tuvo menos variación en las puntuaciones en comparación con otros marcos, lo que demuestra su capacidad para entregar puntuaciones de rendimiento de Lighthouse consistentemente cerca de su promedio. Sin embargo, estos datos también nos indican que los sitios de Nuxt.js no obtuvieron máximos extremos ni puntuaciones casi perfectas (en la década de 90), como marcos como Vue.js o sitios web angulares, que se discutirán en las siguientes secciones.
La industria pesada y la ingeniería fue la categoría con los sitios web más rápidos de Nuxt.js, con un promedio de una puntuación de rendimiento de 37, un 42% más rápido que la puntuación media de su marco solo. Aparte de las categorías, los sitios web más rápidos de Nuxt.js fueron Appycouple.com, NJtransit.com y WPS.com, que tuvieron puntuaciones de 68, 63 y 48, respectivamente. Trivago.com, TrueandCo.com y Garmin.com también aumentaron por encima del promedio del marco con puntuaciones de rendimiento notables de 47, 36 y 35, respectivamente. Nintendo cayó justo en el promedio con una puntuación de 20, y cayendo por debajo de una puntuación baja de 10 fueron Nespresso.com y DolceVita.com.
Explore los productos de aplicación de Edgio para un mejor rendimiento
Aplicaciones
Reducir la latencia, mejorar el rendimiento
Rendimiento
Responda a los datos en tiempo real para aplicaciones de chat en vivo o juegos.
Vue.js se coloca como el segundo
Vue.js es un framework JavaScript de código abierto para crear aplicaciones de una sola página que han aumentado rápidamente en popularidad en el transcurso de 6 años desde su lanzamiento en 2014. Tiene más de 171.000 estrellas en GitHub, lo que lo convierte en el marco moderno más popular. Su principal atractivo es que permite a los desarrolladores construir rápidamente y en crecimiento aplicaciones JavaScript. Es bastante similar a Angular y React en que es ligero y ofrece soluciones de enrutamiento robustas para aplicaciones grandes.
Los sitios web de Vue.js tuvieron la segunda puntuación más alta de rendimiento, con un promedio de 27 y una puntuación mediana de 20, con la mitad de los sitios sentados por encima y por debajo de una puntuación de 20. Sobre una base percentil, el 75% de los sitios de Vue.js tuvieron una puntuación de rendimiento de 34 o menos, y el 90% obtuvo una puntuación de 55 o menos.
La categoría de sitios web más rápida dentro de este dominio fueron los de Hobbies y Leisure, con una puntuación media de 37, incluyendo Nikon y FujiFilm. Esta categoría se desempeñó un 37% mejor que el sitio web promedio de Vue.js. Los 3 sitios más rápidos de Vue.js fueron PaintScratch.com, iMobie.com y EmmaOneSock.com, con puntuaciones de 96, 93 y 92, respectivamente, con puntuaciones de rendimiento casi perfectas.
Al bajar de rango, los datos revelan que FactoryChryslerParts.com anotaron 68, In-n-Out.com anotaron 61, Poshmark.com anotaron 53 y LouisVuitton.com anotaron 34, todos superando el promedio de Vue.js. Menos impresionantes fueron Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com y Chewy.com, entregando puntuaciones bajas de 10-15. Chipotle, Subaru y BMW tuvieron un rendimiento aún peor, con puntuaciones por debajo de 10.
«Bright Pull Quote»
Joe Schmo – Desarrollador de software
Angular ocupa el tercer lugar con unas pocas puntuaciones casi perfectas
Angular es el marco más antiguo del grupo, creado y desarrollado por Google en 2010 y tiene más de 65.000 estrellas en GitHub. Es una solución popular para los sitios web de grandes empresas que planean escalar su sitio rápidamente, ya que Angular es conocido por aplicaciones más complejas.
El puntaje promedio de rendimiento de los sitios web Angular fue de 23 con una mediana de 18, lo que indica una distribución sesgada positivamente. El 75% de los sitios web Angular tenía una puntuación de Lighthouse de 30 o menos, y el 90% tenía una puntuación de 50 o menos. En un nivel categórico, los sitios web de Salud tuvieron el mejor desempeño en este marco, con una puntuación promedio de 28. Algunos de estos sitios web de Salud incluyen CVS.com, VitaminShoppe.com, LifetimeFtiness.com y Plexus.com.
Deichmann.com, megabus.com y ShopStyle.com fueron los 3 sitios angulares más rápidos con impresionantes puntuaciones de 98, 95 y 83, respectivamente. Solo otros dos sitios cayeron en el quinto percentil de rendimiento de Angular, que fueron Cat.com, una poderosa compañía de máquinas y motores y AerLingus.com, una compañía aérea.
Algunos sitios angulares que saltaron por encima de la puntuación promedio incluyeron Android.com a 51, Expedia.com a 44, PepsiCo.com a 42 y Lamborghini.com a 31. Cerca de la puntuación promedio general de Angular en Lighthouse, Sears tuvo 26, Gamefly.com a 25, BaskinRobbins.com a 19, Disney.com a 18 y CocaCola.com a 17. Quedando apenas por debajo del promedio incluían marcas como Xfinity y Patagonia, con puntuaciones de 15 y 14. Finalmente, los datos revelaron que tres aerolíneas son las más lentas de los sitios web Angular: Delta en 3, Frontier en 2 y Spirit en 1.
Next.js se queda un 8% por debajo de la puntuación media de rendimiento
Next.js es un marco isomorfo basado en React de código abierto para aplicaciones renderizadas del lado del servidor y tiene más de 52.000 estrellas en GitHub. Para garantizar cargas de página rápidas, Next.js divide automáticamente el código y genera el HTML de forma dinámica cada vez que una nueva solicitud entra en un servidor.
Los sitios web en este marco promediaron una puntuación de rendimiento de Lighthouse de 22, que es un 8% inferior al promedio. Los datos mostraron que el 50% de los sitios de Next.js obtuvieron una puntuación inferior a 20, el 75% obtuvo una puntuación inferior a 30 y el 90% cayó por debajo de 43. Categóricamente, los sitios de viajes y turismo rinden lo mejor con Next.js, obteniendo una puntuación media de Lighthouse de 29. Y los tres sitios Next.js más rápidos fueron Bartleby.com, Kelloggs.com y Holidayinnclub.com, con una puntuación de 89, 73 y 75, respectivamente.
RetailMeNot.com y HermanMiller.com superaron cada uno su puntuación media de Lighthouse en al menos un 21%, mientras que Sears.com, AlexanderMcQueen.com, Ticketmaster.com y RedRobin.com obtienen puntuaciones mediocres de 26, 23, 22 y 22, respectivamente. Algunas grandes corporaciones con un desempeño escaso incluyen EddieBauer.com, TragerGrills.com, Bonobos.com y Smirnoff.com, con puntuaciones entre 10-15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com y Farri.com entregaron puntuaciones bajas de Lighthouse por debajo de 10.
React alberga marcas impresionantes con puntuaciones poco impresionantes
React es una biblioteca JavaScript de código abierto desarrollada por Facebook en 2013. A diferencia del resto de los frameworks cubiertos en este artículo, React no es un framework sino una biblioteca de UI para construir rápida y fácilmente interfaces de usuario o componentes de UI de forma rápida y sencilla. Es uno de los frontend más maduros del grupo y también es uno de los proyectos más populares en GitHub, con más de 155.000 estrellas a la fecha de publicación de este blog.
Facebook ha declarado que la estabilidad es de suma importancia para ellos, ya que grandes empresas como Twitter y Airbnb utilizan React. Curiosamente, el desempeño no es tan prioritario. Los datos revelan que los sitios web de React promediaron una puntuación de Lighthouse de 22, quedando un 8% por debajo de la puntuación media general del marco. Tiene una mediana de 18, con un 75% de sus sitios con una puntuación inferior a 29 y un 90% inferior a 40.
Ropa, Accesorios y Zapatos fue la categoría con la mayor proporción de dominios React, pero la categoría con la puntuación promedio más alta de Lighthouse fueron los de Mass Merchant, incluyendo Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon y Overstock. Aparte de las categorías, los 3 mejores sitios web de React más rápidos clasificaron historicrail.com (propiedad de Amazon) en 98, historicaviation.com (propiedad de Amazon) en 91 y flipkart.com en 74.
Algunos otros grandes nombres por encima del promedio de la biblioteca fueron Amazon con 57, VRBO con 49, Priceline con 47, Wayfair con 39, Lowes con 33 y Netflix con 31. Los nombres que se acercaban a la puntuación promedio de la biblioteca fueron Target a 25, Sur La Tab y StitchFix a 24, Gap y glossier a 21, Victoria’s Secret a 20 y Crate y Barrel a 19. Algunos de los mayores perdedores en la industria son 23andMe.com a 9, Best Buy y Tory Burch a 8, ProFlowers a 6 y Dior a 3.
En el fondo
Google Lighthouse se ha convertido en la herramienta de facto para muchas empresas de comercio electrónico para medir el rendimiento de su sitio web. Una puntuación de alto rendimiento significa que su sitio es rápido de cargar y, lo más importante, cumple con las expectativas del usuario.
La velocidad del sitio web es más importante que nunca, ya que los consumidores de todo el mundo se conectan para evitar las tiendas abarrotadas durante esta pandemia. El rendimiento del sitio web puede variar drásticamente dependiendo del marco que utilice, lo que afecta en gran medida la experiencia del usuario. Descubrimos qué marco proporciona las velocidades más rápidas al analizar las puntuaciones de rendimiento de Lighthouse de casi 2.000 sitios web con mucho tráfico en marcos frontend modernos.
Los sitios web de Nuxt.js son los más rápidos, con una puntuación promedio de rendimiento de Lighthouse de 27 y una mediana de 22. Vue.js fue el segundo con la misma puntuación media de rendimiento de 27, y una mediana de 20. Los sitios web Angulo y Next.js tenían la misma puntuación media de 23, pero Angular tenía una mediana más alta, lo que lo convierte en el tercer marco más rápido. Finalmente, React, aunque es el marco más popular, resultando en las puntuaciones de rendimiento más bajas, con una puntuación promedio de Lighthouse de 22.
