Home Blogs React、Angular、Vue.js、Next.js、Nuxt.jsのどのモダンフロントエンドが最速ですか?
Applications

React、Angular、Vue.js、Next.js、Nuxt.jsのどのモダンフロントエンドが最速ですか?

About The Author

Outline

米国のシェルター・イン・プレースの最盛期には、人口の94%が影響を受けた。 規制が緩和された一方で、アメリカ人は依然として自宅の安全を確保し、オンラインで購入することを選択しています。 ホリデーシーズンが間近に迫っている今、あらゆる種類の企業は、優れたオンラインショッピング体験を生み出すための最良のソリューションを迅速に見つけようとしています。

サイトに適したテクノロジースタックを選択することは、パフォーマンスを重視して構築されているため、非常に重要であり、決して簡単ではありません。 企業は、ビジネスに適したeコマースプラットフォーム、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の高トラフィックWebサイトのサブセットのモバイルLighthouse 6スコアを分析し、どのフロントエンドが最速のWebサイトを提供しているかを明らかにしました。 すぐに、フロントエンド全体の平均Lighthouseスコアは24で、中央値は19であることがわかりました。 これは低いように聞こえるかもしれませんが、実際には500米国の大手インターネット小売業者の平均パフォーマンススコアよりも26%高い収益です

Nuxt.jsとVue.jsのウェブサイトは、最速のウェブサイトを配信するために戦った。 Nuxt.jsサイトでは平均27スコアが22で、Vue.jsサイトでは平均27スコアが20であった。 Vue.jsにはいくつかの印象的な外れ値がありましたが、Nuxt.jsは最速のロードWebサイトを配信する上で最も信頼性の高いフレームワークであることが証明されました。

3位はNext.jsで、平均パフォーマンススコアは23、中央値は19.5でした。 Angularのウェブサイトでは、同じ平均が23であったが、Angularサイトのパフォーマンススコアの分布はより多様であり、中央値は18に達しなかった。 最悪のパフォーマンスを持つフロントエンドは驚くほど反応しました。 AmazonやGrouponなどのeコマース大手をホストしているにもかかわらず、平均22スコアと中央値18を保持しています。

Nuxt.jsは、最速のeコマースWebフレームワークになるために積み重ねられています。

Nuxt.jsは、Vue.js、Node.js、Webpack、Babel.jsをベースとしたオープンソースのサーバーレスフレームワークで、高速で複雑な同型アプリケーションを迅速に構築するために作成されています。 このフレームワークの利点には、自動コード分割、ページキャッシュ、プリフェッチなどがあります。 Layer0は、より高速なWebを促進するために働く最新のオープンソースフレームワークの促進を支援するNuxt.jsスポンサーであることを誇りに思っています 。 現在、Nuxt.jsはGitHub上で29.4Kの星を持っています。

Next.jsを使用しているウェブサイトのLighthouseの平均スコアは27で、フロントエンド全体の平均スコアをわずか1ポイント上回っています。 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は、単一ページアプリケーションを構築するためのオープンソースのJavaScriptフレームワークで、2014年の立ち上げ以来、6の数年間で急速に人気が高まっています。 GitHubには171,000スターがあり、最も人気のある現代的なフレームワークとなっています。 その主な特徴は、開発者が急速に成長しているJavaScriptアプリケーションを迅速に構築できることです。 軽量で、大規模なアプリケーション向けの堅牢なルーティングソリューションを提供するという点で、AngularやReactと非常に似ています。

VUE.jsのウェブサイトでは、27の平均スコアが20で2番目に高いパフォーマンススコアを記録しました。平均スコアは20で、半数のサイトが20点を上回り、下回りました。 パーセンタイルベースでは、Vue.jsサイトの75%が34以下のパフォーマンススコアを持っており、90%が55以下のスコアを持っていました。

このドメイン内の最も速いウェブサイトのカテゴリは、「趣味」と「レジャー」で、ニコン、富士フイルムを含めた平均スコアは37でした。 このカテゴリは、平均的なVue.jsウェブサイトよりも37%優れています。 3で最も速いVue.jsのサイトは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はほぼ完璧なスコアで3位になります

Angularはグループの最も古いフレームワークであり、2010年にGoogleによって作成および開発され、GitHub上に65,000の星を持っています。 Angularはより複雑なアプリケーションで知られているため、サイトを迅速に拡張することを計画している大規模なエンタープライズWebサイトに人気のあるソリューションです。

Angularウェブサイトの平均パフォーマンススコアは23であり、中央値は18であり、正の偏りがあることを示しています。 Angularのウェブサイトの75%が30以下のスコアを保持し、90%が50以下のスコアを保持しています。 カテゴリレベルでは、Healthウェブサイトはこのフレームワークで最高のパフォーマンスを発揮し、平均スコアは28でした。 これらのHealth Webサイトには、CVS.com、VitaminShoppe.com、LifetimeFtiness.com、Plexus.comなどがあります。

Deichmann.com、MegaBus.com、ShopStyle.comは、それぞれ98、95、83の印象的なスコアを持つ3 Fastest Angularサイトのトップでした。 Angularのパフォーマンスの上位5パーセントにランクインしたサイトは、強力なマシンとエンジンの会社であるCat.comと航空会社のAerLingus.comの2つだけでした。

平均スコアを上回ってジャンプするいくつかのAngularサイトには、51のAndroid.com、44のExpedia.com、PepsiCo.com 31の42とLamborghini.comが含まれていました。 Angularの全体的なLighthouseの平均スコアは、Searsが26、Gamefly.comが25、BaskinRobbins.comが19、Disney.comが18、CocaCola.comが17に近くなりました。 平均をわずかに下回ったのは、XfinityやPatagoniaなどのブランド名で、15スコアと14スコアでした。 最後に、データから、3つの航空会社が最も遅いAngularウェブサイトであることが明らかになりました。Delta at 3、Frontier at 2、Spirit at 1。

