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 Code Splitting
- impostare i budget
- 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 Web Workers Service Worker Time-to-Interactive Time-to-Interactive
- inoltre, è importante valutare attentamente se la presenza vera e propria di JavaScript sia strettamente necessaria alla user experience