Jetpack: Gravatar Hovercards: Update to not require jQuery

[josephscott]

Enabling the Gravatar Hovercards feature in Jetpack brings in jQuery. Having a version of the JavaScript that does not require jQuery would significantly reduce the amount of JavaScript on pages where jQuery wasn't being used.

Describe the solution you'd like

Use an updated version of the Gravatar Hovercards that does not require jQuery, a.k.a. vanilla JavaScript.

Additional context

I recently ran tests under slow mobile conditions and enabling the Gravatar Hovercards feature of Jetpack increased the start render times by 21.4%. A large part of that comes from the additional JavaScript that gets included on the page. In that same test the amount of JavaScript increased by 361%, a large chunk of which comes from jQuery at 94 KB.

See also #14860

[dero]

@josephscott The module pulls in an external script that also depends on jQuery: https://secure.gravatar.com/js/gprofiles.js.

That script needs also to be rewritten in vanilla JS. Can we initiate that change somehow? Note that it might be a _lot_ of work as jQuery seems to be used quite extensively in gprofiles.js.

[mehigh]

I've applied a 'beautify' treatment over the minified js code from gprofiles and uploaded it here:
https://files.urldocs.com/share/pb-PV7LhQVhh7/pb-PV7LhQVhh7.txt

Beyond swapping the jQuery selectors by querySelectors and related updates (there's 60+ in there, so enough work involved, yes), another improvement which can be done here is to make the scroll event listener passive (
https://alligator.io/js/speed-up-scroll-events/ ) and this can be a easier/lighter alternative to debouncing the event which would require a polyfill, small, but still needed.

I'm curious what's the best place to contribute to updating this gprofiles.js to be Vanilla - as this 3rd party is owned by Automattic, and it's not part of the public repositories on this GitHub org.

[josephscott]

I will figure out internally what the current situation is with code that lives on gravatar.com.

[josephscott]

@sgomes is working on updating this code to no longer require jQuery.

[dero]

@josephscott Does that include only the code on gravatar.com or the code in Jetpack as well?

[sgomes]

@dero: At the moment I'm only working on the code on gravatar.com, but @josephscott might know more about what's happening on Jetpack.

[josephscott]

Sorry, I should have been more specific. @sgomes is working to update code hosted on gravatar.com. @dero you've been doing a great job updating Jetpack code, so please continue with that part.

It looks like we've got at least the following:

• https://github.com/Automattic/jetpack/blob/master/modules/wpgroho.js
• https://github.com/Automattic/jetpack/blob/master/modules/gravatar-hovercards.php#L72
• https://github.com/Automattic/jetpack/blob/master/modules/gravatar-hovercards.php#L185

[sgomes]

I'll be sure to update this thread when we have a version of gprofiles.js hosted on gravatar.com that doesn't depend on jQuery 👍

[sgomes]

FYI, a jQuery-less version of gprofiles.js is now live. I also removed some deadcode and threw in a few performance improvements, such as the passive event listeners on scroll that @mehigh mentioned.

[dero]

Updated #15049 with cache busting changes and removed jquery from dependencies.