Ho deciso di riscrivere un articolo che feci ben 4 anni fa, quando ancora Google non aveva annunciato ufficialmente la velocità di fruizione dei contenuti come un fattore di ranking. In questi anni molte cose sono cambiate e oggi ci dobbiamo confrontare soprattutto con i Core Web Vitals, punteggi che Google utilizza per posizionare le nostre pagine sulla SERP.
Scopo di questo articolo è imparare a velocizzare WordPress imparando diverse tecniche di ottimizzazione. Non solo le classiche ma anche quelle più approfondite.
Chiariamo subito che le ottimizzazioni “di fino” dipendono da un sacco di fattori e quindi cercherò di affrontare solo le ottimizzazioni che in linea di massima possono essere applicate su qualsiasi hosting. Va detto anche che nel panorama WordPress esistono un sacco di soluzioni alternative rispetto a quelle che proporrò qui sotto, e in qualche caso sono anche più performanti. Ma preferisco darvi una lista di plugin che a mio avviso hanno il miglior compromesso tra prestazioni, compatibilità e semplicità d’uso.
Come analizzare le prestazioni del sito
Prima di iniziare questa ottimizzazione è bene sapere com’è messo il nostro sito in termini di velocità. Per questo motivo esistono diversi tool, anche ufficiali che vi aiutano non solo a capire lo stato attuale, ma vi consigliano anche su come rendere più veloce il caricamento della pagine web. Tra i più conosciuti abbiamo:
- Google Page Speed Insight: Questo è il tool ufficiale di casa Google e quello a cui far riferimento per i Core Web Vitals. L’analisi si suddivide in mobile e desktop. Nella prima (mobile) raggiungere valori alti è davvero ardua, quindi non preoccupatevi se non riuscite a superare il 60-70. Lato Desktop invece è molto più semplice raggiungere il valore 100.
- GT Metrix: Tool non ufficiale che però aiuta ad avere un altro punto di vista. Usa le API offerte da Google e non solo per darvi un rapporto di prestazioni del vostro sito. Di norma è più magnanimo del precedente.
- Pingdom Test: Questo tool è utile per calcolare l’effettivo tempo di caricamento di una pagina. Potete indicare anche il server di partenza per rendere più reale il test. Infatti il tempo di caricamento di un sito è influenzato anche dalla distanza tra client e server.
Quindi prima di iniziare ad ottimizzare il sito, fatevi un bel report su questi tool. Vi servirà per verificare l’effettivo miglioramento dopo aver applicato le prossime operazioni.
Ottimizzare il server
Di solito è l’aspetto che viene meno approfondito, ma che al contrario è tra che maggiormente influenzano i risultati di prestazione. La macchina su cui gira il nostro sito definisce in primis la velocità di caricamento del nostro sito. E se ci pensate è logico: anche un’applicazione va più o meno veloce a seconda del computer su cui la si fa girare.
Quindi prima di tutto assicuratevi di avere un buon hosting alle spalle. Non vi dico di andare per forza su soluzioni dedicate (o cloud/VPS), ma evitate se possibili hosting low-cost, che spesso offrono quei prezzi proprio a discapito delle prestazioni.
Sicuramente le ottimizzazioni lato server sono qualcosa che può essere fatto da chi ha conoscenze da sistemista, e quindi non sono di sicuro alla portata di tutti. Ma ci sono alcuni espedienti che possiamo implementare anche noi:
Aggiornare la versione PHP
WordPress utilizza come linguaggio di programmazione PHP e questo negli anni si è evoluto molto. Attualmente siamo alla versione 8 ma già con la versione 7 c’è stato un gran miglioramento nella velocità di esecuzione. Il mio suggerimento è quindi di verificare tramite CPanel che sia installata come minimo la versione 7 o superiore. Si può anche azzardare la versione 8 se è disponibile (dico azzardare perché WP è compatibile ma non è detto che lo siano anche tutti i plugin che state usando).
Compressione GZIP
Ora ci spostiamo sul file .htaccess, cioè il file di configurazione che fornisce Apache (il web server usato maggiormente dai server). Lo trovate sulla cartella principale del vostro sito WordPress e lo vedrete solo tramite Filemanager del CPanel o tramite FTP. Questo perché, come tutti i file che iniziano con il punto, è un file nascosto (sono detti file di sistema).
Aprite questo file con un normalissimo editor di testo (Blocco note, Textedit, o un classico IDE) e incollate alla fine del file questo codice:
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Questa porzione di codice avviserà il server di abilitare la compressione GZIP. In questo modo i file trasferiti da server a client saranno compressi (come se fossero dei file ZIP). Così facendo potremmo guadagnare fino al 50% del peso di ogni singolo file inviato.
Cache del browser
Altro espediente da caricare tramite .htaccess è quello di abilitare la cache del browser per l’utente che visita il nostro sito. In pratica ogni volta che qualcuno visita una pagina web, il suo browser controlla se nella cronologia del computer sono già presenti elementi che la compongono (immagini, fogli di stile, Javascript, ecc.) e che non siano troppo “vecchi”. In tal caso non li richiede al Server ma usa quelli presenti nella Cache.
Anche in questo caso, attivare questa funzionalità è relativamente semplice: vi basta incollare il pezzo di codice qui sotto, sempre sul file .htaccess, dove preferite.
<IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # CSS, JavaScript ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" # Others ExpiresByType application/pdf "access plus 1 month" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>
Ottimizzare le immagini
Le immagini sono spesso le risorse più pesanti di un sito web. Vedo molti progetti che ottimizzano CSS, JavaScript e poi lasciano le immagini a dimensioni improponibili e con pesi allucinanti. Se volete un sito veloce, prima di tutto pensate ad ottimizzare le immagini.
Su WordPress fortunatamente alcune ottimizzazioni sono già disponibili: quando carichiamo una nuova immagine, il CMS si preoccupa di creare diverse versioni, in modo da soddisfare tutti gli spazi ed evitare il più possibile di caricare immagini troppo grandi per lo spazio per cui sono pensate. Inoltre, nelle ultime versioni WordPress ridimensiona automaticamente le immagini originali in modo che non superino i 2560 pixel di larghezza (quindi non avremo più clienti che caricheranno immagini da millemila pixel).
Possiamo però migliorare ancora di più le nostre immagini, con questi semplici passi:
Comprimere le immagini
Prima cosa da fare è comprimere maggiormente le immagini. WordPress già lo fa di suo, ma a mio avviso non in maniera ottimale. Possiamo comprimerle quindi maggiormente utilizzando uno dei seguenti strumenti:
- Squoosh: Questo è un tool online fornito da Google che permette di ottimizzare un’immagine alla volta. Vi basta andare sul sito e caricare la vostra immagine. Il tutto direttamente dal browser. L’unico limite è che lo dovrete fare un’immagina alla volta.
- ImageOptim: A mio avviso il più semplice e comodo programma di compressione. Ahimè è disponibile solo per Mac (ci sono alternative per Windows, come indicato a questo link). Il vantaggio di questo programma è che possiamo ottimizzare cartelle intere d’immagini. Per questo motivo io prima di pubblicare un sito WordPress gli do in pasto tutta la cartella “uploads”. A questo link potete scaricarlo.
- Smush: Plugin per WordPress che si occupa di ottimizzare le immagini che caricate su WordPress. Ha anche un sistema di ottimizzazione per le immagini caricate in precedenza.
Pubblica immagini in formati più recenti
Ammettetelo, questo titolo non vi è nuovo vero? sicuramente l’avrete letto almeno una volta sui suggerimenti che vi fornisce Google PageSpeed. E qualcuno di voi si sarà chiesto anche che cosa voglia dire.
Negli ultimi anni sono nati nuovi formati immagine che promettono di comprimere maggiormente le immagini, mantenendo la stessa qualità di formati più vecchi. Questi sono JPEG 2000, JPEG XR e WebP (quest’ultimo sviluppato da Google). A questi, negli ultimi mesi sta facendosi sempre più spazio anche il formato AVIF (sviluppato da Netflix) con lo scopo di sbaragliare non solo i vecchi formati, ma anche tutti i rivali.
Allo stato attuale, il formato recente più compatibile sui browser risulta essere il WebP (come si può vedere qui sopra), quindi per ottimizzare le nostre immagini bisognerebbe convertirle tutte in questo formato. Ma per fortuna esiste un plugin che fa al caso nostro, ed è WebP Express. Questo plugin si occupa di creare una copia .webp per ogni immagine del nostro sito e fornisce tale copia agli utenti che utilizzano un browser compatibile con quel formato.
Una volta installato, dovrete andare su “Impostazioni –> WebP Express”. Da qui le uniche modifiche che vi consiglio sono quelle che vedete nella schermata qui sotto: Ho trascinato come primo elemento il “GD Extension”, perchè nel mio caso è l’unico sistema di manipolazione immagini che il mio server mi fornisce, e soprattutto ho abilitato la voce “Replace <img> tags with <picture> tags, adding the webp to srcset.“.
Una volta fatte queste configurazioni, potete salvare il tutto cliccando sul pulsante “Save settings and force new .htaccess rules” che trovate in alto a destra. Ora non il plugin convertirà in automatico le immagini che caricherete.
Se volete convertire in webp anche le immagini caricate in precedenza, allora dovrete cliccare sul pulsante “Bulk convert“. Questa operazione può durare anche diverso tempo, a seconda di quante immagini avevate salvato sul vostro sito.
Lazyloading
Questa è una tecnica ormai usata da tanto tempo e si basa sul principio che un sito non deve caricarsi TUTTO subito, ma per Google l’importante è che sia subito disponibile alla navigazione. Quindi è importante che si carichi prima di tutto la parte che l’utente sta visualizzando in quel momento. Per questo motivo si utilizza questa tecnica, che traducendola in italiano vuol dire “caricamento pigro”.
Le immagini infatti vengono caricate solo quando lo schermo le mostra. Quindi ad inizio pagina si caricano subito, mentre quelle in fondo saranno disponibili solo quando ci arriveremo con lo scroll della pagina. Soluzione molto utile soprattutto in quei siti molto lunghi (come ad esempio i quotidiani online).
In WordPress, dalla versione 5.5 quest funzionalità è già presente nativamente su tutte le immagini, attraverso l’attributo HTML loading=”lazy”. Questa tecnica però non è ancora del tutto compatibile sui browser, per questo motivo il consiglio è di associare un plugin che si occupi d’implementare il lazy loading anche lato JavaScript.
Esistono diversi plugin gratuiti che permettono d’implementare questa funzionalità. Tra questi anche il già citato Smush, o il plugin Autoptimize che rivedremo per le prossime ottimizzazioni. In quest’ultimo caso, una volta installato, vi basterà andare su “Impostazioni –> Autoptimize”. Successivamente sul tab in alto “Immagini” e spuntare l’opzione “Image lazy-loading will delay…“. Se preferite, potete anche definire una classe CSS per escludere le immagini che volete NON vengano caricate successivamente. Fatto questo, cliccate su “Salva modifice” e il gioco è fatto!
Concatenare e minificare CSS e JS
Ora che abbiamo ottimizzato il server e le immagini, passiamo alla seconda tipologia di risorse che possono rallentare il nostro sito: i fogli di stile CSS e gli script JS. In un sito WordPress non è inusuale trovarsi a caricare decine e decine di queste risorse, che di per se non hanno pesi importanti come le immagini, ma che impegnano il server in diverse chiamate.
Pensate a questo esempio: è come se Amazon invece di portarvi un ordine di 10 prodotti in una volta sola, vi inviasse 10 corrieri con 1 prodotto ciascuno. Intuite l’inefficienza di questa cosa? ecco, nel web avviene una cosa molto simile.
Per fortuna Autoptimize (plugin già citato poco fa per il lazy loading) nasce proprio per evitare tutto questo. Il suo scopo è infatti quello di minificare (eliminare commenti, ritorni a capo, e tabulazioni, per far pesare meno il file) e concatenare tutte le risorse, creando un solo ed unico file per tipologia.
Una volta attivato il plugin, andando su “Impostazioni –> Autoptimize” potete gestirlo. Da qui dovrete spuntare le seguenti opzioni:
- Ottimizzare il codice JavaScript
- Ottimizzare il codice CSS
- Ottimizzare il codice HTML
Le altre voci potete lasciarle così come sono. Fatto questo premete sul pulsante blu “Salva modifiche e svuota cache“
N.B.: Verificate poi che il sito sia del tutto funzionante. Se ci sono problemi di visualizzazione vi consiglio di provare a disabilitare una delle voci (partendo dal Javascript che è quello che può portare maggiori incompatibilità con i plugin/temi).
Se decidete di modificare a posteriori qualcuno di questi file (JS e CSS), ricordatevi che dovete svuotare la cache, per permettere al plugin di rigenerare la nuova versione di questi file ottimizzata. Per farlo vi basta cliccare sulla voce “Svuota Cache” che trovate nel menu a tendina di “Autoptimize” sull’admin-bar in alto (vedi foto qui sotto).
Preconnessione e precarica risorse
Un’altro suggerimento che Google Page Speed potrebbe darvi è quello di preconnettersi alle risorse esterne o precaricare le risorse interne. Questo di norma avviene con i webfont. Lo scopo è quello di avvisare subito di caricare queste risorse perchè serviranno per renderizzare la pagina.
Se quindi ricevete questo suggerimento da Google, potete implementare questa soluzione utilizzando sempre il plugin Autoptimize, che nel tab “Extra” presenta questa funzionalità. Non dovrete far altro che copiare gli url che vi suggerisce Google nell’analisi e incollarli sul relativo campo qui sotto (separati da una virgola se sono più di uno).
In questa pagina di modificha vi consiglio anche di impostare le opzioni come potete vedere nell’immagine qui sopra: così facendo andrete in ordine ad applicare questi miglioramenti:
- combinate i font Google, riducendo le chiamate esterne
- Rimuoverete CSS e JS per gestire le emoji (spesso non sono usate nel sito)
- Rimuoverete le query string che spesso influiscono sul punteggio dato da Google Page Speed
Abilitare la cache del server
La cache del server (da non confondere con quella del browser, vista in precedenza), permette di creare delle versioni statiche HTML delle nostre pagine.
Per ogni richiesta di pagina, normalmente il Server deve leggere ed eseguire il codice PHP al suo interno e poi consegnare il risultato all’utente. Abilitando questa cache invece, il risultato dell’esecuzione sarà messo da parte per poterlo distribuire ai futuri utenti che richiederanno quella stessa pagina. Questa soluzione permette quindi di velocizzare a vista d’occhio il caricamento delle pagine che non devono più essere analizzate e poi eseguite.
Per abilitare questa cache potete farlo in 2 modi: o direttamente tramite server o con un plugin. Nel primo caso, dovete verificare che il vostro hosting vi fornisca questa funzionalità. Un esempio è Siteground che fornisce un sistema automatizzato di caching. In questo caso non sarà necessario caricare alcun plugin aggiuntivo.
Se invece questa funzionalità non ce l’avete (e questo è il caso dei maggiori servizi di hosting), potete far uso di un plugin specifico. Sulla repository di WordPress ce ne sono veramente tanti (Fastest Cache, W3 Total Cache, Swift Performance, ecc..), ma mi sento di consigliare WP Super Cache. Questo plugin, sviluppato dagli stessi autori di WordPress, forse non è la soluzione in assoluto più potetente, ma è quella che garantisce il miglior compromesso tra prestazioni, compatibilità e semplicità d’uso.
Per abilitare la cache, dovete andare su “Impostazioni –> WP Super Cache”, spuntare la voce “Cache attiva (Raccomandato)” e cliccare sul pulsante “Aggiorna stato” (figura qui sopra). Tutto qua. Immediatamente il plugin si occuperà di generare pian pianino la cache delle pagine.
Ovviamente ad ogni modifica del contenuto in area amministrativa, il plugin stesso provvederà a svuotare la cache.
Se, come per Autoptimize, dovete svuotare manualmente la cache, per visualizzare ad esempio modifiche fatte al codice, potete utilizzare lo stesso pulsante visto in precedenza con il plugin. Questo perchè i due plugin sono stati pensati per integrarsi perfettamente tra loro.
Elimina le risorse di blocco della visualizzazione
Questa è un’altra dei tanti suggerimenti che vi potrà mostrare Google Page Speed quando vedrete il rapporto sul vostro sito. In pratica vi sta dicendo che ci sono delle risorse (soprattutto JS) che bloccano la visualizzazione dei contenuti. Questo perchè finchè non vengono caricate queste risorse, il browser non procede con il disegno della pagina a schermo.
Per evitare questo problema possiamo avvisare WordPress di caricare in maniera asincrona queste risorse, cioè caricare parallelamente al resto, evitando così di bloccare il render della pagina web.
Anche in questo caso possiamo far affidamento ad un plugin apposito, e in particolare parliamo di Async Javascript, plugin sviluppato dagli stessi autori di Autoptimize (e che quindi si integra bene con questo).
Una volta installato, vi basterà andare su “Impostazioni –> Async JavaScript” e vi ritroverete nella schermata che vedete qui sotto. Dovrete semplicemente mettere la spunta su “Enable Async Javascript” e cliccare sul pulsante “Apply Defer” su Quick Settings. Così facendo farete in modo che tutte le risorse JS vengano caricate in maniera asincrona, senza bloccare il caricamento della pagina web.
N.B.: Verificate poi che il vostro sito funzioni correttamente, perchè ho notato che in qualche caso, questa modifica può essere incompatibile con qualche plugin.
Ultime considerazioni
Sicuramente quelle che abbiamo visto non sono tutte le possibili ottimizzazioni. Si può fare ancora meglio. Però in questo caso entrano in gioco troppe variabili per cui è importante verificare la tipologia di sito, tema e server su cui stiamo lavorando.
Ricordatevi anche di eseguire queste ottimizzazioni un passo alla volta e di verificare sempre, dopo ogni modifica, che il sito carichi correttamente tutti i contenuti e tutti gli effetti di animazioni (slider, effetti vari, ecc..). Verificate soprattutto che i moduli di richiesta o d’iscrizione newsletter siano ancora funzionanti, perchè spesso questi strumenti utilizzano JavaScript e sarebbe alquanto fastidioso accorgersi dopo settimana che il modulo di contatto non inviava correttamente le richieste.
Spero che questo articolo possa esservi utile per migliorare la velocità del sito. E fatemi sapere se avete altri suggerimenti.
Ancora nessun commento