100/100 su Pagespeed Insights con il tuo sito WordPress

Come promesso, ecco la guida su come mettere il turbo al proprio sito web ed ottenere il punteggio massimo sul famigerato tool Google Pagespeed Insights.

Ottimizzare il vostro sito migliorerà notevolmente la velocità di caricamento e di conseguenza la user experience. La frequenza di rimbalzo diminuirà e avrete una marcia in più per quanto riguarda la SEO del vostro sito.

È importante per la SEO?

Molti dicono che la velocità non è un fattore di ranking, tuttavia secondo me, una qualche valenza SEO ce la deve avere. Circa un anno fa, stavo ancora lavorando al mio sito web. Non era ancora pronto, tuttavia volli caricare una pagina provvisoria per cominciare a farla indicizzare.

Era una paginetta molto semplice. Title e description ottimizzati per la parola chiave “web designer freelance treviso”. Così anche per h1, un paragrafo descrittivo e un’immagine con tutti gli attributi,  ed un pelo di CSS per rendere il tutto responsive. Chiaramente non mancavano l’htaccess per caching e gzip, e segnalazione a Webmaster Tools con tanto di Sitemap.

Il risultato fu una sola pagina super ottimizzata con circa 97/100 su Pagespeed. Ebbene non ci crederete, ma in un paio di giorni mi sono piazzato in prima posizione per la chiave citata prima. Ok, mi rendo conto che non è una keyword super competitiva, però cavolo l’ho fatto con una paginetta contenente poche righe di testo.

Prima di iniziare ci tengo a precisare che quando dico 100/100 intendo tutti e tre i valori indicati dallo strumento. La precisazione è dovuta perché molti si vantano di aver raggiunto questo punteggio ma poi, in realtà, leggendo i loro articoli si scopre che si riferivano alla user experience oppure alla velocità da desktop.

Ok iniziamo. Ricordo che questa è una guida specifica per ottenere il massimo punteggio su Pagespeed Insights su un sito WordPress. Ciò che dovete fare per migliorare ve lo dice Google stesso, e in questa guida andremo a vedere come applicare questi suggerimenti nel caso di un sito WordPress.

In questa guida ci concentreremo sul punteggio della tab Velocità su Dispositivi Mobili. Se riuscirete ad ottimizzare questa, anche quella per il Desktop otterrà lo stesso risultato. Se, invece, non avete un buon punteggio relativo all’esperienza utente vuol dire che dovete rivedere la responsività del tema.

Andiamo per ordine:

Ottimizza immagini

(La corretta formattazione e compressione delle immagini può far risparmiare parecchi byte di dati)

Questo è uno dei punti che abbassano maggiormente il vostro punteggio. Quindi è importante che le immagini che caricate siano state ottimizzate al meglio con Photoshop o un software di fotoritocco analogo.

Io personalmente utilizzo Fireworks, che fa parte della suite Adobe, studiato appositamente per chi realizza siti web. Cercate di salvare le vostre immagini in formato jpeg con qualità impostata a 80. Questo, secondo me, è il miglior compromesso fra qualità e peso dell’immagine.

Se il vostro sito web è già avviato da un bel po’, quindi è pieno di contenuti e di immagini, vi consiglio di utilizzare un plugin per la compressione delle immagini come EWWW Image Optimizer che vi permette di comprimere in un solo colpo tutte le immagini caricate tramite il media uploader.

Tutto questo, a volte, può comunque non bastare, perché anche se utilizzaste un complicatissimo software sviluppato dalla NASA, capace di ridimensionare le vostre immagini ad un livello subatomico, per Google continueranno a pesare troppo.

Per fortuna lo stesso Google ci offre tutti i file del caso ottimizzati, basta cliccare in fondo ai vari messaggi di Pagespeed Insights su “Scarica contenuti ottimizzati quali immagine, JavaScript e risorse CSS per questa pagina.”

Ricordatevi che il punteggio è relativo ad ogni pagina, quindi vi consiglio di effettuare il test ogni volta che aggiungete una pagina nuova.

