How to reduce the usage of heavy bootstrap css in production?

Question

I feel bootstrap is heavy to use in production which is using more bandwidth. is there way to short this issue ? I hope lot ways are there. As a new to development i had keen interest to know .. thanks

Answer 1

You can download the less files (scss files in v4) and build your own "bootstrap css" with parts you only need. Or you can customise it here if the "less" part is to complicated for you. As mentioned by Daren, make sure you use the minified version of it. Also a bit more friendly would be to use a CDN as that helps with browser caching.

Answer 2

You can use following methodologies to improve site performance while you using bootstrap.

Method 1 : Use the minified versions of all the .css and .js

Method 2 : Use gzip compression to compress everything sent to client browsers

Method 3 : Use CDN , content delivery networks are really helping to serve commonly used css js contents. You can use one of the bootstrap cdn instructed by Bootstrap itself (https://getbootstrap.com/docs/3.3/getting-started/)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Method 4 You can customise using https://getbootstrap.com/docs/3.3/customize/ . Here you can choose needed components. This will also improve performance