I test three different frameworks are tested: SvelteKit+MDSveX, Astro, and Iles. Three increasingly long blogposts containing a single interactive Counter component are included. The Counter component is written with Preact in Astro and Preact in Iles.
| Page | Word count | # DOM elements | uncompressed HTML (KB) | gzipped HTML (KB) |
|---|---|---|---|---|
| post1 | 8.8k | 1k | 78 | 28 |
| post2 | 23k | 2.5k | 200 | 78 |
| post3 | 71k | 7.5k | 600 | 240 |
Using Webpagetest I ran a Lighthouse benchmark thrice for each framework on post1 and post3.
| Framework | Total JS uncompressed (KB) | Total JS gzipped (KB) | LH Run 1 | LH Run 2 | LH Run 3 |
|---|---|---|---|---|---|
| SvelteKit+MDSveX | 290 | 100 | 99 | 99 | 99 |
| Astro | 12 | 6 | 99 | 100 | 100 |
| Iles | 14 | 6 | 100 | 100 | 100 |
| Framework | Total JS uncompressed (KB) | Total JS gzipped (KB) | LH Run 1 | LH Run 2 | LH Run 3 |
|---|---|---|---|---|---|
| SvelteKit+MDSveX | 2175 | 780 | 45 | 53 | 54 |
| Astro | 12 | 6 | 73 | 80 | 84 |
| Iles | 14 | 6 | 77 | 80 | 83 |
Total Blocking Time and Time to Interactive are the only metrics which suffer with scale for SvelteKit in comparison to the others. For an interactive blog, this might not be relevant since we assume a reader would start reading the post before clicking anything. And, anyway, this performance degradation only becomes appreciable at very long post lengths. This performance issue could be resolved using partial hydration, like the other two frameworks.