Bundled Themes: Use `defer` loading strategy for theme scripts.

* Add `defer` loading strategy for all frontend end-user theme scripts (excluding Customizer preview).
* Move scripts to the `head` which relate to the initial page viewport to ensure they start loading earlier and execute sooner while still not blocking rendering.
* Update Twenty Twenty's script loader (`TwentyTwenty_Script_Loader`) to support core's built-in script loading strategies (#12009), while also retaining backwards-compatibility for child themes that may set `async` and `defer` script data.
* Update the main script loading strategy in Twenty Twenty from `async` to `defer` for better performance on repeat page views, since when an `async` script is cached it will block rendering.

Props westonruter, flixos90, sabernhardt.
Fixes #59316.

Built from https://develop.svn.wordpress.org/trunk@56556


git-svn-id: http://core.svn.wordpress.org/trunk@56068 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyeleven/showcase.php

@@ -16,7 +16,16 @@
  */
 
 // Enqueue showcase script for the slider.
-wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '20211130' );
+wp_enqueue_script(
+	'twentyeleven-showcase',
+	get_template_directory_uri() . '/js/showcase.js',
+	array( 'jquery' ),
+	'20211130',
+	array(
+		'in_footer' => false, // Because involves header.
+		'strategy'  => 'defer',
+	)
+);
 
 get_header(); ?>
 

wp-content/themes/twentyfifteen/functions.php

@@ -454,7 +454,16 @@ function twentyfifteen_scripts() {
 		wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141210' );
 	}
 
-	wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20221101', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'twentyfifteen-script',
+		get_template_directory_uri() . '/js/functions.js',
+		array( 'jquery' ),
+		'20221101',
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 	wp_localize_script(
 		'twentyfifteen-script',
 		'screenReaderText',

wp-content/themes/twentyfourteen/functions.php

@@ -367,7 +367,16 @@ function twentyfourteen_scripts() {
 	}
 
 	if ( is_front_page() && 'slider' === get_theme_mod( 'featured_content_layout' ) ) {
-		wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20150120', array( 'in_footer' => true ) );
+		wp_enqueue_script(
+			'twentyfourteen-slider',
+			get_template_directory_uri() . '/js/slider.js',
+			array( 'jquery' ),
+			'20150120',
+			array(
+				'in_footer' => false, // Because involves header.
+				'strategy'  => 'defer',
+			)
+		);
 		wp_localize_script(
 			'twentyfourteen-slider',
 			'featuredSliderDefaults',
@@ -378,7 +387,16 @@ function twentyfourteen_scripts() {
 		);
 	}
 
-	wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20230526', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'twentyfourteen-script',
+		get_template_directory_uri() . '/js/functions.js',
+		array( 'jquery' ),
+		'20230526',
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 }
 add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
 

wp-content/themes/twentynineteen/functions.php

@@ -258,8 +258,26 @@ function twentynineteen_scripts() {
 	wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' );
 
 	if ( has_nav_menu( 'menu-1' ) ) {
-		wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '20200129', array( 'in_footer' => true ) );
+		wp_enqueue_script(
-		wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '20230621', array( 'in_footer' => true ) );
+			'twentynineteen-priority-menu',
+			get_theme_file_uri( '/js/priority-menu.js' ),
+			array(),
+			'20200129',
+			array(
+				'in_footer' => false, // Because involves header.
+				'strategy'  => 'defer',
+			)
+		);
+		wp_enqueue_script(
+			'twentynineteen-touch-navigation',
+			get_theme_file_uri( '/js/touch-keyboard-navigation.js' ),
+			array(),
+			'20230621',
+			array(
+				'in_footer' => true,
+				'strategy'  => 'defer',
+			)
+		);
 	}
 
 	wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

wp-content/themes/twentyseventeen/functions.php

