WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Weston Ruter 2023-09-12 00:06:19 +00:00
parent de170c0c2e
commit ceb151029c
12 changed files with 174 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
wp-content/themes/twentyeleven/showcase.php
View File

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

11
wp-content/themes/twentyfifteen/functions.php
View File

@ -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',

22
wp-content/themes/twentyfourteen/functions.php
View File

@ -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' );

22
wp-content/themes/twentynineteen/functions.php
View File

@ -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( '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',
)
);
}
wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

33
wp-content/themes/twentyseventeen/functions.php
View File

@ -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' );

11
wp-content/themes/twentysixteen/functions.php
View File

@ -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',

11
wp-content/themes/twentythirteen/functions.php
View File

@ -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;

11
wp-content/themes/twentytwelve/functions.php
View File

@ -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 ) ) {

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

@ -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 ) {
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 ) ) {
$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );

18
wp-content/themes/twentytwenty/functions.php
View File

@ -135,7 +135,11 @@ function twentytwenty_theme_support() {
* by the theme.
*/
$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 );
}
}
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_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',
)
);
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );

5
wp-content/themes/twentytwentyone/functions.php
View File

@ -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',
)
);
}

2
wp-includes/version.php
View File

@ -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.