5 Methods to Load Bootstrap Faster in WordPress

load bootstrap themes faster

How can you make Bootstrap CSS Framework Load faster in WordPress? Right now,Thousands of Web Designer use Bootstrap for developing a great mobile first website easily and on the top of it this enhance the speed of development many fold.

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?

How to Make Bootstrap Load Faster

You have read this several times how to use bootstrap to make awesome mobile first website but did they also taught you how to load bootstrap faster? Here are some points which, we normally use to load bootstrap faster.

1. Remove Bootstrap Scripts

Bootstrap comes with a lots of script that power popups model, collapsing Navbars and Drop down Menus etc.  These are some of the great addons of bootstrap but most of the website does not need all these scripts and can be designed using the simple grid system and simple navigational system using proper HTML and CSS.

Previously I was obsessed with bootstrap navigation system and drop down  menu but later on realized that most bloggers never ever use drop down system and pull-down menu.  Thus these types of scripts and CSS can be trimmed very easily.

2. Remove Extra CSS – Customize Bootstrap CSS

The same way Bootstrap adds a lots of extra CSS in every compiled downloadable version but the same way as we told you for script, These extra CSS is again not required by every Web Design.

jquery component in bootstrap

To remove Extra CSS just select the desired CSS you need and compile accordingly.

3. Remove Glyphicons

These font icons are built in with every bootstrap framework but they are limited and does not have a vast range as such font-awesome provide.

glyphicons in bootstrap

Font-awesome font-icons are easily available through its CDN ( Content Delivery Network) thus they should be preferred.

4. Enqueue Style Sheet and Scripts

This feature normally comes in premium WordPress themes like quicksport – does not load all the style sheets and scripts in blocking mode. To load your stylesheet in non blocking mode use wp_enqueue_style provided by WordPress.

Just open  your functions.php file and paste the following code ( please make appropriate changes according to your folder )


function theme_name_scripts() {
wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.css’);
wp_enqueue_style( ‘bootstrap-theme’, get_template_directory_uri() . ‘/css/bootstrap-theme.css’);
wp_enqueue_style( ‘abhishek’, get_stylesheet_uri() );
wp_enqueue_style( ‘font-awesome’, get_template_directory_uri() . ‘/css/font-awesome.css’);
wp_enqueue_script( ‘jquery’, $src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", $deps = array(), $ver = false, $in_footer = true );
wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘/js/bootstrap.js’, array(), ‘1.0.0’, true );
add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ );

5. Use CDN

If all the above methods does not help you to load bootstrap faster then compress your main files using any CSS compression tools and try to 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. cloudflare and incapsula are two most used free CDN but if you want to use some serious CDN then MaxCDN to load such files  and use their gzip option to compress the file further so that its only a few kb when it actually loads on the visitors browser!

Hope the above steps will also help you to load your bootstrap theme much more faster then ever before.

Related Posts

Leave a Reply

Your email address will not be published.