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.
  • Check Enable box
  • Minify Mode - Enable
  • Minify Cache Method - Disk
  • HTML Minifier - Default
  • JS Minifier - JSMin
  • CSS Minifier - Default
Save the Settings.

3. Move in to HTML & XML Section -
  • Check Enable Box
  • Check Inline CSS minification
  • Check Inline JS minification.
4. In JS Section -
  • 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.
5. In CSS Section -
  • 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.)
Click Save all Settings.

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’
Now take the PageSpeed Test again and verify if there is an improvement in the results.

Replies

  • tonytong
    tonytong
    i find a free online service to #-Link-Snipped-# and #-Link-Snipped-# , so it will reduce the size of web page.

You are reading an archived discussion.

Related Posts

Why does the ceiling fan rotate in anticlockwise direction and table fan in clockwise direction?
Quickly solve this question and post your answer below. I found this on LinkedIn where a lot of people couldn't come up with the right answer.
A friend asked me this question, the other day - A lady buys goods worth Rs. 200 from a shop. (shopkeeper is selling the goods with zero profit). The lady...
If you run a PageSpeed test for your wordpress hosted blog or website, chances are that 80% of the times you will land up on the "Optimize Images" suggestion. The...
Not much has changed with the toilets in the past several years. But there's a global organization that's focusing on better toilets - and it's the famous Bill & Melinda...