Skip to content

Instantly share code, notes, and snippets.

@westonruter
Created April 3, 2024 18:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/022f630d06b50de486f3bf569a5e3803 to your computer and use it in GitHub Desktop.
Save westonruter/022f630d06b50de486f3bf569a5e3803 to your computer and use it in GitHub Desktop.
jQuery( function ( $ ) {
const blockMainThread = function ( ms ) {
console.info( `blocking for ${ms} ms.` );
const startTime = performance.now();
while ( performance.now() - startTime < ms ) {
continue;
}
};
$( () => {
blockMainThread( 1000 );
$( window ).on( 'load', () => {
blockMainThread( 1000 );
} );
$( document.body ).on( 'click', () => {
blockMainThread( 1000 );
} );
} );
} );
<?php
/**
* Plugin Name: Try jQuery Callback
* Description: Testing if Lighthouse is attributing slow code to jQuery or the underlying plugin code that is using jQuery.
*/
add_action(
'wp_enqueue_scripts',
static function () {
wp_enqueue_script( 'try-jquery-callback', plugin_dir_url( __FILE__ ) . '/script.js', array( 'jquery' ), filemtime( __DIR__ . '/script.js' ) );
}
);
@westonruter
Copy link
Author

westonruter commented Apr 3, 2024

When analyzing page load with Lighthouse, unfortunately it is blaming jquery.js for the TBT and not script.js as it should be:

image

image

@westonruter
Copy link
Author

Unfortunately, jQuery is also blamed by the Long Animation Frames API:

image

@westonruter
Copy link
Author

In the performance profile, it's clear that jQuery isn't actually to blame.

Compare jQuery:

image

With the code from my plugin:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment