静的ページの配信時に React/Svelte 間にどれぐらいの差があるか調べたい

ポートフォリオやブログを作っていて、Reactにするか？svelteにするか？で結構悩み続けているのでざっくりベンチマーク取って定めたいねっていう感じのモチベーション。

SSG は適用できる範囲が狭すぎるので基本 SSR とする。
また、機能豊富な webアプリケーションではなく、静的ページの配信で9割満たせるぐらいの軽いものを作る想定とする。

localhostで起動して、chrome devtool で slow 3G 環境の Network タブを眺めてみる感じの雰囲気ベンチマーク。

React

React は Remix を使う。
（app router とかで苦しんだので nextjs は今回そもそも選定候補から弾いている。なので比較に含めない。だいたい同じだと思うが。）

時間は約8秒。
画面自体は最初の緑が青になった時点、つまり2秒で表示されている。残りはハイドレーション用の読み込みなどの時間。
ほぼコンテンツのない画面の表示速度なので、正直あまりあてにならないような気もするが、まあ。

転送サイズは約90kb。

やはり react-dom の影響で js がでかい。MINIFIED + GZIPPEDで 41kb らしいので大半が react-dom か。

ただ導入ライブラリが react オンリーってあまり考えにくいので、実際はそこまで影響なさそう。
画像何枚か配信したらもう完全に誤差だろう。

ブラウザキャッシュ効くと結局こうなる。

良く開くサイトならもう本当に何でもいいな。

svelte は順当に sveltekit。

転送サイズは28 kb。
React と比較して非常に軽い。

一方、全ロードが終わるまでの時間を見てみると React と大差ない。
重要なのは SSR/SSG をすることで、ライブラリ単品だとロード速度に差はないと考えてよさそうだ。

考えてみればそれもそうだ。SSRで組みあがった html が配信されるだけの時間に、大きな差があるわけがない。

ロードは変わらなかったが、React を Svelte に置き換えるだけで配信サイズが半分以下になるのであれば、置き換えるモチベーションとしては悪くないか。デプロイ先によっては配信サイズの制約があるケースもあるし。

複雑なアプリを組むなら筆者の慣れもあって React を使いたいところだけど、今回はほぼ html 配信するだけなので svelte に軍配が上がりそう。

ところで、Remix には JavaScript 無効化オプションがある。

いつ使うものなのか分からなかったので存在を忘れていた。こういうときに使うのか。

やってみた。

5.4kb。
ページ読み込みに2秒。そのあとの2秒～4秒は favicon 取ってきてるだけなのでほぼ関係なし。

Javascript がないのでもう React としては何も動かせないけれど、ページごとに有効無効を切り替えられるし、dangerouslySetInnerHTML という違法スレスレの JS 埋め込み方法でほんのちょっとの JS なら動かせなくもないし、結構アリかも？

そういえば Astro の存在をちゃんと認識してなかったので比較対象にしなきゃなー、と考えていたけれど Remix くんわりと優秀なので React + Astro のアドバンテージのひとつが潰れたかも。

sveltekit にも JS 無効化あるんじゃ？って調べたらあった。

ネットワーク見たら Remix の JS 無効化とほぼ一緒なのでこっちは割愛。

いざハイドレーションが必要になった時の性能は svelte の方が好ましいが、ほぼ誤差と言い切っていい程度の影響しかなさそうなのもほぼ確定なのでもう書きやすい方でいいんじゃないかな

html + css をザクザク書いていくだけなら React より svelte の方が楽。
JSが必要かつ、パフォーマンスを極限まで追い求めたいってなると solidjs + Astro が有力択になってくるかもしれない？

表題とはやや逸れるが、solid使ってみようと思って solidstart v1.0.6 でも試してみたので追記

いつの間にか chrome がアップデートされ低速4Gと3Gになってた。3Gで計測。恐らく同じだとは思う

オレンジ線の位置が画面表示された瞬間。4秒ちょっと。んん？

SSR は有効になっているのだが、ハイドレーションが来るまで画面表示がされていないっぽい？何か設定間違えてるかも。というか dev だと 2秒で表示されててプロダクションビルドと逆転しているので明らかにバグ。

まあそんなに細い回線で利用することがどれぐらいあるのか？というのはあるのであんまり気にする必要はなさそう。それぐらいシビアにいくなら astro ベースで選定したほうがいいと思うので

あとは…アプリはReactで、シンプルな"サイト"は svelte の方がいいよねって記事を読み同意しかなかったので、この比較が意味あるぐらい薄くフロントを作りたいと考えているなら svelte (Astro + svelte)で正解だと思いました

このスクラップは5ヶ月前にクローズされました