Which is better, removing unused styling classes from css library or use a CDN? [closed]

Question

Where possible in web app design I have used a CDN to distribute commonly used library's (IE. JQuery, Bootstrap.css etc).

However....

Whilst optimising my latest project I have noticed that the majority of the pages use less than 10% of the bootstrap css, leaving 90% unused.

Edit: This question is about final deployment not development.

Question:

Is it better to use a CDN where there is a very good chance the file has already been cached somewhere local and very probably by the visitors service provider?

Or:

Write your own css file that only uses what you need, dramatically reducing file size and host it locally?

The Bootstrap css minified file is 122kB give or take. In my example 109kB is unused leaving me 13kB of used css file. In this scenario would it be better to host the 13kB locally or the 122kB from a CDN?

Thanks in advance,

Gavin.

Answer 1

I think it depends on your end user. If you are targeting average users, you can safely assume they have cached CDN resources. You need to analyze your user base.

I always bundle them all and place them on a CDN. Bundling decreases page weight and also benefits your server by offloading work. But it also depends on availability of build process and its automation.

You may find following tools handy.

• Remove unused styles from CSS: https://github.com/giakki/uncss

• Remove unreachable code from javascript: https://github.com/mishoo/UglifyJS