Migliorare le performance di un sito WordPress sembra, a prima vista, roba da sviluppatori.
Apri PageSpeed Insights, vedi numeri bassi e termini tecnici incomprensibili, e la conclusione sembra ovvia: ci vuole qualcuno che sappia programmare.
Anch’io l’ho pensato.
In questo articolo ti racconto come ho affrontato la cosa partendo da zero, senza scrivere una riga di codice, e cosa ho imparato.
Ecco cosa troverai in questo articolo:
Il momento in cui ho aperto PageSpeed Insights
Stavo aiutando una mia amica che era alle prese con la creazione di un sito web su WordPress e stava avendo delle difficoltà.
Non riusciva a capire bene la logica di funzionamento, quindi mi sono offerto di aiutarla.
Per spiegarle come fare, decisi di mostrarle il mio sito web, in modo da non basarmi solo sulla teoria, ma farle vedere anche un po’ di pratica e i risultati che si possono ottenere.
Nel momento in cui aprii il mio sito sul cellulare, notai che il tempo di caricamento era molto lento; in particolare, l’immagine di sfondo impiegava tantissimo a caricarsi.
Essendo appassionato di marketing e avendo letto tanti articoli a riguardo, sapevo già che un sito lento è dannoso e lo so anche per esperienza diretta, perché mi infastidisce molto quando mi capita su altri siti.
Un caricamento lento intacca la UX (User Experience) di chi naviga, e questo ai motori di ricerca non piace: vogliono mostrare agli utenti siti che garantiscano una buona esperienza, senza interruzioni.
Quindi, dal giorno successivo, iniziai ad informarmi su come poter risolvere il problema.
Cos’è PageSpeed Insights e perché dovresti curarlo (anche se non sei uno sviluppatore)
PageSpeed Insights (PSI) è uno strumento di test online di Google che fornisce rapporti dettagliati sulle prestazioni del tuo sito web su dispositivi mobili e desktop.
PageSpeed Insights monitora il tuo sito web controllando diverse metriche chiave, assegna punteggi a ciascuna e ti mostra quali sono i punti critici che meritano la tua attenzione.
Un punteggio più alto può aiutarti ad attirare più visitatori e posizionare il tuo sito in testa alla SERP – Search Engine Results Page (qui ti dico perchè la SEO è ancora importante).
Utilizzando regolarmente lo strumento, puoi monitorare le prestazioni del tuo sito e concentrarti sulle aree che necessitano una revisione.
Molti esperti di marketing affermano che non dovresti ossessionarti nell’ottenere risultati 100/100 su tutte le metriche. I grandi brand spesso stanno sotto il 90% nella metrica “Prestazioni”, eppure si trovano nelle prime posizioni, perché hanno una notorietà consolidata e offrono contenuti di valore.
La cosa importante che ho imparato è che il tuo punteggio su “Prestazioni” (la più complicata da migliorare, perché molto tecnica) dovrebbe essere almeno sopra il 50%. Più ti avvicini al 100%, meglio è, ma un 60% non significa necessariamente che il tuo sito verrà penalizzato.
Quello su cui devi lavorare sono le aree di miglioramento che ti consiglia PageSpeed Insights, ma anche sul far sì che il tuo sito sia facilmente navigabile, intuitivo e, soprattutto, che i contenuti che pubblichi siano di valore per il tuo pubblico.
Ovvio, per chi inizia oggi è più difficile e non può non agire per migliorare le Prestazioni.
È un po’ come tutte le cose: se sei nuovo in un settore, è normale che all’inizio farai più fatica a farti conoscere rispetto a chi è nel mercato già da diverso tempo.
Il mio punto di partenza: punteggio e problemi individuati
La prima volta che ho fatto analizzare questo sito a PageSpeed Insights è stato qualche mese dopo averlo reso online, in quanto volevo prima pubblicare qualche contenuto in più nel blog.
I risultati non erano così brutti:
Ma, come sai già, chi inizia non può permettersi di stare fermo ad aspettare.
E così ho fatto.
Ho seguito i consigli di ottimizzazione che mi ha segnalato PageSpeed Insights sotto i punteggi delle 4 metriche che hai visto in foto.
Ecco cosa non andava bene:
Le 2 cose che ho fatto per migliorarlo
Ho scelto di agire su 2 parti principali:
- Ottimizzazione delle immagini
- Plugin per ottimizzare CSS/JS
Ottimizzazione delle immagini
Qui i problemi erano due: le immagini pesavano troppo e non erano nel formato consigliato.
Tutto ciò non consentiva al sito di caricarsi velocemente su mobile. Un bel problema.
Per risolverlo mi sono affidato a un sito web gratuito che trasforma le immagini nel formato WebP. Quello che ho dovuto fare è stato semplicemente caricarle, avviare la conversione e scaricare le immagini trasformate.
Risultato? Immagini più leggere, stessa qualità.
Poi mi sono affidato al plugin Optimole, che permette di migliorare la velocità e le prestazioni del sito attraverso:
- Ridimensionamento delle immagini: crea all’istante una versione con meno pixel, risparmiando banda
- Consegna via CDN: le immagini non partono dal tuo server, ma da una rete globale di server ultra-veloci sparsi nel mondo, abbattendo i tempi di risposta
- Lazy loading intelligente: visualizza un’anteprima sfocata finché l’immagine non è sotto gli occhi dell’utente, evitando che il sito si blocchi durante il caricamento
- Ottimizzazione automatica: le immagini vengono ottimizzate in tempo reale non appena le carichi nel sito
Plugin per ottimizzare CSS/JS
Ho installato il plugin Autoptimize per gestire l’ottimizzazione di file CSS/JS che rallentavano il sito.
Autoptimize mi ha permesso di “alleggerire” il sito, intervenendo sui file che lo compongono dietro le quinte. In pratica, il plugin prende il codice del sito e lo compatta, eliminando tutto il superfluo (spazi, commenti, caratteri inutili), senza cambiarne il funzionamento. Meno codice da scaricare significa pagine che si caricano più velocemente.
Ho anche configurato il plugin per fare in modo che il CSS non blocchi il caricamento visivo della pagina: in questo modo l’utente vede subito qualcosa sullo schermo, senza dover aspettare che tutti i file di stile vengano scaricati.
Tra le altre cose, ho rimosso i Google Fonts (sostituendoli con font di sistema, praticamente invisibili all’occhio ma molto più leggeri) e ho eliminato alcuni pezzi di codice che WordPress aggiunge di default ma che nel mio caso non servivano a nulla.
Ho fatto attenzione a escludere dall’ottimizzazione alcuni script specifici come quelli legati al cookie banner o a Google Tag Manager per evitare che il plugin li “rompesse” nel tentativo di comprimerli.
Il risultato finale
Dopo aver applicato queste ottimizzazioni, il punteggio sulla metrica “Prestazioni” è salito a 88/100.
Il numero conta, ma quello che ho notato davvero è stato altro: il sito si caricava più velocemente, le immagini apparivano subito senza quell’attesa fastidiosa di prima e i “salti” nel layout durante il caricamento si erano quasi azzerati. Piccole cose, ma se ci pensi sono esattamente quelle che determinano se un utente rimane sulla pagina o se ne va dopo due secondi.
Detto questo, non ti nascondo che ogni tanto noto ancora qualche piccola lentezza. E probabilmente ci sarà ancora del lavoro da fare.
Ma ho capito che è normale: ottimizzare un sito non è una cosa che fai una volta e dimentichi, è un processo continuo.
La cosa importante è iniziare, fare delle prove, capire cosa funziona per il tuo caso specifico senza dannarti troppo e senza inseguire il punteggio perfetto a tutti i costi.
Quello che voglio lasciarti è questo: la performance è parte del marketing, non solo dello sviluppo. Capire perché un sito è lento, sapere dove guardare e avere gli strumenti giusti non richiede per forza di essere uno sviluppatore, come ho dimostrato in questo articolo (certo, uno sviluppatore avrebbe probabilmente risolto le stesse cose in meno tempo e con più precisione).
Il punto è che puoi fare molto in autonomia, e farlo ti dà anche una consapevolezza maggiore del tuo sito. Poi, quando il problema è più complesso, saprai almeno riconoscerlo e parlarne con chi è più competente di te.
Focalizzati sull’esperienza di chi naviga. Il punteggio viene di conseguenza.