Come aggiungere l’attributo defer (o async) agli script registrati in WordPress

Avevo la necessità di ottimizzare il caricamento degli script per migliorare le performance del sito.

Due attributi molto utili in questo senso sono defer e async, introdotti nella versione 6.3, che permettono al browser di caricare i file JavaScript in maniera non bloccante, riducendo i tempi di rendering della pagina.

Ecco come aggiungere questi attributi a script che sono già stati registrati o messi in coda in WordPress.

Gestire gli script in WordPress

WordPress offre una funzione molto comoda: wp_script_add_data().

Con questa funzione possiamo aggiungere metadati agli script registrati o messi in coda tramite wp_enqueue_script().

Ad esempio, per aggiungere il defer a uno script, basta fare:

wp_script_add_data( 'handle-dello-script', 'strategy', 'defer' );

Dove handle-dello-script è l’ID con cui lo script è stato registrato.

Aggiungere defer a più script

Se vuoi applicare il defer solo ad alcuni script specifici, puoi usare un hook su wp_enqueue_scripts e ciclare sugli handle desiderati:

function riaco_defer_assets() {
	// Sostituisci con gli handle reali degli script che vuoi deferire
	$scripts_to_defer = array(
		'cookie-law-info',
		'toc-front',,
	);

	foreach ( $scripts_to_defer as $handle ) {
		if ( wp_script_is( $handle, 'registered' ) || wp_script_is( $handle, 'enqueued' ) ) {
			wp_script_add_data( $handle, 'strategy', 'defer' );
		}
	}
}
add_action( 'wp_enqueue_scripts', 'riaco_defer_assets', 99 );

Aggiungi in $scripts_to_defer tutti gli handler degli script a cui vuoi applicare il defer.

E se volessi usare async?

Puoi semplicemente sostituire 'defer' con 'async' nella funzione:

wp_script_add_data( $handle, 'strategy', 'async' );

Differenza tra defer e async

defer: il browser scarica lo script in background e lo esegue solo dopo che l’HTML è stato completamente parsato. Mantiene l’ordine degli script.

async: il browser scarica lo script in background e lo esegue non appena disponibile, senza aspettare il parsing HTML e senza garantire l’ordine.

Come sapere quali script sono in coda

Prima di aggiungere defer o async è importante sapere quali handle usare.

Ogni script caricato in WordPress ha un identificatore univoco (handle).

Puoi loggare tutti gli script in coda con questo snippet:

// Mostra in log tutti gli script messi in coda
add_action(
	'wp_print_scripts',
	function () {
		global $wp_scripts;

		foreach ( $wp_scripts->queue as $handle ) {
			if ( isset( $wp_scripts->registered[ $handle ] ) ) {
				$src = $wp_scripts->registered[ $handle ]->src;
				error_log( "[Riaco] Script: $handle => $src" );
			}
		}
	}
);

Aggiorna o visita la pagina di cui vuoi sapere quali script sono stati caricati.

Il risultato sarà visibile nel file debug.log se hai attivato il debug in WordPress.

Esempio del log:

[Riaco] Script: jquery-core => /wp-includes/js/jquery/jquery.min.js
[Riaco] Script: cookie-law-info => /wp-content/plugins/cookie-law-info/js/script.js

Così puoi copiare gli handle degli script a cui vuoi aggiungere gli attributi defer o async.