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

Posted by on in Blog

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?

Firstly, Joostrap is is built on the backbone of Bootstrap.

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.

So why not think about loading Bootstrap from a CDN host, such as:
http://www.bootstrapcdn.com

In our Joostrap templates, we give you a template parameter to choose loading Bootstrap (and jQuery) locally or from the CDN as below:

cdn load choice

But, you say, this is still a heavy download (initially) of the 'full' and bloated Bootstrap files. So what else could we do instead?

A great resource for your bed time reading is here, by the guys at MAXCDN:
How To Reduce Image Size With WebP Automagically
http://maxcdnblog.wpengine.com/how-to-reduce-image-size-with-webp-automagically

Customise Bootstrap's Files

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'.

So go and customise your Bootstrap files at http://getbootstrap.com/customize and pick & choose what you need to be in these files.

Let's look at the example below.

Let's remove some of the elements that we don't want to use or are not required on our new site build.

 

Common CSS Elements

 

Print media styles - remove
Typography - remove
Code - remove
Tables - remove
Forms - remove
Buttons - remove

Component Elements

Glyphicons - remove
Button groups - remove
Input groups - remove
Breadcrumbs - remove
Pagination - remove
Pager - remove
Labels - remove
Badges - remove
Jumbotron - remove
Thumbnails - remove
Progress bars - remove
Media items - remove
List groups - remove
Panels - remove
Wells - remove
Close icon - remove

JavaScript Components

Tooltips - remove
Popovers - remove
Modals - remove
Carousel - remove

 

So what does removing the above give us, in terms of less bloat.

 

Bootstrap - out of the box

bootstrap.css - 121k
bootstrap.min.css - 100k
bootstrap.js - 55k
bootstrap.min.js - 29k
font's folder - 147k
Total (un-minified) - 323k

Bootstrap - after customisation

bootstrap.css - 26k
bootstrap.min.css - 21k
bootstrap.js - 55k
bootstrap.min.js - 29k
Total (un-minified) - 81k

 

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?

thetelegraph unused selectors

Or, have you considered the following as an alternative:

https://github.com/geuis/helium-css

One Last Thing

I don't have enough time in this blog post to fully explain the following.

But for you command line geeks out there, the following will be a huge time saver for you to compile your own Bootstrap CSS. It's cool, easy to use and very useful.

http://gruntjs.com
https://www.npmjs.org/package/grunt-bootstrap

Last modified on
blog comments powered by Disqus

Supporting Partners

stackideas
sobipro
k2
akeebabackup
jomsocial
jce editor

 

Our Preferred Joomla Host's

Web Hosting

Get in Touch With us

For account or Joostrap enquiries, please get in touch with us here.

Contact us