Svelte for SSG

Today I finished moving the static site generation logic from Preact to Svelte, and I’m positive it was a great move. 

Everything is substantially faster: the Rollup build takes 2 seconds instead of 10 with Webpack (+80% improvement) and generating 25k blog posts takes only 22 seconds against 120 previously (+82% speed). At Netlify, a build minute is priced between $0.014 and $0.019 ($19 for 1000 minutes, then $7 for an additional 500 minutes), so switching from Preact to Svelte would literally save me 80% on my monthly bill, or $19 per month if it allows me to stay on the free plan. Not bad for a solo indie business, and if I was using Netlify.

Even though the documentation isn’t optimal yet, I managed to implement all of the important features I needed to generate efficient websites: route-based code-splitting, server-side rendered (aka SSR) routing, hybrid rendering (SSR + client-side hydration), service worker creation, and TailwindCSS support. There is definitely an opportunity to write technical content about this futuristic yet minimalist Javascript framework.

I also managed to go below the 2-second mark for the time-to-interactive metric, 1.2s exactly. It’s twice faster than my previous Preact code, but it gives me in both cases a perfect 100/100 Lighthouse score. All of the other Performance metrics are below 1 second, and the max first input delay is below 200 ms. Perfect user experience, and perfect for search engine optimization.

It will take me a few more weeks to find all the niceties of Svelte, but I feel already pleased and will suggest it to every web developer I have the chance to talk with.