Sfrutta il caching del browser e Abilita la compressione

(Se viene impostata una data di scadenza o un’età massima nelle intestazioni HTTP per le risorse statiche, il browser carica le risorse precedentemente scaricate dal disco locale invece che dalla rete)

(La compressione delle risorse con gzip o deflate può ridurre il numero di byte inviati tramite la rete)

Queste due segnalazioni si possono facilmente risolvere installando il plugin W3 Total Cache.

Il caching del browser permette di impostare una scadenza per le varie risorse, come i CSS ed i JS del vostro sito web. In questo modo, quando un utente richiederà un’altra pagina che utilizza le stesse risorse, queste verranno caricate dal disco locale piuttosto che dal server online, migliorando in maniera considerevole la velocità di caricamento.

Abilitare la compressione Gzip permette di velocizzare ulteriormente il caricamento della pagina. In questo caso il server, prima di mandare i dati al browser, li comprime per ridurre al minimo la quantità di dati trasferita.

Ecco ciò che dovete fare una volta installato il plugin W3TC.

Andate nella sezione “General Settings” e mettete la spunta su enable (senza modificare nient’altro) nelle seguenti tab:

• Page cache
• Database cache
• Object cache
• Browser cache

Poi cliccate su uno dei tanti tasti “Save all settings”.

Dentro la sezione “Browser Cache” e nella tab General, mettete la spunta alle seguenti voci:

• Set Last-Modified header
• Set expires header
• Set cache control header
• Set entity tag (eTag)
• Set W3 Total Cache header
• Enable HTTP (gzip) compression

Cliccate su “Save all settings” e rieffettuate il test su Pagespeed Insights.

A questo punto se avrete fatto tutto bene, dovreste già notare un miglioramento non indifferente. Tuttavia, Google potrebbe ancora mostrarvi il messaggio “Sfrutta il caching del browser” nel caso utilizziate delle risorse esterne, come analytics.js.

Purtroppo non è possibile cachare le risorse che non risiedono sul nostro server. Quindi se vogliamo controllare il caching di tutte le risorse dobbiamo per forza caricarle in locale.

Nel caso del mio sito web, ho deciso di rinunciare alle statistiche di Google Analytics per due motivi:

• Il problema dei referral spam ha raggiunto un livello tale da rendere inutilizzabile Analytics, almeno per la mole di traffico relativamente bassa che ho io; quindi fino a quando Google non troverà una soluzione ho deciso di utilizzare Piwik per le statistiche
• Non utilizzando più Analytics ed installando Piwik direttamente sul mio hosting, Pagespeed Insights non mi segnala più nessun problema riguardante il caching

Minimizza CSS, Javascript e HTML

(La compattazione del codice CSS può far risparmiare parecchi byte di dati e può velocizzare i tempi di download e analisi)

(La compattazione del codice JavaScript può far risparmiare parecchi byte di dati e può velocizzare download, analisi e tempo di esecuzione)

(La compattazione del codice HTML e dell’eventuale codice JavaScript e CSS incorporato in esso contenuto può far risparmiare parecchi byte di dati e velocizzare i tempi di download e analisi)

Questa è un’altra cosa che si può fare tranquillamente utilizzando il nostro amatissimo plugin W3TC .

Ma che cosa significa minimizzare il codice?

Grazie ad un algoritmo il CSS, il Javascript  e l’HTML vengono riscritti in maniera più compatta. Viene eliminato tutto ciò che è superfluo, come gli spazi e gli accapo. Nei css alcune regole vengono riscritte accorciando il codice, mentre nei js le variabili vengono rinominate con nomi più corti per risparmiare KB.

Ecco cosa bisogna fare all’interno di W3TC per attivare la minificazione del codice sorgente:

Nella sezione “General Settings” mettete la spunta su Enable nella tab “Minify”.

Poi andate nella sezione “Minify”, dove le tab che ci interessano sono le seguenti:

