Per capire questo errore in modo opportuno bisogna inquadrare l’argomento nell’ottica corretta: per caricare una pagina web, infatti, il browser deve analizzare il contenuto di tutti i tag <script>, il che aggiunge ulteriore tempo al caricamento della pagina.

Secondo GTMetrix, ad esempio, ogni kilobyte aggiuntivo di JavaScript aggiunge circa 1 ms di tempo di analisi al tempo di caricamento complessivo della pagina. Quindi 100kB di JavaScript inclusi nel caricamento della pagina iniziale andrebbero ad aggiungere 100ms di tempo di caricamento per i tuoi utenti. Poiché JavaScript deve essere analizzato ad ogni visita di una pagina, questo tempo di caricamento aggiunto farà parte di ogni caricamento di pagina, sia caricato dalla rete, tramite la cache del browser o in modalità offline HTML5.

Riducendo al minimo la quantità di JavaScript necessaria per eseguire il rendering della pagina e, in aggiunta, posticipando l’analisi di JavaScript non necessario fino a quando non è strettamente necessario eseguirla, è possibile ridurre il tempo di caricamento iniziale della pagina.

Esistono varie tecniche che possono essere utilizzate per rinviare l’analisi di JavaScript. La tecnica più semplice e preferita è quella di rinviare il caricamento di JavaScript fino a quando non è necessario, in genere sfruttando l’attributo async. Una seconda tecnica consiste nell’utilizzare l’attributo <script async> ove appropriato, che impedisce all’analisi di bloccare il caricamento della pagina iniziale, rinviandolo fino a quando il thread dell’interfaccia utente del browser non è disponibile.

Se nessuna di queste tecniche è applicabile, ci sono alcune tecniche aggiuntive comunemente utilizzate nelle applicazioni mobili, descritte di seguito:

Quando si creano applicazioni mobili, può essere necessario caricare tutto il JavaScript necessario a un’applicazione in anticipo, in modo che l’applicazione possa continuare a funzionare quando l’utente è offline. In questo caso, alcune applicazioni, come Gmail mobile, trovano utile caricare JavaScript nei commenti, e successivamente effettuare un eval() JavaScript (questa istruzione serve a caricare il contenuto del file JS che, fino ad allora, è stato scritto solo come testo) quando è davvero necessario. Questo approccio garantisce che tutto il JavaScript sia caricato durante il caricamento iniziale della pagina, senza richiedere l’analisi di JavaScript, ma richiede anche un developer esperto i materia.

Un’alternativa alla memorizzazione del codice nei commenti è la memorizzazione del codice nelle const JavaScript. Quando si utilizza questa tecnica, JavaScript viene analizzato solo quando necessario, sempre chiamando eval () sulla stringa letterale. Questa tecnica consente inoltre a un’applicazione di caricare JavaScript in anticipo, ma rimandare l’analisi fino a quando non è necessaria.

Si noti che spostare i tag <script> alla fine della pagina non è per forza la scelta migliore, poiché il browser continuerà a caricare “a vuoto” fino a quando la pagina non avrà terminato l’analisi del JavaScript. Gli utenti possono attendere fino a quando l’indicatore di caricamento della pagina mostra che il caricamento della pagina è completo prima di interagire con la pagina, quindi è importante caricare JavaScript in modo da ridurre al minimo il tempo impiegato dal browser per indicare che il caricamento della pagina è completo.