Tutorial & Tricks

Come Velocizzare un Sito in WordPress (Guida 2020)

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.

No, il titolo non è corretto. Lo sappiamo!

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.

“Ma ho ottimizzato tutto…”

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.

I 300kb di celebrità.

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.

Anche John Cena sembra piuttosto contrariato.

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!

About author

Mi chiamo Alfredo Capuano e sono un freelance. Lavoro in ambito web ormai da 15 anni, con agenzie, con privati e col pubblico. Ho 34 anni, non ho frequentato scuole di specializzazione né in programmazione né in webdesign, vivo e lavoro (bene e molto) a Napoli. Riuscire a farlo senza problemi dovrebbe già rappresentare una garanzia non da poco. Sono docente del corso di Nuove Tecnologie dell’Arte dell’Accademia di Belle Arti di Napoli, dove continuo ancora oggi il mio percorso artistico, grazie anche alla collaborazione con mediaintegrati. La farò breve: non sono un tecnico, non sono un ingegnere, non sono uno programmatore. Ma io mi diverto ed i miei clienti sono più che soddisfatti. Basta questo.
    Ti può interessare
    SocialTutorial & Tricks

    Perdere Follower su Instagram: perché il numero scende?

    Tutorial & Tricks

    Come Fissare un Commento in Alto su Instagram

    Tutorial & Tricks

    Come Avviare un Canale YouTube: i nostri consigli

    Tutorial & Tricks

    Come programmare Post Instagram da Smartphone

    Hai domande da farci?
    Saremo felici di risponderti.

    Lascia un commento

    Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *