CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
User
User

Reputation: 61

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

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

Upvotes: 4

Views: 9589

Answers (3)

Suresh Velusamy
Suresh Velusamy

Reputation: 2398

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

Upvotes: 3

Dejan.S
Dejan.S

Reputation: 19158

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.

Upvotes: 6

Daren Tan
Daren Tan

Reputation: 33

If you are not already, you should use the minified version of bootstrap (essentially it is the same as the normal bootstrap without any whitespaces/ spaces so the file size is smaller and it runs faster).

Upvotes: 3

Related Questions