Come velocizzare un sito WordPress

Velocizzare un sito è ormai diventata una priorità, sia per migliorare l’esperienza utente dei visitatori, sia per soddisfare i parametri imposti da Google, chiamati Core Web Vitals. I siti realizzati con WordPress non fanno eccezione. Purtroppo, l’abitudine di utilizzare temi molto pesanti dal punto di vista del codice e delle chiamate a file e risorse esterne, rendono il compito di velocizzarli molto difficoltoso. Ma possiamo farcela.

Velocizzazione Sito: i Core Web Vitals Fattore di Ranking

Google ha dato dei parametri ben precisi ai webmasters riguardo la velocizzazione dei siti web e lo ha fatto introducendo i Core Web Vitals. Si tratta di 3 parametri che ritroviamo anche all’interno della Search Console sotto il nome di Parametri Web Essenziali, rispettivamente:

• CLS
• LCP
• FID

Le sigle stanno ad indentificare:

CLS: Cumulative Layout Shift, ovvero la metrica che analizza la stabilità nella visualizzazione del sito e cioè la presenza di elementi grafici che si spostano durante il caricamento, rendendo difficoltosa la navigazione.

LCP: Largest Contentful Paint, ovvero la velocità di caricamento percepita, che si ritiene completato quando il contenuto principale della pagina è stato caricato.

FID: First Imput Delay, che misura il tempo necessario al sito per offrire la possibilità di effettuare la prima interazione.

Ognuna di queste metriche ha un valore prestabilito da Google da rispettare, al di sopra delle quali il nostro sito viene giudicato non sufficientemente reattivo per garantire una buona page experience (che è un fattore di ranking).

 

In particolare l’LCP ha come limite 2,5 secondi, il FID 100 ms e il CLS un punteggio massimo di 0,1 (fonte).

 

Questi valori impattano pesantemente sulla velocità di caricamento del sito perché dipendono da tutti quegli elementi che da quasi un decennio Google consiglia di ottimizzare: immagini, codice, banner, eccetera, nonché dalla qualità dei server del nostro hosting.

Per misurare i Core Web Vitals del vostro sito potete utilizzare lo strumento Google Page Speed Insight. C’è però un distinguo ben preciso da fare. Il PSI misura la velocità del sito in modalità laboratorio. Ciò significa che potrebbe essere lento per la sua analisi ma che per gli utenti la navigazione è fluida e veloce. Google riesce a tenere conto anche di questo per stabilire il ranking del sito.

La Percezione degli utenti

La percezione della velocità del sito da parte degli utenti ha forse anche più peso rispetto al soddisfacimento (in laboratorio) dei Core Web Vitals per Google. Ricordiamo che l’intento principale è quello di fornire una qualità di navigazione buona. Quando questo avviene Google se ne accorge attraverso l’utilizzo di parametri misurabili.

È ovvio che qualsiasi tentativo di migliorare i CWV, sia destinato a migliorare anche l’esperienza reale dell’utente, anche se non si riesce a stare al di sotto dei parametri imposti da Google.

Un utente potrebbe avere una connessione veloce e sul sito può essere stato implementato un sistema di cache performante. Tutto ciò migliora l’esperienza di navigazione anche se magari il sito impiega un secondo in più a completare il caricamento delle sue pagine.

Il consiglio è quello di non fossilizzarsi, ma di fare del proprio meglio per migliorare la Page Experience fino ad arrivare ad ottenere un risultato che soddisfi l’utente.

 

 

D’altronde anche Danny Sullivan di Google, rispondendo alle domande dei vari SEO, dichiara (qui la conversazione):

Forse non hai la migliore esperienza sulla pagina … Ma se sei hai ancora il contenuto più pertinente non avrai problemi. Ma col tempo, se ti troverai in ​​una situazione in cui le cose sono tutte relativamente uguali tra il tuo sito e un altro, è probabile che chi ha ottimizzato meglio l’esperienza della pagina avrà un vantaggio.

Come velocizzare i siti in WordPress

Dunque, anche se non è il caso di farne una malattia (a meno che il tuo sito non sia terribilmente lento), dovrai iniziare ad ottimizzare il tuo sito per rendere migliore l’esperienza di navigazione. Questo significa anche Velocità di caricamento delle pagine.

Ricordiamo infatti che il Page Experience, non riguarda solo i 3 segnali web essenziali, ma anche l’ottimizzazione per i dispositivi mobili, la sicurezza e l’utilizzo dell’https, l’utilizzo esagerato dei contenuti invasivi (es. banner o video che si sovrappongono al testo e che rendono difficile la navigazione).

E come fare per velocizzare un sito WordPress? Ti direi iniziando da un tema semplice. Ma se il sito esiste già ed è terribilmente lento? Allora dovremmo mettere in campo tanta pazienza e seguire i passi elencati di seguito.

