Home Blogs Qual Frontend moderno é o mais rápido: React, Angular, Vue.js, Next.js ou Nuxt.js?
Applications

Qual Frontend moderno é o mais rápido: React, Angular, Vue.js, Next.js ou Nuxt.js?

About The Author

Outline

No pico das ordens de abrigo dos EUA, 94% da população foi afetada. Embora as restrições tenham se afrouxado, os americanos ainda escolhem ficar seguros dentro de suas casas e fazer compras on-line. Com a temporada de férias ao virar da esquina, empresas de todos os tipos estão rapidamente tentando descobrir a melhor solução para criar uma experiência de compras online superior.

Escolher a pilha de tecnologia certa para o seu site, uma criada para o desempenho, é crucial e de forma alguma fácil. As empresas devem escolher a plataforma de comércio eletrônico certa, CDN e frontend para seus negócios. Já comparamos as plataformas Shopify, Magento 2 e Salesforce Commerce Cloud e os principais CDNs . neste artigo, vamos nos concentrar no desempenho dos frontends modernos: Angular, Next.js, Nuxt.js, React e Vue.js. Descobrimos rapidamente que o Nuxt.js lidera o pacote, seguido por Vue.js e Next.js. Continue lendo para ver nossas descobertas detalhadas.

React, Angular, Vue.js, Next.js, Nuxt.js – Como eles se comparam?

Analisamos as pontuações do Lighthouse 6 para um subconjunto de quase 2 000 sites de alto tráfego que executam o Angular, Next.js, Nuxt.js, React e Vue.js para revelar qual frontend oferece os sites mais rápidos. Rapidamente descobrimos que a pontuação média do Farol entre frontends era de 24, com uma mediana de 19. Embora isso possa parecer baixo, na verdade é 26% maior do que a pontuação média de desempenho para os 500 principais varejistas de internet dos EUA por receita.

Os sites Nuxt.js e Vue.js lutaram para oferecer os sites mais rápidos. Os sites do Nuxt.js tiveram uma média de 27 pontos do Farol com uma mediana de 22, e os sites Vue.js tiveram uma média de 27, mas uma média baixa de 20. Embora o Vue.js tenha tido alguns outliers impressionantes, o Nuxt.js provou ser a estrutura mais confiável para fornecer os sites de carregamento mais rápido.

Chegando em terceiro lugar foi Next.js, mantendo uma pontuação média de desempenho de 23 com uma mediana de 19,5. Os sites Angular viram a mesma média em 23; no entanto, a distribuição dos escores de desempenho para sites Angular foi mais diversificada e a mediana caiu em 18. O frontend com o pior desempenho foi surpreendentemente React. Ele teve uma pontuação média do Lighthouse de 22 e uma mediana de 18, mesmo que hospeda alguns dos maiores nomes no comércio eletrônico, incluindo Amazon e Groupon.

O Nuxt.js é o framework web de comércio eletrônico mais rápido

O Nuxt.js é um framework de código aberto, sem servidor baseado em Vue.js, Node.js, Webpack e Babel.js criado para criar aplicativos isomórficos rápidos e complexos rapidamente. Os benefícios dessa estrutura incluem divisão automática de código, cache de página e pré-busca. Layer0 tem orgulho de ser um patrocinador do Nuxt.js para ajudar a promover estruturas modernas e de código aberto que trabalham para facilitar uma Web mais rápida. Atualmente, o Nuxt.js tem 29,4 estrelas no GitHub.

Sites que usam o Next.js tinham uma pontuação média sólida de 27 no Lighthouse, apenas um ponto acima da média entre frontends. A pontuação mediana para sites Nuxt.js caiu para 22, representando uma distribuição positivamente distorcida. Em uma base percentil, uma pontuação de 35 marcou o percentil 75 e a pontuação de 49 marcou o percentil 90. Este framework teve menos variância em pontuações em comparação com outros frameworks, demonstrando sua capacidade de fornecer pontuações de desempenho do Lighthouse consistentemente perto de sua média. No entanto, esses dados também nos dizem que sites Nuxt.js não foram encontrados para fornecer altos extremos ou pontuações quase perfeitas (nos anos 90), como frameworks como Vue.js ou sites Angular, que serão discutidos nas próximas seções.

A Heavy Industry and Engineering foi a categoria com os sites mais rápidos do Nuxt.js, com média de 37 pontos de desempenho, um peso 42% mais rápido do que a pontuação média do seu framework. Além das categorias, os sites mais rápidos do Nuxt.js foram Appycouple.com, NJtransit.com e WPS.com, que tiveram pontuação de 68, 63 e 48, respetivamente. Trivago.com, TrueandCo.com e Garmin.com também subiram acima da média do framework, com notáveis pontuações de desempenho de 47, 36 e 35, respetivamente. A Nintendo caiu na média com uma pontuação de 20, e a queda abaixo de uma pontuação baixa de 10 foi de Nespresso.com e DolceVita.com.

