100/100 su Pagespeed Insights con il tuo sito WordPress

La guida per migliorare il tuo punteggio su Google Pagespeed Insights e mettere il turbo al proprio sito WordPress

pagespeed-insightsCome 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. pagespeed-insights-seoOk, 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.

plugin-ottimizzazione-immaginiSe 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.

general-settings-w3tcAndate 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”.

browser-cache-w3tcDentro la sezione “Browser Cache” e nella tab General, mettete la spunta alle seguenti voci:

  • Set Last-Modified header

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:

minificazione-w3tcNella 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
  • sezione-minify-w3tcCSS: 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.

asyn-js-css-settingsLa 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()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:

handle-css

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.

handle-js

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:

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 condivitelo sul vostro social preferito! Ve ne sarei immensamente grato 🙂

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

62 commenti su “100/100 su Pagespeed Insights con il tuo sito WordPress”
  • Un bellissimo articolo, complimenti! Esauriente e ben strutturato: una guida così completa e che affronti passo passo l’ottimizzazione del proprio sito per Pagespeed Insights non l’ho trovata da nessun’altra parte.
    Bravo Eduard! Iscrivermi alla tua newsletter è stata un’ottima idea!

  • Juan

    Eduard, grazie mille per questa tua guida. Davvero ben fatta, dettagliata, precisa. Non potevo chiedere di meglio. Farò tesoro dei cisigki che hai dato in questa guida e li applicheró nel sito che sto creando in questi giorni. Grazie ancora e buon lavoro.

    • Eduard Zabara

      Grazie mille Juan. Spero ti sia utile! Se riscontri qualche difficoltà fammelo sapere e vedo se posso darti una mano 😉

  • Simone

    Notevole Zabby, complimentoni e in bocca al lupo 😉

  • Bravo, bell’articolo!

  • Il tuo é il primo sito con template wp e non html puro, che vedo, con 100 su 100 bravo.
    Cercherò di applicare io ho un 96 su gt metrix ma pessimo su wordpress
    Bravo bravo … Da far e tesoro

    • Luke

      Eduard dovresti lavorare ad una nuova ottimizzazione del tuo sito perchè adesso fai 93/100 nei dispositivi mobili ed appena 88/100 nel desktop.
      Fortunatamente Google varia continuamente i parametri e le specifiche di assegnazione dei punteggi: questo da modo ai webmaster di continuare ad aggiornarsi e migliorarsi!

  • sono perplesso per alcune incongruenze, non nel tuo articolo ma nel web. Mi spiego meglio
    il tuo sito è 100 su 100 di gradimento per google speed tool il mio 70-80 su 100 mentre se usiamo gt metrix
    il discorso si inverte, io tocco 96 e tu 93 Cazzate, ma mi lascia perplesso.

    in più usiamo entrambi siteground ed il tempo che impiega il web ad interrogare il mio spazio è maggiore del tuo, da 2.5 secondi a 15 di ieri sera 🙂

    • Eduard Zabara

      Ciao Fulvio, ogni tool ha le sue metriche. Io ho preferito seguire le indicazioni di Google che la fa da padrone.
      Per quanto riguarda i tempi di caricamento, può essere che il tuo sito sia hostato su un server assieme a siti che hanno molto traffico. Oppure può essere che il tuo tema faccia molte interrogazioni al database e quindi il tempo di risposta del server ne risente.

      • Sei stato molto gentile nella risposta, alla fine mi tengo tutto com’è dato che ho fatto delle prove ma ho incasinato tutto, e mi è toccato tornare ad un backup 😉

        grazie comunquue

  • Grazie molto utile. Cercherò di applicare anche i tuoi consigli.
    Lucio

  • Complimenti Eduard, gran bell’articolo!
    Utili ed esaustive le indicazioni tecniche, scorrevole e piacevole la scrittura.
    L’ho messo fra i preferiti, per le future necessità.
    Data la sostanza, aggiungerei all’inizio una stima del tempo di lettura…
    Avanti così, non vedo l’ora di leggerne ancora!!!

    • Eduard Zabara

      Grazie mille della dritta Martino. Appena ho un secondo vedo di implementarla 🙂

  • Stefano

    Complimenti per questa guida. Utile e ben fatta 🙂

  • ciao! Complimenti per la tua guida ben fatta… se ci sono arrivata io… perché è ben fatta!
    Purtoppo da mesi che sto litigando con i codici CSS e JAVA ora ho questo problema : Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold, ho seguito la tua guida e mi sono persa al tuo inserimento degli schreenshoot… Non so dove sistemare questi codici, puoi aiutarmi?Grazie mille

    • Eduard Zabara

      Ciao Francesca, grazie per i complimenti.
      Effettivamente l’ottimizzazione di Javascript e CSS può essere abbastanza rognosa se non hai un po’ di dimestichezza con il codice. Hai provato ad utilizzare il plugin Async JS and CSS?
      Come ho scritto nell’articolo, non è la soluzione migliore, però se hai pochi script potrebbe fare al caso tuo senza che ti perdi troppo con il codice.

      • Si ho provato, ma nulla… non riesco ad arrivare al 80%!

        • Eduard Zabara

          Ho dato un’occhiata al tuo sito e l’ho testato su Pagespeed Insights. Sembra non essere responsive, dovresti prendere in considerazione di ottimizzarlo anche per dispositivi mobili.
          Per quanto riguarda l’ottimizzazione degli assets, potresti provare a fare alcune cose:
          1. Disabilita la minificazione dei CSS (come spiegato nel capitolo “Minimizza CSS, Javascript e HTML”, e nello specifico in questa immagine http://www.eduardzabara.com/wp-content/uploads/2015/06/sezione-minify-w3tc.jpg); quando il minify dei css è abilitato, w3tc li carica di default nella head del sito, quindi dobbiamo disabilitare questa opzione
          2. Per quanto riguarda gli script Javascript, ti consiglio di provare sempre a disabilitare la minificazione ed eseguire i passaggi spiegati nel capitolo “Ottimizzazione JavaScript e css su un sito già esistente”. Questa procedura ti permetterà di capire quali sono gli script che vengono utilizzati sul tuo sito. Per poter spostare gli script nel footer devi seguire tre step:
          a) Trovare l’handle dei vari script e l’url assoluto
          b) Deregistrare gli script
          c) Registrarli di nuovo con la funzione wp_enqueue_script() con l’ultimo valore impostato a “true” per caricarli nel footer
          Può essere un po’ impegnativo se sei alle prime armi, ma se rileggi attentamente l’articolo dovresti riuscire a sistemare.

  • Si sembra un caos, ma ora mi ci impegno!
    GRAZIE DAVVERO.Nel caso ritorno qui a disturbarti, posso? 😀

    • Eduard Zabara

      Certo 🙂
      Se qualcosa non ti è chiaro chiedi pure!

  • Hai un contatto skype, magari più veloce o Facebook? per caso?

    • Eduard Zabara

      Trovi tutti i miei contatti nel footer. Comunque il contatto skype è eduard.zabara

  • Ciao Eduard ho letto il tuo post e ho pensato: ho trovato quello che cercavo.
    Ma ahimè avevo fatto i conti senza l’oste!

    Ho provato a metter in pratica le tue indicazioni ma non tutto ha funzionato. Soprattutto la parte per ottimizzare js e css. Puoi aiutarmi?

    • Eduard Zabara

      Ciao Giovanni,
      L’ottimizzazione degli script e dei fogli di stile è la parte più delicata dell’ottimizzazione del proprio sito. Le mie indicazioni servono come incipit, chiaramente poi, per ogni tema e plugin può essere che serva fare ulteriori modifiche per raggiungere il risultato.
      Ho testato il tuo sito e sembra che il server non sia molto performante. In questo caso, tutte le ottimizzazioni che hai implementato (minificazione, compressione gzip) in realtà rallentano il sito. Questo succede perché il server elabora i file minificati e la compressione ogni volta che riceve una richiesta (solo quando i file non sono già stati cachati nel browser), quindi dovendo fare tutta una serie di operazioni ci mette molto più tempo per inviare la pagina.
      Intanto ti conviene disabilitare minificazione e gzip, e poi considera di cambiare hosting. Vedo che ora il sito è hostato su keliweb. Ho dato un’occhiata veloce e ho visto che con l’hosting wordpress sono inclusi il “Modulo PageSpeed Google” e “Optimum Cache”; prova ad attivare queste due funzionalità e vedere se cambia qualcosa.

      • Grazie per la risposta.
        In realtà ho notato prprio questo. Paradossalmente attivando minificazione e gzip le prestazioni diminuivano. Può cambiare qualcosa se attivo una CDN?

        • Eduard Zabara

          Fai un tentativo. Una CDN come Cloudflare nella versione gratuita ti cacha le risorse esterne e mostra una copia cache del sito nel caso il tuo server andasse a farsi una passeggiata.

  • Articolo molto interessante, subito da mettere in atto!

  • alex

    grazie per le dritte. una sola domanda: sono andato per scaricare il plugin Async JS and CSS ma ho visto che è più di due anni che non viene aggiornato. hai una alternativa più recente o ritieni che si possa comunque scaricare?
    grazie e complimenti

  • Ciao! Davvero complimenti per il tuo articolo. Era proprio quello che cercavo, dritto al punto e molto chiaro! Grazie ancora. Il mio problema è in effetti la lentezza del caricamento delle pagine, nonostante non abbia chissà quali cose sul blog. Ho attivato jetpack, il plugin, che mi ha aiutato molto per iniziare. Ho seguito i tuoi passaggi e l’ultimo, quando si tratta di manomettere il CSS allora ho lasciato perdere, mi sono fermata. Mi puoi dare qualche dritta? Ho paura di sbagliare, non sono pratica. Te ne sarei grata! P.S. Scusa l’ignoranza, ma per caso può centrare qualcosa il fatto che nel menù ogni categoria è una pagina che ho modificato con ContentView per ottenere una anteprima dei contenuti? Attendo con ansia una tua risposta. Su PageSpeed non arrivo al 70%.

    • Eduard Zabara

      Ciao ladyaquarius88! Grazie per il commento e scusa per il ritardo, mi sono concesso qualche giorno di riposo 😀
      L’ottimizzazione degli script e dei fogli di stile è un’attività che richiede delle conoscenze base di programmazione e di come funziona WordPress, pertanto se non sei molto pratica ti consiglio di non toccare niente per non rischiare di compromettere il sito. Dando un’occhiata sul tuo sito, ho visto che puoi ancora migliorare le immagini. Hai provato ad ottimizzarle con EWWW Image Optimizer? In alternativa puoi ottimizzarle con Photoshop o con uno dei tanti strumenti che puoi trovare facendo una ricerca su Google.
      Ad ogni modo, la velocità di caricamento del tuo sito è accettabile. Fai un test su http://tools.pingdom.com/

  • Ciao Eduard, complimenti per la guida davvero ben fatta rispetto a tante altre. Tuttavia non riesco a risolvere i problemi su pagespeed:
    – per le immagini, nonostante abbia caricato sul sito quelle ottimizzate da pagespeed, lui mi segnala ugualmente che possono essere ottimizzate. Se riscarico il pacchetto delle immagini ottimizzate noto che la grandezza è sempre quella.. non c’è nulla da ottimizzare! Il plugin EWWW non so se mi funzioni in quanto su altervista non è abilita la funzione exec().

    – In giallo, mi rimangono segnalati i problemi Sfrutta il caching del browser (per google analytics credo), Abilita la compressione, Minimizza CSS (non posso minimizzarlo al massimo perchè come hai scritto te mi deforma tutto il sito), Minimizza JavaScript, Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold (non vorrei toccare nulla non essendo esperto di codice).

    Faccio presente che ogni problema ha la massimo un paio di voci che andrebbero ottimizzare al suo interno. Inoltre ho notato che il pacchetto .zip di google con le immagini ottimizzate contiene al suo interno del file css e js ottimizzati, sarebbe utile sostituirli con quelli già presenti?

    Se si potesse migliorare almeno la compressione e javascript sarei molto contento.
    Ti ringrazio, saluti.

    • Eduard Zabara

      Ciao Giovanni! Grazie per il commento.

      Le immagini come le hai caricate? Le hai sostituite direttamente nella cartella uploads o le hai ricaricate dal backend di WordPress?

      Sfrutta il caching del browser ti viene fuori solo per Analytics. Purtroppo le risorse esterne al tuo server non le puoi cachare. Onestamente non so come mai Google non imposti il caching per Analytics…

      Per tutto il resto direi che va benissimo così. Hai già raggiunto un ottimo risultato 😉

  • ciao, bell’articolo. anche io mi sono incartato nelle operazioni manuali per js e css.
    non è che potresti fare un esempio di come si applica sia ad un css che a un js?

    • Eduard Zabara

      Ciao Dario, grazie.

      Sì mi rendo conto che l’ottimizzazione degli assets può essere parecchio laboriosa. Ho visto che nel tuo sito utilizzi un loader. Per assurdo potresti provare a fregare “Google”.

      Se nel plugin Async JS and CSS selezioni “Using tags on the foot of document, ti caricherà tutti i css nel footer. Non dovresti perderne in user experience perché finché il browser non avrà caricato tutti gli assets il loader coprirà l’html non formattato…

      E’ un po’ una porcata ma potresti fare una prova…

  • Articolo molto utile e di facile comprensione anche per gli utenti meno esperti!
    p.s. che plugin usi per il social count nella sidebar?

    • Eduard Zabara

      Ciao Gabry il plugin è Monarch di Elegant Themes!

  • Clara

    Ciao Eduard, articolo utile e ben fatto; io in particolare cercavo informazioni sul plugin W3TC, che mi sta dando alcune rogne.

    Quanto ad altri argomenti che hai trattato, mi permetto di segnalare alcune soluzioni alternative che personalmente ritengo più valide.
    Per la compressione delle immagini consiglio TinyPNG (sia come plugin WP https://wordpress.org/plugins/tiny-compress-images/ che via web interface https://tinypng.com/); batte EWWW, e produce immagini più leggere di quelle ottimizzate da PageSpeed Insight.

    Riguardo invece alla minifizzazione dei file e al critical CSS, consiglio di automatizzare il tutto con Grunt – molto più efficiente rispetto al fare tutto a manina.

    • Eduard Zabara

      Ciao Clara, grazie per il commento e i suggerimenti. Proverò appena possibile TinyPNG.
      Per quanto riguarda Grunt, ha senso usarlo su un sito ex novo. Pensa che, oltre alla minificazione degli assets ci ho aggiunto anche htmlcompressor così mi minifica proprio tutto! In questo modo effettivamente si fa lavorare molto meno il server avendo già i file ottimizzati.
      Tuttavia Grunt è uno strumento per sviluppatori quindi non adatto a tutte le persone che leggono questo articolo.

  • Ciao, complimenti per la descrizione , mi si è però presentato un problema nella versione mobile dopo aver configurato w3 total cache…. Non mi visualizza più il sito ma solamente dei codici senza senso ( premetto che non ho molta esperienza in materia ..)

    • Eduard Zabara

      Ciao Lacultur, scusa per il ritardo, non mi è arrivata la notifica del commento. Le cause potrebbero essere diverse. Senza altre informazioni è difficile aiutarti.

  • Andrea

    Grazie mille Eduard per l’articolo utilissimo. Sono passato da un voto terribile a quasi 100 (96/97 a seconda delle pagine 🙂 )!
    Vi chiedo un consiglio: ho una sottopagina del sito che utilizza due volte la stessa immagine, la prima a risoluzione piena, la seconda a thumbnail. L’immagine è la stessa per cui PageSpeed mi segnala un errore sulla thumbnail dicendomi che potrei ottimizzarla del 90%, motivo per cui la pagina ha un voto pessimo (rispetto a pagine con pari template in media 30 punti in meno). Mi conviene aggirare il problema e caricare due immagini diverse o esiste un plugin che risolve in automatico questi problemi? Non riesco a venirne a capo purtroppo!
    Grazie mille
    Andrea

    • Eduard Zabara

      Ciao Andrea, grazie per il commento. Io ricaricherei l’immagine con le dimensioni corrette.

      • Andrea

        Stavo cercando di evitare questa soluzione perchè sarebbe un doppione di un prodotto (e quindi purtroppo per ogni prodotto dovremmo ricaricare l’immagine 2 volte, mentre di fatto ora il sito con 1 sola immagine funziona correttamente). Non esiste un modo per richiamare l’immagine a una risoluzione specifica?
        Ancora grazie mille anche per la risposta immediata!
        Andrea

  • Giovanni

    CiAo Eduard, complimenti per l’ottima guida. Ho un sito abbastanza ottimizzato facendo test con gtmetrix o webtestpage. L’unica cosa che non mi convince è questa: come mai nel pagespeed di google ho tempi di risposta del server abbastanza alti SOLO nella versione mobile?
    Non utilizzo plugin, ma ho un tema responsive (non free). Sono su hosting condiviso ma il problema dovrebbe presentarsi sia su desktop che mobile, non avendo un sito diverso per quest’ultimo. Invece no.

    p.s. Hai la spunta su database e object? Alcuni consigliano di non attivare la cache li.

    Ciao e grazie!

  • Ciao Eduard,
    Sono arrivato nella parte “… above-the-fold…” e incollando il tuo codice php e visualizzando il sorgente della pagina, non vedo nulla stampato. Il codice l’ho inserito come hai detto te nel file function.php.

    Grazie, ciao!

  • Ottima guida..devo decidermi a passare a WordPress. Amo Joomla ma lato seo devi sempre inventarti degli escamotage per ottimizzarlo, ed è quasi impossibile arrivare al 100%

  • Flavio

    Inutile smazzarsi tanto x ottenere 100 (o 99 per via del fatto che se si usa Analytics non si può cachare il suo js dato che risiede sui server di Google e il pagespeed rimane a 99), tanto quel punteggio non è un indicatore della velocità di caricamento di un sito. Potrei anche avere 95 per una pagina web ma dover caricare 15 o più immagini più le altre risorse (seppur ottimizzate), il tempo di caricamento probabilmente non sarà così eccezionale, specialmente su hosting scadenti. L’ideale è fare un test su pingdoom o GtMetrix e cercare di avere meno risorse possibili da caricare, specialmente da mobile (alle persone interessa leggere testo, quindi se possibile usare le media queries per nascondere le img). Caching, compressione, minificazione (ove si risparmiano parecchi kbyte e non solo 1), spostare i js prima del tag , ottimizzare le immagini e scegliere un buon hosting sono passi più che sufficienti x avere un sito veloce a caricarsi, che a parer mio è un fattore riguardante più la UX che un fattore SEO, la ciliegina sulla torta per quei siti che hanno ottimi contenuti di qualità e ottimizzazioni on e off site fatte come si deve. Quindi giusto dedicarci tempo ma inutile uscire pazzi x raggiungere quel punteggio. Bell’articolo comunque, chiaro e ben strutturato, non entro nel merito della parte tecnica perchè fortunatamente non uso WordPress 🙂

  • AIUTO!!
    Ciao, ho seguito la procedura fino a all’installazione di W3tc, ma ho riscontrato dei problemi nella visualizzazione delle pagine: la home si apre, ma se apro le altre si vedo una schermata di codice che inizia con jquery. Succede soprattutto con la seconda pagina. Se torno indietro mi da un errore 403.
    Non capisco perchè.
    Ho visto che il plugin scrive sull’htaccess e io prima avevo già scritto i comandi di GZIP e Leverage Browser Caching. Non è che il problema deriva da un conflitto?
    Sono un po’ nella cacca. Ti ringrazio anticipatamente della risposta

    • Eduard Zabara

      Ciao Bernardo,
      Prova togliendo il codice che hai scritto tu nell’htaccess e allo stesso tempo non minificare gli script js perché in alcuni casi potrebbero non funzionare più correttamente.

      • Bernardo

        Ok tornato tutto in funzione.
        Grazie del supporto e complimenti per il blog

  • Articolo impeccabile, ho raggiunto 100/100 in velocità
    però ho un problema alquanto strano, il sitto è ottimizzato per mobile però dal test mi da 62/100 (guarda link foto che segue)
    http://imgur.com/a/ES91J

    mi dice inoltre, di verificare meglio con l’apposito tool “test di ottimizzazione mobile” https://www.google.com/webmasters/tools/mobile-friendly/?utm_source=psi&utm_medium=referral&utm_campaign=uxresults&url=http%3A%2F%2Fwww.socialsitiwebfano.it%2F

    al termine del test mi dice: Fantastico. Questa pagina è ottimizzata per i dispositivi mobili.

    A quale dei due devo credere?

    Grazie per una eventuale risposta

    • Eduard Zabara

      Ciao Lucio,
      Ho fatto un test col tuo sito è il problema non si è presentato. Potrebbe trattarsi di un errore di Pagespeed Insights.

      • Spesso riscontro differenze tra pagespeed insights ed il valore di pagespeed ottenuto da gtmetrix.

  • Ciao Eduard,

    “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.”

    Una volta scaricati da Pagespeed questi file dove vanno inseriti/sostituiti? Ho ottenuto due cartelle una Js e una css più un foglio Manifest. In Js due file script e in css due documenti css denominati Responsive e Style.

    Grazie complimenti per l’articolo

  • Sono finalmente riuscito ad arrivare a 100/100! Ottimo articolo.. Io ho usato Autoptimize come plugin. Esiste la versione base, gratis, e quella a pagamento. La versione a pagamento permette di scegliere il CSS critico da caricare “above the folder” personalizzandolo in base all’url della pagina. Così si evita di caricare CSS inutile che magari in una pagina specifica non servirebbe. Non so se mi sono spiegat… 🙂 Però funziona…

  • Ciao Eduard
    complimenti per la guida: molto chiara! Io ho seguito tutto fino al settaggio dei parametri in W3TC. Premesso che non sono in grado di intervenire sul codice CSS, non riesco a capire perchè pagespeed mi segnala che ci sono immagini non ottimizzate. Io utilizzo ewww image optimizer e tutte le immagini sono ottimizzate.
    Cosa posso fare per migliorare il mio 74/100 secondo te? In pingdom e gtmetrix ho dei risultati più che buoni direi.
    Grazie mille

  • Ottimo articolo! volevo segnalarti questo progetto di cui sono uno dei collaboratori https://github.com/szepeviktor/w3-total-cache-fixed è una versione alternativa di W3 Total Cache gestita dalla community dei fan di W3TC. A differenza della versione su WordPress viene continuamente aggiornata con fix e nuove features. Dagli un occhiata, sono sicuro che lo troverai molto interessante.

  • Ciao Eduardo io ho installato il plugin total cache ma non trovo tutte le voci che segnali nell’articolo, mi esce nei settings solo del codice php con un pulsante aggiorna file.

  • antonio

    Ciao! riguardo il punto “Ottimizzazione JavaScript e css su un sito già esistente” consigli altri plugin piu recenti e aggiornati di Async JS and CSS? per la cache uso WP Fastest Cache con quasi tutte le opzioni attive. grazie!

  • Grazie mille. Articolo Strepitoso. Sono giorni che cercavo qualcosa di simile senza trovare nulla. Ho trovato utilissime le immagini e le spiegazioni semplici. Grazie Mille

  • Alberto

    Ciao Eduard e grazie per l’utilissimo articolo volevo chiederti una cosa dopo aver effettuato parte delle ottimizzazioni ci sono ancora degli errori su google ma penso siano dovuti a cose che non posso controllare come fb etc mi potresti dare un occhiata per vedere se possiamo risolverli? Grazie mille in anticipo il sito è http://www.donnamariu.it

Scrivi un commento

PREVENTIVO GRATUITO

Pin It on Pinterest