Call or Text @ (800) 504-1075‬Call or Text @ (800) 504-1075‬

Lighthouse, jQuery Vulnerability and Divi

jQuery PHP WordPress Tips and Tricks

When trying to achieve the perfect Lighthouse testing score in WordPress, we often hit a brick wall when trying to deal with the Best Practices score.  This is because WordPress uses an older version of jQuery that has known vulnerabilities.  This significantly drops the score making it seem impossible to get that all so sweet 100.

The opportunity message reads, “Includes Front-End JavaScript Libraries With Known Security Vulnerabilities”.  Plugins like Jquery Updater seem to do the trick but when using Divi, the builder breaks. This is a difficult thing to overcome because plugins like Plugin Load Filter, which is quite useful for tuning performance, just can’t handle the task.  The challenge is that the Divi Builder actually loads the front-end of the page and applies the builder tools to it.

But, don’t worry.  There is a way to fix this.

The following code, when added to the functions.php file, will conditionally load a different version of jQuery on the front-end pages except when the builder is present.

 
function divi_jquery_injector()
{
    if ((empty($_GET['et_fb']) || empty($_GET)) && !is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', '/js/jquery-3.4.1.min.js', false, '3.4.1', true);
        wp_enqueue_script('jquery');

        wp_deregister_script('jquery-migrate');
        wp_register_script('jquery-migrate', '/js/jquery-migrate-3.0.0.min.js', array('jquery'), '3.0.0', true);
        wp_enqueue_script('jquery-migrate');
    }
}
add_action('wp_enqueue_scripts', 'divi_jquery_injector',1);
add_action('login_enqueue_scripts', 'divi_jquery_injector', 1);

This, of course, is not a paste and go solution.  There is some work that needs to be done in advance.

 

  • Be careful.  If you are not sure about something, stop and hire a pro to do it for you.  This is an ‘at your own risk’ scenario.
  • Download the jQuery version and jQuery Migrate version of your choice.
  • Upload them to your server.  I put them in a folder called ‘js’ in the doc root.
  • Modify the code to match paths and file names.
  • Put in your child theme’s functions.php file then upload it.
  • Test until you are just about to go mad then test a little more.  Just make sure nothing is broken.
  • Run Lighthouse test then grin smugly if your Best Practices score went up.