React, Angular, Vue.js, Next.js, Nuxt.js 중 가장 빠른 프론트엔드는 무엇입니까?

미국 대피소 주문이 최고조에 달했을 때 인구의 94%가 영향을 받았다. 제한이 완화되었지만 미국인들은 여전히 집 안에서 안전하게 지내고 온라인으로 구매하기를 선택합니다. 휴가 시즌이 다가오면서 모든 종류의 기업은 우수한 온라인 쇼핑 경험을 창출하는 최상의 솔루션을 신속하게 찾으려고 노력하고 있습니다.

성능을 위해 구축된 사이트에 적합한 기술 스택을 선택하는 것은 매우 중요하며 결코 쉽지 않습니다. 기업은 비즈니스에 적합한 이커머스 플랫폼, CDN 및 프런트엔드를 선택해야 합니다. Shopify, Magento 2 및 Salesforce Commerce Cloud 플랫폼과 주요 CDN을 이미 비교했습니다. 이 글에서는 모던 프런트엔드의 성능에 초점을 맞출 것이다: Angular, Next.js, Nuxt.js, React 및 Vue.js. 우리는 Nuxt.js가 팩을 이끌고 Vue.js와 Next.js가 뒤따른다는 것을 금방 발견했습니다. 우리의 자세한 발견을 위해 위에 읽으십시오.

React, Angular, Vue.js, Next.js, Nuxt.js – 어떻게 비교합니까?

우리는 Angular, Next.js, Nuxt.js, React 및 Vue.js를 실행하는 거의 2,000개의 높은 트래픽이 발생한 웹 사이트의 하위 집합에 대한 모바일 라이트하우스 6 점수를 분석하여 가장 빠른 웹 사이트를 제공하는 프런트 엔드를 파악했습니다. 우리는 곧 프론트엔드를 가로지르는 등대 평균 점수가 24점이고 중앙값은 19점이라는 것을 발견했습니다. 이 낮은 소리 수 있지만, 그것은 실제로 26% 주요 500 미국 인터넷 소매 업체의 평균 성능 점수보다 높은 수익에 의해.

Nuxt.js와 Vue.js 웹사이트는 가장 빠른 웹사이트를 제공하기 위해 싸웠습니다. Nuxt.js 사이트는 평균 등대 점수가 27, 중간값은 22, Vue.js 사이트는 평균 27이지만 낮은 중간값은 20입니다. Vue.js는 몇 가지 인상적인 이상값을 가지고 있었지만 Nuxt.js는 가장 빠른 로딩 웹 사이트를 제공하는 데 있어 가장 신뢰할 수 있는 프레임워크임이 입증되었습니다.

3위를 차지한 Next.js는 평균 연주 점수 23점을 기록했고 중간값은 19.5점이었습니다. 각 웹 사이트는 23에서 동일한 평균을 보였지만 각 사이트의 성능 점수 분포는 더 다양했으며 중간값은 18로 떨어졌습니다. 최악의 성능을 가진 프론트엔드는 놀랍게도 반응했습니다. 아마존과 그루폰을 포함한 전자 상거래에서 가장 큰 이름을 호스팅하지만 평균 등대 점수는 22점, 중간값은 18점이었습니다.

Nuxt.js는 가장 빠른 전자 상거래 웹 프레임워크가 될 수 있습니다.

Nuxt.js는 Vue.js, Node.js, Webpack 및 Babel.js를 기반으로 하는 오픈소스 서버리스 프레임워크로, 빠르고 복잡한 동형 애플리케이션을 신속하게 구축할 수 있도록 개발되었습니다. 이 프레임워크의 이점으로는 자동 코드 분할, 페이지 캐싱 및 프리페치 등이 있습니다. Layer0은 Nuxt.js의 후원자가 되어 더 빠른 웹을 촉진하기 위해 노력하는 현대적인 오픈 소스 프레임워크를 홍보하는 것을 자랑스럽게 생각합니다. 현재 Nuxt.js는 GitHub에 29.4K 개의 별을 보유하고 있습니다.

