Seo, eliminare Javascript nel contenuto above the fold e velocizzare il nostro sito web

Google Pagespeed Insights ci consiglia di eliminare il javascript che blocca la visualizzazione dei contenuti above the fold, ma come fare?

Spesso il caricamento di un sito e la sua velocità si basa anche sulla quantità di oggetti esterni che andiamo a caricare e questi possono essere dei css e dei javascript. Infatti, alcune parti del sito possono essere bloccate e non visualizzate fin quando il relativo file non viene scaricato e quindi il sito diventa lento nel mostrarsi all’utente.

Alcune risorse, però, dette above the fold ossia nella parte superiore del sito sono inutili e possono essere spostate verso la fine del documento web. Immaginiamo, per esempio, un js che funziona solo al click su un determinato pulsante… che senso ha caricarlo in alto? Nessuno, quindi spostiamolo in basso.

I consigli di Google sui Javascript e CSS above the fold

Mamma Google ci indica di inserire i js o i css inline, quando magari i siti sono piccoli e le linee di codice composte da pochi attributi. Potrei consigliare il plugin Autoptimize e capire se va bene o no come soluzione. WordPress, probabilmente, faticherà a migliorare questo problema ma un tentativo potreste farlo.

Un altra soluzione è quella di caricare il codice Javascript in modalità asincrona ossia durante il parsing HTML del documento, metterlo in pausa e scaricare il javascript.

L’ultimo suggerimento è quello di posticipare il file Javascript con l’attributo, magari, defer che permette si di scaricare il file durante il parsing html ma eseguirlo solo alla fine.

In questo caso, viene utile l’utilizzo del plugin Async Javascript che permetterà di caricare e scaricare i file js in modalità asincrona. Il plugin funziona in maniera semplicissima: applica, in base alla nostra scelta nelle opzioni, l’attributo async o defer:

<script src="file1.js" async></script>

<script src="file1.js" defer></script>

Se non volessi il codice?

Basterà aggiungere il seguente codice nel nostro functions.php nella parte Aspetto->Editor

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Ti è piaciuto l’articolo? Condividilo