• HTML & XML: spuntate “Enable”, “Inline CSS minification”, “Inline JS minification”, “Line break removal”
• JS: mettete la spunta solo su “Enable”, le altre due checkbox è preferibile lasciarle vuote perché è possibile che compromettano il funzionamento del sito
• CSS: qui bisogna mettere la spunta solo su “Line break removal (not applied when combine only is active)”; di default questa checkbox risulta bloccata; per poterla spuntare è necessario prima cliccare su “enable”, in maniera tale da attivare anche le altre checkbox sottostanti; quindi spuntiamo la voce che ci interessa e poi togliamo la spunta da “enable”

Non attiviamo la minificazione dei css da W3TC perché verrebbero caricati tutti nella head, cosa che non vogliamo e vedremo fra poco perché.

Ok, una volta fatti questi pochi passaggi, il vostro codice dovrebbe essere minificato, potete controllare visualizzando la sorgente della pagina.

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Siamo arrivati alla parte più rognosa dell’ottimizzazione del nostro sito, ma allo stesso tempo quella che vi farà schizzare in alto il punteggio di Pagespeed Insights. Contenti?

Google ci da questo messaggio: Non è stato possibile visualizzare alcun contenuto above-the-fold della pagina senza dover attendere il caricamento delle seguenti risorse. Prova a rimandare o a caricare in modo asincrono le risorse di blocco oppure incorpora le parti fondamentali di tali risorse direttamente nel codice HTML.

Ma che cosa significa?

Nella maggior parte dei siti web, i fogli di stile ed i js vengono caricati nella head. Questo comporta un ritardo nella visualizzazione dei contenuti above the fold (la porzione della pagina che viene visualizzata senza scrollare), perché il browser ferma la renderizzazione per scaricare una risorsa ogni volta che ne incontra una.

La soluzione in realtà è molto semplice. Bisogna fare in modo che non vi siano risorse di blocco come file css o js che bloccano la renderizzazione dei contenuti.

Per fare ciò si possono seguire diverse strade. Qui ve ne elenco alcune:

• Incorporare tutti i css ed i js nella head: può andare bene quando avete poco codice
• Incorporare il css nella head, e collegare i js nel footer: un po’ meglio della prima opzione
• Collegare css e js nel footer: soluzione più veloce che però peggiora la user experience, in quanto l’utente prima di vedere la pagina stilata si troverebbe di fronte puro html per qualche frazione di secondo
• Caricare tutti i js nel footer e dividere il css fra head e footer, in maniera tale che i contenuti above the fold vengano visualizzati stilati: soluzione ottimale come nell’esempio

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <link rel="stylesheet" href="style-bottom.css">
  </body>
</html>

Nel mio sito ho chiaramente optato per l’ultima possibilità. Andiamo a vedere come possiamo implementare queste modifiche su un sito WordPress.

Ottimizzazione JavaScript e css su un sito da sviluppare ex novo

Se dovete realizzare un sito web da zero, chiaramente la cosa migliore da fare è suddividere il css fin da subito man mano che lo scrivete.

Attenzione che nel caso del css da includere nella head, se dovete aggiungere un’url, dovete scriverne il percorso assoluto come nell’esempio, altrimenti non funzionerà.

.figure {
	background: url(<?php echo get_template_directory_uri(); ?>/img/immagine.jpg);
}

Ovviamente cercate di includere nella head meno codice possibile, solo quello necessario, per non appesantire troppo il caricamento delle singole pagine.

Per incorporare il css nella head abbiamo due opzioni:

1. Scrivere il codice direttamente nel file header.php del tema, preferibilmente appena dopo la funzione wp_head()
2. Qualora il vostro tema preveda più di un file header (es. header.php, header-articolo.php), la cosa migliore è includere il vostro codice tramite il gancio wp_head(); nel file functions.php del vostro tema andrete ad aggiungere questo codice:

function prefix_css_in_head() {
	?>
	<style>
		.blue{color:blue;}
		.red{color:red;}
		.yellow{color:yellow;}
	</style>
	<?php
}
add_action('wp_head', 'prefix_css_in_head');

