Make WordPress Core

Changeset 56556


Ignore:
Timestamp:
09/12/2023 12:04:15 AM (9 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:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyeleven/showcase.php

    r56549 r56556  
    1717
    1818// Enqueue showcase script for the slider.
    19 wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '20211130' );
     19wp_enqueue_script(
     20    'twentyeleven-showcase',
     21    get_template_directory_uri() . '/js/showcase.js',
     22    array( 'jquery' ),
     23    '20211130',
     24    array(
     25        'in_footer' => false, // Because involves header.
     26        'strategy'  => 'defer',
     27    )
     28);
    2029
    2130get_header(); ?>
  • trunk/src/wp-content/themes/twentyfifteen/functions.php

    r56526 r56556  
    455455    }
    456456
    457     wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20221101', array( 'in_footer' => true ) );
     457    wp_enqueue_script(
     458        'twentyfifteen-script',
     459        get_template_directory_uri() . '/js/functions.js',
     460        array( 'jquery' ),
     461        '20221101',
     462        array(
     463            'in_footer' => false, // Because involves header.
     464            'strategy'  => 'defer',
     465        )
     466    );
    458467    wp_localize_script(
    459468        'twentyfifteen-script',
  • trunk/src/wp-content/themes/twentyfourteen/functions.php

    r56526 r56556  
    368368
    369369    if ( is_front_page() && 'slider' === get_theme_mod( 'featured_content_layout' ) ) {
    370         wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20150120', array( 'in_footer' => true ) );
     370        wp_enqueue_script(
     371            'twentyfourteen-slider',
     372            get_template_directory_uri() . '/js/slider.js',
     373            array( 'jquery' ),
     374            '20150120',
     375            array(
     376                'in_footer' => false, // Because involves header.
     377                'strategy'  => 'defer',
     378            )
     379        );
    371380        wp_localize_script(
    372381            'twentyfourteen-slider',
     
    379388    }
    380389
    381     wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20230526', array( 'in_footer' => true ) );
     390    wp_enqueue_script(
     391        'twentyfourteen-script',
     392        get_template_directory_uri() . '/js/functions.js',
     393        array( 'jquery' ),
     394        '20230526',
     395        array(
     396            'in_footer' => false, // Because involves header.
     397            'strategy'  => 'defer',
     398        )
     399    );
    382400}
    383401add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
  • trunk/src/wp-content/themes/twentynineteen/functions.php

    r56548 r56556  
    259259
    260260    if ( has_nav_menu( 'menu-1' ) ) {
    261         wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '20200129', array( 'in_footer' => true ) );
    262         wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '20230621', array( 'in_footer' => true ) );
     261        wp_enqueue_script(
     262            'twentynineteen-priority-menu',
     263            get_theme_file_uri( '/js/priority-menu.js' ),
     264            array(),
     265            '20200129',
     266            array(
     267                'in_footer' => false, // Because involves header.
     268                'strategy'  => 'defer',
     269            )
     270        );
     271        wp_enqueue_script(
     272            'twentynineteen-touch-navigation',
     273            get_theme_file_uri( '/js/touch-keyboard-navigation.js' ),
     274            array(),
     275            '20230621',
     276            array(
     277                'in_footer' => true,
     278                'strategy'  => 'defer',
     279            )
     280        );
    263281    }
    264282
  • trunk/src/wp-content/themes/twentyseventeen/functions.php

    r56526 r56556  
    480480    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 ) );
    481481
    482     wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '20211130', array( 'in_footer' => true ) );
     482    wp_enqueue_script(
     483        'twentyseventeen-global',
     484        get_theme_file_uri( '/assets/js/global.js' ),
     485        array( 'jquery' ),
     486        '20211130',
     487        array(
     488            'in_footer' => false, // Because involves header.
     489            'strategy'  => 'defer',
     490        )
     491    );
    483492
    484493    $twentyseventeen_l10n = array(
     
    487496
    488497    if ( has_nav_menu( 'top' ) ) {
    489         wp_enqueue_script( 'twentyseventeen-navigation', get_theme_file_uri( '/assets/js/navigation.js' ), array( 'jquery' ), '20210122', array( 'in_footer' => true ) );
     498        wp_enqueue_script(
     499            'twentyseventeen-navigation',
     500            get_theme_file_uri( '/assets/js/navigation.js' ),
     501            array( 'jquery' ),
     502            '20210122',
     503            array(
     504                'in_footer' => false, // Because involves header.
     505                'strategy'  => 'defer',
     506            )
     507        );
    490508        $twentyseventeen_l10n['expand']   = __( 'Expand child menu', 'twentyseventeen' );
    491509        $twentyseventeen_l10n['collapse'] = __( 'Collapse child menu', 'twentyseventeen' );
     
    500518    wp_localize_script( 'twentyseventeen-global', 'twentyseventeenScreenReaderText', $twentyseventeen_l10n );
    501519
    502     wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.3', array( 'in_footer' => true ) );
     520    wp_enqueue_script(
     521        'jquery-scrollto',
     522        get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
     523        array( 'jquery' ),
     524        '2.1.3',
     525        array(
     526            'in_footer' => true,
     527            'strategy'  => 'defer',
     528        )
     529    );
    503530
    504531    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
  • trunk/src/wp-content/themes/twentysixteen/functions.php

    r56526 r56556  
    424424    }
    425425
    426     wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20230629', array( 'in_footer' => true ) );
     426    wp_enqueue_script(
     427        'twentysixteen-script',
     428        get_template_directory_uri() . '/js/functions.js',
     429        array( 'jquery' ),
     430        '20230629',
     431        array(
     432            'in_footer' => false, // Because involves header.
     433            'strategy'  => 'defer',
     434        )
     435    );
    427436
    428437    wp_localize_script(
  • trunk/src/wp-content/themes/twentythirteen/functions.php

    r56526 r56556  
    322322
    323323    // Loads JavaScript file with functionality specific to Twenty Thirteen.
    324     wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20230526', array( 'in_footer' => true ) );
     324    wp_enqueue_script(
     325        'twentythirteen-script',
     326        get_template_directory_uri() . '/js/functions.js',
     327        array( 'jquery' ),
     328        '20230526',
     329        array(
     330            'in_footer' => false, // Because involves header.
     331            'strategy'  => 'defer',
     332        )
     333    );
    325334
    326335    // Add Source Sans Pro and Bitter fonts, used in the main stylesheet.
  • trunk/src/wp-content/themes/twentytwelve/functions.php

    r56526 r56556  
    189189
    190190    // Adds JavaScript for handling the navigation menu hide-and-show behavior.
    191     wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20141205', array( 'in_footer' => true ) );
     191    wp_enqueue_script(
     192        'twentytwelve-navigation',
     193        get_template_directory_uri() . '/js/navigation.js',
     194        array( 'jquery' ),
     195        '20141205',
     196        array(
     197            'in_footer' => false, // Because involves header.
     198            'strategy'  => 'defer',
     199        )
     200    );
    192201
    193202    $font_url = twentytwelve_get_font_url();
  • trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-script-loader.php

    r56547 r56556  
    2121
    2222        /**
     23         * Migrates legacy async/defer script data which might be used by child themes.
     24         *
     25         * This method is used on the `print_scripts_array` filter.
     26         *
     27         * @since Twenty Twenty 2.0
     28         *
     29         * @param string[] $to_do An array of script dependency handles.
     30         * @return string[] Unchanged array of script dependency handles.
     31         */
     32        public function migrate_legacy_strategy_script_data( $to_do ) {
     33            foreach ( $to_do as $handle ) {
     34                foreach ( array( 'async', 'defer' ) as $strategy ) {
     35                    if ( wp_scripts()->get_data( $handle, $strategy ) ) {
     36                        wp_script_add_data( $handle, 'strategy', $strategy );
     37                    }
     38                }
     39            }
     40            return $to_do;
     41        }
     42
     43        /**
    2344         * Adds async/defer attributes to enqueued / registered scripts.
    2445         *
    25          * If #12009 lands in WordPress, this function can no-op since it would be handled in core.
     46         * Now that #12009 has landed in WordPress 6.3, this method is only used for older versions of WordPress.
     47         * This method is used on the `script_loader_tag` filter.
    2648         *
    2749         * @since Twenty Twenty 1.0
     
    3456         */
    3557        public function filter_script_loader_tag( $tag, $handle ) {
    36             foreach ( array( 'async', 'defer' ) as $attr ) {
    37                 if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
    38                     continue;
    39                 }
     58            $strategies = array(
     59                'async' => (bool) wp_scripts()->get_data( $handle, 'async' ),
     60                'defer' => (bool) wp_scripts()->get_data( $handle, 'defer' ),
     61            );
     62            $strategy   = wp_scripts()->get_data( $handle, 'strategy' );
     63            if ( $strategy && isset( $strategies[ $strategy ] ) ) {
     64                $strategies[ $strategy ] = true;
     65            }
     66
     67            foreach ( array_keys( array_filter( $strategies ) ) as $attr ) {
     68
    4069                // Prevent adding attribute when already added in #12009.
    4170                if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
  • trunk/src/wp-content/themes/twentytwenty/functions.php

    r56548 r56556  
    136136     */
    137137    $loader = new TwentyTwenty_Script_Loader();
    138     add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
     138    if ( version_compare( $GLOBALS['wp_version'], '6.3', '<' ) ) {
     139        add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
     140    } else {
     141        add_filter( 'print_scripts_array', array( $loader, 'migrate_legacy_strategy_script_data' ), 100 );
     142    }
    139143}
    140144
     
    212216    }
    213217
    214     wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version );
    215     wp_script_add_data( 'twentytwenty-js', 'async', true );
     218    wp_enqueue_script(
     219        'twentytwenty-js',
     220        get_template_directory_uri() . '/assets/js/index.js',
     221        array(),
     222        $theme_version,
     223        array(
     224            'in_footer' => false, // Because involves header.
     225            'strategy'  => 'defer',
     226        )
     227    );
    216228}
    217229
  • trunk/src/wp-content/themes/twentytwentyone/functions.php

    r56526 r56556  
    450450            array( 'twenty-twenty-one-ie11-polyfills' ),
    451451            wp_get_theme()->get( 'Version' ),
    452             array( 'in_footer' => true )
     452            array(
     453                'in_footer' => false, // Because involves header.
     454                'strategy'  => 'defer',
     455            )
    453456        );
    454457    }
Note: See TracChangeset for help on using the changeset viewer.