Lighthouse, jQuery Vulnerability and Divi

by Michael Love | < 2 minutes | Jan 12, 2017 | jQuery, Learning, PHP, WordPress

Skill Level: Advanced
PHP, Divi Theme

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']) &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; !is_admin()) {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', '/js/jquery-3.4.1.min.js', false, '3.4.1');
wp_deregister_script('jquery-migrate');
wp_enqueue_script('jquery-migrate', '/js/jquery-migrate-3.0.0.min.js', array('jquery'), '3.0.0');
}
}
add_action('wp_enqueue_scripts', 'divi_jquery_injector');
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.

Updating…

Get Your No Obligation Strategic Talk

To get scheduled, call (800) 504-1075 or use the buttons below.

Why choose us to build your website?

Z

Experience

Two Decades of Website Design and Development.

SOHO

Home offices means no huge overhead costs.

Local

Located in Columbus and always up for coffee.

Imagination

Coming up with intuitive ideas is fun and exciting!

Still not sure?

That's okay and understandable.  We are here to help you and make sure you have the information to make great decisions.  Contact us with any questions, and we will get in touch.