5

Trying to follow Google Page Insights suggestions, I've got the "JS render block" recommendation for and it is related to jQuery main file.

My site use WordPress with some plugins. One of the plugins throw its JS inline. So when I move jQuery to load in the footer, or when I use "defer" mode to load it, I get jQuery is not defined once the inline code fired.

I was trying to find a global solution to 'catch' all inline scripts and delay it after jQuery main file is executed at the end of the document.

I wrote a solution that works great for me. It is very straight forward solution for my specific situation, but I failed to make this as a filter for the_content or widget output. I would like to make this a global solution, so I wouldn't need to worry about any JS firing somewhere.

Any ideas how to make it work? Here my code so far, for this specific case, which runs through a shortcode:

/* Get shortcode HTML */ 
$widget_shortcode = do_shortcode($shortcode);

/* Take out all scripts into an array */
$delayed_scripts = array();
preg_match_all('#<script(.*?)</script>#is', $widget_shortcode, $match);
foreach ($match as $val){
    $delayed_script = '<script '.$val[0].'</script>';
    array_push($delayed_scripts, $delayed_script);
}

/* Remove all scripts from HTML */
$widget_shortcode = preg_replace('#<script(.*?)</script>#is', '', $widget_shortcode);

/* Echo filtered HTML */
echo $widget_shortcode;

And just before the closing </body> tag:

foreach ($delayed_scripts as $script) {
    echo $delayed_script;
}
Roamer-1888
  • 19,138
  • 5
  • 33
  • 44
Shir Gans
  • 1,976
  • 3
  • 23
  • 40
  • One good thing what you can do is to go into your plugin where is the problem find where is that scrip defined and move position of that script on 9999. It's hardcore solution but can work. Second thing if that inline js is inside footer, just made parser in php. Get all content with 'ob_start()' put scripts in array and particular script move to last and after that 'ob_get_clean()' you also can parse complete pages on the same way and manipulate with HTML in PHP inside theme. I do that many times before. – Ivijan Stefan Stipić Jul 19 '16 at 06:41
  • I'm looking for a way in WordPress to hook. Other ways are too agressive... – Shir Gans Jul 20 '16 at 09:00

1 Answers1

1

I have worked very hard with this same issue. There are a few things to consider here. This problem would be easy if every plugin enqueued scripts in Wordpress properly, unfortunately, many do not and instead just echo the script or use a standard include.

As some commenters have noted if you want to catch all inline scripts you have no choice but to search the output buffer for script tags because if a plugin echoes a script there is nothing you can do in WordPress after that as it is sent to the buffer.

Keep in mind, using preg statements and searching entire html docs and then manipulating strings is probably much more expensive than letting jQuery load in the head. That will increase the server response time for the html doc and this wait time is just as bad because it is also time were no rendering is happening and the user is sitting there with a blank screen. Not to mention, moving jQuery to footer means anything that depends on it will not work until the footer is parsed. This is the same reason Google recommends putting analytics code in the head. What if a user navigates away before the analytics code had a chance to parse?

Google Page speed is a guide, not a rule. Don't bang your head against a wall trying to get a perfect score.

gunnerman
  • 183
  • 2
  • 8