Eliminate render-blocking resources Wordpress

Question

I have Eliminate render-blocking resources as recommended by Google with a deferring code, but for reason the recommendation still keeps appearing on google suggestions. Any idea why?

I cleared cache*

And this is the code i have used for defer

Answer 1

Firstly whatever method you found there is not a good idea. What if JavaScript is turned off in your visitors browser? They would see an unstyled page.

I find it surprising that Google would recommend this (I am guessing that is a very old article you found)??? see 'BONUS' below for a better way to defer CSS

Anyway, render blocking resources are resources that are needed to paint the 'above the fold' content. (everything you can see without scrolling when a page first loads.)

The reason your site is failing is that you are still needing to download those resources to render the initial content (if anything what you have done will slow it down I am afraid!).

To get around this is difficult as you have to inline the CSS in style tags within the document body for every item above the fold.

That way the page can be rendered without needing to wait for any external CSS files to download. -> this is what 'render blocking resources' is on about

There are plugins that are supposed to be able to do this, in my experience none of them work though as this is a complex problem to solve.

The only way to do this is to either design the theme yourself with this in mind (bit late for that) or...

Use the Google Developer Tools coverage checker (or a coverage checking tool - there are a few good ones on NPM if you can use Node), load the page and without scrolling find all the used CSS.

Then add every item of the used CSS into a <style> block within the main body of the page, then remove all the styles used from your external CSS (to save duplication, this step is not actually necessary to fix this issue).

As you will soon discover this is a nightmare to reverse engineer, but with a little patience it is possible.

Example

See the source code of klu.io (this is my site for transparency) to see how this is done, you will see there are 2 <style> blocks at the top of the page, every item in there is needed to render 'above the fold' content. (there are 2 blocks as one is site-wide and one is page specific)

Clarity on 'Above the Fold' on my site given as an example

On my site 'above the fold' is the actual visible content when the page loads as the home page is not scrollable on first load.

If you click the 'See What We Can Do For You' button you will see a load of content slides in from the right, that content is not visible so the styles for it are located in main.css.

BONUS

Also for how to defer CSS properly so it still works without JS try the following (you may need to adjust this for multiple CSS files but that is easy once you get the concept):-

<noscript id="ds">
                <link rel="stylesheet" href="your-css.css" media="all">                
</noscript>

JS

    var dfr = function () {
        var n1 = document.getElementById("ds");
        var r1 = document.createElement("div");
        r1.innerHTML = n1.textContent;
        document.body.appendChild(r1);
        n1.parentElement.removeChild(n1);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf)
        raf(function () {
            window.setTimeout(dfr, 0);
        });
    else
        window.addEventListener("load", dfr);

The CSS is located within a <noscript> block as a fall back.

The JS then moves this CSS into a div it creates the second the page has loaded.

Answer 2

Normally those can be removed or improved if you use caching plugins. Also sometimes it works by moving the scripts from header to footer by using this plugin: https://wordpress.org/plugins/scripts-to-footerphp/