No pico das ordens de abrigo dos EUA, 94% da população foi afetada. Embora as restrições tenham se tornado mais frouxas, os americanos ainda optam por ficar em segurança dentro de suas casas e fazer compras online. Com a temporada de férias mesmo ao virar da esquina, empresas de todos os tipos estão rapidamente a tentar 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 da Shopify, do Magento 2 e do Salesforce Commerce Cloud e os principais CDNs . neste artigo, vamos focar-nos na performance das frentes modernas: Angular, Next.js, Nuxt.js, React e vue.js. Descobrimos rapidamente que o Nuxt.js lidera o pacote, seguido de vue.js e Next.js. Continue a ler as nossas descobertas detalhadas.
React, Angular, vue.js, Next.js, Nuxt.js – Como é que eles se comparam?
Analisamos as pontuações do Lighthouse 6 para dispositivos móveis de um subconjunto de quase 2 000 sites com tráfego elevado 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 em frente era de 24, com uma mediana de 19. Embora isto possa parecer baixo, é na verdade 26% mais alto do que a pontuação média de desempenho para os 500 principais retalhistas de Internet dos EUA em receitas.
Os sites Nuxt.js e vue.js lutaram para oferecer os sites mais rápidos. Os sites Nuxt.js tiveram uma média de 27 pontos no 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 no fornecimento dos sites de carregamento mais rápido.
Chegando em terceiro lugar foi o Next.js, com 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 resultados de desempenho para sites angulares foi mais diversificada e a mediana caiu em 18. O frontend com o pior desempenho foi surpreendentemente React. Teve uma pontuação média do farol de 22 e uma mediana de 18, apesar de ter alguns dos maiores nomes no comércio eletrónico, incluindo a Amazon e o 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 aplicações isomórficas rápidas e complexas rapidamente. Os benefícios desta estrutura incluem divisão automática de código, armazenamento em cache de páginas e pré-busca. Layer0 tem orgulho de ser um patrocinador do Nuxt.js para ajudar a promover frameworks modernos e de código aberto que funcionam 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 média para sites Nuxt.js caiu para 22, representando uma distribuição positivamente distorcida. Numa base percentil, uma pontuação de 35 marcou o percentil 75 e a pontuação de 49 marcou o percentil 90. Esta estrutura tinha menos variação nas pontuações em comparação com outras estruturas, demonstrando a sua capacidade de fornecer pontuações de desempenho do farol consistentemente perto da sua média. No entanto, esses dados também nos dizem que sites do 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 angulares, que serão discutidos nas próximas seções.
A indústria pesada e engenharia foi a categoria com os sites mais rápidos do Nuxt.js, com uma média de pontuação de desempenho de 37, um número colossal de 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 da estrutura, com notáveis resultados 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.
O vue.js é o segundo colocado
O vue.js é um framework JavaScript de código aberto para a construção de aplicações de página única que aumentaram rapidamente em popularidade ao longo de 6 anos desde o seu lançamento em 2014. Tem mais de 171 000 estrelas no GitHub, tornando-o o mais popular framework moderno. O seu principal objetivo é que permite aos programadores criar rapidamente aplicações JavaScript em crescimento. É bastante semelhante ao Angular e ao React, pois é leve e oferece soluções de roteamento robustas para grandes aplicações.
Os sites do vue.js tiveram a segunda pontuação de desempenho mais alta, com uma média de 27 e uma pontuação média de 20 – com metade dos sites sentados acima e abaixo da pontuação de 20. Em uma base percentual, 75% dos sites vue.js tinham uma pontuação de desempenho igual ou inferior a 34 e 90% pontuaram 55 ou inferior.
A categoria de website mais rápida neste domínio foram as de Hobbies e lazer, com uma pontuação média de 37, incluindo a Nikon e a 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ção de desempenho quase perfeita.
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 grandes dimensões que planeiam escalar o seu site rapidamente, já que o Angular é conhecido por aplicações mais complexas.
A pontuação média de desempenho dos sites angulares foi de 23 com uma mediana de 18, indicando uma distribuição positivamente distorcida. 75% dos sites Angular tinham uma pontuação de 30 ou abaixo, e 90% tinham uma pontuação de 50 ou abaixo. Em nível categórico, os sites de Saúde tiveram o melhor desempenho neste quadro, com uma pontuação média de 28. Alguns destes 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 impressionantes pontuações de 98, 95 e 83, respetivamente. Apenas dois outros locais caíram no 5º percentil máximo da Angular para o desempenho, 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, incluíram marcas como Xfinity e Patagonia, com pontuação de 15 e 14. Finalmente, os dados revelaram que três companhias aéreas são os sites angulares mais lentos: Delta aos 3, Fronteira aos 2 e Spirit aos 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 aplicações renderizadas no lado do servidor e tem mais de 52 000 estrelas no GitHub. Para garantir o carregamento rápido de páginas, o Next.js divide o código automaticamente e gera dinamicamente o HTML sempre que uma nova solicitação entra com um servidor.
Os sites nesta estrutura tiveram uma média de 22 na pontuação de desempenho do farol, que é 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, os 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, com 89, 73 e 75, respetivamente.
RetailMeNot.com e HermanMiller.com excederam a pontuação média do Frameworks Lighthouse em pelo menos 21%, enquanto Sears.com, AlexanderMcQueen.com, Ticketmaster.com e RedRobin.com apresentam pontuações medíocres de 26, 23, 22 e 22, respetivamente. Algumas grandes corporações com um 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 deram baixa pontuação no Lighthouse abaixo de 10.
O React recebe 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 interface de usuário para criar rápida e facilmente interfaces de usuário ou componentes de interface de usuário 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, ficando 8% abaixo da média geral da pontuação do framework. Tem uma mediana de 18, com 75% dos seus sites a apresentar uma pontuação abaixo de 29 e 90% a descer abaixo de 40.
Vestuário, acessórios e sapatos era a categoria com a maior quota de domínios da React mas a categoria com a maior pontuação média do farol foi a da Mass Merchant, incluindo Walmart, Wayfair, Ashley Stewart, Nordstrom, Kroger, Sam’s Club, Groupon e Overstock. À parte, os 3 melhores sites de Reacto mais rápidos ficaram em historicrail.com (propriedade da Amazon) em 98, historicaviation.com (propriedade da Amazon) em 91 e flipkart.com em 74.
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 Alvo em 25, Sur La Tab e StitchFix em 24, Gap e Glossier em 21, Victoria’s Secret em 20 e Crate e Barrel em 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.
Bottom-line
O Google Lighthouse tornou-se a ferramenta de facto para muitos negócios de comércio eletrónico para medir o desempenho do seu website. Uma pontuação de alto desempenho significa que o seu site é rápido de carregar e, mais importante, atende às expetativa dos usuários.
A velocidade do website é mais importante do que nunca, com os consumidores em todo o lado a virar-se 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 que estrutura fornece as velocidades mais rápidas analisando as pontuações de desempenho do farol de quase 2 000 sites altamente traficados em frameworks frontend modernos.
Os sites do Nuxt.js têm um desempenho mais rápido, com uma pontuação média de desempenho do Lighthouse de 27 e uma mediana de 22. O vue.js foi o segundo classificado com a mesma pontuação média de desempenho de 27 e uma mediana de 20. Os sites Angular e Next.js tinham a mesma pontuação média de 23, mas o Angular tinha uma média mais alta, tornando-o o terceiro framework mais rápido. Por fim, o React, embora seja o quadro mais popular, resultando nos resultados de desempenho mais baixos, com uma pontuação média de 22 no farol.
Trabalhar com Layer0 (agora Edgio)
O Layer0 permite que as equipas de desenvolvimento criem e implementem aplicações web nativas de ponta de forma rápida e fácil. É a plataforma Jamstack mais completa do mercado – construída para operar mais de 40 frameworks modernos, como React, Angular, Vue e Next.js – e está provado que duplica a velocidade do desenvolvedor.
Arquiteturas web tradicionais também são suportados para migrar gradualmente para uma arquitetura sem cabeça. Para sites que precisam de flexibilidade e modernização, o Layer0 ajuda a reduzir o risco e a aumentar o ritmo de migração sem a necessidade de alterar a arquitetura subjacente ou de fazer uma reescrita completa do site.