Scelta dell’hosting

Il principale motivo per il quale un sito può essere lento è legato all’hosting. Piani economici base e spazio si disco in esaurimento, incidono molto. L’hosting è la casa del nostro sito e quando lo si sceglie bisogna farlo con cura, essendo disposti a spendere anche qualcosina di più. Un server con un tempo di risposta lento non ti permetterà mai di raggiungere una velocità di caricamento delle pagine ottimale.

In Dweb noi utilizziamo Siteground, con preferenza per il piano intermedio, chiamato Grow Big. Questo piano dedicato a WordPress è pensato per le performances. Possiede tutto quello di cui si ha bisogno per costruire o velocizzare un sito web.

Abbiamo già parlato di Siteground diverse volte per cui non ci dilungheremo oltre. Semplicemente, se cerchi il miglior hosting WordPress, per noi è Siteground.

L’ottimizzazione delle immagini

Passiamo adesso ad uno dei motivi più frequenti per il quale i siti diventano lenti: le immagini. Ottimizzare tutte le immagini e gli elementi grafici del sito dovrebbe essere una best practice per ogni webmaster.

 

 

Le immagini dovrebbero essere ottimizzate ancor prima di caricarle. In questa maniera si potrebbe fare a meno di plugin per la compressione che hanno come effetto quello di far diminuire la qualità e di appesantire ulteriormente il sito.

Gli errori più comuni? Inserire le immagini sul sito così come sono senza preventivamente scalarle alle giuste dimensioni e alleggerendole nel peso.

Su internet si vedono cose orribili a questo proposito. Loghi da 1600×1600 px che in realtà potrebbero essere 80×80, immagini larghe 1200 px che sono posizionate in box larghi 400. Insomma…un vero e proprio suicidio. E poi però si pretende che il sito sia veloce.

Per fare le cose fatte bene bisognerebbe prima sapere quanto devono essere grandi le immagini, inteso come larghezza x altezza. Altrimenti si costringe il browser a ridimensionarle alla giusta misura e questo incide sui tempi di caricamento.

Inoltre, una volta che la dimensione è pronta, è necessario fare in modo di mantenere la maggior qualità possibile pur comprimendola il più possibile. Si tratta di trovare un punto d’incontro tra dimensioni, peso e qualità.

Non è facile, ma è per questo che i professionisti utilizzano software costosissimi come Illustrator, grazie ai quali si ottengono i risultati migliori.

Questo non significa che se non si è in grado di utilizzare Illustrator non si possano ottenere risultati buoni. Certo è che si dovrebbe comunque partire da una base buona, ottenibile con Adobe Photoshop ( la versione light è più che sufficiente e richiede un piccolissimo esborso economico) o il gratuito Gimp.

Online invece, esistono tools discreti per ottimizzare il peso delle immagini. Basta caricare l’immagine già ridimensionata alle giuste misure e dopo qualche secondo potrete scaricare la versione ottimizzata.

Può essere utile anche utilizzare plugin dedicati, sempre che abbiate già provveduto ad un’ottimizzazione preventiva. Uno dei migliori è ShortPixel, ma anche Smush fa il suo dovere.

Quando nonostante tutti gli sforzi per ottimizzare le immagini, i test della velocità dei siti, mostrano ancora problemi, allora si può ricorrere in primis al Lazy Load, una tecnica per mostrare le immagini solo quando si scrolla e si arriva nel punto dove esse devono apparire. Questo è utile per migliorare il tempo di caricamento percepito.

Altro consiglio, utilizzare il precaricamento delle immagini above the fold. In sostanza è un’istruzione che obbliga il sito a precaricare tutte quelle immagini che si vedono in cima alla pagina, per restituirle più velocemente. È il caso delle immagini in intestazione e di eventuali sfondi del sito.

È possibile farlo con una semplice istruzione html da inserire tra i tag head delle pagine dove sono presenti le immagini. Ecco l’istruzione:

<link rel="preload" as="image" href="IMAGE_URL">

 

Infine, per migliorare la velocità del proprio sito agendo sulle immagini, è possibile utilizzare il formato webp. Le immagini webp sono molto più leggere di qualsiasi jpg o png e hanno il pregio di mantenere intatta la loro qualità. Esistono plugin per WordPress che ti aiuteranno a servire le immagini in webp. L’unico vincolo è che il tuo server abbia attivi determinati moduli che ne permettono la conversione.

Nel caso utilizzassi uno di questi plugin e non vedessi le tue immagini in webp, devi rivolgerti al tuo hosting provider per chiedere l’attivazione di uno di questi moduli. Su Siteground, manco a dirlo, la cosa è immediata e in caso di problemi basta chattare con l’assistenza per risolvere.

