La velocità di un sito web è importante tanto per garantire agli utenti un’esperienza fluida quanto per la SEO. È possibile migliorarla eliminando o posticipando le risorse di render-blocking, poiche queste rallentano il primo caricamento del sito e di conseguenza peggiorano l’user experience.
Prima di vedere come è importante capire il processo di caricamento di un sito web: appena un utente arriva sul nostro sito, il browser deve scaricare tutto il contenuto che compone la pagina (CSS, JS, fonts, immagini, ecc.) e quindi Inizia a leggere il codice, inclusi tutti gli HTML, CSS e JavaScript.
Solo dopo aver letto ed elaborato completamente questa coda di script l’utente sarà in grado di visitare il sito, perciò se ci sono molte risorse che bloccano il rendering potrebbe essere necessario attendere più tempo.
Alcune di queste risorse Cascading Style Sheets (CSS) e JavaScript (JS) sono necessarie, come nel caso di file CSS che garantiscono l’aspetto corretto della pagina, mentre altre possono essere ottimizzate o eliminate.
Per individuare quali risorse stanno bloccando il rendering si può eseguire il test PageSpeed Insight di Google (o in alternativa Web.Misura e GTmerix).
Quando la scansione del sito è completa, Google assegna un punteggio di velocità tra lo 0 e 100. Un punteggio compreso tra 50 e 80 è nella media, quindi è consigliabile posizionarsi nella parte superiore di questo intervallo o sopra di esso.
Dalla sezione Opportunità > Elimina le risorse di blocco della visualizzazione vedremo un elenco di file che rallentano la visualizzazione della pagina, influendo sul tempo di caricamento.
Ci sono diversi modi per correggere gli script di blocco del rendering e aumentare la velocità del sito, come:
Ottimizzare l’ordine di caricamento
La sezione head (</Head></Head>) della pagina web viene utilizzata per il precaricamento degli elementi e per questo è consigliabile incorporare il CSS ma evitare di inserire JavaScript.
Passando al body della pagina, la maggior parte dei browser web eseguono il rendering delle pagine dall’alto verso il basso quindi è bene ordinare le chiamate agli script in base alla loro importanza e complessità, posizionando gli script non fondamentali e quelli più complessi per ultimi.
Minimizzare il codice
Attraverso la riscrittura e l’eliminazione dei caratteri non necessari come spazi bianchi, commenti, virgole, interruzioni di riga, etc. si renderà il codice più compatto e coinciso, riducendo le dimensioni dello script. Ci sono plugin e strumenti online che permettono di minimizzare in automatico il codice.
Utilizzare il caricamento differito e asincrono di Javascript
Come detto poco fa, i browser leggono il codice dall’alto al basso, fermandosi ogni qual volta incontrano un tag di script, il che rallenta il rendering.
Si può utilizzare l’attributo async per caricare lo script in parallelo con la pagina web ed eseguirlo non appena è disponibile. In alternativa, con l’attributo di rinvio di analisi degli script, verranno caricati parallelamente alla pagina web ma eseguiti solo quando il browser analizzerà la pagina.
Sostituire gli elementi visivi JavaScript con CSS3
JavaScript è ottimo per aggiungere controlli complessi all’interfaccia utente ma è più pesante rispetto a CSS, quindi il suggerimento è quello di modificare e sostituire, quando possibile, tutto il JavaScript non necessario con CSS.
Eliminare tutti gli script non necessari
JavaScript e CSS servono ad espandere le funzionalità delle pagine web, compensando l’HTML. Tuttavia HTML 5.3 rende inutili alcune operazioni JS e CSS e velocizza il caricamento delle pagine.
Per individuare gli script inutili e rimuoverli si può utilizzare la scheda Coverage di Chrome DevTools o GTmetrix.
Dopo aver rimosso tutte le funzioni o tag non necessari si possono combinare gli script con funzioni simili.
Utilizzare dei plugin
Tra i più famosi:
- Autoptimize, che migliora il tempo di caricamento combinando bit di codice, riducendo i blocchi di codice, rimuovendo i caratteri non necessari etc. Apportate queste modifiche, il codice risulterà più facile da leggere e la dimensione del file sarà ridotta, riducendo il tempo di caricamento. Autoptimize è altamente personalizzabile tramite un’API aperta e opzioni avanzate.
- W3 Total Cache, plugin che incorpora molteplici funzionalità extra per l’ottimizzazione di WordPress e nella maggior parte dei casi è già disponibile nel pacchetto WordPress.
- Wp Rocket, in grado di rilevare automaticamente quali script creano problemi e risolverli. Si può utilizzare per la memorizzazione rapida della cache, la compressione e la minimizzazione.
- Speed Booster Pack, che offre alcune opzioni di configurazione, come lo spostamento degli script nel piè di pagina o il rinvio dei file JavaScript dall’analisi. Selezionandoli si possono rimuovere i file che bloccano la visualizzazione dei contenuti.
- JCH Optimize, che combina JavaScript e CSS riducendo le dimensioni dei file. Oltre ad essere ottimo per eliminare le risorse che bloccano il rendering ha molte altre funzioni che possono essere utili a lungo termine.
Bisogna tener conto che i plugin stessi sono ulteriori file aggiunti al server web quindi, per quanto pratici, non rappresentano l’opzione migliore.
