WordPress.org
Get WordPress

Make WordPress Core

Changeset 56556


Ignore:
Timestamp:
09/12/2023 12:04:15 AM (3 years 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.