Changeset 56556

Timestamp:

09/12/2023 12:04:15 AM (13 months ago)

Author:

westonruter

Message:

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.

Location:

trunk/src/wp-content/themes

Files:

• twentyeleven/showcase.php (modified) (1 diff)
• twentyfifteen/functions.php (modified) (1 diff)
• twentyfourteen/functions.php (modified) (2 diffs)
• twentynineteen/functions.php (modified) (1 diff)
• twentyseventeen/functions.php (modified) (3 diffs)
• twentysixteen/functions.php (modified) (1 diff)
• twentythirteen/functions.php (modified) (1 diff)
• twentytwelve/functions.php (modified) (1 diff)
• twentytwenty/classes/class-twentytwenty-script-loader.php (modified) (2 diffs)
• twentytwenty/functions.php (modified) (2 diffs)
• twentytwentyone/functions.php (modified) (1 diff)

trunk/src/wp-content/themes/twentyeleven/showcase.php

@@ -17 +17 @@
 
 // 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(); ?>

trunk/src/wp-content/themes/twentyfifteen/functions.php

@@ -455 +455 @@
     }
 
-    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',

trunk/src/wp-content/themes/twentyfourteen/functions.php

@@ -368 +368 @@
 
     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',
@@ -379 +388 @@
     }
 
-    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' );

trunk/src/wp-content/themes/twentynineteen/functions.php

@@ -259 +259 @@
 
     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( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '20230621', array( 'in_footer' => true ) );
+        wp_enqueue_script(
+            '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',
+            )
+        );
     }
 

trunk/src/wp-content/themes/twentyseventeen/functions.php

@@ -480 +480 @@
     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(
@@ -487 +496 @@
 
     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' );
@@ -500 +518 @@
     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' ) ) {

trunk/src/wp-content/themes/twentysixteen/functions.php

@@ -424 +424 @@
     }
 
-    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(

trunk/src/wp-content/themes/twentythirteen/functions.php

@@ -322 +322 @@
 
     // 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.

trunk/src/wp-content/themes/twentytwelve/functions.php

@@ -189 +189 @@
 
     // 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();

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

@@ -21 +21 @@
 
         /**
+         * 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
@@ -34 +56 @@
          */
         public function filter_script_loader_tag( $tag, $handle ) {
-            foreach ( array( 'async', 'defer' ) as $attr ) {
-                if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
-                    continue;
-                }
+            $strategies = array(
+                'async' => (bool) wp_scripts()->get_data( $handle, 'async' ),
+                '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 ) ) {

trunk/src/wp-content/themes/twentytwenty/functions.php

@@ -136 +136 @@
      */
     $loader = new TwentyTwenty_Script_Loader();
-    add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
+    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 );
+    }
 }
 
@@ -212 +216 @@
     }
 
-    wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version );
-    wp_script_add_data( 'twentytwenty-js', 'async', true );
+    wp_enqueue_script(
+        'twentytwenty-js',
+        get_template_directory_uri() . '/assets/js/index.js',
+        array(),
+        $theme_version,
+        array(
+            'in_footer' => false, // Because involves header.
+            'strategy'  => 'defer',
+        )
+    );
 }
 

trunk/src/wp-content/themes/twentytwentyone/functions.php

@@ -450 +450 @@
             array( 'twenty-twenty-one-ie11-polyfills' ),
             wp_get_theme()->get( 'Version' ),
-            array( 'in_footer' => true )
+            array(
+                'in_footer' => false, // Because involves header.
+                'strategy'  => 'defer',
+            )
         );
     }