Il css rimanente va caricato nel footer. Anche in questo caso, come prima, possiamo scegliere se metterlo direttamente nel file footer.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style-bottom.css" media="all" type="text/css">

oppure caricarlo utilizzando il gancio wp_footer()

function prefix_css_in_footer() {
	?>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style-bottom.css" media="all" type="text/css">
	<?php
}
add_action('wp_footer', 'prefix_css_in_footer');

Siccome non abbiamo attivato la minificazione per i CSS da W3TC, vi consiglio di minificare il vostro style-bottom con un servizio online come cssminifier.com che funziona molto bene.

Per quanto riguarda i file js, si possono caricare nel footer grazie alla funzione nativa di WordPress wp_enqueue_script(). Ecco l’esempio da includere nel file functions.php:

function prefix_my_scripts() {
	
	wp_enqueue_script(
		'custom-script', //nome identificativo dello script
		get_template_directory_uri().'/js/custom-script.js', //url dello script
		array('jquery'), //array di scripts di cui questo necessita per funzionare
		false, //versione dello script
		true //se impostato a true, lo script verrà caricato nel footer, tramite il gancio wp_footer()
	);
		
}
add_action('wp_enqueue_scripts', 'prefix_my_scripts');

Ottimizzazione JavaScript e css su un sito già esistente

Qualora voleste ottimizzare un sito già esistente, la faccenda si fa leggermente più complessa perché, in base al tema ed ai plugin utilizzati, potreste avere diversi fogli di stile e scripts inclusi un po’ ovunque.

La via più veloce, ma non la migliore, è installare il plugin Async JS and CSS.

La schermata delle impostazioni che vedete qui sulla destra è piuttosto semplice. L’opzione che trovate spuntata nell’immagine caricherà tutto il css nella head.

Se fra i vostri fogli di stile avete delle risorse esterne, vi consiglio di caricarle in locale oppure di metterle nel footer, altrimenti il plugin non potrà ottimizzarle.

Come anticipavo prima, questa non è la miglior soluzione in quanto questo plugin prende tutti i fogli di stile e li carica nella head della pagina. Se i fogli di stile sono tanti, la pagina html rischia di diventare molto pesante e quindi non va bene.

Per quanto riguarda l’opzione “Load Javascript asynchronously”, provate ad attivarla insieme alle due checkbox sottostanti. Quest’operazione potrebbe impedire il corretto funzionamento degli script. Quindi se dopo aver fatto delle prove vedete che qualcosa non funziona più, togliete la spunta. Fra poco andiamo a vedere come intervenire manualmente per ottimizzare il caricamento degli script.

Per fare le cose a regola d’arte bisognerebbe sistemare a manina tutti i fogli di stile e dividerli in soli due file. È una rottura di scatole però permette di ottenere il miglior risultato.

Nel fare tutto questo lavoro ci andiamo a scontrare con tutti quei plugin che caricano fogli di stile e script a destra e a manca come se non ci fosse un domani. Quindi come possiamo risolvere questo inconveniente?

Non occorre andare a modificare i sorgenti dei plugin, in quanto WordPress ci mette a disposizione le funzioni wp_deregister_style(), wp_deregister_script(), wp_dequeue_style() e wp_dequeue_script().

Queste funzioni accettano come parametro l’$handle della risorsa.

function prefix_my_scripts() {
	
	wp_deregister_style($handle);
	wp_deregister_script($handle);
	
	// oppure
	
	wp_dequeue_style($handle);
	wp_dequeue_script($handle);
	
	/*
	deregister e dequeue non fanno esattamente la stessa cosa
	ma portano allo stesso risultato
	potete approfondire nel codex
	
	https://codex.wordpress.org/Function_Reference/wp_deregister_style
	https://codex.wordpress.org/Function_Reference/wp_deregister_script
	https://codex.wordpress.org/Function_Reference/wp_dequeue_style
	https://codex.wordpress.org/Function_Reference/wp_dequeue_script
	*/
	
}
add_action('wp_enqueue_scripts', 'prefix_my_scripts');

Nel caso dei css possiamo reperire questa informazione dall’id associato al foglio di stile come nell’immagine:

