Have you ever wanted to make a super fast website, that can download and execute faster than a neuron in your brain can fire? Have you ever wanted to brag to your friends about how your website, on a fresh load, only downloads 12KB of data?

You're in luck. Here are my top 3 ways to not make a bloated crap website.

Be willing to be inflexible; skip the frameworks (if you can)

It sure is nice to have bootstrap included for everything, but unless you're making something complex, it's really not worth including at all. In this case, I've made a customized bootstrap grid + reboot css file that only contains what I think I'll need, and has everything I'll never use stripped out completely.

Frameworks are a massive help, especially when you're newer to the web. If you don't have a clear vision for what you're designing, or want the flexibility a framework gives you, there's no harm in doing what makes sense.

That's not the point of this post though.

Don't use big ol' javascript libraries

JQuery alone is 6x larger than my website as of writing time. JQ is a bad example because it's known to be bloat if you're targeting modern browsers- but the idea sticks; only use a JS library if it makes sense for your use-case.

Unless you need the functionality of a huge library, eg you're making a complex app that's hyper-interactive, sticking to plain JavaScript will give you the functionality most people need, compatibility that is more than acceptable for today's day and age, and plenty of power.

Side note, the Vue3 production runtime JS file, when gzipped, is around 26KB. That's only twice as big as this site as of writing- dang!

Don't load images or scripts (or rich content in general) unless you absolutely need to

I've gone to the extreme and made it so code highlighting and image loading only happens if you're viewing a page, with the former only loading the highlighting scripts if there's code to highlight on the page. But simply leveraging lazy-loading can easily improve the initial paint time of your site, and can dramatically reduce client bandwidth usage if you're smart about limiting what gets shown.

End result

Your website is 12.3KB now:

Enjoy