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 creada para el rendimiento, es crucial y de ninguna manera fácil. Las empresas deben elegir la plataforma de comercio electrónico, CDN y frontend adecuados para su negocio. Ya hemos comparado las plataformas Shopify, Magento 2 y Salesforce Commerce Cloud y las CDN líderes. En este artículo, nos centraremos en el rendimiento de los frontends modernos: Angular, next.js, Nuxt.js, React y Vue.js. Rápidamente encontramos que Nuxt.js lidera el pack, 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?
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 a través de los frentes era de 24, con una mediana de 19. Si bien esto podría sonar bajo, en realidad es un 26% más alto que la puntuación de rendimiento promedio para los 500 minoristas de Internet líderes en Estados Unidos 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 tuvieron 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. Tenía una puntuación promedio de Lighthouse de 22 y una mediana de 18, a pesar de que alberga algunos de los nombres más importantes en comercio electrónico, incluyendo Amazon y Groupon.
Nuxt.js se apila para ser el framework web de comercio electrónico más rápido
Nuxt.js es un framework sin servidor de código abierto 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 la división automática de código, el almacenamiento en caché de páginas y la obtención previa. Layer0 se enorgullece de ser un patrocinador de Nuxt.js para ayudar a promover marcos modernos de código abierto que funcionan para facilitar una Web más rápida. Actualmente, Nuxt.js tiene 29.4K estrellas en GitHub.
Los sitios web que usan next.js tuvieron una puntuación promedio sólida de Lighthouse de 27, solo un punto por encima del promedio en todas las fachadas. La puntuación media para los sitios de Nuxt.js cayó a 22, lo que representa una distribución positivamente sesgada. Sobre la base del percentil, una puntuación de 35 marcó el percentil 75 y la 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 dicen que los sitios de Nuxt.js no fueron encontrados para ofrecer máximos extremos o puntuaciones casi perfectas (en la década de 90), como frameworks como Vue.js o sitios web angulares, que se discutirán en las próximas secciones.
Industria pesada e ingeniería fue la categoría con los sitios web más rápidos de Nuxt.js, con una puntuación de rendimiento promedio de 37, un 42% más rápido que la puntuación promedio 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, con puntuaciones de 68, 63 y 48, respectivamente. trivago.com, TrueandCo.com y Garmin.com también superaron la media del marco con puntuaciones de desempeño notables de 47, 36 y 35, respectivamente. Nintendo cayó justo en el promedio con una puntuación de 20, y quedando por debajo de una puntuación baja de 10 fueron Nespresso.com y DolceVita.com.
Vue.js se coloca como el segundo lugar
Vue.js es un framework JavaScript de código abierto para construir 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 atracción es que permite a los desarrolladores construir rápidamente aplicaciones JavaScript en crecimiento. 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 obtuvieron los segundos puntajes de rendimiento más altos, 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. En términos de 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 Ocio, 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, puntuaciones de rendimiento casi perfectas.
Al bajar en el rango, los datos revelan que FactoryChryslerParts.com obtuvo 68, In-n-Out.com obtuvo 61, Poshmark.com obtuvo 53 y louisvuitton.com obtuvo 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.
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.
La puntuación promedio de rendimiento de los sitios web de Angular fue de 23 con una mediana de 18, lo que indica una distribución positivamente sesgada. El 75% de los sitios web de Angular tenían 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 media 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 puntuaciones impresionantes de 98, 95 y 83, respectivamente. Solo otros dos sitios cayeron en el quinto percentil superior de Angular en rendimiento, 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 en 51, Expedia.com en 44, PepsiCo.com en 42 y Lamborghini.com en 31. Acercándose a la puntuación general promedio de Angular en Lighthouse llegó a Sears a 26, Gamefly.com a 25, BaskinRobbins.com a 19, Disney.com a 18, y CocaCola.com a 17. Quedando por debajo del promedio incluían marcas como Xfinity y Patagonia, con puntajes de 15 y 14. Finalmente, los datos revelaron que tres aerolíneas son las páginas web más lentas de Angular: Delta en 3, Frontier en 2 y Spirit en 1.
Next.js se queda un 8% por debajo de la puntuación de rendimiento promedio
Next.js es un framework isomórfico basado en React de código abierto para aplicaciones renderizadas en el lado del servidor y tiene más de 52.000 estrellas en GitHub. Para asegurar una carga rápida de la página, next.js divide automáticamente el código y genera dinámicamente el HTML cada vez que una nueva solicitud entra con un servidor.
Los sitios web en este marco promediaron una puntuación de rendimiento de Lighthouse de 22, que es un 8% inferior a la media. 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 tienen el mejor desempeño con next.js, viendo 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 89, 73 y 75, respectivamente.
RetailMeNot.com y HermanMiller.com cada uno superó su puntaje promedio de Frameworks 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 escaso desempeño incluyen EddieBauer.com, TragerGrills.com, Bonobos.com y Smirnoff.com, con puntuaciones entre 10 y 15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, gymboree.com, Dior.com y Farri.com obtuvieron puntuaciones bajas de Lighthouse por debajo de 10.
React alberga marcas impresionantes con puntuaciones poco impresionantes
React es una biblioteca de código abierto de JavaScript desarrollada por Facebook en 2013. A diferencia del resto de los marcos cubiertos en este artículo, React no es un framework sino una biblioteca de interfaz de usuario para crear rápida y fácilmente interfaces de usuario o componentes de interfaz de usuario de forma rápida y sencilla. Es uno de los frontends 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 compañías como Twitter y Airbnb usan React. Curiosamente, el rendimiento no es tan prioritario. Los datos revelan que los sitios web de React promediaron una puntuación de Lighthouse de 22, cayendo un 8% por debajo de la puntuación promedio general del marco. Tiene una mediana de 18, con un 75% de sus sitios que ofrecen una puntuación por debajo de 29 y un 90% que cae por debajo de 40.
Ropa, Accesorios y Zapatos fue la categoría con la mayor proporción de dominios de React, pero la categoría con la puntuación promedio más alta de Lighthouse fueron las de Merchant de Mass, incluyendo Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon y Overstock. Aparte de las categorías, los 3 sitios web más rápidos de React ocuparon el puesto historicrail.com (propiedad de Amazon) en 98, historicaviation.com (propiedad de Amazon) en 91 y flipkart.com en 74.
Otros nombres importantes por encima del promedio de la biblioteca fueron Amazon en 57, VRBO en 49, Priceline en 47, Wayfair en 39, Lowes en 33 y Netflix en 31. Los nombres que se acercaban a la puntuación promedio de la biblioteca fueron Target en 25, Sur LA Tab y StitchFix en 24, Gap y Glossier en 21, Victoria’s Secret en 20 y Crate y Barrel en 19. Algunos de los mayores perdedores en la industria son 23andMe.com en 9, Best Buy y Tory Burch en 8, ProFlowers en 6 y Dior en 3.
En resumen
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 de los usuarios.
La velocidad del sitio web es más importante que nunca, con consumidores de todo el mundo que 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 repercute en gran medida en la experiencia del usuario. Descubrimos qué framework proporciona las velocidades más rápidas analizando 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 funcionan más rápido, con una puntuación promedio de rendimiento de Lighthouse de 27 y una mediana de 22. Vue.js fue el subcampeón con la misma puntuación promedio de rendimiento de 27 y una mediana de 20. Los sitios web de Angulo y Next.js tuvieron la misma puntuación promedio de 23, pero Angular tuvo una mediana más alta, lo que lo convierte en el tercer framework más rápido. Finalmente, React, aunque el framework más popular, resulta en las puntuaciones de rendimiento más bajas, con una puntuación media de Lighthouse de 22.
Trabajar con Layer0 (ahora Edgio)
Layer0 permite a los equipos de desarrollo crear e implementar de forma rápida y sencilla aplicaciones web nativas de borde. Es la plataforma JAMstack más completa del mercado, diseñada para ejecutar más de 40 frameworks modernos como React, Angular, Vue y next.js, y se ha demostrado que duplica la velocidad de los desarrolladores.
Las arquitecturas web tradicionales también son compatibles para migrar a la arquitectura sin cabeza gradualmente. Para sitios que necesitan flexibilidad y modernización, Layer0 ayuda a reducir el riesgo y aumentar el ritmo de migración sin la necesidad de cambiar la arquitectura subyacente o hacer una reescritura completa del sitio.