L’handle si trova togliendo la stringa “-css” dall’id.

Come vedete, per gli script, WordPress non ci mette a disposizione questa informazione quindi dovremo procedere in altro modo.

Si potrebbe andare a verificare nel tema e nei singoli plugin utilizzati quali handle sono stati associati ai vari script. In questo modo però si rischia di perdere un sacco di tempo.

Per velocizzare i tempi è sufficiente copiare ed incollare così com’è questo pezzo di codice all’interno del file functions.php e rimuoverlo o commentarlo quando avete finito

function prefix_inspect_scripts() {
    global $wp_scripts;
	echo "\n\n\n<!-- scripts handles\n\n";
    foreach( $wp_scripts->queue as $handle ) :
        echo $handle.' ';
    endforeach;
	echo "\n\n-->\n\n\n";
}
add_action( 'wp_print_scripts', 'prefix_inspect_scripts' );

Questo stamperà del codice commentato nella head del vostro sito (dovete guardarne la sorgente): una lista di tutti gli script che vengono utilizzati nella pagina che state visualizzando come nell’immagine.

Ora che disponiamo di tutti gli handle di cui abbiamo bisogno, dobbiamo deregistrare tutte quelle risorse che vengono caricate nella head, e in seguito ricaricarle con le modalità che abbiamo visto prima.

Quindi nel caso del css andremo a dividerlo fra head e footer, mentre per gli script vi consiglio di caricare tutto nel footer, anche la libreria jQuery.

Chiaramente se il vostro sito necessita di uno script che per forza di cose deve essere caricato nella head come Modernizr, lo lascerete lì con lo svantaggio che il messaggio di Pagespeed Insights resterà.

Se siete arrivati vivi fino a qui dovreste già avere un punteggio sopra i 90 / 100 o addiritura 100 / 100. Complimentoni!

Se, al contrario, non avete ancora ottenuto il massimo punteggio, vuol dire che Pagespeed Insights vi sta ancora segnalando uno di questi tre problemi:

• Riduci tempo di risposta del server: potete aver eseguito tutte le ottimizzazioni che abbiamo visto fino a qui, ma se il vostro sito risiede su un hosting poco performante potrebbe essere comunque molto lento. Su un server condiviso può capitare che ci siano dei picchi di utenti e quindi ne risenta anche il vostro sito. Di conseguenza se ogni tanto vi viene segnalato questo problema, non vi allarmate. Se al contrario, questo messaggio viene restituito sempre, vi conviene valutare un hosting migliore. Vi consiglio Siteground che io stesso utilizzo. Il loro servizio è impeccabile e l’assistenza risponde sempre nel giro di pochi minuti.
• Evita reindirizzamenti delle pagine di destinazione: https://developers.google.com/speed/docs/insights/AvoidRedirects
• Dai la priorità ai contenuti visibili: sono veramente pochi i siti web con questo problema, quindi ve ne segnalo uno a titolo informativo https://developers.google.com/speed/pagespeed/insights/?url=www.amazon.it (https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent)

Conclusioni

Siamo arrivati alla fine del mio primo articolo. Che emozione! Spero di essere stato abbastanza chiaro e che la lettura sia stata scorrevole.

Se qualcosa non è chiaro, avete dei dubbi o non riuscite a mettere in pratica ciò che ho scritto in queste righe, vi prego di farmelo sapere nei commenti e cercherò di darvi una mano.

Chiaramente, se questo articolo vi è piaciuto spargete la voce e condividetelo sul vostro social preferito! Ve ne sarei immensamente grato 🙂

Fatemi sapere nei commenti anche le vostre impressioni, critiche e quant’altro.

Se vuoi proseguire la lettura ecco alcuni altri miei articoli:

• • Perché ho scelto SiteGround per il mio sito e quelli dei miei clienti
  • Come creare un virtual host in locale con MAMP
  • Come guadagnare con le affiliazioni di Worldfilia e Affiliation Park
  • Ngrok, come mostrare al cliente il sito in locale sul proprio computer