© 2014-2020
NUwebstudio
P. IVA 08827630966
Privacy Policy

Il sito veloce, senza codice

La giusta sequenza per ottenere un sito veloce con Wordpress: impostare correttamente i test di velocità, leggere e interpretare i risultati del test, utilizzare le tecniche e i plugin che permettono di migliorare la velocità del sito senza leggere o scrivere codice.

Nota: questo articolo è una libera trascrizione del mio intervento al WordCamp Italia 2020, svolto lo scorso 17 ottobre. Per esigenze organizzative l'intervento si è concentrato in uno slot da 20 minuti, mentre questa trascrizione si prende il tempo e lo spazio per approfondire alcune parti e ampliarne altre. La presentazione originale si trova sul sito del WordCamp Italia, su Slideshare e, ovviamente, qui sotto 👇

il 53% degli utenti mobili scappano da un sito se si carica in più di 3 secondi.

Introduzione

L'importanza di avere un sito veloce è un argomento non certo nuovo per noi addetti ai lavori; al contrario molte aziende e imprenditori ne sembrano ancora inconsapevoli o non le stanno dando, a mio avviso, la giusta importanza.

Eppure queste stesse aziende assumono creatori di contenuti, Social Media Manager o copywriter, affinché creino materiali di marketing e campagne accattivanti.

Allora, nelle campagne online il sito ha spesso un ruolo centrale: le campagne possono anche essere mirabolanti, ma se un utente clicca e finisce su una pagina di atterraggio che ci mette 10 secondi a caricarsi, quasi sicuramente perderemo gran parte delle conversioni. Questo rende vani gli sforzi e il duro lavoro fatto sulle campagne, e vi assicuro che succede più spesso di quanto si pensi.

Le conseguenze sono due.

La prima conseguenza - come già detto - è di marketing: quanto traffico, quanti potenziali clienti ci perdiamo per una cattiva esperienza di navigazione?

La seconda è di posizionamento: come sapete Google - che attraverso i telefoni Android e il browser Chrome può raccogliere e analizzare dati di navigazione effettivi - si propone come avvocato difensore dell’esperienza utente e da tempo ha inserito la velocità del sito tra i fattori che influenzano il posizionamento sul motore di ricerca.

