pi0
commented
2 years ago It seems you are using preview for all measurements. Working on a quick feature to support built-in compression 👍🏼 ~> https://github.com/unjs/nitro/pull/449
Closed pi0 closed 2 years ago
pi0
commented
2 years ago It seems you are using preview for all measurements. Working on a quick feature to support built-in compression 👍🏼 ~> https://github.com/unjs/nitro/pull/449
pi0
commented
2 years ago Rendered in readme (only nuxt entry updated and sorted by column priority)
dashboard:
┌─────────┬────────────┬──────────┬──────────┬──────────┬──────────┬───────┬──────────────┬───────────┐
│ (index) │ name │ TTI │ FCP │ LCP │ TBT │ Score │ Eager JS KiB │ Total KiB │
├─────────┼────────────┼──────────┼──────────┼──────────┼──────────┼───────┼──────────────┼───────────┤
│ 0 │ 'qwik' │ '0.6 s' │ '0.6 s' │ '1.5 s' │ '0 ms' │ 100 │ 2 │ 38 │
│ 1 │ 'react' │ '0.8 s' │ '0.8 s' │ '2.4 s' │ '0 ms' │ 98 │ 187 │ 199 │
│ 2 │ 'gatsby' │ '0.8 s' │ '0.8 s' │ '1.4 s' │ '0 ms' │ 100 │ 82 │ 87 │
│ 3 │ 'lit' │ '0.8 s' │ '0.8 s' │ '1.1 s' │ '0 ms' │ 100 │ 23 │ 25 │
│ 4 │ 'solid' │ '0.9 s' │ '0.6 s' │ '1.3 s' │ '0 ms' │ 85 │ 24 │ 28 │
│ 5 │ 'astro' │ '0.9 s' │ '0.9 s' │ '1.1 s' │ '0 ms' │ 100 │ 15 │ 35 │
│ 6 │ 'marko' │ '1.0 s' │ '0.8 s' │ '0.9 s' │ '10 ms' │ 100 │ 24 │ 33 │
│ 7 │ 'fresh' │ '1.3 s' │ '1.3 s' │ '1.5 s' │ '0 ms' │ 100 │ 17 │ 46 │
│ 8 │ 'next' │ '1.6 s' │ '0.6 s' │ '1.2 s' │ '10 ms' │ 100 │ 91 │ 103 │
│ 9 │ 'svelte' │ '1.6 s' │ '1.6 s' │ '1.7 s' │ '0 ms' │ 99 │ 29 │ 35 │
│ 0 │ 'nuxt3' │ '1.7 s' │ '1.7 s' │ '1.7 s' │ '0 ms' │ 99 │ 59 │ 65 │
│ 10 │ 'angular' │ '1.7 s' │ '1.5 s' │ '1.5 s' │ '150 ms' │ 98 │ 86 │ 88 │
│ 11 │ 'vue3' │ '1.8 s' │ '1.2 s' │ '2.1 s' │ '0 ms' │ 94 │ 41 │ 50 │
│ 12 │ 'nuxt2' │ '2.1 s' │ '1.2 s' │ '2.1 s' │ '70 ms' │ 98 │ 106 │ 118 │
└─────────┴────────────┴──────────┴──────────┴──────────┴──────────┴───────┴──────────────┴───────────┘Todo:
┌─────────┬────────────┬─────────┬─────────┬─────────┬──────────┬───────┬──────────────┬───────────┐
│ (index) │ name │ TTI │ FCP │ LCP │ TBT │ Score │ Eager JS KiB │ Total KiB │
├─────────┼────────────┼─────────┼─────────┼─────────┼──────────┼───────┼──────────────┼───────────┤
│ 0 │ 'astro' │ '0.6 s' │ '0.6 s' │ '0.6 s' │ '0 ms' │ 100 │ 20 │ 32 │
│ 1 │ 'qwik' │ '0.7 s' │ '0.7 s' │ '1.2 s' │ '0 ms' │ 100 │ 2 │ 25 │
│ 2 │ 'react' │ '0.8 s' │ '0.8 s' │ '2.2 s' │ '0 ms' │ 99 │ 159 │ 171 │
│ 3 │ 'fresh' │ '0.8 s' │ '0.8 s' │ '0.9 s' │ '0 ms' │ 100 │ 9 │ 37 │
│ 4 │ 'lit' │ '0.8 s' │ '0.8 s' │ '1.1 s' │ '0 ms' │ 100 │ 16 │ 18 │
│ 5 │ 'solid' │ '1.0 s' │ '0.7 s' │ '1.3 s' │ '40 ms' │ 86 │ 17 │ 19 │
│ 6 │ 'marko' │ '1.1 s' │ '0.8 s' │ '0.9 s' │ '10 ms' │ 100 │ 17 │ 23 │
│ 7 │ 'vue3' │ '1.2 s' │ '1.2 s' │ '1.8 s' │ '10 ms' │ 99 │ 33 │ 41 │
│ 8 │ 'svelte' │ '1.5 s' │ '1.5 s' │ '1.5 s' │ '0 ms' │ 100 │ 19 │ 24 │
│ 0 │ 'nuxt3' │ '1.5 s' │ '1.5 s' │ '1.7 s' │ '0 ms' │ 99 │ 50 │ 55 │
│ 9 │ 'gatsby' │ '1.6 s' │ '0.8 s' │ '1.1 s' │ '0 ms' │ 100 │ 70 │ 75 │
│ 10 │ 'nuxt2' │ '1.6 s' │ '1.0 s' │ '1.0 s' │ '40 ms' │ 100 │ 95 │ 106 │
│ 11 │ 'angular' │ '1.6 s' │ '1.5 s' │ '1.6 s' │ '30 ms' │ 99 │ 72 │ 74 │
│ 13 │ 'next' │ '2.2 s' │ '0.7 s' │ '0.8 s' │ '110 ms' │ 99 │ 83 │ 94 │
└─────────┴────────────┴─────────┴─────────┴─────────┴──────────┴───────┴──────────────┴───────────┘Hello world:
┌─────────┬────────────┬─────────┬─────────┬─────────┬──────────┬───────┬──────────────┬───────────┐
│ (index) │ name │ TTI │ FCP │ LCP │ TBT │ Score │ Eager JS KiB │ Total KiB │
├─────────┼────────────┼─────────┼─────────┼─────────┼──────────┼───────┼──────────────┼───────────┤
│ 0 │ 'qwik' │ '0.7 s' │ '0.7 s' │ '0.7 s' │ '0 ms' │ 100 │ 0 │ 4 │
│ 1 │ 'astro' │ '0.7 s' │ '0.7 s' │ '0.7 s' │ '0 ms' │ 100 │ 0 │ 9 │
│ 2 │ 'react' │ '0.8 s' │ '0.8 s' │ '2.2 s' │ '0 ms' │ 99 │ 154 │ 166 │
│ 3 │ 'fresh' │ '0.8 s' │ '0.8 s' │ '0.8 s' │ '0 ms' │ 100 │ 0 │ 27 │
│ 4 │ 'marko' │ '0.8 s' │ '0.8 s' │ '1.1 s' │ '0 ms' │ 100 │ 15 │ 21 │
│ 5 │ 'lit' │ '0.8 s' │ '0.6 s' │ '0.9 s' │ '10 ms' │ 100 │ 15 │ 16 │
│ 6 │ 'solid' │ '0.9 s' │ '0.9 s' │ '1.1 s' │ '0 ms' │ 100 │ 16 │ 18 │
│ 7 │ 'vue3' │ '1.2 s' │ '1.2 s' │ '1.5 s' │ '0 ms' │ 100 │ 31 │ 38 │
│ 8 │ 'gatsby' │ '1.4 s' │ '0.6 s' │ '1.0 s' │ '0 ms' │ 100 │ 69 │ 73 │
│ 9 │ 'svelte' │ '1.5 s' │ '1.5 s' │ '1.5 s' │ '0 ms' │ 100 │ 18 │ 22 │
│ 0 │ 'nuxt3' │ '1.5 s' │ '1.5 s' │ '1.7 s' │ '0 ms' │ 99 │ 50 │ 57 │
│ 10 │ 'nuxt2' │ '1.5 s' │ '0.9 s' │ '0.9 s' │ '120 ms' │ 99 │ 93 │ 103 │
│ 11 │ 'angular' │ '1.7 s' │ '1.5 s' │ '1.5 s' │ '150 ms' │ 98 │ 72 │ 74 │
│ 12 │ 'hydrogen' │ '1.8 s' │ '0.6 s' │ '1.6 s' │ '30 ms' │ 91 │ 160 │ 172 │
└─────────┴────────────┴─────────┴─────────┴─────────┴──────────┴───────┴──────────────┴───────────┘SSR:
┌─────────┬────────────┬─────┬──────┬─────┬───────┬─────┬────────┬─────────┬─────┬─────┐
│ (index) │ name │ 1% │ 2.5% │ 50% │ 97.5% │ 99% │ Avg │ Std Dev │ Min │ Max │
├─────────┼────────────┼─────┼──────┼─────┼───────┼─────┼────────┼─────────┼─────┼─────┤
│ 0 │ 'marko' │ 1 │ 1 │ 1 │ 3 │ 4 │ 1.29 │ 0.8 │ 1 │ 39 │
│ 1 │ 'fresh' │ 4 │ 4 │ 4 │ 5 │ 6 │ 4.19 │ 0.88 │ 1 │ 50 │
│ 2 │ 'hydrogen' │ 4 │ 4 │ 5 │ 12 │ 14 │ 5.63 │ 4.39 │ 2 │ 181 │
│ 3 │ 'svelte' │ 6 │ 6 │ 7 │ 16 │ 18 │ 8.17 │ 3.12 │ 4 │ 61 │
│ 0 │ 'nuxt3' │ 6 │ - | 7 │ 18 | - | 8.5 │ 4.38 │ - | |
│ 4 │ 'solid' │ 6 │ 6 │ 8 │ 18 │ 22 │ 8.77 │ 3.8 │ 3 │ 71 │
│ 5 │ 'nuxt2' │ 11 │ 11 │ 14 │ 25 │ 32 │ 15.04 │ 4.89 │ 3 │ 105 │
│ 6 │ 'astro' │ 11 │ 11 │ 14 │ 31 │ 38 │ 16.56 │ 5.98 │ 9 │ 75 │
│ 7 │ 'remix' │ 12 │ 13 │ 18 │ 47 │ 62 │ 20.3 │ 8.87 │ 2 │ 93 │
│ 8 │ 'gatsby' │ 27 │ 28 │ 33 │ 78 │ 103 │ 36.9 │ 12.86 │ 26 │ 153 │
│ 9 │ 'next' │ 35 │ 35 │ 40 │ 95 │ 113 │ 46.96 │ 19.06 │ 34 │ 220 │
│ 10 │ 'angular' │ 113 │ 116 │ 127 │ 268 │ 400 │ 141.73 │ 47.64 │ 42 │ 408 │
└─────────┴────────────┴─────┴──────┴─────┴───────┴─────┴────────┴─────────┴─────┴─────┘Also can't judge throughput but running URL=/dashboard-ssr FRAMEWORKS=nuxt3 npm run measure-ssr, there are interesting numbers on my screen: 👀
steve8708
commented
2 years ago killers, thanks for sending @pi0 and the incredibly helpful info here, will pull down and get things updated shortly!
steve8708
commented
2 years ago @pi0 readme updated! some solid gains
Hi @steve8708. This PR updates and fixes Nuxt3 benchmarks with more realistic numbers.
Currently, we were basically benchmarking Nuxt 3 SSR without compression. Let me explain nuxt commands before changes:
nuxt build: Builds Nuxt with Node.js target preset and prerenders (generates) specified routes if anynuxt generate: Prerenders routes starting from/and uses a crawler to pretender any possible routenuxt preview: Starts build against target preset. With the default target, it runs a local Node.js process with SSR renderer and no compression (new feature: it is possible to enable compression without CDN too!)In this PR I've made a few changes:
vue-plugin-compression./,/todoand/dashboardto the prerender routesdashboard-ssrpage and enabled nuxt3 to be included inmeasure-ssrbenchmarks.When running
nuxt previenow, a local Node.js runs Nuxt 3 in hybrid mode handling generated routes with compression and rest with SSR. Tip: if you want to ensure it is SSR rendered or static, check forX-Powered-Byheader. Only SSR pages have it.Results: Here are the results from my M2 Air - Node.js v16.16.0 - MacOS 13.0 Beta (22A5321d). I've not updated the readme so that you can run benchmarks on the same environment to be fair but please let me know if you like to update the current readme too. Current data is honestly unfair for Nuxt3...
/todo
/dashboard
/dashboard-ssr (ssr)