Next.js를 사용하는 웹 사이트의 평균 등대 점수는 27점으로, 전방 경계에서 평균보다 훨씬 높습니다. Nuxt.js 사이트의 평균 점수는 22점으로 떨어졌으며, 이는 양적으로 치우친 분포를 나타냅니다. 백분위수 기준으로 35점은 75번째 백분위수를, 49점은 90번째 백분위수를 기록했습니다. 이 프레임워크는 다른 프레임워크에 비해 점수의 변동이 적었으며, 평균에 가까운 Lighthouse 성능 점수를 지속적으로 제공할 수 있는 능력을 보여주었습니다. 그러나 이 데이터는 Nuxt.js 사이트가 Vue.js 또는 Angular 웹 사이트와 같은 프레임워크와 같은 극단적 인 최고 또는 거의 완벽한 점수 (90 년대)를 제공하지 못했음을 알려줍니다.

중공업 및 엔지니어링은 Nuxt.js 웹사이트가 가장 빠른 범주였으며, 평균 37점으로 프레임워크의 평균 점수보다 42% 더 빠릅니다. 카테고리를 제외하고 가장 빠른 Nuxt.js 웹 사이트는 Appycouple.com, NJtransit.com, WPS.com 각각 68, 63, 48점을 기록했습니다. Trivago.com, TrueandCo.com 및 Garmin.com 또한 각각 47, 36 및 35의 주목할만한 성능 점수로 프레임워크 평균을 상회했습니다. 닌텐도는 평균적으로 20점으로 떨어졌고, 최저점수 10점에 미달한 것은 Nespresso.com, DolceVita.com 등이었다.

Vue.js는 주자로 배치합니다.

Vue.js는 2014년 출시 이후 6년 동안 빠르게 인기를 얻고 있는 단일 페이지 애플리케이션을 구축하기 위한 오픈 소스 JavaScript 프레임워크입니다. 그것은 GitHub에 171,000 개 이상의 별을 가지고 있으며, 가장 인기있는 현대 프레임 워크입니다. 가장 큰 장점은 개발자가 빠르게 성장하는 JavaScript 응용 프로그램을 빠르게 구축할 수 있다는 것입니다. Angular 및 React와 매우 유사하며 경량이며 대규모 애플리케이션을 위한 강력한 라우팅 솔루션을 제공합니다.

Vue.js 웹 사이트는 평균 27 점, 중간값 20 점으로 두 번째로 높은 성능 점수를 보였으며 사이트의 절반은 20 점 이상이었습니다. 백분위수 기준으로 Vue.js 사이트의 75%는 34점 이하, 90%는 55점 이하를 기록했습니다.

이 도메인 내에서 가장 빠른 웹 사이트 범주는 취미 및 레저 사용자였으며 니콘과 후지필름을 포함하여 평균 점수는 37점이었습니다. 이 카테고리는 평균 Vue.js 웹 사이트보다 37 % 더 잘 수행되었습니다. 가장 빠른 Vue.js 사이트 3곳은 PaintScratch.com, iMobie.com, EmmaOneSock.com, 96점, 93점, 92점으로 거의 완벽한 성능 점수를 기록했습니다.

순위가 내려가면 FactoryChryslerParts.com 68점, In-n-Out.com 61점, Poshmark.com 53점, LouisVuitton.com 34점이 나타나 모두 Vue.js 평균을 초과했습니다. Sunglasshut.com, WestElm.com, Anthropologie.com, UrbanOutfitters.com 및 Chewy.com 등은 10-15의 낮은 점수를 기록한 반면, 그다지 인상적이지 않았습니다. 치폴레, 스바루, BMW는 점수가 10점 이하로 더 나빠졌다.

Angular는 거의 완벽한 몇 점수를 얻어 세 번째 자리를 차지합니다.

Angular는 2010년에 Google이 만들고 개발한 그룹 중 가장 오래된 프레임워크이며 GitHub에 65,000개 이상의 별이 있습니다. Angular는 보다 복잡한 응용 프로그램으로 알려져 있으므로 사이트를 빠르게 확장하려는 대규모 엔터프라이즈 웹 사이트에 널리 사용되는 솔루션입니다.

