Sergio Pinna

Web Designer

async_defer

Aggiungere async o defer a tutti i javascript esterni

Aggiungere async o defer a tutti i javascript esterni determina la lentezza di un pagina Web, negativamente la SEO del sito ed anche la user experience dell’utente.
Per migliorare la velocità di caricamento del sito internet vi sono ottimi strumenti rintracciabili su internet.

Quelli che personalmente uso e reputo fra i migliori sono Pingdom e GTMetrix.

Aggiungere async o defer a tutti i javascript esterni

In questi toool online è ravvisabile la componente “Defer parsing of JavaScript“, detto semplicemente: il javascript caricato esternamente al sito, rallenta il parsing della pagina, cioè, durante la lettura del codice HTML (che va dall’alto verso il basso) da parte del browser, tale lettura incontra del file javascript da scaricare e il browser, se non ci sono altri comandi, interrompe la lettura per scaricare e conseguentemente eseguire il file javascript, solo dopo finito ciò rincomincerà la lettura del codice HMTL della pagina.

Insomma una lettura stop and go continua! …immagina la lentezza che può avere il doversi bloccare sempre e dove rincominciare solo dopo, aver scaricato… ecc.ecc. una lentezza “macchinosa” molto inefficace per la velocità di caricamento della pagina…

…ma non c’è da disperare! l’HTML opportunamente mette a disposizione due attributi da inserire nel tag script: defer e async.

Eccone un esempio:
codice senza né defer né async

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

con l’aggiunta di defer

<script defer type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

con l’aggiunta di async

<script async type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

Async e defer

Gli attributi async e defer sono attributi booleani che indicano come lo script, ad esso associati, devono essere eseguiti. Gli attributi defer e async non devono essere assolutamente presenti se non è presente l’attributo src.

I browsers che supportano async e defer sono:

  • Chrome 8+
  • Chrome for Android 47+
  • IE 10+
  • UC Browser for Android 9.9+
  • Firefox 3.6+
  • iOS Safari 5.0-5.1+
  • Android Browser 3+
  • Opera Mini NoneSafari 5.1+
  • Opera 15+
  • IE Mobile 10+
  • Edge 12+

Ci sono tre possibili modalità che possono essere scelte per questi attibuti:

  • se async è presente, allora lo script sarà eseguito appena possibile, ma senza bloccare il parsing della pagina.
  • se l’attributo async non è presente, ma l’attributo defer è presente, allora lo script sarà eseguito quando la pagina avrà finito il parsing.
  • se né async né defer sono presenti, allora lo script avverà immediatamente bloccando il parsing della pagina.

Qui sotto puoi vederne una esemplificazione grafica:

Aggiungere async o defer a tutti i javascript esterni

L’attributo defer può essere specificato in concomitanza all’attributo async, come fall back per quei browser che non supportano l’attributo async.

Aggiungere async o defer a tutti i javascript esterni: l’implementazione in WordPress

Dalla versione di WordPress 4.1 in poi

// dalla versione di WordPress 4.1 in poi
// se siamo nell'Amministrazione esci (NON eseguire la funzione)
if( ! is_admin() ){
	function defer_async_function($tag, $handle, $src) {
		// se l'src NON è un .js (es.: .css) OPPURE è .js?no_defer, esci
		if( (FALSE === strpos( $src, '.js' )) || ((FALSE !== strpos( $src, '.js?no_defer_async' ))) ) {
			return $tag . "\n";
		}
		// se nell'src c'è il termine google aggiungi l'attributo async
		if (strpos($src,'google') !== FALSE) {
			return '<script type="text/javascript" src="' . $src . '" async></script>' . "\n";
		}
		// a tutti i fle .js che non hanno .js?no_defer e che NON abbiano nell'src il termine google aggiungi l'attributo defer
		return '<script type="text/javascript" src="' . $src . '" defer></script>' . "\n";
	} 
	add_filter( 'script_loader_tag', 'defer_async_function', 10, 3 );
}

Spiegazione:

– la funzione non_defer_jquery() ai attua solo quando NON si è nell’Amministrazione:

// se siamo nell'Amministrazione esci (NON eseguire la funzione)
if( ! is_admin() ){
	// codice vario...
}

– non si tiene conto dei file che non siano javascript né che terminino con .js?no_defer_async:

// se l'src NON è un .js (es.: .css) OPPURE è .js?no_defer, esci
if( (FALSE === strpos( $src, '.js' )) || ((FALSE !== strpos( $src, '.js?no_defer_async' ))) ) {
	return $tag . "\n";
}

– se nel src dello script si ha la presenza del termine google si aggiunge l’attributo async (e non defer):

// se nell'src c'è il termine google aggiungi l'attributo async
if (strpos($src,'google') !== FALSE) {
	return '<script type="text/javascript" src="' . $src . '" async></script>' . "\n";
}

– a tutti i rimanenti file (che sono javascript, ed anche, che non terminano con .js?no_defer_async, ed anche, che nell’src non vi sia la presenza del temrine google) aggiungi l’attributo defer (e non async):

// a tutti i fle .js che non hanno .js?no_defer e che NON abbiano nell'src il termine google aggiungi l'attributo defer
	return '<script type="text/javascript" src="' . $src . '" defer></script>' . "\n";
}

Prima della versione di WordPress 4.1

// per la versione di WordPress precedente la 4.1
// se siamo nell'Amministrazione esci (NON eseguire la funzione)
if( ! is_admin() ){
	function defer_async_function( $url ) {
		// se l'src NON è un .js (es.: .css) OPPURE è .js?no_defer, esci
		if( (FALSE === strpos( $url, '.js' )) || ((FALSE !== strpos( $url, '.js?no_defer_async' ))) ) {
			return $url;
		}
		// se nell'URL c'è il termine google aggiungi l'attributo async='async'
		if (strpos($url,'google') !== FALSE) {
			// Deve essere ', e NON "!
			return "$url' async='async";
		}
		// a tutti i fle .js che non hanno .js?no_defer e che NON abbiano nell'src il termine google
		// Deve essere ', e NON "!
		return "$url' defer='defer"; 
	}
	add_filter( 'clean_url', 'defer_async_function', 11, 1);
}

Se ti è interessato, aggiungere async o defer a tutti i javascript esterni, allora potresti anche leggere: L’identificativo di un file registrato in wordpress

Fonte:
HTML Living Standard — Last Updated 20 December 2015
HTML <script> async Attribute
Can i use
Function Reference clean_url()
Make Your Site Faster with Async and Deferred JavaScript: Introducing script_loader_tag

Condividi questo articolo