Nel suo talk su JavaScript e performance, Nicholas Zakas affronta tutti gli argomenti più rilevanti per quanto riguarda le migliori pratiche da seguire per ottimizzare il proprio codice JavaScript. Tuttavia questo talk, come molti altri (praticamente tutti), si concentra sul codice scritto di propria mano dallo sviluppatore, tralasciando completamente il codice di terze parti incorporato nel sito. Stiamo parlando di quei widget JavaScript che noi usiamo per aggiungere funzionalità alle nostre pagine. Su questo codice noi non abbiamo un completo controllo, e quindi non possiamo utilizzare quasi nessuna delle pratiche consigliate per migliorare la performance. Vediamo perchè.
Partiamo da un esempio concreto. Nel mio blog in inglese uso il seguente codice per incorporare un bottone di Twitter:
<a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-via="gabromanato">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Il bottone di Twitter viene popolato dal codice JavaScript contenuto nel widget caricato. Vengono letti gli attributi custom inseriti nel link ed in base a tali attributi avviene il rendering del bottone. Quando il browser incontra questo codice deve:
- generare la struttura DOM del link
- reperire la risorsa specificata
- interpretare il codice JavaScript
- effettuare il rendering del bottone
Tutto questo rallenta il caricamento della pagina e non c'è modo per noi di ottimizzare tale procedura, in quanto il codice viene importato da remoto. Una pratica raccomandata è quella di inserire gli elementi script appena prima della chiusura dell'elemento body. In questo caso il codice è però posto al centro della pagina e deve essere comunque interpretato prima di poter effettuare il rendering del bottone.
Questo esempio dimostra come molto spesso i widget limitino di molto la nostra volontà di seguire le pratiche raccomandate per l'ottimizzazione della performance. Il codice del widget visto sopra funziona esattamente come riportato e non c'è modo per noi di modificarlo, pena il mancato funzionamento del widget stesso.
Il mio consiglio, laddove sia possibile, è quello di preferire widget lato server a widget lato client. In questo modo il browser dovrà solo effettuare il parsing della marcatura generata dal widget ed associarvi gli stili CSS e tutto questo processo avverrà unitamente al rendering dell'intera pagina, senza soste o tappe intermedie.
Qualora non fosse possibile, procedete come segue:
- usate la console del vostro browser per individuare il widget che impiega più tempo a caricarsi
- osservate quanto tempo impiega il browser ad effettuare il rendering del widget
Una volta individuato il widget incriminato, spostatelo in una parte della pagina che non sia immediatamente visibile all'atto del caricamento della stessa. In altre parole, dobbiamo fare in modo che i nostri visitatori abbiamo subito accesso ai contenuti principali della pagina senza inutili rallentamenti. In fondo, i widget sono abbellimenti: quello che ci interessa sono i contenuti principali.