Skip to content

Commit cc775b9

Browse files
westonruterwestonruter
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@56556 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 827a560 commit cc775b9

File tree

11 files changed

+173
-21
lines changed

11 files changed

+173
-21
lines changed

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,16 @@
1616
*/
1717

1818
// Enqueue showcase script for the slider.
19-
wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '20211130' );
19+
wp_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

2130
get_header(); ?>
2231

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -454,7 +454,16 @@ function twentyfifteen_scripts() {
454454
wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141210' );
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',
460469
'screenReaderText',

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,16 @@ function twentyfourteen_scripts() {
367367
}
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',
373382
'featuredSliderDefaults',
@@ -378,7 +387,16 @@ function twentyfourteen_scripts() {
378387
);
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
}
383401
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
384402

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,26 @@ function twentynineteen_scripts() {
258258
wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' );
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

265283
wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

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

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -479,14 +479,32 @@ function twentyseventeen_scripts() {
479479
// Skip-link fix is no longer enqueued by default.
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(
485494
'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
486495
);
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' );
492510
$twentyseventeen_l10n['icon'] = twentyseventeen_get_svg(
@@ -499,7 +517,16 @@ function twentyseventeen_scripts() {
499517

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' ) ) {
505532
wp_enqueue_script( 'comment-reply' );

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,16 @@ function twentysixteen_scripts() {
423423
wp_enqueue_script( 'twentysixteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20170530' );
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(
429438
'twentysixteen-script',

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,16 @@ function twentythirteen_scripts_styles() {
321321
}
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.
327336
$font_version = ( 0 === strpos( (string) twentythirteen_fonts_url(), get_template_directory_uri() . '/' ) ) ? '20230328' : null;

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,16 @@ function twentytwelve_scripts_styles() {
188188
}
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();
194203
if ( ! empty( $font_url ) ) {

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

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,32 @@
1919
*/
2020
class TwentyTwenty_Script_Loader {
2121

22+
/**
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+
2243
/**
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
2850
*
@@ -33,10 +55,17 @@ class TwentyTwenty_Script_Loader {
3355
* @return string Script HTML string.
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 ) ) {
4271
$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,11 @@ function twentytwenty_theme_support() {
135135
* by the theme.
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

141145
add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
@@ -211,8 +215,16 @@ function twentytwenty_register_scripts() {
211215
wp_enqueue_script( 'comment-reply' );
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

218230
add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );

0 commit comments

Comments
 (0)