How can you make Bootstrap themes and Bootstrap templates 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?
Faster Bootstrap Themes
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 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 halfway done.
2. Remove jQuery
All Bootstrap scripts need jQuery to run the code. jQuery is an amazing javascript library that powers a lot of awesome stuff you see online. For example, the collapsible navbar will not work, unless jQuery is also loaded. Once you have removed the Bootstrap scripts, there is no need to call jQuery (unless you are using jQuery to power other non-Bootstrap plugins, etc.). You can also remove jQuery or replace it with Google CDN to load faster.
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
Now once you have the new compressed CDN file, always load it via a content delivery network (CDN), so that it loads fastest via different servers across the world nearest to the site visitor. Your site should invest in a good CDN service to deliver static content files like images, CSS, and javascript. We use MaxCDN to load such files on our site, and use their gzip option to compress the file further so that it’s only a few kb when it actually loads on the visitor’s browser! Here are more tips to load CSS faster and make your site load faster.
Enjoy the best of Bootstrap themes with these tips and make it faster.