Bootstrap CSS and JavaScript Bloat - Do We Need It? Let's Reduce It

Complexity in our designs is often unavoidable as the client loves all of the wiz, bang & fancy transitioning effects afforded to us by CSS3 and alike. Sometimes, it’s also necessary in the real world. When working for any client there is always going to be a level of complexity that we will try to reduce. But with the introduction of RWD (Responsive Web Design), 'bloat' is the new buzz word and reducing our sites 'bloat' should be paramount if we are wanting our sites to work quicker on smaller mobile devices.

Our job as a designer and/or developer is all about knowing how to creatively solve problems that our clients present us with. But, we also need to focus on the core elements that make the website work and work well. Importantly, understanding when & how to reduce the bloat in a website is a very important part of that.

So what can we do?What do we have available to us to help in this task?

Bootstrap has been ripped apart by hordes of people for being a hugely bloated framework of CSS & JavaScript. Yes it is, out of the box. But what people don't understand is that it doesn't have to be - if you are lazy, it definitely is bloated and you should be slapped on the wrist!

We have some options that we can utilise to reduce our bloat.

CDN's

Let me ask you, have you thought about this?

Do you realise that you can load common libraries like bootstrap directly from a CDN such as Google’s Developer APIs CDN. If we do this, resources are cached on the user’s machine based on the CDN domain — so — if a user has used another site that leverages the common CDNs (highly likely) the files won’t need to be downloaded again.

File size only has a drastic impact on an empty cache. Serving up those resources from your own server is a waste of bandwidth and creates a ‘real’ negative impact on performance.

Not to mention, the resource download limit is capped per-domain. The more domains a site fetches it’s resources from, the more concurrent connections the browser can open in parallel. That’s one of the reasons why media-heavy sites use a plethora of caches spread across domains and subdomains to serve content.

Customising Bootstrap's CSS, components, Less variables, and jQuery plugins can give you your very own version of the Bootstrap files.

Why would you want to do this?

Joostrap templates ship with the full version of the latest Bootstrap CSS & JavaScript files. We do this so that our users can utilise 'all' of the awesome functionality that Bootstrap gives us. But are we going to use all of this on every site? Do we need all of it? The answer in 99% of cases is 'No'.

That's a reduction in bloat from the CSS & Javascript files of over 81%. Say no more!

But let's look at some other utilities we can use to help us reduce bloat even further.

Dust Me Down

If you use Firefox why not give the Firefox add-on 'Dust-Me Selectors' a whirl.https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors

'Dust-Me Selectors' details of all the stylesheets and selectors that were found, organised into used and unused selectors. This will tell you what CSS is used on a single page or even an entire site.

Using the spider, you can scan XML or your HTML sitemap. Load and scan every page that's linked from the sitemap, checking every stylesheet against the DOM of every page that includes it. This will give you an accurate picture of the site-wide selector use.

As an example, I have run the Firefox Dust Me Down utility on the following website - see where I'm going? do you?