Fix Google PageSpeed Error ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ for WordPress Website.

Here is how you may want to tune up your WordPress website performance, i.e., how long it takes to download your website from the server to your visitors’ computer, mobile or tablet.

In the era of responsive design, we tend to embed more than one Javascript or CSS file, such as Bootstrap CSS and JS file bundles.

If you have integrated third-party advertising into your website, vendors like Google add their own Javascript file through their AdSense ad code that you can’t control.

But here is a simple way out of this problem.

Important Note:
Compressing, Minifying, or Deferring Files may harm the website’s functionality because of dependencies, so first, do the following steps on your local server. If everything looks to be working fine, you can update the duplicate files on Live servers—just for safety and security purposes.

When you ‘Analyse’ your website on Google PageSpeed, you get a warning something like this:
Your page has 4 blocking script resources and 8 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources or inline the critical portions of those resources directly in the HTML.

Solution 01:

The safest way of Deferring JavaScript ‘JS’ would be the following

Step 01:
Add the word ‘async’ at the closing tag called ‘</script>’, So your code will not block loading any other resources.

Step 02:
Add the same line of code just before closing the footer tag so your code is already asynchronous (async). After moving the same code to the footer, it will load after the website loading.

//So it will look something like this:
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/file-name.js' async></script>

Solution 02:

Add the following code to your WordPress Theme’s functions.php file.

// Adapted from https://gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );

 
Note:
Using the above code, we use ‘WP Deferred Javascript’, which defers loading all Javascript added with wp_enqueue_scripts using LABJS (an asynchronous Javascript library). After discussing this code with other WordPress experts, I found out that adding it may create WordPress Core security issues. So, using Solution 01 would be the best answer.

Now check & analyse your website with PageSpeed .js. The error should have been resolved.

Now, the problem remains with your root CSS files.

Note: You will not able to solve this error for external CSS files which third parties & from external sources that you can not control, e.g. AdSense Ads, AdSense-related CSS files or WordPress Jetpack CSS files

The solution is to minify or compress all of your WordPress Theme’s CSS files, removing extra spaces, line breaks, comments, etc.

So how do you do that?

Step 01:
Backup your website & server

Step 02:
Navigate to this website of CSSCompressor

Step 03:
Copy pasting your original CSS source code into the text field

Step 04:
Tweaking settings to your test & then press the compress button to get the expected result of compresses, i.e. minified CSS

Step 05:
Now replace your original root CSS file’s code with this output

Step 06:
Now save your root CSS file

Step 07: You can move your CSS file’s link from the header to the footer just above the ending body code like below:

//So it will look something like this:
<link rel='stylesheet' id='icons-css'  href='<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css' type='text/css' media='all'>

Step 08:
Check all of your websites to see if they are working as expected. Now check & analyse your website with PageSpeed .css. The error should have been resolved.

Solution 03: Cloudflare.com

You can use freemium or paid services like Cloudflare’s Minify CSS and HTML features to achieve the same with no extra code. But by just getting great features by integrating Cloudflare into your website domain.

Hope it helps,

Thanks & Regards
Mandar Apte

Published by Mandar Apte

Mandar is a Mumbai-based multi-disciplinary designer with UX/UI, Logo, Symbol, and Brand Identity design expertise. He currently runs his Mudrkashar Linguistic Apple iPhone, iPad, and Mac app business in the heart of Mumbai city.

Join the Conversation

7 Comments

  1. Dear Mandar,

    when I use your code, I got this error:

    Parse error: syntax error, unexpected ‘(‘ in

    What can be?

    Please advise.

    Have a great day.

    1. You should not get any error while deploying the code,

      Just copy paste code as it is in your functions.php & it should work.

      It may be any other plugin that you are using that may be causing the problem.

  2. Hi, Thank you for your nice post, But how can I use for increasing wp admin area page speed.
    My site frond Google insight speed 89/100 for desktop, but ………/wp-admin speed 50/100, it loads very slow.

    And When I test ………/wp-admin url I see 10 js and 8 css files for render blocking , so how can I remove those query string for admin area?

    So please advise me.

  3. rather than minimizing files , use cloudflare. it already minifies them

    but the issue with css files still remains of block rendering

  4. Hello Mandar, thank you for your clear and concise article,just like your website design. When i paste this code to my functions.php file where exactly do I paste it? Anywhere? Or at the end?

Leave a comment

Leave a Reply