How to Eliminate Render Blocking JavaScript and CSS in above the fold content

 

Increasing blog’s loading speed is very important. The speed and page load time affects search result standing of a blog. Google’s ‘page insight’ is a useful tool to analyze the speed and load time of websites and blogs. One of the most common problems that webmasters face is the presence of render blocking JavaScript and CSS in above the fold content. Here, I will show you how to solve this problem.

eliminate render blocking JavaScript and css files- screenshot

 

Google’s Page insight analyzes a blog. After analyzing, it shows areas where webmasters should improve their blog. Doing so will have a positive impact on blog’s speed and loading time. Page insight shows two types of errors (areas which can be improved)- red and yellow. Most of the times, on analyzing blogs, we stumble upon the above mentioned error- ‘Eliminate render blocking JavaScript and CSS’. It is a common problem faced by bloggers.

Why is it important to solve this problem?

The pages of a blog can’t be rendered unless the problem causing JavaScript and CSS files are loaded by the browser. It means the browser waits for these JavaScript and CSS files to load (which normally takes much time). It loads other content only after this. The result is that the blog/site loads very slowly (depending upon the size of JavaScript and CSS files).

 

Now you’ll easily understand how this problem affects the quality of your blog. We can’t avoid using JavaScript and CSS files on our blog. Many useful plugins and themes used on our blog contain JavaScript and CSS files. How to tackle this problem then? Well, read on to find the solutions.

Tips to eliminate render blocking JavaScript and CSS files

 

1 Deal with CSS files first

The first step is to use a WordPress theme which is efficient and well designed. The CSS files of the theme must be clean and optimized. The CSS files of a blog’s theme is often the main culprit. It is appropriate to purchase and use good premium themes rather than using free themes.

 

CSS files of plugins also are responsible for this problem. Don’t stuff your blog with widgets. Use only those which are unavoidable and useful (like social sharing plugins). Find out and deactivate useless and slow loading plugins using P3 Plugin Profiler.

 

2 Use WP Minify

WP Minify is a plugin that compresses and delivers a compressed and optimized version of JavaScript and CSS files on a blog. This plugin will help reduce the blocking script and CSS files to an extent.

 

This powerful plugin just needs to be installed and activated. It automatically takes care of the rest of the part. This plugin will surely help speed up your blog.

 

3 Use JS Delivr to asynchronously load Javascript and CSS files

JS Delivr is a great CDN that delivers JavaScript and CSS files. Their free WordPress plugin makes this task simpler! JS Delivr can be used to host and deliver JavaScript and CSS files of ‘heavy’ plugins and themes.

 

You may also use this plugin to load JavaScript and CSS files asynchronously. By loading them asynchronously, they won’t stop the browser from rendering the page. The page will get rendered without any difficulty and the files will load asynchronously, without affecting the above the fold content.

 

The above three steps have been tested on my blog. It is effective too. Though the problem hasn’t been solved entirely (there are still some blocking scripts present, thanks to my new experiments!), it definitely reduces the number of blocking scripts. I have been able to solve the problem of render blocking JavaScript and CSS to some extent. Try these methods and see the improvement!

 

Share this awesome article!
Facebooktwittergoogle_plusredditpinterestlinkedin

One Response

  1. Ankit Patel October 14, 2013