Angular 웹 사이트의 평균 성능 점수는 23으로 중간값 18로, 양으로 치우친 분포를 나타냅니다. 각도 웹 사이트의 75 %는 등대 점수가 30 이하이며 90 %는 50 이하입니다. 범주적 수준에서 건강 웹 사이트는이 프레임워크에서 평균 점수 28점으로 가장 높은 성과를 보였습니다. 이러한 건강 웹 사이트 중 일부는 CVS.com, VitaminShoppe.com, LifetimeFtiness.com 및 Plexus.com 포함되었습니다.

Deichmann.com, MegaBus.com 및 ShopStyle.com 는 각각 98, 95 및 83의 인상적인 점수를 기록한 상위 3 개의 가장 빠른 Angular 사이트였습니다. 앙귤러의 성능 상위 5%에 속하는 사이트는 강력한 기계와 엔진 회사인 Cat.com, 항공사인 AerLingus.com 두 곳뿐이었다.

평균 점수를 넘어선 일부 각도 사이트는 51점 Android.com, 44점 Expedia.com, 42점 PepsiCo.com, 31점 Lamborghini.com 등이었습니다. 앵귤러의 전체 등대 평균 점수는 시어스 26점, Gamefly.com 25점, BaskinRobbins.com 19점, Disney.com 18점, CocaCola.com 17점으로 나타났다. 평균에 미치지 못하면 Xfinity와 Patagonia와 같은 브랜드 이름이 포함되었으며 점수는 15 및 14입니다. 마지막으로, 데이터는 3 개의 항공사가 가장 느린 각도 웹 사이트로 나타났습니다 : 델타 3, 프론티어 2 및 스피릿 1.

next.js가 평균 성능 점수보다 8% 낮음

next.js는 서버측 렌더링 애플리케이션을 위한 오픈소스 React 기반 이소모픽 프레임워크이며 GitHub에 52,000개 이상의 별이 있습니다. 빠른 페이지 로딩을 보장하기 위해 Next.js는 서버에 새로운 요청이 들어올 때마다 자동으로 코드를 분할하고 HTML을 동적으로 생성합니다.

이 프레임워크의 웹 사이트는 Lighthouse 성능 점수를 평균 22점으로 평균보다 8% 낮았습니다. Next.js 사이트의 50%가 20 미만 점수를 받았고 75%는 30 미만, 90%는 43 미만으로 떨어졌습니다. 범주적으로, 여행 및 관광 사이트는 Next.js와 함께 최고 성능을 발휘하며, 평균 등대 점수는 29점입니다. 가장 빠른 3개의 Next.js 사이트는 Bartleby.com, Kelloggs.com, Holidayinnclub.com, 각각 89점, 73점, 75점이었다.

RetailMeNot.com 및 HermanMiller.com 각각 프레임워크 평균 등대 점수를 21% 이상 초과했으며 Sears.com, AlexanderMcQueen.com, Ticketmaster.com 및 RedRobin.com 각각 26, 23, 22 및 22의 평범한 점수를 기록했습니다. 실적이 열악한 몇몇 대기업은 EddieBauer.com, TragerGrills.com, Bonobos.com, Smirnoff.com 등이며 점수는 10-15점입니다. YankeeCandle.com, ProFlowers.com, LiveNation.com, 23andMe.com, Gymboree.com, Dior.com 및 Farri.com 등대 점수는 10점 미만으로 낮았습니다.

React는 인상적인 점수를 기록한 인상적인 브랜드를 호스트합니다.

React는 2013년 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리입니다. 이 글에서 다루는 다른 프레임워크와 달리 React는 프레임워크가 아니라 사용자 인터페이스 또는 UI 컴포넌트를 빠르고 쉽게 구축하기 위한 UI 라이브러리입니다. 그것은 무리에서 가장 성숙한 프론트엔드 중 하나이며 GitHub에서 가장 인기있는 프로젝트 중 하나이며,이 블로그의 출판 날짜로 155,000 개 이상의 별을 보유하고 있습니다.

