Ottenere un Google PageSpeed al 90% su WordPress

google pagespeed insight ottimizzazione wordpress 90%
Tweet about this on TwitterShare on FacebookShare on LinkedInEmail this to someone

La velocità di caricamento delle pagine è una caratteristica fondamentale di ogni sito internet, è infatti un fattore di posizionamento sui motori di ricerca oltre ad influire significativamente sulla User Experience; generalmente possiamo dire che un caricamento veloce migliora la navigazione e trasmette senso di professionalità agli utenti.

Ottimizzare le performance di un sito web è un tema vasto e complicato, richiede conoscenze avanzate in svariati campi:

  • tuning del web server
  • tuning del database
  • tuning della web app

Ogni sito internet è una situazione specifica che va analizzata nel dettaglio, al fine di trovare e risolvere eventuali colli di bottiglia.

Alcuni dei tool più utilizzati per monitorare le performance di una pagina web sono:

La procedura che sto per spiegarti è dedicata ai siti realizzati con WordPress, su questo stesso blog ho potuto raggiungere ottimi risultati con pochi click ed è una procedura alla portata di tutti.

Come riporto nel seguente snapshot preso da Google PageSpeed Insight in pochi minuti ho raggiunto un soddisfacente 91% per dispositivi desktop e un 92% per dispositivi mobile (la homepage del blog ottiene anche un 100% per la UX mobile, ma questo è tutt’altro argomento).

studycase ottimizzazione performance google pagespeed wordpress

Quanto riportato sono valori ottenuti mediamente, in relazione alla stabilità e ai tempi di risposta del server possono variare.  Nel caso specifico di questo blog, l’hosting è stato configurato ad hoc su di un VPS, e il web server scelto è stato Nginx che consiglio vivamente al posto di Apache per siti WordPress.

L’ottimizzazione può essere fatta con l’ausilio di due soli plugin:

  • WP Super Cache – ma va benissimo anche W3 Total Cache o qualsiasi altro solido plugin per la Cache
  • Il plugin Speed Booster Pack – che ottimizza CSS, Javascript, HTML ed è quello che a me personalmente ha portato a risultati migliori.

Cache

L’utilizzo della cache nelle pagine web è un vero must, generalmente si tende a mettere sotto cache tutto quello che è possibile. Ho trovato che WP Super Cache funziona molto bene su Nginx, mentre W3 Total Cache che è generalmente la mia prima scelta, richiede una configurazione molto più accurata.

Una volta installato WP Super Cache dal repository ufficiale di WordPress è sufficiente attivarlo e abilitare la cache nella pagina principale del plugin. Is that easy!

Speed Booster Pack

È un plugin che permette di ottimizzare le risorse Javascript e CSS, minimizzando e caricando le risorse in modo asincrono, in modo da evitare blocchi above the fold.

Una volta installato e attivato, il plugin, ti lascio uno snapshot della configurazione che ho utilizzato.

Speed Booster Pack

 

Nel mio caso ho impostato i file Javascript con attributo defer fatta eccezione per jQuery che ho dovuto necessariamente escludere.

Nota Bene: ogni volta che esegui una modifica nella configurazione di Speed Booster Pack, ricordati di cancellare la cache.

Passare da un 70% a un 90% è stata un’operazione veramente banale, fammi sapere se anche per te ha funzionato.

Ti ricordo che nella valutazione delle performance la velocità del web server è molto importate, se il tuo sito si appoggia ad un servizio hosting di tipo shared delle prestazioni professionali non possono essere raggiunte, anche se l’utilizzo della cache e del tuning delle risorse possono portare miglioramenti significativi.

Conquistare il restante 10% sarà un lavoro duro, probabilmente sarà necessario poter mettere mano al server andando ad ottimizzare sia il web server che il database oltre che ottimizzare il tema WordPress utilizzato per fare un uso più intelligente delle risorse.

Edit

Dalla pubblicazione dell’articolo ad oggi, ho eseguito alcuni perfezionamenti sul Web Server, su WordPress (immagini ma sopratutto sul codice del tema) e implementato un piccolo script bash di cache per i file esterni di Google Analytics (analytics.js) e Twitter (widgets.js). Si tratta di un esercizio di stile a scopo di test.

Queste ottimizzazioni sono esclusivamente contestuali a questo sito, e al suo web server.

Dai test fatti posso dire che la stragrande maggioranza dei temi e dei plugin WordPress, non sono progettati pensando alle performance e anche questo dovrebbe essere un criterio di scelta.
Ottimizzazione performance al 99% e 97%

Tweet about this on TwitterShare on FacebookShare on LinkedInEmail this to someone

Commenti ( 5 )

  1. / RispondiAlex (fotografo matrimonio verona)
    ciao,ho testato WP Super Cache ma non ho ottenuto i risultati che ho ora utilizzando W3 Total Cache.... quest'ultimo (sicuramente per il fatto che non so configurare a dovere) mi ha fatto raggiungere un 75/100 su desktop, Super Cache invece arriva a 40-50... Per quanto riguarda invece Speed Booster Pack,non ho avuto nessuna miglioria,però ho notato che mi cambiano alcuni css nel sito :P è fatto davvero male,credo dipenda dal mio tema. Grazie per le tue dritte Michele!!!!
    • / RispondiMichele Cipriani
      Ciao Alex, W3 Total Cache è risaputo come più "potente" ma più complicato di WP Super Cache. Nel mio caso ho scelto WP Super Cache perché l'altro mi ha dato dei problemi su Nginx e piuttosto che perdere due giorni a configurarlo, ho preferito usare WP Super Cache + Speed Booster Pack. Il valore di base più alto non mi stupisce, parte delle configurazioni fatte da W3 Total Cache sta anche nell'ottimizzazione del codice della pagina, mentre con WP Super Cache si limita alla cache. Trovo che Speed Booster Pack sia fatto bene, alla fine i numeri vincono sempre: 2 click e sono 90%..non ho veramente bisogno d'altro, anche in relazione al tempo impiegato! :-) Quello che ti consiglio a questo punto è analizzare gli errori che ricevi, verificarne la soluzione con W3 Total Cache passo passo. Posso farti una domanda stupida? Mi suona strano che tu non abbia avuto miglioramenti installando Speed Booster Pack, dopo averlo configurato, hai svuotato la cache?
  2. / RispondiAlex (fotografo matrimonio verona)
    ciao,si ho svuotato la cache... ho avuto solo 2punti di aumento per i dispositivi mobili... ora mi viene a me da farmi una domanda stupida: avrò cancellato veramente la cache? :P ora riprovo e ti faccio sapere! grande Michele!!!!
  3. / RispondiAlex
    provato: allora, utilizzando le tue impostazioni ho un incremento, sono passato per i dispositivi mobili da 67/100 a 74/100. Mentre per desktop da 75/100 a 77/100. Però il mio pessimo tema cambia,ovvero revolution slider ad esempio non funziona più e alcuni stili sono spariti (questo forse perchè non ho usato childtheme ma ho modificato qua e la...) quindi sono costretto a disattivare questo plugin finchè non avrò un tema fatto come si deve Michele, ma terrò tra i preferiti questo articolo!
    • / RispondiMichele Cipriani
      Ciao Alex, passare da 67% a 74% è già qualcosa, purtroppo ogni contesto necessita di piccole ottimizzazioni ad hoc. Per risolvere i problemi di Javascript probabilmente devi escludere jQuery dall'essere deferred, controlla tramite i Developer Tools del browser, dovresti avere diversi errori, tra cui "$ is not defined". Se vuoi puoi contattarmi dal form in basso inviandomi l'url del sito, se non vuoi pubblicarlo qui, posso dare un'occhiata, ci vogliono 5 secondi se sai cosa guardare ;-)

Commenta

Il tuo indirizzo email non sarà pubblicato.

Puoi usare questi tag e attributi HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>