Costruire siti Web interattivi comporta l'utilizzo e il parsing di JavaScript. Dato che quest'ultimo è diventato il perno attorno al quale ruotano praticamente tutte le applicazioni Web, diventa imperativo utilizzare al meglio tale strumento, per ridurre al minimo il suo impatto sia sulle performance che sul peso complessivo delle risorse utilizzate.
In ambito di device mobile, ad esempio, JavaScript è attualmente la risorsa più dispendiosa tra quelle utilizzabili, grazie anche alla sua capacità di "rallentare" l'interattività. Meno il dispositivo presenta "qualità" in termini tecnici, meno performante sarà nel gestire gli script Javascript.
Analizziamo alcune strategie che è possibile utilizzare per distribuire JavaScript in modo efficiente, evitando che l'user experience risenta pesantemente della presenza di script:
- caricare solo le risorse JavaScript che sono realmente richieste dalla pagina corrente. Se si utilizza un particolare framework ad esempio, possiamo utilizzare solo le feature necessarie per ridurre il suo footprint e rendere l'applicazione maggiormente modulare;
- dare priorità a ciò che l'utente necessita utilizzando feature come il Lazy Loading, che permette di caricare determinate risorse in corso d'opera, non appena si verifica la condizione idonea, al posto di caricarle indistintamente, ed il Code Splitting, tecnica che consente di suddividere il codice in "pacchetti" (o bundle) che verranno caricati successivamente on-demand o in parallelo;
- impostare i budget per le performance. In ambito di device mobile, è buona norma puntare a non superare i 170kb nelle versioni minimizzate o compresse degli script;
- revisionare e "spuntare" tutti i bundle JavaScript. Oltre a favorire la modularità del codice, come abbiamo dichiarato in precedenza, è buona norma evitare determinati polyfill (codici che vanno ad implementare una specifica feature in un browser che per natura non supporta tale opzione) se non sono strettamente necessari, ed evitare assolutamente il codice duplicato;
- evitare di caricare troppo codice JavaScript nel main thread (attraverso risorse quali ad esempio il tag "script") e preferire l'inclusione nei Web Workers o un caching via Service Worker. Entrambe queste soluzioni hanno un impatto Time-to-Interactive migliore. Il Time-to-Interactive è un indice, o punteggio, che analizza il caricamento di una risorsa come un percorso nel tempo, che permette di definire se la performance è elevata o meno analizzando ogni segmento del suddetto percorso;
- inoltre, è importante valutare attentamente se la presenza vera e propria di JavaScript sia strettamente necessaria alla user experience, nel caso specifico del contesto preso in considerazione, o meno. Oltre alle possibilità offerte da HTML5 e CSS3, abbiamo a disposizione anche l'HTML prodotto dal server-side.