Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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' ) ) {
Note: See TracChangeset for help on using the changeset viewer.