Sappiamo tutti quanto Google e i nostri utenti siano oggi estremamente esigenti per quel che riguarda la velocità delle pagine dei nostri siti: bastano pochi secondi di ritardo e il visitatore se n’è già andato, perso nel mare di siti che ci fanno concorrenza o imbambolato a guardare l’ennesima galleria di gatti su Facebook.

Uno dei “colli di bottiglia” più frequenti è il caricamento degli script JavaScript esterni: ormai ogni pagina ne carica almeno una mezza dozzina (fra librerie esterne, analytics di ogni sorta, plugin e altri ammenicoli vari), script che a volte si trovano su CDN non sempre velocissime o che possono essere di qualche centinaio di KB e così mentre la pagina li carica tutto tace ed è fermo – tranne l’impazienza dell’utente.

Per ovviare a questo problema ci sono una serie di tecniche che caricano gli script in maniera “asincrona”, ovvero non bloccando il download del resto della pagina ma facendolo in parallelo. La soluzione è buona ma si appoggia a codice a dir poco complesso da scrivere e specifico per ogni browser.

Come al solito, nella sua infinita magnanimità, HTML5 ci viene in aiuto con due semplicissime paroline che possiamo usare come attributi del tag <script>:

async & defer

In maniera estremamente veloce e facile possiamo aggiungere uno di questi attributi al tag <script>, così:

In questo modo, i due script saranno caricati in maniera asincrona (vedremo dopo la differenza fra i due) e al loro caricamento verrà richiamata la funzione “myInit()” – che è la funzione che deve “lanciare” l’esecuzione dello script.

Il vantaggio di questa soluzione è immediato: se prima uno script ci metteva 2 secondi a caricare e l’altro altri 2 la pagina veniva bloccata per 4 secondi. Adesso i due script vengono caricati in maniera “asincrona” e quindi la pagina può iniziare ad essere mostrata subito, senza aspettare nulla.

Un’ulteriore vantaggio dell’approccio asincrono è che se per caso uno degli script non fosse raggiungibile (ad esempio perchè la CDN è “caduta”) la nostra pagina sarebbe comunque visibile e non bloccheremmo nulla.

La differenza fra async e defer

La differenza fra le due modalità è che usando async lo script viene caricato immediatamente, senza rispettare l’ordine in cui appare nella pagina e prima dell’evento window.load – quindi ad esempio uno script che richiamiamo nell'<head> e uno che abbiamo nel <footer> potrebbero essere eseguiti “al contrario” (cioè prima quello nel footer e poi quello nell’head)

Con defer, invece, diciamo al browser di richiamare gli script nell’ordine in cui appaiono nella pagina – quindi prima verrà eseguito lo script nell'<head> e poi quello nel <footer>: l’esecuzione comincerà non appena il parsing è completo, prima che l’evento DOMContentLoaded sia lanciato.

Compatibilità e avvertenze

Questi due attributi HTML5 sono piuttosto ben supportati: Chrome e Firefox al 100% mentre IE, per ora, solo il “defer”.

La nostra avvertenza è di usare questa modalità per gli script che non sono essenziali al corretto funzionamento della pagina visto che potrebbero essere caricati dopo che il contenuto inizia ad essere mostrato – un utilizzo ideale è ad esempio per gli script di analytics.

 

Happy deferring e… alla prossima! :)

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis