Come ottimizzare pagespeed e velocizzare wordpress

AGGIORNAMENTI: Ho aggiunto delle modifiche a fine articolo per eliminare due ulteriori voci nel “sfrutta il caching del browser”.

Premetto che non sono esperto in materia e le mie modifiche e impostazioni effettuate per ottimizzare pagespeed sono frutto di varie guide trovate sul web, unite a un minimo di conoscenza informatica.

Dopo tantissime prove e test con i vari plugin e i vari codici sono riuscito a raggiungere un risultato molto soddisfacente sia sul pagespeed di google che nei vari tools di Gtmetrix e Pingdom. Vi lascio gli screenshoot in fondo alla pagina.

Gli strumenti che utilizzo su questo sito sono principalmente tre: WP Super Cache, Autoptimize e CloudFlare.

Qui potrebbe nascere subito un dubbio: perché Super Cache e non W3 Total Cache?
In partenza ho utilizzato W3 Total Cache ma onestamente rallentava il sito nelle varie operazioni all’interno del wp-admin. Inoltre, in combinazione con Autoptimize e la compressione html, css ecc. mi restituiva problemi nella grafica del sito e quant’altro. In sostanza non riuscivo a trovare la giusta combinazione tra i due plugin, per farli funzionare al 100%. Infine, W3 Total Cache credo che non sia proprio indicato su hosting condivisi come il mio.

Così ho provato WP Super Cache, constatando che svolge pienamente il proprio dovere, restituendo ottimi valori nel pagespeed seppur con molti meno settaggi.

I settaggi che ho impostato in WP Super Cache, scheda “avanzato” sono:

  • Cache hit di questo sito per accesso rapido. (Raccomandato)
  • Utilizza PHP per servire i file in cache. (Raccomandato)
  • Compressione delle pagine in modo che esse siano servite più rapidamente ai visitatori. (Raccomandato)
  • 304 Not Modified browser caching. Indicate when a page has not been modified since it was last requested. (Raccomandato)
  • Non servire pagine cache per gli utenti conosciuti. (Raccomandato)
  • Imposta gli utenti conosciuti come autonomi così gli verrà fornito i file statici dalla cache.
  • Rigenerazione cache. Serve un file supercache agli utenti anonimi quando un nuovo file é stato generato. (Raccomandato)
  • Supporto per i dispositivi mobili. (Plugin esterno o tema richiesto. Controlla le FAQ per maggiori informazioni.)
  • Controllo homepage extra. (Disattiva la cache della home soltanto in casi eccezionali) (Raccomandato)
  • Cache Timeout: 3600 secondi e Timer 1800 secondi

Nella scheda “Pre-carica” ho impostato:

  • Ricarica i file della cache pre-caricata ogni 2880 minuti
  • Pre-carica tutti gli articoli
  • Ho attivato “Modalità pre-carica” e “Tag di preload, categorie e altre tassonomie”

Già con l’attivazione di Wp Super Cache, e la giusta configurazione, avrete un punteggio migliore nel pagespeed rispetto a quando non era attiva.

L’altro fantastico plugin, totalmente free, è autoptimize. Anche qui dopo tantissime prove ho trovato che i migliori settaggi sono, almeno nel mio caso, questi:

  • Ottimizzare il codice HTML?
  • Mantenere i commenti HTML?
  • Ottimizzare il codice JavaScript?
  • Aggregare anche il JavaScript inline?
  • Aggiungi try-catch wrapping? (L’ho aggiunto di recente in quanto la stringa sopra mi bloccava un widget. Con questo ho risolto il problema.)
  • Ottimizzare il codice CSS?
  • Generare i data: URIs per le immagini?
  • Rimuovi i Google Font?
  • Incorpora tutti i CSS?
  • Salva script/css aggregati come file statici?

Questi sono i migliori settaggi che mi hanno permesso di risolvere diverse ottimizzazioni nel pagespeed senza straformare il sito! Perché la compressione di Html, CSS e Java incide sul tema del sito andando, appunto, a comprimere i vari file.

Sottolineo che Autoptimize ha un piccolo difetto, ovvero non svuota automaticamente la cache. Perciò dovrete farlo manualmente nella barra degli strumenti, in alto, nel wp-admin. Li è presente la voce “Svuota cache”. Comunque se la cache arriverà al limite delle sue dimensioni comparirà un messaggio di avviso per svuotarla.

Infine ho impostato l’account Cloudflare. Salto la parte di impostazione del DNS e se avete problemi in merito vi consiglio di aprire un ticket di assistenza con il vostro hosting, facendoli impostare ad esso stesso.

  • Firewall per il momento è settato su “Essentially Off”
  • Nella scheda “speed” ho abilitato: Auto minify Java, Css e Html. Rocket loader su “automatico”.
  • Nella scheda “cache” ho settato “Browser Cache Expiration” su “Respect Existing Headers” oppure “1 anno” (vedi aggiornamento 2 in fondo all’articolo).

Tutti gli altri settaggi che non ho citato non sono stati variati.

ATTENZIONE! Nel mio caso, con hosting condiviso, dopo aver abilitato cloudflare ricevevo degli errori 522 nella search console di google. Qui cloudflare stesso spiega da cosa può dipendere questo problema con le possibili soluzioni. Io ho risolto contattando il mio hosting e facendo aggiungere la lista degli indirizzi IP di Cloudflare nella whitelist! Qui la lista degli indirizzi IP.

ALTRI SUGGERIMENTI:

  • Ogni volta che installate un plugin andate subito ad effettuare una verifica nel pagespeed, per controllare se sono comparse delle sottovoci nuove. Detto ciò, l’ulteriore consiglio è di provare più plugins in quanto uno potrebbe essere più veloce di un altro o potrebbe non creare problemi nel pagespeed stesso.
  • Nel cpanel, scheda software, attivate la compressione Gzip cliccando su “Ottimizza sito web”.
  • Andate nelle impostazioni di discussione di wordpress e togliete la spunta a “Mostra Avatar”. In questo modo eliminerete un ulteriore voce nel pagespeed.
  • Un’altra piccola modifica da fare, presa dal blog del preparatissimo Andrea Pernici, è quella di “dire” ad alcuni plugin di caricarsi soltanto quando necessario, in determinate pagine. L’esempio classico è quello del plugin per i “contatti”, il quale viene utilizzato solo nella pagina “contatti”, appunto. Prendendo come riferimento il plugin contact-form-7, per effettuare la modifica basterà incollare questo codice nel function-php:

add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );

 

function my_deregister_javascript() {

if ( !is_page(‘Contatti’) ) {

wp_deregister_script( ‘contact-form-7’ );

}

}

 

add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

 

function my_deregister_styles() {

if ( !is_page(‘Contatti’) ) {

wp_deregister_style( ‘contact-form-7’ );

}

}

Come potete vedere bisogna impostare correttamente il nome del plugin “contact-form-7” e il nome della pagina che nel mio caso è “contatti”.
Qui vorrei puntualizzare la modifica che ho fatto rispetto al codice preso dal blog di Andrea. Non so per quale motivo ma inizialmente il suo codice non funzionava e tutto il sito andava in blocco restituendo schermata bianca. Facendo delle prove ho capito che il problema erano gli apostrofi che racchiudevano le parole. In pratica sostituendo ’ con ‘ il problema è stato risolto.

Un’altra modifica simile si può fare con il plugin Wp PageNavi e in questo caso riporto il codice preso direttamente dal function.php del mio tema:

function my_deregister_styles() {

wp_deregister_style( ‘wp-pagenavi’ );

}

add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

  • Infine spendo due parole sull’hosting: sono da parecchio tempo su Xlogic e devo dire che mi trovo davvero molto bene. L’hosting condiviso costa 12 euro l’anno (una sciocchezza insomma) e in più da poco forniscono anche l’httpS gratis in tutti i loro piani. Lato seo è un punto a favore. Anche l’assistenza, in italiano, funziona molto bene rispondendo in tempi molto brevi.

In conclusione vi lascio le immagini dei vari test. Purtroppo non ho fatto gli screenshoot prima delle modifiche per mostrarvi la differenza, perciò questo è il risultato finale. Nell’immagine di pagespeed come potete vedere ci sono ancora delle ottimizzazioni da fare. In particolare ho due immagini in miniatura delle dimensioni di 150X150, ma onestamente non credo valga la pena ottimizzare. Tenete conto che google è molto pignolo sulla pesantezza delle immagini e vi restituirà una possibile ottimizzazione anche per pochi kb.
Per quanto riguarda il “sfrutta il caching del browser” qui ho delle voci che si riferiscono a google analytics perciò ho sorvolato anche in questo caso.

AGGIORNAMENTO: Nel “sfrutta il caching del browser” mi comparivano due voci riguardanti le emoji di wordpress, in particolare le voci erano:

  • wp-includes/js/twemoji.js
  • wp-includes/js/emoji.js

Per disattivarle basta inserire nel function.php il seguente codice:

/**
 * Disable the emoji's
 */
function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
 add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param array $plugins 
 * @return array Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
}

/**
 * Remove emoji CDN hostname from DNS prefetching hints.
 *
 * @param array $urls URLs to print for resource hints.
 * @param string $relation_type The relation type the URLs are printed for.
 * @return array Difference betwen the two arrays.
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
 if ( 'dns-prefetch' == $relation_type ) {
 /** This filter is documented in wp-includes/formatting.php */
 $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );

$urls = array_diff( $urls, array( $emoji_svg_url ) );
 }

return $urls;
}

Fatto ciò, dopo aver svuotato la cache dei vari plugin, rifate un test su pagespeed e noterete che le voci non ci saranno più. Con questa modifica il punteggio del mio pagespeed arriva a 98/100 e rimangono solo le voci di google analytics con i banner di google, altrimenti sarebbe 100/100 🙂 (come vedete l’emoticon della faccina si vede ugualmente).

AGGIORNAMENTO 2: Il mio tema utilizza delle icone di fontawesome, per i vari pulsanti dei social e non solo, che trovate in alto a destra nel sito. Queste mi causavano un ulteriore voce nel “sfrutta il caching del browser”:

  • /fonts/fontawesome-webfont.woff?v=4.6.2 (24 ore)

Sembra che ho risolto il problema andando nel CloudFlare — Caching e impostando la voce “Browser Cache Expiration” su “Respect Existing Headers” oppure “1 anno”. Se invece imposto un periodo come “24 ore” nel mio caso, mi compare nuovamente l’errore.

AGGIORNAMENTO 3: Di recente ho disattivato il plugin “Use Google Libraries” in quanto mi creava la voce “https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js” nelle ottimizzazioni di javascripts e CSS.

AGGIORNAMENTO 4: Se il vostro hosting utilizza Litespeed invece di Apache vi consiglio di provare il plugin LiteSpeed Cache al posto di WP Super Cache. Quest’ultimo si integra pienamente con il server di Litespeed e difatti sul mio hosting xlogic, che utilizza questa tecnologia, ho notato un miglioramento. Per quanto riguarda le impostazioni di questa cache non c’è bisogno di fare nessuna modifica, è già settato tutto perfettamente! Se proprio vogliamo possiamo aumentarne i secondi:

Default Public Cache TTL: 31536000

Default Front Page TTL: 31536000

Spero di esservi stato utile e vi sarei grato se condivideste l’articolo sui social e/o lasciaste un commento 🙂 ciao!

 

Summary
Ottimizzare pagespeed, gtmetrix e pingdom in wordpress
Article Name
Ottimizzare pagespeed, gtmetrix e pingdom in wordpress
Description
Come ottimizzare pagespeed e migliorare i punteggi di gtmetrix e pingdom. Impostare correttamente Wp Super Cache, Autoptimize e Cloudflare. 100/100.
Author
Publisher Name
RecensioneProdotto
Publisher Logo