How can you make Bootstrap load faster? Thousands of websites use Bootstrap for developing a great mobile first website easily and is an essential web design element. Bootstrap scripts and CSS are easily installed on your server, or loaded via a few lines of code from Bootstrap CDN. But is this the best way to load Bootstrap and still make your site faster?
You have probably read how we try to make super fast sites, not only for SEO, but also for a great user experience without any lag time. We use the amazing Bootstrap for the core design of this site, and here is how we continue to make it faster…
1. Remove Bootstrap Scripts
Scripts take time to load. Scripts are need to do awesome things like pop up modals, collapsing navbars, dropdown menus etc… While these are some core strengths of using Bootstrap scripts, most websites can do without them, and yet use the popular HTML, CSS, and JS framework for creating a great mobile first responsive website. So remove all Bootstrap scripts which power their plugins and you are half way done.
2. Remove jQuery
3. Customize Bootstrap
You do not need to load the full Bootstrap CSS to power your site design. Bootstrap officially allows you to choose only the components and CSS you actually need. Since Bootstrap Scripts are not needed, you can safely leave out a large chunk of code.
You are also probably using only a few components in your site design like buttons, list groups, wells, alerts etc – so include them. You might not be using many features like jumbotron, progressive bars, panels etc. and you can safely not include them in your selection. Compile and Download. You will get a much smaller compressed file, which is better than using the full CSS code. Remember this will load before your page content loads, so a huge file with largely unused code will slow your site.
4. Remove Glyphicons
Glyphicons is a nice font icon component wherein Glyphicons halflings can be used free of cost. These are miniature icons and can be used with Bootstrap CSS support. Here again you can avoid using a font icon totally and further reduce CSS size. If you do use icon fonts, a great alternative is to use the amazing Font Awesome, an icon font which is more flexible and has hundred of icon designs for every need.
5. Load Bootstrap CSS via CDN
Enjoy the best of Bootstrap with these tips and make it faster.