Render Blocking Js

by admin

render-blocking-js-settings

If you analyze the speed of your site via Google PageSpeed Insights, you may get a warning which is Eliminate render-blocking JavaScript and CSS in above-the-fold content as below.

Eliminate Render Blocking Warning

This warning contains two part which are Optimize CSS Delivery and Remove render-blocking JavaScript.

Remove Render Blocking JavaScript

– This feature fixes only Remove render-blocking JavaScript warning.
– This feature does NOT fix Optimize CSS Delivery warning.

How it works

You can find lots of tutorial which are talking about adding attributes which is “defer” or “async” or loading js after page load. This is so easy way but it does not fix the problems.

The all script tags are moved to the footer.

Conditional Comments

HTML comments may be in your html as below.

<!--[if lt IE 9]>
<script src="http://wpfc.ml/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://wpfc.ml/style.css" media="all"/>
<style>#something{display:none;}</style>
<![endif]-->

In this case, first we separate them and move only the script tags to the bottom.

<!-- First Css Sources -->
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="http://www.wpfastestcache.com/style.css" media="all"/><![endif]-->
<!--[if lt IE 9]><style>#something{display:none;}</style><![endif]-->

<!-- Second Js Sources -->
<!--[if lt IE 9]><script src="http://www.wpfastestcache.com/jquery.js"></script><![endif]-->

Exclude Js Sources

The Render Blocking JS faeture moves all js resources to footer and this can sometimes cause problems. In this case the problem can be solved by excluding some js resources.

First of all you need to be sure that the js source is not affected by any other js sources. Secondly, you need to add data-wpfc-render="false" attribute as below.

<script data-wpfc-render="false" src="http://www.your-site-url.com/sample.js"></script>

Note that the Render Blocking Js feature automatically excludes the js source that have the data-cfasync="false" attribute.

<script data-cfasync="false" src="http://www.your-site-url.com/sample.js"></script>

Related articles

Placeholder Image
Google Fonts – Optimize CSS Delivery

If you analyze your site via Google Page Speed Insights, you may get a warning about google fonts under Eliminate…

Automate Image Optimization
Automate Image Optimization

You can optimize images automatically, instead of manually optimizing them via the image optimizer.

Lazy Load – Reduce HTTP Requests and Page Load Time
Lazy Load – Reduce HTTP Requests and Page Load Time

Lazy loading is a concept where you delay the loading of the images. In other words, a technique that helps…

Ready to get started?

Purchase your first license and see why 1,500,000+ websites globally around the world trust us.