Eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
Google continua a dare sempre più importanza ai dispositivi mobili ed alla velocità di un sito web, per questo ha messo a disposizione un tool gratuito per analizzare le performance di un sito: https://testmysite.withgoogle.com.
Questo tool offre delle indicazioni interessanti ma non troppo dettagliate, spesso restituisce dei risultati simile alla seguente immagine.
Per riuscire a capire come ottimizzare il nostro sito è meglio utilizzare un altro tool di Google PageSpeed Insight che offre un maggiore dettaglio sulle singole problematiche, come mostra la seguente immagine cliccando su “Show how to fix” di ogni singola voce mostra i suggerimenti per migliorare le performance ed in file da ottimizzare.
Se hai utilizzato WordPress sicuramente ti verrà consigliato di Eliminare il JavaScript ed i CSS che bloccano il caricamento della pagina.
Per farlo ho utilizzato un plugin Autoptimize, una volta entrato nelle opzioni (Impostazioni/Autoptimize) scegliere cosa ottimizzare HTML, JavaScript o CSS. Ho scelto di ottimizzare JavaScritp e CSS, l’HTML è ottimizzato già dalla Cache di SiteGround.
Eseguendo un nuovo test con PageSpeed Insights le cose migliorano ma non troppo, inoltre è facile che il sito non venga visualizzato correttamente causa il caricamento dei CSS e dei JavaScript successivo al rendering della pagina Per risolvere questo problema dobbiamo fare in modo di caricare il CSS indispensabile per il corretto rendering della pagina prima possibile.
Occorre accedere alle impostazioni avanzate di Autoptimize, cliccare sul pulsante posto in alto “Mostra impostazioni avanzate” ed iniziare a lavorare sulla funzione “Incorpora e differisci i CSS“.
Usare solo il CSS indispensable al rendering della pagina
Come prima cosa analizzare il codice sorgente della pagina del nostro sito, si potrà notare che Autoptimize ha generato un unico grosso CSS.
- Aprire il CSS generato (è sufficiente cliccarci sopra)
- Copiare tutto il testo del foglio di stile
Utilizzare Critical Path CSS Generator
Sarà proprio questo tool online e gratuito che si occupa di individuare il codice del CSS indispensabile per la visualizzazione delle pagine.
- Aprire il tool Critical Path CSS Generator
- Inserire l’url del nostro sito nell’apposito campo URL TO WEB PAGE TO CREATE CRITICAL CSS FOR
- Incollare il testo del CSS copiato in precedenza nel campo Full CSS
- Premere il pulsante Create Critical Path CSS
- Comparirà una finestra CRITICAL PATH CSS con il codice ottimizzato
- Copiare il CSS ottimizzato
N.B: Il campo per l’ottimizzazione del CSS può contenere al massimo 800.000 caratteri in caso il testo sua superiore si può procedere in 2 o più per ottimizzare il codice.
Impostare Autoptimize
- Tornare sulle impostazioni di Autoptimize
- Fleggare Incorpora e differisci CSS
- Incollare il CSS ottimizzato nel campo di testo comparso sotto Incorpora e differisci CSS
- Quindi cliccare su Salva modifiche e vuota cache
Facendo un nuovo test del sito su PageSpeed Insights le cose dovrebbero essere molto migliorate 😉
ATTENZIONE: Dopo ogni modifica se avete un file robots.txt ottimizzato verificate che non siano bloccate risorse dei plugin installati, nel caso inserire la direttiva “Allow: ” per consentire l’accesso a queste risorse.
