Searched & tried a lot: Is it Possible to Eliminate Render Blocking Manually

Question

I want to manually eliminate render blocking in order to boost speed.

I've been searching for solution in google for past two days.

Tried below 3 solutions in functions.php. That indeed worked however....

1. eliminated from half js scripts and i still get the same message for other js.
2. did not eliminate from CSS

Solution 1

add_filter( 'clean_url', function( $url )
{
if ( FALSE === strpos( $url, '.js' ) )
{
return $url;
}
return "$url' defer='defer";
}, 11, 1 );

Solutions 2 given here

add_action('customize_register', 'customizer');
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Solutions 3

// add async and defer to javascripts
function wcs_defer_javascripts ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' async='async";
}
add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );

Please do not suggest any plugin. I have tried w3 cache, autoptimize and many more.

W3 cache did the job but that is not permanent solution. Because site deforms once w3 cache is deactivated (site does not return to normal even after reactivating).

Solution 4 added this code before

<script type="text/javascript">
function downloadJSAtOnload() {
    var links = ["wp-content/themes/TL/library/js/scriptsslider.js", "wp-content/themes/TL/library/js/scriptsslider.js"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, i;
    for (i = 0; i < links.length; i++) {
        linkElement = document.createElement("script");
        linkElement.src = links[i];
        headElement.appendChild(linkElement);
    }
}
if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Answer 1

If you want to defer loading of css, see CSS delivery optimization: How to defer css loading?.

If you want to defer loading of js, you can use this:

add_filter( 'script_loader_tag', function( $tag, $handle ) {
  return str_replace( "<script type='text/javascript'", 
    "<script type='text/javascript' defer='defer'", $tag );
}, 10, 2 );

Answer 2

Unfortunately using "defer" does not eliminate render blocking strips. Neither does using async. What you need to do is unload any javascript files and then carefully add them back onto your page on window.onload. This allows the page to load fully before you then include any javascript. You would need to be careful about dependencies as many of your scripts will require jQuery to be loaded first.

This article is helpful on how to really defer loading javascipt. The crux of it being to use something like this:

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
}
if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
else 
   window.onload = downloadJSAtOnload;
</script>

I would have a js_loader() function which you can pass an array of script paths in order and have that add them to the page.