Ora, proprio ora, sei su un sito sviluppato in WordPress. Quanti millisecondi sono passati da quando hai cliccato sul link a quando hai per la prima volta visto questo paragrafo? Davvero pochi.
In questa breve guida ti spiegherò come velocizzare un sito in WordPress, (o quello del tuo cliente – solidarietà per i colleghi!) per farlo aprire alla velocità della luce.
Negli anni di lavoro su WordPress ho capito che il risultato è riconducibile a tre fattori (Hardware, Software, Casualità), il cui cuore è ben definito, ma i bordi e le zone adiacenti sono decisamente sfocate, sovrapposte e molto, molto fuzzy.
Si tratta di un gioco di equilibri e, a volte, i risultati non saranno quelli ottimali.
Il motivo?
In alcuni aspetti l’ottimizzazione di un sito in WordPress è qualcosa che assomiglia più alla stregoneria arcana che all’informatica. Quindi ora impugna il tuo bastone della saggezza +2 e andiamo a distruggere questo Demogorgone.
Cos’è WordPress?
WordPress è un CMS, ovvero un Content Management System. Ciò si traduce in una manciata di cartelle, ripiene di file scritti in PHP e in JavaScript e resi belli da immagini e fogli di stile. In pratica, un CMS è un programma che viene fatto girare su un server che produce, senza dover necessariamente scrivere codice, un sito web navigabile da parte degli utenti.
In questo momento, ad esempio, sto scrivendo su un editor di testo chiamato Gutenberg (il team di sviluppatori che lavora a WordPress è sempre stato molto attento a dare nomi interessanti o ironici ai loro prodotti), ma ciò che stai vedendo è una pagina web. Comodo no?
Talmente comodo che, fino ad un annetto fa, circa il 30% dei siti web attivi in rete era realizzato in WordPress. Non male per un progetto open source completamente gratuito.
WordPress e PageSpeed Insight: come ottenere buoni risultati?
Lo inserisco come secondo punto della guida perché, senza avere alcuna cognizione premonitoria, sempre per restare nel topic della magia nera, so per certo che qualcuno è arrivato su questa pagina cercando proprio questo (se sei proprio tu contattaci! ho una cosa da dirti!).
Entro a gamba tesa: è finita l’epoca del terrore di PageSpeed Insight.
Per qualche anno ho collaborato con un’agenzia il cui art director (per così dire) era ossessionato dai risultati che questo gli forniva, senza assolutamente curare tutto il resto. Ciò si traduceva in una qualità di contenuti scadenti che non comportavano vendite o conversioni per i clienti: tutta l’attenzione era rivolta ad aumentare lo score di PageSpeed, ignorando ogni altra strategia.
La verità, come sempre, si trova nel mezzo: PageSpeed ci fornisce alcuni indicatori utili, ma alla fine ciò che conta è il risultato e niente più.
Le azioni che andremo a compiere per velocizzare un sito in WordPress, aumenteranno di sicuro il risultato del tuo sito web analizzato con PageSpeed, ma ti do un consiglio: non perderci la testa!
Anche perché, ti assicuro, anche spostando il tuo sito sul server di Sundar Pichai, il risultato non è assicurato.
Velocizzare un Sito in WordPress: quale hosting scegliere?
Prima di pensare al software, partiamo dall’hardware. Se hai un piccolo Ecommerce con 2000 prodotti, dimenticati di farlo girare su un server che costa 10 euro l’anno. Dimenticalo direttamente, non provarci, ci verrai a ringraziare.
Non puoi pensare di far girare una pala eolica soffiandoci su.
La scelta dell’hosting è molto importante e influenza di molto la velocità di caricamento del tuo sito e, di conseguenza, quanto questo verrà consultato dagli utenti finali, che siano lettori o acquirenti. Ci sono alcune società che offrono spazi web ottimizzati per WordPress (uno di questi è Siteground, che utilizziamo per tutti i nostri clienti) e che forniscono componenti aggiuntivi, plugin e configurazioni ideate appositamente per aiutarti a vendere online le tue Pet Rock.
Anche se gli anni ’70 sono passati da un pezzo ed hai ragione a volertene disfare, se proprio devi farlo ti consiglio di investire un centinaio d’euro l’anno per garantirti una infrastruttura decente. Se avessi un negozio fisico spenderesti molto di più per l’affitto, non trovi?
Non andrò molto nel tecnico, ma assicurati di utilizzare almeno la versione 7.x di PHP, NGINX e HTTP/2. Ancora meglio se l’hosting integra nel pacchetto un CDN ed un sitema di caching lato server.
Usa un plugin per la Cache
Lo ripeto: usa un plugin di cache.
I risultati sono incredibili e saltano subito agli occhi. Per dirla in maniera molto semplice (e con molte approssimazioni) la cache è una replica esatta del tuo sito web generata direttamente dal plugin e fornita ai visitatori senza che questi facciano richieste al server.
È come se andassi al Louvre per vedere la Gioconda e all’ingresso trovassi una webcam puntata sul quadro originale. Vedresti comunque la Gioconda senza fare la fila.
D’accordo, forse non è l’esempio migliore, ma mi serviva per farti capire come funziona!
La cosa importante è riuscire a configurarlo per bene. Ora ti dirò un nome: Luciano Vangone.
Se hai una Partita Iva, sei un autonomo, hai vissuto in Italia negli ultimi mesi, provvisto di una connessione internet, c’è un ottima probabilità che sai di cosa sto scrivendo. Luciano Vangone è il nome comparso ad una grandissima percentuale di utenti del sito dell’INPS durante quello che di sicuro non doveva essere un clickday.
Il sistema di caching del sito non è stato ben configurato, facendo si che venissero copiate e servite agli utenti anche le pagine personali o protette da un login ed una password. Risultato finale: morte nera, primo morso del Demogorgone, brutta figura di fronte ad una gigantesca platea. Il garante della privacy non pervenuto.
Ma se configurato bene, un plugin di cache permette davvero di velocizzare (moltissimo) un sito in Wodpress e il caricamento delle pagine.
Ti consiglio Wp Fastest Cache e W3 Total Cache.
Usare un CDN
Già il nome è bellissimo: CloudFlare.
In realtà CloudFlare è uno dei tanti, ma è quello che per me ha il nome più figo. Un CDN (Content Delivery Network) è una vasta rete delocalizzata di server connessi alla rete che creano copie di siti (o parti di essi). Anche adesso, questa pagina che stai leggendo ti sta venendo trasmessa da un server che è più vicino a te rispetto a quello “centrale” che si trova in Irlanda.
La distanza fisica tra te ed il server è uno degli elementi che velocizza o rallenta l’apertura di una pagina web. Su alcuni hosting è gratis ed incluso nel pacchetto. Altrimenti, mi spiace, dovrai comprarlo a parte.
Ottimizza le tue immagini se vuoi velocizzare un sito in WordPress!
“Il cliente vuole l’immagine ad alta qualità”.
Giuro che me l’hanno detto, chiedendomi di caricare 5 foto in uno slider da tre megabyte l’una, qualità stampa.
Ti svelo un segreto: a meno che tu non abbia esigenze particolari, non c’è bisogno di caricare online foto più grandi di 1920 pixel di lato lungo e soprattutto con una densità di pixel per pollice non superiore a 72.
È inutile farlo, rallenti il tuo sito e non hai nessun risultato tangibile.
È invece importante comprimere le tue foto e caricarle ad una dimensione adatta. Ci sono diversi tool online (il più comodo è TinyPNG che fornisce anche un ottimo tool da riga di comando per poterlo fare direttamente da terminale) e plugin che ridimensionano ed ottimizzano le foto al momento del caricamento senza che queste perdano di qualità.
Ci crederesti che una foto da 1 megabyte possa essere ridotta ad una manciata di kilobyte? Inoltre puoi utilizzare plugin che ti permettano di caricare immagini in formato .webp.
Utilizza solo i plugin che ti servono davvero
Se vuoi velocizzare un sito in WordPress, non puoi fare a meno di tenere bene a mente quanto segue:
installare un componente aggiuntivo che interroga il database per farti uscire l’icona del puntatore a forma di fiorellino non è una buona idea.
Scherzi a parte, la tendenza ad installare tutto l’installabile solo perché è più semplice che interrogarsi su quali righe di codice aggiungere all’editor di WordPress è un male da estirpare.
Ogni plugin, anche il più leggero e apparentemente poco invasivo, può potenzialmente rallentare il tuo sito web.
Non sto assolutamente dicendo che non bisogna installare nulla, ma più moderatamente prendere in considerazione i pro ed i contro delle operazioni che si effettuano durante la realizzazione del tuo sito web. A volte la strada più semplice non è quella giusta. Stackoverflow ed i giusti gruppi su Facebook potranno aiutarti a capire cosa fare.
Attiva la compressione GZIP
La compressione GZIP è un trick che puoi usare per far si che le tue pagine pesino meno e che, quindi, vengano caricate più velocemente. Molto spesso è possibile attivarla utilizzando uno dei plugin per la cache o per minificare e aggregare i fogli CSS o JavaScript (lo vedremo nel prossimo paragrafo).
Se invece vuoi essere più nudo e crudo, incolla questo codice nel file .htaccess presente nella root del tuo server.
Mi raccomando dopo la stringa “#END WordPress”!
# 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
Attiva la minificazione e l’aggregazione dei fogli CSS e JavaScript
Qui devi usare un plugin.
Ti consiglio l’ottimo Autoptimize che, in due click, unirà tutti i fogli di stile presenti sul tuo sito, eliminerà tutti gli spazi e li farà caricare in maniera asincrona, senza bloccare la visualizzazione della pagina durante il caricamento da parte dei visitatori.
Con un altro click, invece, farà la stessa cosa ma con le risorse JavaScript. Questo comporterà un altro bel boost nella velocità d’apertura e quindi di fruizione del tuo sito.
Beccati questa palla di fuoco, Demogorgone!
“Leverage Browser Caching”, l’odio profondo
Questa non funzionerà o funzionerà in parte. È forse l’avviso di PageSpeed Insight più odiato nella storia. Se seguirai alla lettera le best practices indicate da Google stesso, non è detto che avrai i risultati sperati.
È ora che qualcuno lo dica.
Nota bene: lo script di Google Analytics sarà una delle risorse che continuerà a farti visualizzare questo avviso nei risultati di PageSpeed.
Per tutti gli altri (o gran parte di essi) puoi incollare nel tuo .htaccess (sempre dopo la stringa “#END WordPress”) questi snippet.
## EXPIRES HEADER CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/svg "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" ## EXPIRES HEADER CACHING ##
Buona fortuna!
Valuta di passare ad AMP
Su cosa sono le AMP e per tutti gli approfondimenti a riguardo rimando a questo bell’articolo del caro Ciro Leale. Non mi dilungherò, ma vi basti sapere che AMP sta per Accelerated Mobile Pages.
La sostanza è già nella forma: sono pagine prodotte automaticamente ed ottimizzate per la visualizzazione da mobile. Dimenticate tutti gli effettucci di comparsa/scomparsa, immagini che ruotano, musiche e cafonate varie!
AMP si concentra sui contenuti, solo sui contenuti, sacrificando l’estetica. O meglio sacrificando la ridondanza nell’estetica. I vantaggi ci son, ma se l’immagine è il punto forte del tuo prodotto (ad esempio vendete Pet Rocks, come dicevo prima) allora glissa alla grande.
Se hai un giornale o un blog, invece, prendi seriamente in considerazione questa opportunità.
Ultime varie ed eventuali (Risorse bloccanti, Lazy Load delle immagini, il temutissimo Above the Fold)
Per finire voglio aggiornarti anche su questi ultimi argomenti che ti aiuteranno a velocizzare un sito in WordPress.
Google è spaventatissimo dalla possibilità che l’utente, una volta atterrato sulla tua landing page o sul tuo articolo, più che terminare il respiro che stava compiendo, voglia vedere tutto e subito. E per comunicartelo non cerca parole rassicuranti come “Contenuti che vengono dopo”. Ti spara in faccia cose come RENDER BLOCKING RESOURCES, come se queste paralizzassero l’utente.
In realtà, quasi mai bloccano veramente qualcosa e se lo fanno è per una frazione di secondo, ma a noi piace fare le cose per bene e, in linea di massima, è cosa buona e giusta che l’utente non debba aspettare per visualizzare la pagina. La questione è spinosa perché, in molti casi, è piuttosto difficile capire quali siano le risorse che servono subito e quali subito dopo.
Anche in questo caso Autoptimize ci viene in aiuto ed, almeno in parte, permette di postporre il caricamento delle risorse non necessarie da subito.
Il Lazy Load è, sempre con la dovuta cautela del caso, l’esatto analogo per le immagini.
Se stai visitando How To Social da desktop, ti accorgerai che le immagini vengono caricate man mano che scrolli questa pagina. Questo perché, a tutti gli effetti, non potrai visualizzarle nel momento in cui atterri per la prima volta su questo link e moltissime di queste ti serviranno solo quando arriverai al punto della pagina dove le ho inserite.
Il Lazy Load ti permette quindi di far caricare le immagini solo quando queste devono essere visualizzate e non prima.
Conclusioni
Hai raggiunto l’agognato 100/100 su PageSpeed su Desktop? Bravissimo! Ottimo.
Ti consiglio di non cliccare sulla tab Mobile per verificare il risultato. Lo dico per salvaguardare il tuo umore.
Se l’hai fatto comunque sono qui per rincuorarti. Non preoccuparti troppo. Prendi un cellulare, stacca il WiFi e verifica veramente come il tuo sito viene navigato, se è lento te ne accorgerai.
Prendi tutte le contromisure e i provvedimenti necessari, tendi sempre ad ottimizzare e a migliorare ciò che sviluppi, ma non perderci la testa e tratta gli strumenti come mezzo e non come fine. Lavora sulla qualità dei contenuti e tieni d’occhio la velocità di caricamento.
L’ultimo consiglio per velocizzare un sito in WordPress?
Ascolta rilassante mentre lo fai.
Hai bisogno di una consulenza per velocizzare il tuo sito? Contattami qui!
Comments