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.
We have some options that we can utilise to reduce our bloat.
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:
In our Joostrap templates, we give you a template parameter to choose loading Bootstrap (and jQuery) locally or from the CDN as below:
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
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?
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
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
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
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.
'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?
Or, have you considered the following as an alternative:
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.