PerformanceMedium

Render-blocking scripts in the WordPress <head>

Script tags without defer or async attributes are present in the <head>. They block page rendering until fully loaded.

Why it matters

Each blocking script in the <head> delays the display of the entire page. A 200KB script can add 1-2 seconds to FCP on mobile.

How to fix

  1. 1

    Add defer to WordPress scripts via hook

    php
    add_filter('script_loader_tag', function($tag, $handle, $src) {
  // Do not modify admin scripts
  if (is_admin()) return $tag;
  // Add defer to specific scripts
  $defer_scripts = ['mon-plugin-script', 'jquery'];
  if (in_array($handle, $defer_scripts)) {
    return str_replace('<script', '<script defer', $tag);
  }
  return $tag;
}, 10, 3);
  2. 2

    Register scripts correctly with wp_enqueue_script

    php
    // $in_footer = true loads the script before </body> rather than in <head>
wp_enqueue_script('mon-script', get_template_directory_uri() . '/js/script.js', [], '1.0', true);
  3. 3

    Via WP Rocket or Asset CleanUp

    These plugins allow moving, deferring or disabling scripts per page, without code. Asset CleanUp Pro even allows disabling scripts by page type.

Related articles

PerformanceTBT (Total Blocking Time) too highPerformanceToo many third-party scripts on your WordPress sitePerformanceFCP (First Contentful Paint) too high

Ready to fix this issue on your site?

Audit my site for free →