Optimizing Web Performance: Moving JavaScript from Header to Footer

Render Blocking Js

by admin

The “Eliminate render-blocking resources” warning appearing in PageSpeed ​​Insights analysis results significantly increases page load time. Fixing this warning is one of the first things to do to speed up the page.

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 causes many JavaScript errors.

Our feature moves all the JavaScript elements to the footer without changing the order.

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

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…

Minify Html Plus
Minify Html Plus

The feature minifies the html source more.

Placeholder Image
Cache Statistics

You can monitor the cache statistics easily on the panel. There are four statics which are cache, mobile, js and…

Ready to get started?

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