Il formato webp è una delle soluzioni che più possono aiutare nella gestione delle immagini, in ottica di velocizzazione del tuo sito WordPress.

La minificazione del codice

Passiamo ora ad un altra best practice per diminuire i tempi di caricamento di siti realizzati con WordPress, ovvero la minificazione del codice.

Per minificazione si intende l’eliminazione degli spazi bianchi tra una riga di codice e l’altra. In questa maniera il browser leggerà più velocemente il contenuto e caricherà gli elementi più rapidamente.

La minificazione può essere applicata sia al codice html, che al codice CSS e Js.

Solitamente, i migliori temi per WordPress, prevedono la funzione di minificazione, applicabile con una semplice spunta. Fate solo attenzione ad attivarla una per volta. Iniziate dall’html, salvate e controllate se il layout è integro. Poi passate ai CSS e infine ai JS. Prima di fare questa tipologia di operazioni è sempre meglio avere a disposizione un backup fresco.

Defer e Async

Qui entriamo un pochino più sul tecnico, introducendo i concetti di defer (differimento) o Async (asincrono).

Sono due modi diversi per caricare le risorse necessarie al sito.

 

 

Con Async il file viene scaricato in modo asincrono e poi eseguito non appena viene scaricato.

Con Defer invece, il file viene scaricato in modo asincrono, ma viene eseguito solo quando l’analisi del documento è completata. Inoltre con l’attributo defer, gli script vengono eseguiti nello stesso ordine in cui vengono richiamati. Capire questo è fondamentale per poter dare la precedenza al caricamento dello script principale, prima di cariare le sue dipendenze.

Entrambi i modi possono essere utili per velocizzare i siti web, andando ad eliminare il problema delle “risorse che bloccano la visualizzazione”, che spesso appare durante l’analisi con il tool PSI.

Infatti, si potrebbe decidere di caricare prima gli script fondamentali per la visualizzazione di una certa pagina, e lasciare in coda tutti gli altri, alla fine della completa visualizzazione degli elementi LCP.

Script e CSS Inline

Andiamo avanti cercando di spiegare il più semplicemente possibile queste tecniche avanzate di velocizzazione dei siti wordpress. Parliamo quindi di script e CSS inline.

Quand’è che uno script è inline? Uno script inline è uno script che non viene caricato da un file esterno, ma incorporato nell’HTML. Stesso discorso per i CSS.

Quasi tutti i temi WordPress sono pieni di chiamate a script e css esterni che, se date uno sguardo al codice del vostro sito,  si presentano più o meno in questa maniera:

<script src="https://sito.tld/script.js"></script> <link rel="stylesheet" src="https://sito.tld/style.css">

Maggiore è il numero delle chiamate, maggiore sarà il tempo necessario al caricamento della pagina, senza contare che i temi sono pieni zeppi di chiamate a script o fogli di stile che per quella determinata pagina non servono a nulla, ma che sono necessari per altre pagine che condividono lo stesso header.php.

Mettere questi script e questi css inline, significa incorporarli nell’html della pagina, velocizzando il processo di lettura ed elaborazione da parte del browser.

Non tutti gli script e i css devono per forza essere minificati. Per quelli meno importanti basterebbe deferirne il caricamento. Ogni tema però ha il suo funzionamento particolare, per cui una regola non può valere per tutti. Prima di fare un’azione di questo genere è necessario studiare il funzionamento dei vari script e css e fare dei test, possibilmente in un ambiente di staging.

Una soluzione pratica e veloce è utilizzare un plugin di ottimizzazione. Ne esitono diversi: Auto Optimize, Hummingbird, Fast Velocity Minify. Il nostro preferito però è WP Rocket un plugin che gestisce efficacemente anche la cache e di cui avremo modo di parlare in seguito.

Merge JS

Con il Merge si va ad unificare più script per ridurre il numero di chiamate e migliorare le prestazioni in velocità. Risulta essere molto utile quando si deve lavorare sugli script che bloccano il render. È una funzionalità da maneggiare con molta cura e possibilmente da lasciar fare a chi sa di cosa stiamo parlando.

In ogni caso, segnalo che plugin avanzati come Fast Velocity Minify, permettono di avere un controllo abbastanza capillare su questi elementi, mettendo a disposizione funzioni per fare il merge, il defer, l’async, la minificazione e l’inline. Tuttavia non significa che senza cognizione di causa, saresti in grado di settarlo nel modo giusto. Ti consiglio sempre di lavorare in ambiente di staging per fare i test necessari.

Il precaricamento delle risorse

Precaricare alcune risorse per rendere il sito più veloce è una buona pratica. Si tratta in sostanza di richiamarle in anticipo e accelerare il caricamento della pagina.