Nel 2016 Google, nel documento "The Need for Mobile Speed" (link in fondo all'articolo) aveva rilevato che la media dei tempi di caricamento dei siti sui cellulari in era di circa 15 secondi, mentre oltre la metà degli utenti mobili scappava dal sito se il caricamento si protraeva oltre i 3 secondi.

Nel 2019 la situazione è migliorata, ma non abbastanza: i tempi medi di caricamento superano una media di 10 secondi. Chrome ha quindi promesso che in futuro segnalerà con un badge i siti che di solito si caricano lentamente.

Sito veloce: Google indicherà con un badge i siti lenti - NUwebstudio

Inoltre, nel continuo sforzo per migliorare la qualità dei siti web premiando quelli che offrono una migliore esperienza utente, Google ha ultimamente creato un set di misurazioni dal titolo-ombrello di Core Web Vitals (segnali vitali).

A partire dal maggio 2021, i Core Web Vitals - aggiunti di recente ai report forniti da Google Search Console - influenzeranno il posizionamento su Google. Uno dei segnali vitali è appunto la velocità di caricamento.

Per i motivi appena spiegati, diventa necessario sensibilizzare non solo gli sviluppatori, ma anche le aziende e i proprietari dei siti web.

Ecco quindi la sfida di oggi: incoraggiare tutti i proprietari di siti web a misurare la velocità del proprio sito e ad agire con i primi passi di ottimizzazione.

Come misurare la velocità del sito e comprendere i risultati

Il primo passo verso un sito veloce è quello di misurare la sua velocità. Per farlo usiamo uno fra gli strumenti gratuiti più popolari: GTMetrix.

GTMetrix è uno strumento di test potente che cronometra tutti i passaggi e le risorse richiamate dal browser durante il caricamento di ogni pagina.

Un buon test di velocità non ha il solo scopo di sapere quanto è veloce il sito ma serve anche per capire cosa, eventualmente, lo rallenta. E’ l’hosting? È un plugin pesante? Sono le immagini troppo grandi? O una combinazione di queste cose?

Impostazioni prima del test

Per impostare il test di velocità affinché sia il più possibile veritiero è opportuno partire dalle basi. Ecco il metodo che suggerisco:

In WordPress:

  • Disattivare plugin di cache e di ottimizzazione, se presenti. Se abbiamo attivato cache e plugin di ottimizzazione è meglio disattivarli perché vogliamo vederci chiaro su quali elementi vengono richiamati e sul peso reale di questi elementi 
  • Disattivare momentaneamente il cookie banner. Se abbiamo attivato un cookie banner è meglio disattivarlo perché in questo modo si identificano tutti gli script, anche quelli che vengono caricati soltanto dopo l’accettazione dei cookie.

Nel browser:

  • Attivare una finestra di navigazione in incognito. La navigazione in incognito non carica le eventuali estensioni del browser che falserebbero i tempi del test.

Impostazioni durante il test

Mentre impostiamo GTMetrix dobbiamo tenere a mente che vogliamo simulare il più possibile la modalità di navigazione e l’area geografica dei nostri utenti di riferimento. 

Quindi impostiamo una connessione mobile come LTE o 3G, e scegliamo il server più vicino al nostro pubblico. Queste opzioni si possono impostare registrandosi con un account gratuito.

Sito veloce: come impostare al meglio il test con GTMetrix - NUwebstudio

Attenzione a chi pubblica test con risultati super veloci!

Quando nei risultati di un test non viene specificato il tipo di connessione, il test si è svolto con una connessione illimitata. Ovviamente ci riescono tutti a caricare un sito in un secondo con la connessione illimitata. Il nostro scopo è diverso, vogliamo avere risultati vicini alla vera esperienza degli utenti mobili.

Quando è specificata la connessione, allora i tempi mostrati dai risultati sono più vicini alla realtà.

Come leggere e interpretare i risultati del test

Sito veloce: come leggere i risultati del test GTMetrix - NUwebstudio
nel leggere i risultati del test è meglio focalizzarsi sulle metriche importanti

GTMetrix assegna due punteggi di performance secondo le regole di Google PageSpeed e di Yslow, punteggi che potete tranquillamente ignorare.

Focalizzatevi invece sulla parte destra che mostra il tempo di caricamento, la pesantezza della pagina e le richieste al server. 

Il tempo di caricamento totale (Fully Loaded Time) è un risultato indicativo ma, come vedremo più tardi, i tempi delle diverse fasi di caricamento sono più importanti perché ci danno un'idea più dettagliata dei miglioramenti da fare.

Le viste analitiche di GTMetrix

La vista Timings, il Management Summary del test. Sotto il pannello con i voti, GTMetrix mostra una serie di viste analitiche e la prima, quella chiamata "PageSpeed", è mostrata per default. Anche qui ignorate momentaneamente questa vista e partite con la vista “Timings” che è un po' come il Management Summary del nostro test, con i tempi di tutte le fasi importanti del caricamento.

TTFB e qualità dell'Hosting Provider. Il primo intertempo, detto “Time to First Byte, è importante perché indica la performance del nostro hosting ed esprime il tempo impiegato per dare la prima risposta “OK, la pagina esiste”.

Gli hosting condivisi di bassa qualità spesso hanno un TTFB superiore a un secondo, in condizioni di stress a volte toccano i 2 secondi. Comprendete che con questi tempi è difficilissimo ottenere tempi soddisfacenti nelle fasi successive. Se il sito web è il fulcro delle vostre campagne pubblicitarie, è bene rivolgersi ad un Hosting Provider che permetta di ottenere un TTFB almeno inferiore ad 1 secondo.

Il TTFB viene suddiviso in sotto-fasi, di cui la prima è il Redirect (reindirizzamento). Se durante il caricamento non avvengono reindirizzamenti, questo indicatore è sempre a zero. Se invece, come nell'esempio, vediamo un risultato superiore allo zero, significa che il sito è stato reindirizzato. Più avanti trovate maggiori dettagli su questo punto.

Sito veloce: le varie fasi del caricamento di una pagina web - NUwebstudio
per evitare la fuga di utenti dobbiamo ottenere un Contentful Paint sotto i 3 secondi

Contentful Paint, il nostro obiettivo. I tempi di tutte le fasi successive sono sempre influenzati in parte dall'hosting, ma anche e soprattutto dal peso dei contenuti del sito. Di tutte le fasi, quella chiamata Contentful Paint indica il tempo impiegato per il rendering della parte visibile della pagina ed è quello che rappresenta più da vicino l’esperienza utente. Per questo motivo, il nostro obiettivo è di ottenere un tempo per il Contentful Paint inferiore a 3 secondi.

Un tempo basso per il First Contentful Paint sarà molto utile anche per essere in linea con le ultime direttive di Google che invece considerano il Largest Contentful Paint (cioè il contenuto più grande nella parte visibile della pagina) che dovrebbe essere caricato in meno di 2,5 secondi.

La Waterfall e i contenuti che rallentano il sito. Nella vista “Waterfall” vediamo la sequenza di tutti gli elementi caricati nella pagina, il loro tempo di caricamento e le dimensioni. Questi elementi possono provenire da temi, plugin, script esterni o contenuti.

Sito Veloce: come leggere la Waterfall di GTMetrix - NUwebstudio

Passando il mouse sopra ogni voce si vedrà il nome di ciascun elemento e con un clic si può vedere il dettaglio della richiesta e della risposta del server. 

La vista è ordinata per default con la sequenza di caricamento, ma si può ordinare per ognuna delle colonne (URL, Status, Domain, Size, ecc) e si può filtrare per tipo di contenuto (HTML, CSS, JS, immagini, font, ecc.). Può essere anche interessante ordinarla per dimensioni, così da vedere all’istante gli elementi più pesanti, tra cui sicuramente troverete le immagini.

L'URL di ciascun elemento visibile nella Waterfall ci fa intuire la sua provenienza, cioè il tema o plugin o il contenuto di cui fa parte.

Esaminando a fondo la Waterfall identifichiamo:

  • se c'è un elemento, e qual è, che blocca o rallenta il caricamento
  • se ci sono elementi particolarmente pesanti, quindi più lunghi da caricare
  • se ci sono elementi provenienti da temi o plugin, non necessari in quella pagina particolare.

Infatti forse non tutti sanno che moltissimi plugin caricano del codice in tutte le pagine, anche dove non è necessario

Nella figura sopra è evidenziato un elemento caricato dal plugin Woocommerce in una pagina che, esaminata, non contiene prodotti né altri elementi dello shop. Questo è un tipico esempio di elementi non necessari.

Ma ci sono altri casi conosciuti: ad esempio Contact Form 7, il plugin più famoso per i moduli di contatto, carica il suo codice anche nelle pagine dove non c’è il modulo.

I primi passi verso il sito veloce, senza usare il codice

Fatta l'analisi, sappiamo quali sono i blocchi principali al caricamento della nostra pagina e abbiamo davanti una scelta: ottimizzare il sito in proprio o affidarci ad uno specialista?

Per chi vuole cimentarsi in proprio con l'ottimizzazione del sito, questo articolo propone un metodo, una sequenza - testata qui in NUwebstudio e a mio avviso davvero valida - e alcuni strumenti che non richiedono la conoscenza del codice. L’unico pre-requisito è quello di conoscere i componenti, cioè il tema e i plugin installati nel sito e il compito di ciascuno di questi. La sequenza ha uno scopo preciso e consiste in:

Riduzione e compressione delle immagini -> Pulizia del codice -> Compressione del codice -> Attivazione della Cache -> Opzioni del server

Teniamo presente che qui parliamo di interventi adatti alla maggior parte dei siti aziendali che sono relativamente semplici anche se corposi. Se avete un sito complesso invece è meglio affidare il lavoro ad uno specialista.

Allo stesso modo, è meglio affidare l'ottimizzazione ad uno specialista se non si conosce la materia o se non si ama sperimentare, oppure in presenza di un sito complesso o particolarmente difficoltoso la cui ottimizzazione richiede un vero e proprio lavoro di cesello sul codice.

Ridurre e comprimere le immagini

Durante la lettura della Waterfall sicuramente fra i file più pesanti avremo trovato dei file di immagini, e questo sarà il nostro primo step di ottimizzazione, soprattutto se è compito nostro, come proprietari di un sito, di inserirvi i contenuti.

Le immagini sono uno dei fattori che influenzano maggiormente il peso di una pagina web a causa delle dimensioni dei file. In particolare le immagini Hero o gli slider, che di solito sono posti all'inizio della pagina, hanno una grande influenza sull'indicatore First Contentful Paint e meritano quindi una particolare attenzione.

Abbiamo trattato ampiamente l'argomento delle immagini per il web nell'articolo Tutto sulle immagini per il sito web, a cui vi rimandiamo per approfondire. In questo post ci limitiamo a indicare il metodo giusto per ottimizzare le immagini:

  • Ridurre ogni immagine alle dimensioni che occuperà all'interno della pagina
  • Comprimere il file il più possibile mantenendo una buona qualità
  • Convertire le immagini, se necessario, nel formato più adatto

Per tutte queste operazioni possiamo usare gli stessi strumenti di fotoritocco che usiamo normalmente. Ci sono inoltre dei compressori dedicati, alcuni da installare sul computer, altri disponibili online.

Sito veloce: come ottimizzare le immagini per il web - NUwebstudio

Queste operazioni vanno svolte prima di caricare le immagini nel sito. Per una ulteriore compressione delle immagini possiamo installare un plugin apposito. I plugin migliori, oltre a ridurre e comprimere, adattano automaticamente le immagini alle giuste dimensioni e le servono nel nuovo formato WebP dove supportato.

Due plugin che abbiamo testato e che raccomandiamo, sono ShortPixel e Imagify. E' importante però non lasciare a loro tutto il lavoro di riduzione e compressione, per non caricare troppo il nostro server e per risparmiare spazio disco.

Ripulire il codice

La fase di pulizia del codice consiste nel rimuovere quegli elementi caricati ma inutilizzati.

Questa operazione è di livello più tecnico ma ancora una volta ci vengono in aiuto strumenti che ci evitano di intervenire direttamente sul codice, come ad esempio il plugin Asset Cleanup che mostriamo in questo articolo. Un altro plugin che merita una citazione è l'ottimo Perfmatters.

Asset Cleanup aggiunge un pannello in coda ad ogni pagina pubblicata, nel quale mostra tutti i componenti caricati in quella pagina dal core WordPress, dal tema e dai plugin attivi, e permette di disattivare gli elementi non utilizzati.

La disattivazione è possibile solo nella pagina esaminata oppure in tutto il sito con l’eccezione della pagina esaminata.

Un esempio su tutti: come già detto prima, il plugin Contact Form 7 carica i suoi stili e script in tutte le pagine del sito. Con Asset Cleanup è possibile disattivare gli script e gli stili ovunque, ad eccezione delle pagine dove effettivamente verranno impiegati.

Sito veloce: come impostare il plugin Asset Cleanup - NUwebstudio

Oltre a questo, Asset Cleanup gestisce anche diverse impostazioni più tecniche per ottimizzare il codice, che vediamo tra poco.

Un vantaggio di Asset Cleanup è che dispone di una modalità di test che anticipa i risultati delle nostre ottimizzazioni senza modificare ciò che vedono gli utenti dall'esterno.

Ottimizzare il codice rimanente

Come detto prima, Asset Cleanup controlla anche impostazioni tecniche di ottimizzazione. Infatti, dopo aver ripulito il codice dai componenti inutilizzati possiamo ottimizzare il codice rimanente. Per questa operazione, oltre ad Asset Cleanup esistono molti plugin specializzati. Che cosa fanno?

In breve, ottimizzare il codice significa:

  • comprimere il codice dei file di stile, degli script e volendo dello stesso codice html
  • concatenare i file di stile e gli script, (ma questa operazione è sconsigliata se si utilizza un hosting moderno o, più precisamente, un hosting che serve le pagine attraverso HTTP/2.
  • ritardare l’esecuzione degli script per dare precedenza al caricamento dei contenuti visibili dall'utente accelerando la fase "First Contentful Paint"
  • ritardare il caricamento delle immagini non visibili above the fold. A partire da WordPress 5.5 questa funzione è inclusa nel core.

Tra i plugin di ottimizzazione, oltre ad Asset Cleanup, abbiamo testato i seguenti:

  • Pagespeed Ninja
  • Autoptimize
  • Wp Rocket (fa ottimizzazione e cache, che spiego più avanti)
  • SG Optimizer (riservato a chi ha hosting Siteground).
Sito veloce: che cosa fa un plugin di ottimizzazione - NUwebstudio

Attivare una Cache

Nei siti creati con CMS come WordPress, ogni volta che un utente richiede una pagina web avvengono alcune chiamate al relativo database. Queste chiamate possono appesantire il carico sul server e rallentare il caricamento delle pagine. Il compito della Cache è quello di salvare una copia statica di ogni pagina effettuando preventivamente le chiamate al database, e poi servire questa copia statica (più veloce) a chi la richiede.

Alcuni hosting forniscono anche un servizio di cache già configurato per le migliori prestazioni, così che dobbiamo solo assicurarci che sia attivo. In altri casi possiamo usare un plugin che svolge questo compito. Eccone alcuni testati qui in NUwebstudio:

  • SG Optimizer (per Siteground)
  • WP Fastest Cache
  • WP Optimize
  • WP Rocket 
  • WP Super Cache

Alcuni plugin sono più semplici da configurare, altri richiedono maggiori conoscenze tecniche.

Per questo motivo raccomando sempre tre cose:

  1. Prima di installare un plugin di cache è consigliabile aver ripulito e ottimizzato il codice, altrimenti anche la copia in cache sarà ingombrante e lenta
  2. Meglio verificare se il proprio hosting fornisce questa opzione, e in caso positivo utilizzare quella per evitare di installare ulteriori plugin
  3. La cache va configurata in base alle caratteristiche dell'hosting e del sito web. Una configurazione incompleta o incorretta non migliora la velocità del sito.
Sito Veloce: che cosa fa un plugin di cache - NUwebstudio

Impostazioni dell'hosting

Da ultimo possiamo utilizzare alcune ottimizzazioni del nostro hosting, ove disponibili. Queste non si attivano dalla bacheca WordPress, ma dal pannello di gestione dell'hosting:

  • aggiornare la versione PHP 
  • E attivare la compressione GZIP

Entrambe queste opzioni aumentano la performance del server e quindi la velocità di caricamento delle pagine. Se l'hosting le rende disponibili, sono vivamente raccomandate.

I risultati: un esempio interessante

In questo interessante esempio testato sulla home page di un sito semplice e non particolarmente lento, abbiamo ridotto i tempi di caricamento totali da 3.4 a 2 secondi, le dimensioni della pagina da 900 a 671 KB e infine il numero di richieste da 41 a 26, usando il metodo esposto in questa guida, senza peraltro poter intervenire sulle impostazioni dell'hosting.

Sito veloce: un esempio di test e dei risultati - NUwebstudio

Questi risultati sono stati testati con la simulazione della connessione cellulare 4G, la più diffusa in Italia.

L'esempio è interessante perché - capita più spesso di quanto si pensi - pur riducendo il tempo totale di caricamento abbiamo dovuto mantenere o, in questo caso, appena peggiorare il tempo del primo caricamento (First Contentful Paint), pur mantenendolo sempre molto basso. Mentre una differenza di un secondo è sicuramente percettibile dall'utente, non lo è una differenza di 0,1 secondi.

Naturalmente i risultati che è possibile raggiungere dipendono dal sito in questione: una home page piena di slider e di animazioni raramente potrà raggiungere un tempo di caricamento veloce o anche accettabile.

Conclusioni

Siamo arrivati in fondo a questa guida. Se avete letto fin qui avete capito che la lentezza delle vostre pagine vi fa perdere contatti, quindi clienti potenziali. Come porre rimedio alla cosa?

  1. Siate consapevoli della performance del vostro sito: testatelo con gli strumenti di GTMetrix e di Google, misurate il TTFB (time to first byte) per capire la performance dell'hosting, misurate il FCP (first Contentful Paint), misurate il tempo di caricamento totale, il peso della pagina, il numero di componenti caricati. Leggete la Waterfall, osservate quali componenti e quali immagini sono più pesanti o si caricano più lentamente
  2. Riducete e comprimete le immagini
  3. Disattivate i componenti inutili caricati nella pagina
  4. Ottimizzate il codice rimanente con gli strumenti di compressione
  5. Attivate la cache
  6. Operate sulle impostazioni dell'Hosting, se potete.

Come abbiamo detto, questi sono i primi passi ma l'esperienza utente risulterà sicuramente migliorata.

Lavorare sulla velocità delle pagine esistenti ci ricorda anche che i siti vanno progettati non solo per l'estetica ma anche e soprattutto intorno all'esperienza utente: nella costruzione o nel restyling del vostro sito, sicuramente ricorderete l'importanza di progettare pagine semplici, chiare e leggere da caricare.

One more thing...

Dopo tanti consigli, questo è davvero l'ultimo suggerimento:

Quando condividete il link al vostro sito, ad esempio nelle pagine social oppure nella firma di posta elettronica, indicate il link effettivo per rendere la navigazione al vostro sito più veloce.

Ho visto invece molte persone indicare il link al proprio sito come si faceva tempo fa, “www.esempio.it" mentre, ormai da anni:

  • un sito può essere servito via http oppure https
  • Il nome a dominio può essere o non essere preceduto da WWW.

Allora vi ricordate quando vi parlavo del Time To First Byte? in questo esempio, degli 0,9 secondi del tempo TTFB, quasi la metà sono dovuti ai reindirizzamenti (Status 301) dal dominio cercato a quello effettivo.

Sito veloce: evitare i reindirizzamenti indicando il link effettivo al proprio sito - NUwebstudio

Vi invito quindi a controllare, nella Waterfall o semplicemente nella barra degli indirizzi del browser, qual è il link effettivo al vostro sito e a condividere sempre quello.

Fonti e approfondimenti

Google: The Need For Mobile Speed, 2016

Google: Timing for page experience

Foto: Digital Buggu da Pexels

La condivisione è crescita
16/11/2020

ISCRIVITI alle NUz

Il Digital Marketing per il tuo biz: guide operative e notizie selezionate, una volta al mese nella tua inbox
ISCRIVITI QUI
CONSIGLIATO
16/11/2020
Il sito veloce, senza codice

La giusta sequenza per ottenere un sito veloce con Wordpress: impostare correttamente i test di velocità, leggere e interpretare i risultati del test, utilizzare le tecniche e i plugin che permettono di migliorare la velocità del sito senza leggere o scrivere codice.

26/10/2020
I siti web attivi nel mondo? Quasi 200 milioni

I siti web attivi nel mondo sono quasi 200 milioni. E' ancora possibile emergere su Google in un World Wide Web così affollato? Come può una PMI gettare le basi per uno sviluppo digitale nel 2020.

21/09/2020
L'Impresa online: sito web o profilo social? come scegliere.

La semplicità e la diffusione dei social network induce alcune piccole aziende a puntare tutta la propria strategia online sui canali social trascurando il sito web. Fanno bene o fanno male? Scopriamolo in questo articolo.

Correlati

26/10/2020
I siti web attivi nel mondo? Quasi 200 milioni

I siti web attivi nel mondo sono quasi 200 milioni. E' ancora possibile emergere su Google in un World Wide Web così affollato? Come può una PMI gettare le basi per uno sviluppo digitale nel 2020.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram