Vorrei concludere questo 2022 con una miniserie in due puntate dove riassumo un po’ di trucchi che ho imparato per migliorare le prestazioni di una pagina web, spesso rallentate da una pesante zavorra di fogli di stile, ma principalmente di codice Javascript che fa tutto ed il contrario di tutto (e ci traccia ovunque andiamo, ma quella è un’altra storia). L’obiettivo finale di queste puntate è quello di condividere tecniche che mirano a creare una gerarchia di tutto quello che va caricato, in modo da prelevare prima le informazioni che servono subito, e mettere in secondo piano quelle che possono attendere qualche millisecondo senza influenzare la presentazione della pagina in questione. Eh già, perché il trucco è tutto lì: puoi provare a spremere qualche kilobyte dai tuoi file, ma se poi hai fogli di stile monolitici che includono ogni ben di Dio, non hai fatto molto.
Idealmente, se i tuoi fogli di stile superano una trentina di kilobyte, dovresti estrapolare soltanto le regole necessarie per visualizzare la tua home page, e caricare solo quelle:
<link media="screen" rel="stylesheet" type="text/css" href="homepage.css">Allo stesso tempo, sposterai tutti i CSS secondari in un file separato. Questo è quello che chiameremo il foglio di stile “sincronizzato”, che verrà caricato prima che la pagina cominci ad essere analizzata e visualizzata dal browser. Collega questo file utilizzando un semplice tag <link> nella sezione <head> del sorgente. Questo file verrà memorizzato nella cache del browser, e quindi verrà caricato istantaneamente quando il visitatore accederà ad un’altra pagina del sito, ache grazie a nuove funzioni del protocollo HTTP/2, all’uso di connessioni parallele ed altre tecniche messe in campo dai browser moderni.
Imposta tutti i file esterni JavaScript non necessari con l’attributo defer durante il download. In questo modo verranno caricati in ordine, ma in parallelo su altre connessioni secondarie, e non interferiranno con tempo necessario “alla prima pennellata”. Non verranno eseguiti fino a quando tutto l’HTML non saranno visualizzati:
<script src="myscript.js" defer="defer"></script>Se possibile, fai in modo che tutti i file JavaScript necessari al funzionamento di tutte le pagine del sito sin dall’inizio in modo asincrono:
<script src="myscript.js" async="async"></script>Come defer, questi file non impediranno il rendering dell’HTML ma non appena vengono caricati, saranno eseguiti immediatamente. Ovviamente vorrai cercare di evitare codice “bloccante” asincrono quanto più possibile. Mettili in fondo alla pagina, giusto prima del tag <body>, se proprio devono eseguire operazioni bloccanti, come l’attesa sincrona di una chiamata AJAX per visualizzare ulteriori informazioni sulla pagina (come spesso accade con React). E non dimenticare di eseguire il codice dentro un evento load o altri trucchi per verificare che la pagina venga visualizzata prima di eseguire gli script asincroni:
window.addEventListener('load', fn, false ) ...