Hi @zu2,
That’s not possible without redoing a lot of stuff.
A simpler solution is to tell the browser to defer the loading of the script so it doesn’t block the rendering of the page. You can:
- Add the attribute
defer to the script and the browser won’t execute it until the HTML has been fully parsed.
- Add the attribute
async instead and the browser will continue parsing the HTML until the script has been fully downloaded by it. The browser will stop parsing the HTML for a moment to read & execute the script and then continue with the parsing afterwards.
For a bit more detailed explanation, check here.
I use the latter (async) on my site and Google PageSpeed Insight has stopped reporting wpp.js as a render-blocking resource ever since.
To add either of the attributes to the script tag, add the following function to your theme’s functions.php file:
function wp764426_add_async_defer_attribute_to_scripts( $tag, $handle ) {
if ( 'wpp-js' === $handle ) {
return str_replace( ' src', ' async src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'wp764426_add_async_defer_attribute_to_scripts', 10, 2 );
P.S.: If you’re using a caching plugin, remember to flush its cache after doing this so changes are reflected on your site.
Thread Starter
zu2
(@zu2)
Thank you Héctor,
Your advice is correct (I did it that way). However, wpp.js is a very small script. when transmitting it as a separate file, overhead due to RTT occurs. Inlining will be slightly faster (several 10ms).
I will think about this a little more.