Excluding Admin Pages And Jquery From Deferred Loading

What is Deferred Loading and Why Exclude Admin Pages and jQuery

Deferred loading is a technique used to improve website performance by delaying the loading of non-critical JavaScript, CSS, and images until after the initial page load. This helps pages load faster by reducing the number of requests and amount of data loaded upfront. However, some pages and scripts, like admin pages and jQuery, need to be excluded from deferring to avoid conflicts.

There are a few key reasons to exclude admin pages and jQuery specifically:

Reasons to exclude admin pages

Avoid conflicts with admin functionality – Deferring scripts on admin pages can cause issues with admin features, menus, editors, and tools.
Ensure proper loading of vital admin scripts – Some admin scripts are essential and need to load synchronously for the admin area to function.

Reasons to exclude jQuery

Many plugins rely on jQuery being loaded – jQuery is a common dependency, deferring it can cause plugins to error.
Avoid errors and conflicts by loading jQuery normally – Loading jQuery asynchronously can sometimes break functionality.

How to Exclude Admin Pages

Excluding admin pages from deferred loading involves using WordPress conditional tags to detect when viewing an admin page and then preventing scripts from being deferred on those pages. Here is an example using the is_admin() tag:

Table of Contents

Using is_admin() to detect admin pages

if (is_admin()) {
  // Disable or override deferred loading  
}

is_admin() will return true on any admin page, so this conditional can be used to disable defer behavior when needed. The same approach works for AJAX requests and cron jobs using is_ajax() and DOING_CRON respectively.

Sample code to exclude admin pages from deferring

function exclude_admin_pages( $url ) {

  if ( is_admin() ) {
    // Remove the "defer" attribute
    $url = str_replace( ' defer', '', $url ); 
  }

  return $url;

}
add_filter( 'clean_url', 'exclude_admin_pages', 11 );

Here the clean_url filter is used to check if viewing an admin page, and if so, strip out the defer attribute added by the deferred loading plugin/code. This prevents admin scripts from being deferred.

How to Exclude jQuery

The most common way to exclude jQuery from being deferred is to detect it in the list of enqueued scripts using wp_scripts and then deregister it before re-enqueueing it without the defer attribute.

Detect jQuery script using wp_scripts action

function exclude_jquery( $scripts ) {

  // Check if jQuery script is registered    
  if( !empty( $scripts->registered['jquery'] ) ) {
    
    // Unregister jQuery 
  }

}
add_action( 'wp_default_scripts', 'exclude_jquery' );

This detects if the jQuery script is registered in WordPress using the wp_default_scripts action. We can then deregister it and enqueue a normal version.

Unregister jQuery script

function exclude_jquery( $scripts ) {

  // Check if jQuery script is registered      
  if( !empty( $scripts->registered['jquery'] ) ) {

    // Unregister jquery script            
    wp_deregister_script( 'jquery' );   

  } 

}
add_action('wp_default_scripts', 'exclude_jquery');

wp_deregister_script() removes jQuery from the list of registered scripts. This prevents the deferred version from being loaded.

Enqueue jQuery normally

  
function exclude_jquery() {

  wp_deregister_script('jquery');
  
  wp_enqueue_script('jquery', includes_url('/js/jquery/jquery.js'), array(), NULL, true);

}  
add_action('wp_default_scripts', 'exclude_jquery');

After deregistering jQuery, we enqueue the normal version without the defer attribute using wp_enqueue_script(). This ensures jQuery loads normally without delays or errors caused by async loading.

Additional Considerations

There are some additional best practices around testing, debugging, and alternative methods when excluding admin and jQuery from deferred loading.

Testing deferred loading implementation

Be sure to thoroughly test how deferred loading plugins and code impact site functionality, especially on admin pages. Check for any JavaScript errors, broken functionality, or CSS issues from deferring scripts and stylesheets.

Debugging issues with excluded pages

If admin pages or jQuery are still getting deferred despite efforts to exclude them, debug using browser developer tools. Inspect network requests and scripts to check if defer attributes are still incorrectly getting added.

Alternative methods for excluding scripts

In addition to deregistering scripts like jQuery to prevent deferring, you can also dequeue specific scripts using wp_dequeue_script(), override attributes with custom enqueue code, or disable pieces of deferring functionality with conditionals.

Conclusion

Deferred loading can greatly improve front-end site performance. However, vital backend admin pages and jQuery library should be excluded from getting deferred due to potential functionality conflicts.

By using is_admin() conditionals and selective deregistering of jQuery, admins pages and jQuery can load normally while still allowing other non-critical scripts to defer. Testing implementations thoroughly and debugging issues as they arise is key to successfully excluding pages from deferred loading.