Ankita
Member • Oct 3, 2013
Eliminate Render Blocking Javascript And CSS In Above The Field Content Wordpress [Solved]
If you are running a Google PageSpeed test on your website, chances are that you have landed up on a suggestion from Google that you need to eliminate render blocking javascript and CSS in above the field content on your Wordpress website.
The error will say something like - Your page has 3 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
You desperately need to fix this issue and improve the loading speed of your webpage. So, how do you go about it? Read on to find out -
The best way to tackle this issue is by installing the W3 Total Cache plug-in ( #-Link-Snipped-# ) on your wordpress blog.
The following steps below will show you how to minify and inline render-blocking JS and CSS files on your WordPress site to improve its speed.
1. To get started with - You need to keep a list of all resources render-blocking JS and CSS on your WordPress site by running a PageSpeed test. So run the test and use every single URL listed there.
2. After installing the W3 Total Cache Plugin, Go To Minify Settings.
Go to Performance â General Settings â Minify Section.
3. Move in to HTML & XML Section -
6. Enable HTTP compression
The error will say something like - Your page has 3 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
You desperately need to fix this issue and improve the loading speed of your webpage. So, how do you go about it? Read on to find out -
The best way to tackle this issue is by installing the W3 Total Cache plug-in ( #-Link-Snipped-# ) on your wordpress blog.
The following steps below will show you how to minify and inline render-blocking JS and CSS files on your WordPress site to improve its speed.
1. To get started with - You need to keep a list of all resources render-blocking JS and CSS on your WordPress site by running a PageSpeed test. So run the test and use every single URL listed there.
2. After installing the W3 Total Cache Plugin, Go To Minify Settings.
Go to Performance â General Settings â Minify Section.
- Check Enable box
- Minify Mode - Enable
- Minify Cache Method - Disk
- HTML Minifier - Default
- JS Minifier - JSMin
- CSS Minifier - Default
3. Move in to HTML & XML Section -
- Check Enable Box
- Check Inline CSS minification
- Check Inline JS minification.
- Check Enable box.
- Select âMinifyâ under Operations in areas.
- Select âNon-blocking using âasyncââ as Embed Type in Before
- Select the current theme of your WordPress site.
- Click Add a Script button then paste the URL of the JS file that needs to be optimized. (Refer to the list that PageSpeed provided.)
- Select All Templates, Embed in then click Verify URI.
- Check Enable box.
- Select the current theme of your website in the drop-down list.
- Click Add a Style Sheet button then paste the CSS file URI that needs to be optimized in the box provided. (Refer to the CSS file URIs that PageSpeed provided to you.)
6. Enable HTTP compression
- Go to Performance â Browser Cache.
- Check âEnable HTTP (gzip) compressionâ in CSS & JS Section.
- Click Save all Settings.
- Now, empty all cache. To do that - Click Performance in the Admin Bar then select âEmpty All Cachesâ