5 Methods to Load Bootstrap Faster in WordPress


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.




11 Brilliant Comments - Join Discussion Now!

  1. Rachit says:

    When it comes to load website faster, you are just awesome rakesh sir. I thank you for such tips, which would help me in future.
    Thanks for sharing ! Cheers

    • rakesh says:

      When Loading time became the major SEO factor then nobody can ignore the speed. If you are ignoring that it means you are ignoring the SEO. Please go ahead and give this a try and also do not forget to update us. :)

    • rakesh says:

      Thanks Rachit for your kind words. In case you need any help related to speed of your blog, do not forget to ping me.

  2. Sachin says:

    Hi Rakesh
    Its awesome tips for boost speed
    Thanks for sharing

  3. salman says:

    Hi rakesh you are great man rakesh i m looking for 1 more post from you how to make download image links like this in your website http://binarynote.com/demo/wallpaper/2014/07/06/resident-evil-11/
    Please can you make for me like this my site is http://www.darveshtv.com/.

    Please let me know how much you charge or you have about this topic please give me link.

    my email is surgical357@gmail.com

    I need read bleow

    . Built in Download Wallpaper in different sizes, No need to upload different size of wallpaper. Just Upload only original size (1900x1200px ). Rest will be maintained by the theme script

  4. Hey Rakesh thanks a lot for sharing this tip, My site load speed was too low in the google page insights. Now it’s boosted up. Thanks again for sharing. :)

    • rakesh says:

      Hi Niladri, Happy to know that these bootstrap tricks helped you to load your website faster. Keep in touch for such ideas ~rakesh kumar

  5. Alex says:

    Hey Rakesh , thanks a lot for sharing this
    tip, My site load speed was too low in the
    google page insights. but now my speed improves about 50% thanks. again .

  6. Rohan says:

    This tip is cool and hopefull it will work but how to access bootstrap panel to select and deselect options?

  7. Drew says:

    Good advice here for loading Bootstrap faster in wordpress. It’s nice to hear from someone who knows what they are talking about. Thanks so much for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>