Async e Defer: Un Valido Aiuto per evitare il Parser Blocking durante il rendering della pagina web da parte del Browser.
Quante ricerche in rete per risolvere la situazione? immagino molte…
Ma cosa succede quando il Browser inizia a leggere il codice Html dei nostri siti web?
Succede che dal momento in cui il Browser inizia il Parser ed incontra uno Script Javascript esso si ferma a renderizzare la pagina perchè deve eseguire lo script.
Si chiama Parser Blocking ed è una questione da risolvere assolutamente in modo che il Browser riesca a finalizzare le operazioni di Rendering per poi tornare successivamente sullo script da eseguire.
Si tratta di un ottimizzazione importantissima per migliorare le performance del sito in questione e con l’articolo di oggi vediamo come, attraverso Async e Defer, miglioriamo efficacemente il Rendering della pagina caricando gli script in modalità asincrona.
Finalmente potrai ottenere un miglior punteggio sulle performance del sito sui Tools Online come Gtmetrix e Google Page Speed Insight.
Vediamo nello specifico come possiamo operare per inserire gli attributi in questione:
Inserire Async e Defer è molto semplice ed in pochi minuti avrai inserito questo importante attributo sui tuoi script javascript, di seguito un esempio pratico da copia-incollare
Esempio Async
<script type="text/javascript" src="https://jquery.com/js/jquery.js" async></script> <script type="text/javascript" async> // Il tuo Script quì </script>
L’Attributo Async viene utilizzato per Script esterni (ad esempio il codice di tracciamento di google analytics) affinché questi vengano caricati in maniera asincrona e di conseguenza non blocchino il Rendering del Codice Html.
Esempio Defer
<script type="text/javascript" src="https://jquery.com/js/jquery.js" defer></script> <script type="text/javascript" defer> // Il tuo Script quì </script>
L’Attributo Defer a differenza di Async permette (come async) il caricamento asincrono ma rispettando l’ordine in cui sono presenti all’interno della pagina web e vengono eseguiti a fine rendering o parsing del codice HTML.
Meglio Async o Defer o Entrambi?
Non è la domanda giusta da porsi… in realtà l’uno non è migliore dell’altro e viceversa. Vengono usati in base al tipo di script che genera il parser blocking. Quindi utilizzerai Async per script esterni che non hanno dipendenze da altri script (come google analytics) e utilizzerai il defer per script esterni che invece hanno dipendenze o viene invocato da altri script.
Nonostante abbiano delle diversità, questi attributi, possono essere usati insieme per essere quanto più “Crossbrowser” e far fronte all’incapacità di alcuni browser legacy che leggono Defer e non Async.
Ti è stato utile il mio articolo? spero di si..
A presto!