Vue.js é o segundo colocado

Vue.js é uma estrutura JavaScript de código aberto para a construção de aplicativos de página única que aumentaram rapidamente em popularidade ao longo de 6 anos desde seu lançamento em 2014. Tem mais de 171 000 estrelas no GitHub, tornando-o o framework moderno mais popular. Seu principal atrativo é que ele permite que os desenvolvedores criem rapidamente aplicativos JavaScript em crescimento. É bastante semelhante ao Angular e React, pois é leve e oferece soluções de roteamento robustas para grandes aplicações.

Os sites Vue.js apresentaram a segunda pontuação de desempenho mais alta, com uma média de 27 e uma pontuação mediana de 20––com metade dos sites sentados acima e abaixo de uma pontuação de 20. Em uma base percentil, 75% dos sites Vue.js tiveram uma pontuação de desempenho igual ou inferior a 34 e 90% obtiveram 55 ou inferior.

A categoria de site mais rápida dentro deste domínio foram as de Hobbies e Lazer, com uma pontuação média de 37, incluindo Nikon e Fujifilm. Esta categoria teve um desempenho 37% melhor do que o site Vue.js médio. Os 3 melhores sites Vue.js mais rápidos foram PaintScratch.com, iMobie.com e EmmaOneSock.com, com pontuação de 96, 93 e 92, respetivamente – pontuações de desempenho quase perfeitas.

Descendo na classificação, os dados revelam que FactoryChryslerParts.com pontuados 68, In-n-Out.com pontuados 61, Poshmark.com pontuados 53 e LouisVuitton.com pontuados 34 – todos excedendo a média vue.js. Menos impressionantes foram Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com e Chewy.com, entregando baixas pontuações de 10-15. Chipotle, Subaru e BMW tiveram desempenho ainda pior, com pontuações abaixo de 10.

O Angular ocupa o terceiro lugar com algumas pontuações quase perfeitas

O Angular é o framework mais antigo do grupo, criado e desenvolvido pelo Google em 2010 e tem mais de 65 000 estrelas no GitHub. É uma solução popular para sites corporativos de grande porte que planejam escalar seu site rapidamente, já que o Angular é conhecido por aplicativos mais complexos.

O escore médio de desempenho dos sites angulares foi de 23, com mediana de 18, indicando uma distribuição positivamente distorcida. 75% dos sites Angular tiveram uma pontuação de Farol de 30 ou abaixo, e 90% tiveram uma pontuação de 50 ou abaixo. Em nível categórico, os sites de Saúde tiveram o melhor desempenho nesse quadro, com pontuação média de 28. Alguns desses sites de Saúde incluíram CVS.com, VitaminShoppe.com, LifetimeFtiness.com e Plexus.com.

Deichmann.com, MegaBus.com e ShopStyle.com foram os 3 locais angulares mais rápidos, com pontuações impressionantes de 98, 95 e 83, respetivamente. Apenas dois outros locais caíram no 5º percentil de desempenho da Angular, que foram Cat.com, uma empresa de máquinas e motores poderosa e AerLingus.com, uma companhia aérea.

Alguns locais angulares saltando acima da pontuação média incluíram Android.com em 51, Expedia.com em 44, PepsiCo.com em 42 e Lamborghini.com em 31. A pontuação média geral do Farol de Nearing Angular chegou a Sears em 26, Gamefly.com em 25, BaskinRobbins.com em 19, Disney.com em 18 e CocaCola.com em 17. Abaixo da média, foram incluídas marcas como Xfinity e Patagonia, com pontuações de 15 e 14. Finalmente, os dados revelaram que três companhias aéreas são os sites angulares mais lentos: Delta at 3, Frontier at 2 e Spirit at 1.

O Next.js fica 8% abaixo da pontuação média de desempenho

O Next.js é um framework isomórfico baseado em React de código aberto para aplicativos renderizados no lado do servidor e tem mais de 52 000 estrelas no GitHub. Para garantir carregamentos rápidos de página, o Next.js divide automaticamente o código e gera dinamicamente o HTML sempre que uma nova solicitação entra com um servidor.

Os sites neste framework tiveram uma média de 22, o que é de 8% abaixo da média. Os dados mostraram que 50% dos sites do Next.js apresentaram uma pontuação abaixo de 20, 75% pontuaram abaixo de 30 e 90% caíram abaixo de 43. Categoricamente, sites de viagens e turismo têm o melhor desempenho com o Next.js, vendo uma pontuação média do Farol de 29. E os três sites mais rápidos do Next.js foram Bartleby.com, Kelloggs.com e Holidayinnclub.com, marcando 89, 73 e 75, respetivamente.

RetailMeNot.com e HermanMiller.com excederam a pontuação média do Farol de Frameworks em pelo menos 21%, enquanto Sears.com, AlexanderMcQueen.com, Ticketmaster.com e RedRobin.com fornecem pontuações medíocres de 26, 23, 22 e 22, respetivamente. Algumas grandes corporações com desempenho escasso incluem EddieBauer.com, TragerGrilles.com, Bonobos.com e Smirnoff.com, com pontuações entre 10 e 15. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com e Farri.com entregaram baixas pontuações do Farol abaixo de 10.

O React hospeda marcas impressionantes com pontuações impressionantes

React é uma biblioteca JavaScript de código aberto desenvolvida pelo Facebook em 2013. Ao contrário do resto dos frameworks abordados neste artigo, o React não é uma estrutura, mas uma biblioteca de UI para criar interfaces de usuário ou componentes de UI de forma rápida e fácil. É um dos frontends mais maduros do grupo e também é um dos projetos mais populares no GitHub, com mais de 155 000 estrelas a partir da data de publicação deste blog.

O Facebook afirmou que a estabilidade é de extrema importância para eles, já que grandes empresas como o Twitter e o Airbnb usam o React. Curiosamente, o desempenho não é tão priorizado. Os dados revelam que os sites da React obtiveram uma média de 22 pontos no Lighthouse, caindo 8% abaixo da pontuação geral da estrutura média. Tem uma mediana de 18, com 75% de seus sites entregando uma pontuação abaixo de 29 e 90% caindo abaixo de 40.

Vestuário, Acessórios e Sapatos foi a categoria com a maior participação de domínios React, mas a categoria com a maior pontuação média do Farol foi a de Mass Merchant, incluindo Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon e Overstock. Além das categorias, os 3 melhores sites React mais rápidos ficaram em historicrail.com (propriedade da Amazon) em 98, historicaviation.com (propriedade da Amazon) em 91 e flipkart.com em 74.

Alguns outros grandes nomes acima da média da biblioteca foram Amazon em 57, VRBO em 49, Priceline em 47, Wayfair em 39, Lowes em 33 e Netflix em 31. Os nomes próximos da pontuação média da biblioteca foram Target at 25, Sur LA Tab e StitchFix at 24, Gap e Glossier at 21, Victoria’s Secret at 20 e Crate and Barrel at 19. Alguns dos maiores perdedores da indústria são 23andMe.com em 9, Best Buy e Tory Burch em 8, ProFlowers em 6 e Dior em 3.

Linha inferior

O Google Lighthouse tornou-se a ferramenta de facto para muitas empresas de comércio eletrónico para medir o desempenho do seu website. Uma pontuação de alto desempenho significa que seu site é rápido de carregar e, o mais importante, atende às expetativa dos usuários.

A velocidade do site é mais importante do que nunca, com os consumidores em todos os lugares se voltando online para evitar lojas lotadas durante esta pandemia. O desempenho do site pode variar drasticamente dependendo da estrutura que você usa, impactando muito a experiência do usuário. Descobrimos qual framework fornece as velocidades mais rápidas analisando as pontuações de desempenho do Lighthouse de quase 2 000 sites altamente traficados em estruturas frontend modernas.

Os sites do Nuxt.js apresentam o desempenho mais rápido, com uma pontuação média de desempenho do Lighthouse de 27 e uma mediana de 22. Vue.js foi o segundo classificado com a mesma pontuação média de desempenho de 27 e mediana de 20. Os sites Angular e Next.js tiveram a mesma pontuação média de 23, mas o Angular teve uma mediana maior, tornando-o o terceiro framework mais rápido. Por fim, o React, embora seja o framework mais popular, resultando nas pontuações de desempenho mais baixas, com uma pontuação média do Farol de 22.

Trabalhar com Layer0 (agora Edgio)

O Layer0 permite que as equipes de desenvolvimento criem e implantem aplicativos web nativos de borda de forma rápida e fácil. É a plataforma Jamstack mais completa do mercado – construída para rodar mais de 40 frameworks modernos, como React, Angular, Vue e Next.js – e é comprovada para duplicar a velocidade do desenvolvedor.

Arquiteturas web tradicionais também são suportadas para migrar gradualmente para arquitetura sem cabeça. Para sites que precisam de flexibilidade e modernização, Layer0 ajuda a reduzir o risco e aumentar o ritmo de migração sem a necessidade de alterar a arquitetura subjacente ou fazer uma reescrita completa do site.