@@ -479,14 +479,32 @@ function twentyseventeen_scripts() {
 	// Skip-link fix is no longer enqueued by default.
 	wp_register_script( 'twentyseventeen-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '20161114', array( 'in_footer' => true ) );
 
-	wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '20211130', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'twentyseventeen-global',
+		get_theme_file_uri( '/assets/js/global.js' ),
+		array( 'jquery' ),
+		'20211130',
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 
 	$twentyseventeen_l10n = array(
 		'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
 	);
 
 	if ( has_nav_menu( 'top' ) ) {
-		wp_enqueue_script( 'twentyseventeen-navigation', get_theme_file_uri( '/assets/js/navigation.js' ), array( 'jquery' ), '20210122', array( 'in_footer' => true ) );
+		wp_enqueue_script(
+			'twentyseventeen-navigation',
+			get_theme_file_uri( '/assets/js/navigation.js' ),
+			array( 'jquery' ),
+			'20210122',
+			array(
+				'in_footer' => false, // Because involves header.
+				'strategy'  => 'defer',
+			)
+		);
 		$twentyseventeen_l10n['expand']   = __( 'Expand child menu', 'twentyseventeen' );
 		$twentyseventeen_l10n['collapse'] = __( 'Collapse child menu', 'twentyseventeen' );
 		$twentyseventeen_l10n['icon']     = twentyseventeen_get_svg(
@@ -499,7 +517,16 @@ function twentyseventeen_scripts() {
 
 	wp_localize_script( 'twentyseventeen-global', 'twentyseventeenScreenReaderText', $twentyseventeen_l10n );
 
-	wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.3', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'jquery-scrollto',
+		get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
+		array( 'jquery' ),
+		'2.1.3',
+		array(
+			'in_footer' => true,
+			'strategy'  => 'defer',
+		)
+	);
 
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );

wp-content/themes/twentysixteen/functions.php

@@ -423,7 +423,16 @@ function twentysixteen_scripts() {
 		wp_enqueue_script( 'twentysixteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20170530' );
 	}
 
-	wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20230629', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'twentysixteen-script',
+		get_template_directory_uri() . '/js/functions.js',
+		array( 'jquery' ),
+		'20230629',
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 
 	wp_localize_script(
 		'twentysixteen-script',

wp-content/themes/twentythirteen/functions.php

@@ -321,7 +321,16 @@ function twentythirteen_scripts_styles() {
 	}
 
 	// Loads JavaScript file with functionality specific to Twenty Thirteen.
-	wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20230526', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'twentythirteen-script',
+		get_template_directory_uri() . '/js/functions.js',
+		array( 'jquery' ),
+		'20230526',
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 
 	// Add Source Sans Pro and Bitter fonts, used in the main stylesheet.
 	$font_version = ( 0 === strpos( (string) twentythirteen_fonts_url(), get_template_directory_uri() . '/' ) ) ? '20230328' : null;

wp-content/themes/twentytwelve/functions.php

@@ -188,7 +188,16 @@ function twentytwelve_scripts_styles() {
 	}
 
 	// Adds JavaScript for handling the navigation menu hide-and-show behavior.
-	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20141205', array( 'in_footer' => true ) );
+	wp_enqueue_script(
+		'twentytwelve-navigation',
+		get_template_directory_uri() . '/js/navigation.js',
+		array( 'jquery' ),
+		'20141205',
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 
 	$font_url = twentytwelve_get_font_url();
 	if ( ! empty( $font_url ) ) {

wp-content/themes/twentytwenty/classes/class-twentytwenty-script-loader.php

@@ -19,10 +19,32 @@ if ( ! class_exists( 'TwentyTwenty_Script_Loader' ) ) {
 	 */
 	class TwentyTwenty_Script_Loader {
 
+		/**
+		 * Migrates legacy async/defer script data which might be used by child themes.
+		 *
+		 * This method is used on the `print_scripts_array` filter.
+		 *
+		 * @since Twenty Twenty 2.0
+		 *
+		 * @param string[] $to_do An array of script dependency handles.
+		 * @return string[] Unchanged array of script dependency handles.
+		 */
+		public function migrate_legacy_strategy_script_data( $to_do ) {
+			foreach ( $to_do as $handle ) {
+				foreach ( array( 'async', 'defer' ) as $strategy ) {
+					if ( wp_scripts()->get_data( $handle, $strategy ) ) {
+						wp_script_add_data( $handle, 'strategy', $strategy );
+					}
+				}
+			}
+			return $to_do;
+		}
+
 		/**
 		 * Adds async/defer attributes to enqueued / registered scripts.
 		 *
-		 * If #12009 lands in WordPress, this function can no-op since it would be handled in core.
+		 * Now that #12009 has landed in WordPress 6.3, this method is only used for older versions of WordPress.
+		 * This method is used on the `script_loader_tag` filter.
 		 *
 		 * @since Twenty Twenty 1.0
 		 *
@@ -33,10 +55,17 @@ if ( ! class_exists( 'TwentyTwenty_Script_Loader' ) ) {
 		 * @return string Script HTML string.
 		 */
 		public function filter_script_loader_tag( $tag, $handle ) {
-			foreach ( array( 'async', 'defer' ) as $attr ) {
+			$strategies = array(
-				if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
+				'async' => (bool) wp_scripts()->get_data( $handle, 'async' ),
-					continue;
+				'defer' => (bool) wp_scripts()->get_data( $handle, 'defer' ),
+			);
+			$strategy   = wp_scripts()->get_data( $handle, 'strategy' );
+			if ( $strategy && isset( $strategies[ $strategy ] ) ) {
+				$strategies[ $strategy ] = true;
 			}
+
+			foreach ( array_keys( array_filter( $strategies ) ) as $attr ) {
+
 				// Prevent adding attribute when already added in #12009.
 				if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
 					$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );

wp-content/themes/twentytwenty/functions.php

@@ -135,7 +135,11 @@ function twentytwenty_theme_support() {
 	 * by the theme.
 	 */
 	$loader = new TwentyTwenty_Script_Loader();
+	if ( version_compare( $GLOBALS['wp_version'], '6.3', '<' ) ) {
 		add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
+	} else {
+		add_filter( 'print_scripts_array', array( $loader, 'migrate_legacy_strategy_script_data' ), 100 );
+	}
 }
 
 add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
@@ -211,8 +215,16 @@ function twentytwenty_register_scripts() {
 		wp_enqueue_script( 'comment-reply' );
 	}
 
-	wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version );
+	wp_enqueue_script(
-	wp_script_add_data( 'twentytwenty-js', 'async', true );
+		'twentytwenty-js',
+		get_template_directory_uri() . '/assets/js/index.js',
+		array(),
+		$theme_version,
+		array(
+			'in_footer' => false, // Because involves header.
+			'strategy'  => 'defer',
+		)
+	);
 }
 
 add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );

wp-content/themes/twentytwentyone/functions.php

@@ -449,7 +449,10 @@ function twenty_twenty_one_scripts() {
 			get_template_directory_uri() . '/assets/js/primary-navigation.js',
 			array( 'twenty-twenty-one-ie11-polyfills' ),
 			wp_get_theme()->get( 'Version' ),
-			array( 'in_footer' => true )
+			array(
+				'in_footer' => false, // Because involves header.
+				'strategy'  => 'defer',
+			)
 		);
 	}
 

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.4-alpha-56555';
+$wp_version = '6.4-alpha-56556';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.