Migliorare la velocità di un sito WordPress – Dall’analisi all’ottimizzazione

0
21

La velocità di un sito è un fattore che diventa sempre più importante, soprattutto spostando il focus da desktop verso mobile. Anche la frequenza di rimbalzo che misuri con il tuo tool di Analitycs, può essere uno dei dati che va a peggiorare con un sito lento. Perchè? Se il caricamento non avviene entro qualche secondo il visitatore molto probabilmente abbandonerà la navigazione. Ora, con alcuni accorgimenti, ti andrò a descrivere alcuni dei passi per migliorare la velocità di un sito WordPress. Io non sono un sistemista, quindi, tutto ciò che ho fatto arriva da guide trovate in rete e test per arrivare ad un giusto compromesso. Diciamo che se non sai quello che stai facendo, o se le operazioni sono irreversibili…pensaci bene.

Ma da dove si parte? Non ho iniziato da PageSpeed Insights. Ho preferito un approccio direttamente lato mobile considerando che ad oggi secondo me è il miglior modo per partire. Devi sapere che Google ci mette a disposizione un audit molto approfondito su una pagina, andando a simulare l’uso da smartphone. Questo tool è gratuito e lo trovi integrato in Google Chrome.

Per accedere all’audit mobile delle pagine da Google Chrome puoi andare nel “menù – altri strumenti – strumenti per sviluppatori“. Ora si apre un’altra finestra nel tuo browser. Nelle scelte in alto seleziona “Audit“.

Ora premi su “Perform an Audit”, conferma ed attendi la fine del caricamento.

Qualche considerazione:

  • Non è un semplice test di velocità: questa audit di Google ti permette di avere informazioni sulla pagina che hai analizzato che vanno oltre alla sola velocità. Trovi anche informazioni su Web App, SEO e Accessibilità. In questo articolo però mettiamoli da parte.
  • E’ valido solo sulla pagina analizzata. Si stiamo facendo un audit sulla singola pagine e non su tutto un sito. Quello che ti posso consigliare è di prendere delle pagine campione, una per tipologia.
  • Esistono anche altri Tool per questi test, per esempio GTmetrix.
  • Arrivare ad un risultato perfetto è molto difficile, ma si può migliorare anche notevolmente come vedrai a breve.
  • In parte la lentezza potrebbe anche essere data dal tuo hosting.
  • Cercherò di aggiungere informazioni in questo articolo in modo da tenerlo aggiornato.

digita.life

La mia prova è iniziata sull’home page del blog digita.life (che stai leggendo). Considera che il template che uso è basato su Genesis Framework che è già molto leggero. Nel blog inizialmente non era installato nessun modulo dedicato per la gestione della cache. Diciamo che ho iniziato con un primo test “pulito”.

Il primo Audit

Come puoi vedere le informazioni sono molto precise e danno un’idea ben precisa su dove andare ad intervenire. Le performance basse della mia home page sono legate soprattutto ai tempi di caricamento. Per Google è molto importante che l’utente abbia a disposizione il prima possibile i contenuti e quindi una delle prime prova che fa è andare a misurare il tempo in cui la pagine diventa visibile per la prima volta (o almeno in parte).

I tempi ti sembrano troppo elevati? Si hai ragione, ma considera che ad oggi abbiamo una connessione molto veloce anche da smartphone. Qua ci mettiamo nella condizione peggiore.

Le prime modifiche

Ecco iniziamo con la parte più pratica. Come puoi vedere uno dei fattori di rallentamento della mia home page era dovuto alle immagini. Alcune erano più grandi del dovuto ed in formato png. Il consiglio è di utilizzare il jpg (per ora) se non hai trasparenze. Ho potuto agire sulle foto perchè la qualità per me è importante ma non tantissimo. Considera anche il tuo settore.

Ma come converto delle foto che ho già caricato in precedenza? Qua entrano in campo alcuni Plugin di WordPress. Ne puoi trovare tantissimi.

Il più semplice e gratuito che puoi usare è reSmush.it. Il funzionamento è semplicissimo, infatti dovrai solo scegliere la qualità delle foto e lui penserà ad alleggerirle. Ma questo plugin non riesce a convertire il formato. Quello che vorrei è poter salvare tutte le foto da png a jpg senza dover fare tutto manualmente. Per la conversione puoi usare il plugin “png to jpg“. Il punto di forza è che riesce a fare una conversione di gruppo riuscendo anche a indicare le foto con trasparenze (che puoi non selezionare).

Attenzione: alcuni plugin ti chiedono se conservare o eliminare le foto originali. Se non sei sicuro di quello che fai…tienile.

Ed ora cos’è cambiato??

Il secondo Audit

La situazione è molto migliorata con qualche semplice operazione. Ma si può fare di più. Cosa mi suggerisce Google?

  • Usare un caricamento Lazy Load: che cos’è? In pratica la pagina non viene caricata tutt’insieme, ma i contenuti diventano disponibili solo nel momento in cui servono. In questo moto visualizzo molto prima i contenuti iniziali ed il caricamento è più veloce. Vi consiglio di provarlo e di verificare se può andare bene nel vostro stile. Tra poco ti dirò come fare 😉
  • Usare immagini nel formato webp. Un formato da “attivare” in WordPress e che può rendere le mie foto ancora più leggere.

Per arrivare il Lazy load ho usato il plugin BJ Lazy Load. Puoi decidere di attivare questo tipo di caricamento praticamente sul qualsiasi cosa. Una delle chicche di questo plugin è che puoi generare delle miniature in bassa risoluzione per le foto che vengono subito caricate e poi successivamente sostituite. Ottimo nel caso in cui durante il caricamento ci siano problemi dovuti alla mancanza delle foto.

Attivato e messo in funzione questo plugin ecco l’audit provvisorio

Ma ora pensiamo al webp. Come faccio ad avere le foto in questo formato? Installiamo il plugin EWWW Image Optimizer. Un plugin completo che da la possibilità di compressione e di generazione delle foto webp.

Premi su Impostazioni WebP ed attiva la conversione.

Per usare questo formato, dovrai istallare Cache Enabler ed abilitarlo. Se viene trovare l’immagine webp viene usata, altrimenti si usera quella jpg.

Ho avuto problemi con l’utilizzo dei plugin WP Total Cache e W3 Total Cache, quindi per ora non li ho installati.

Il terzo Audit

Come puoi vedere con qualche operazione sono passato dal 25% fino all’85% con un netto miglioramento, anche evidente in termini di velocità. Le performance possono ancora essere migliorate con l’uso di CDN ed andando a ottimizzare il codice. Ecco per questi altri passi ti aspetto nel prossimo aggiornamento di questo articolo 😉

E te cosa ne pensi? Se questo articolo ti è piaciuto puoi condividerlo 😉 Se hai domande sul mondo digital e smart puoi contattarmi tramite il mio canale Telegram, dove trovi i miei contatti in descrizione.