Ottimizzare PageSpeed: Above the fold optimization

Ottimizzare Google Insight PageSpeed: Above the fold optimization, plugin e trucchi

Secondo appuntamento della rubrica Ottimizzare PageSpeed: questa volta andremo ad analizzare alcune tecniche per migliorare la visualizzazione del contenuto above the fold sia tramite l’utilizzo di plugin che con una funzione ad hoc in php.

A quanti di voi sarà capitato di trovarsi in una situazione come quella descritta dalla seguente immagine:

Come fare quindi a risolvere, o quantomeno arginare, il problema delle risorse bloccanti evidenziate da Google nella nostra pagina web?
Partiamo con l’osservare che ciò che impedisce la visualizzazione immediata della nostra pagina sono javascript, CSS e Google Font (che tratteremo a parte in quanto capitolo a sé): a questo punto dovremmo individuare i javascript ed i css critici, ovvero da cui dipende da subito la renderizzazione del contenuto web che stiamo offrendo ai nostri visitatori. Una volta trovate le risorse non critiche possiamo spostarle manualmente nel file footer.php, che trovate all’interno della cartella del nostro tema WordPress.

Leggi anche Ottimizzare PageSpeed: Sfrutta la cache del browser

Come spostare i javascript nel footer della pagina?

È possibile ottenere il risultato desiderato usando un plugin: stiamo parlando del famoso Above the fold optimization, di PageSpeed.pro che a fronte di una semplice configurazione ci presenta l’occasione per liberare un pò di spazio nel sovraffollato header del nostro tema WordPress.

Qualora invece non aveste problemi a sporcarvi un pò le mani con il codice allora potete aprire il vostro file functions.php, anch’esso presente all’interno della cartella del tema WordPress in uso, ed inserire questa funzione, che farà al caso vostro:

function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

I numeri indicano la priorità di esecuzione della funzione add_action(): così facendo siamo riusciti in un solo colpo a spostare tutti i javascript all’interno del footer: ed ora?
Possiamo certo migliorare un pò dato che il risultato della rimozione di css e javascript critici comporta il cosiddetto FOUT, flash of unstyled text, ovvero un flash di testo non formattato che avviene in concomitanza del caricamento iniziale della pagina: la risposta della pagine è immediata ma le risorse necessarie al rendering verranno caricate per ultime essendo state spostate nel footer.

È decisamente il caso di questo sito, per il quale ho scelto un approccio aggressivo al fine di dimostrare, oltre che gli effetti indesiderati, anche l’effettiva veridicità e bontà delle tecniche impiegate al fine di ottimizzare il codice già presente in qualsiasi sito WordPress.

Molti consigliano, ai fini dell’ottimizzazione di CSS e javascript, di raggruppare più script in un unico grosso contenitore invece che caricare più fogli di stile o più script alla volta: non abbiamo trattato questa tecnica in quanto ci porterebbe a modificare i singoli plugin, rendendo di difficile esecuzione la manutenzione stessa del sito.

Ti è piaciuto l’articolo? Commenta nel box qui sotto!

<<Ritorna al blog