Next.jsは、平均パフォーマンススコアより8%低い

Next.jsは、サーバサイドレンダリングアプリケーション用のオープンソースのReactベースの同型フレームワークであり、GitHub上の52,000スターを持っている。 ページの読み込みを高速化するために、Next.jsは自動的にコードを分割し、サーバーに新しいリクエストが来るたびにHTMLを動的に生成します。

このフレームワーク上のウェブサイトの平均パフォーマンススコアは22で、平均より8%低い。 このデータによると、Next.jsサイトの50%が20未満のスコアを提供し、75%が30を下回り、90%が43を下回りました。 分類すると、旅行サイトと観光サイトはNext.jsで最高のパフォーマンスを発揮し、Lighthouseの平均スコアは29でした。 そして、最も速い3つのNext.jsサイトは、Bartleby.com、Kelloggs.com、Holidayinnclub.comで、それぞれ89点、73、75点のスコアを記録しました。

RetailMeNot.comとHermanMiller.comはそれぞれフレームワークの平均Lighthouseスコアを少なくとも21%上回り、Sears.com、AlexanderMcQueen.com、Ticketmaster.com、RedRobin.comはそれぞれ26、23、22、22と平凡なスコアを提供している。 わずかなパフォーマンスを持ついくつかの大企業には、EddieBauer.com、TragerGrilles.com、Bonobos.com、Smirnoff.comなどがあり、スコアは10 ~ 15です。 YankeeCandle.com、ProFlowers.com、LiveNation.com、23andMe.com、Gymboree.com、 Dior.comとFarri.comは10以下でLighthouseのスコアが低かった。

Reactは印象的でないスコアを持つ印象的なブランドをホスト

Reactは2013年にFacebookが開発したオープンソースのJavaScriptライブラリである。 この記事で扱う他のフレームワークとは異なり、Reactはフレームワークではなく、ユーザーインターフェイスやUIコンポーネントをすばやく簡単に構築するためのUIライブラリです。 このブログは、最も成熟したフロントエンドの1つであり、GitHubで最も人気のあるプロジェクトの1つでもあり、このブログの公開日時点で155,000スターを超えています。

Facebookは、TwitterやAirbnbのような巨大企業がReactを使用しているため、安定性が最も重要であると述べています。 興味深いことに、パフォーマンスはそれほど優先されません。 このデータから、Reactウェブサイトの平均スコアは22で、フレームワーク全体の平均スコアより8%低くなっています。 中央値は18で、サイトの75%が29を下回り、90%が40を下回っています。

Reactドメインのシェアが最も高かったのはアパレル、アクセサリー、靴でしたが、平均的なライトハウススコアが最も高かったのはマスマーチャントのカテゴリで、ウォルマート、ウェイフェア、アシュリースチュワート、ノードストローム、 クローガー、サムズクラブ、グルーポン、オーバーストック。 カテゴリはさておき、3最速のReactウェブサイトのトップはhistoricrail.com(アマゾン所有)を98で、historicaviation.com(アマゾン所有)を91でflipkart.com 74でランク付けした。

図書館の平均を上回った他の有名人は、アマゾンが57人、VRBOが49人、プライスラインが47人、ウェイフェアが39人、ロウズが33、ネットフリックスが31人だった。 図書館の平均スコアに近い名前は、Targetが25、Sur La TabとStitchFixが24、GapとGlossierが21、Victoria’s Secret at 20 and Crate and Barrelが19であった。 業界で最大の敗者のいくつかは、23andMe.com 9、ベストバイとトーリー・バーチ8、6のProFlowersとディオール3です。

ボトムライン

Google Lighthouseは、多くのeコマース企業がWebサイトのパフォーマンスを測定するための事実上のツールとなっています。 高パフォーマンススコアは、サイトの読み込みが速く、最も重要なことに、ユーザーの期待に応えることを意味します。

ウェブサイトのスピードはかつてないほど重要になっています。このパンデミックの間、消費者は店の混雑を避けるためにオンラインに移行しています。 Webサイトのパフォーマンスは、使用するフレームワークによって大きく異なり、ユーザーエクスペリエンスに大きな影響を与えます。 最新のフロントエンドフレームワーク上のほぼ2,000のトラフィックの多いWebサイトのLighthouseパフォーマンススコアを分析することで、どのフレームワークが最速の速度を提供するかを見つけました。

Nuxt.jsのウェブサイトは最も速く、Lighthouseの平均パフォーマンススコアは27、中央値は22である。 VUE.jsは、同じ平均パフォーマンススコア27点、平均20点で2位でした。 AngularとNext.jsのウェブサイトの平均スコアは23であったが、Angularはより高い中央値を保持し、3番目に速いフレームワークとなった。 最後に、Reactは最も人気のあるフレームワークですが、パフォーマンススコアが最低で、Lighthouseの平均スコアは22です。

Layer0(現在はEdgio)で作業する

Layer0を使用すると、開発チームはエッジネイティブのWebアプリケーションを迅速かつ簡単に構築してデプロイできます。 React、Angular、Vue、Next.jsなどの40モダンフレームワーク上で動作するように構築された、市場で最も完全なJamstackプラットフォームであり、開発者の速度が2倍になることが証明されています。

従来のWebアーキテクチャもサポートされており、徐々にヘッドレスアーキテクチャに移行できます。 柔軟性とモダナイゼーションを必要とするサイトでは、Layer0を使用すると、基盤となるアーキテクチャを変更したり、サイトを完全に書き換えたりすることなく、リスクを軽減し、移行のペースを高めることができます。