È una tecnica da utilizzare per tutte quelle risorse che generalmente vengono scoperte in ritardo dal browser (quindi ci vorrà un’analisi preliminare).

Gli approcci possono essere diversi. Se abbiamo un CSS critico, potremmo dividerlo in due dove, in uno vi è il codice critico (scusate la ripetizione) e nell’altro tutto il resto. Di seguito bisognerà dare l’istruzione di precaricamento per la risorsa critica che avremo cura di inserire in un JS con priorità maggiore rispetto al resto . Stesso discorso si può fare con i files Js, andando a separare i bundle e precaricando solo i blocchi critici.

L’istruzione base è questa: <link rel=”preload” as=” script” href =”mycritical.js” >

Stessa cosa è utile fare con i fonts, sempre che abbiate avuto cura di inglobarli nel sito. In questo caso inserire tra i tag head qualcosa del genere: <link rel=”preload” href=” myfont.woff” as=”font” type=”font/woff” crossorigin >.

Anche qui, può venirci in aiuto un plugin come fast velocity minify.

Carichiamo solo i plugin necessari

Una delle caratteristiche (giusta o sbagliata che sia) di WordPress, è quella di caricare su tutte le pagine i richiami agli script e ai css dei vari plugin. Andando a selezionare per ogni pagina solo i plugin che vogliamo siano attivi, possiamo mettere un altro mattoncino al nostro lavoro di velocizzazione del sito.

Esistono alcuni plugin sviluppati per questo (in realtà sono utilissimi anche quando si vuole risolvere qualche problema di accavallamento dei fogli di stile che rovina il layout delle pagine). Spesso in agenzia ci siamo trovati ad utilizzare Freesoul Deactivate Plugin.

La compressione GZip

Gzip è un formato di file e un’applicazione software utilizzata per la compressione e decompressione di file. Viene attivata dai server web, come ad esempio Apache, IIS e nginx e consente una riduzione del peso delle risorse (html, css, Js). Riducendo il peso, aumenta la velocità di caricamento delle pagine.

La compressione Gzip deve essere attivata sul server. Molti hosting ormai l’attivano di default. Nel caso questo non fosse il tuo caso, prova a richiederla al tuo hosting provider.

Sfruttiamo la Cache

Sfruttare la cache è una delle azioni da non dimenticare di fare se si vuole velocizzare un sito web. Per chi non lo sapesse, la cache memorizza le risorse dinamiche dei siti e le rende statiche, quindi le restituisce più velocemente ad ogni chiamata.

 

 

Ogni buon hosting dovrebbe attivare la cache lato server. A noi non rimane che settare quella lato client. I migliori hosting wordpress sfruttano plugin realizzati da loro o da altri, per ottimizzare il processo di caching per i siti dei propri clienti. Così è possibile sfruttare tecnologie come ad esempio Varnish o Litespeed.

Molto efficace è la soluzione WP Rocket, un plugin che se ben settato, in pochi click rende il sito molto più veloce rispetto a prima. Ma esistono anche plugin appositi che sfruttano i propri server per fornire tutto quello di cui si ha bisogno. Un esempio è Swift Performance che offre di tutto e di più e che dai nostri test si è mostrato incredibilmente efficace. Il consiglio è quello di provarlo. Qui puoi avere maggiori informazioni.

La differenza sostanziale tra questi due ottimi plugin è che WP Rocket, una volta acquistato ti da aggiornamenti per un anno, ma se poi decidi di non rinnovarlo, pur non aggiornandosi continua a funzionare alla perfezione. Swift Perfomance invece, una volta acquistato l’abbonamento per un anno, se alla fine non lo si rinnova, si perdono tutte le funzionalità più importanti che hanno permesso di fare il salto di qualità.

I costi di entrambi sono comunque abbordabilissimi: 49 dollari per WP Rocket e 40 dollari per Swift Performance.

I test per la velocità di caricamento delle pagine

Terminiamo con gli strumenti per misurare la velocità dei siti. A partire da Google Page Speed Insight (disponibile anche attraverso l’estensione di Chrome, Lighthouse), fino a GTMetrix e Pingdom, tutti restituiscono l’indice di velocità e danno indicazioni su come risolvere le criticità.

Non ce ne è uno da preferire o meno perché tutti fanno la stessa cosa.

Una volta inserita l’url della pagina, questi elaborano i dati misurando le prestazioni e poi, oltre a restituire l’indice di velocità, PSI e GTMetrix, mostrano anche i parametri dei Core Web Vitals.

Questa deve essere la vostra bussola per procedere correttamente, sapendo come velocizzare un sito WordPress. Seguitela con pazienza, studiate le soluzioni, fate prove in ambiente di staging e non dimenticate mai di avere un backup recente a disposizione.