페이스북은 트위터와 에어비앤비 같은 거대 기업들이 리액트를 사용함에 따라 안정성이 그들에게 가장 중요하다고 말했다. 흥미롭게도, 성능은 우선 순위가되지 않습니다. 데이터에 따르면 React 웹 사이트의 평균 점수는 22로 전체 평균 프레임워크 점수보다 8% 낮았습니다. 중앙값은 18이며, 사이트의 75%는 29점 미만으로, 90%는 40점 미만으로 떨어집니다.

의류, 악세사리, 신발은 리액트 도메인의 가장 큰 점유율을 가진 카테고리였지만, 평균 등대 점수가 가장 높은 카테고리는 월마트, 웨이페어, 애슐리 스튜어트, 노드스트롬, 크로거, 샘스 클럽, 그루폰, 오버스톡을 포함한 매스 머천트의 카테고리였다. 카테고리를 제외하고 가장 빠른 React 웹 사이트 3곳은 historicrail.com(아마존 소유)이 98위, historicaviation.com(아마존 소유)이 91위, flipkart.com(74위를 차지했습니다.

도서관 평균 이상의 다른 주요 이름은 아마존 57, VRBO 49, 프라이스 린 47, 웨이페어 39, 로우스 33, 넷플릭스 31 등이었다. 도서관의 평균 점수에 근접한 이름은 타겟 25점, 쉬르 라 탭과 스티치픽스 24점, 갭 및 글로시에 21점, 빅토리아 시크릿 20점, 크레이트와 배럴 19점이었다. 업계에서 가장 큰 패자 중 일부는 23andMe.com 9, Best Buy 및 Tory Burch 8, ProFlowers 6 및 Dior 3입니다.

결론

Google Lighthouse는 많은 전자 상거래 기업이 웹 사이트 성능을 측정하는 사실상의 도구가되었습니다. 높은 성능 점수는 사이트 로딩 속도가 빠르며, 무엇보다도 사용자의 기대를 충족한다는 것을 의미합니다.

웹 사이트 속도는 그 어느 때보다 중요하며, 전염병이 발생하는 동안 매장 혼잡을 피하기 위해 모든 곳에서 소비자가 온라인 상태로 전환하고 있습니다. 웹 사이트 성능은 사용하는 프레임워크에 따라 크게 달라질 수 있으며 사용자 경험에 큰 영향을 미칩니다. 최신 프런트엔드 프레임워크에서 트래픽이 많은 약 2,000개의 웹사이트에 대한 Lighthouse 성능 점수를 분석하여 어떤 프레임워크가 가장 빠른 속도를 제공하는지 알아냈습니다.

Nuxt.js 웹사이트가 가장 빠른 성능을 발휘하며, 평균 등대 성능 점수는 27점, 중앙값은 22점입니다. Vue.js는 동일한 평균 성적 점수 27점, 중간값 20점으로 준우승을 차지했습니다. Angular와 Next.js 웹사이트는 평균 23점을 기록했지만 Angular는 중간값이 더 높아 세 번째로 빠른 프레임워크가 되었습니다. 마지막으로 React는 가장 인기있는 프레임워크이지만 평균 Lighthouse 점수는 22로 가장 낮은 성능 점수를 얻습니다.

Layer0 작업(현재 Edgio)

Layer0을 사용하면 개발 팀이 에지 네이티브 웹 앱을 빠르고 쉽게 구축 및 배포할 수 있습니다. React, Angular, Vue 및 Next.js와 같은 40개 이상의 최신 프레임워크를 실행하도록 제작된 Jamstack 플랫폼으로, 개발자의 속도를 두 배로 높이는 것으로 입증되었습니다.

기존의 웹 아키텍처도 헤드리스 아키텍처로 점진적으로 마이그레이션할 수 있도록 지원됩니다. 유연성과 현대화가 필요한 사이트의 경우 Layer0을 사용하면 기본 아키텍처를 변경하거나 전체 사이트를 다시 작성할 필요 없이 위험을 줄이고 마이그레이션 속도를 높일 수 있습니다.