Home UX Ottimizzare un sito web e andare a 100 negli speed test, metodo Lazy Bit

Ottimizzare un sito web e andare a 100 negli speed test, metodo Lazy Bit

by t8FzISD6CylrAFNPYsol
Pubblicato: Ultimo aggiornamento

Come avere un sito web super veloce su mobile e su desktop? Noi ci siamo riusciti e ti spieghiamo nei dettagli come puoi farlo anche tu senza affrontare spese inutili.

Perché ottimizzare un sito web

Quello dell’ottimizzazione dei siti web è un trend consolidato. La maggioranza dei webmaster vuole rendere il sito più veloce, offrire una migliore esperienza ai visitatori e ottenere buoni risultati con i motori di ricerca per sé o per i propri clienti.

In questo nostro articolo c’è un’accurata descrizione di come abbiamo raggiunto gli attuali risultati proprio per il sito su cui adesso stai leggendo queste parole. Non abbiamo alcun interesse economico a promuovere i servizi descritti più avanti, il nostro unico intento è la divulgazione. Quindi partiamo!

Risultati speed test

PageSpeed Insight è lo speed test di Google. Nel bene e nel male è considerato il benchmark del settore, anche e soprattutto perché si spera che buoni valori si riflettano su buoni piazzamenti nel ranking. Ecco a sinistra il risultato per mobile e a destra quello per desktop.

PageSpeed Insight test

GTmetrix è più configurabile di PageSpeed Insight e fornisce informazioni preziose per fare progressi. Agli utenti registrati consente anche di cambiare la Test Server Location, che PageSpeed Insights neanche rivela. La loro Waterfall Chart è un’ottima funzione che visualizza ogni singolo elemento della pagina che il browser scarica.

GTmetrix test

Pingdom offre funzionalità piuttosto limitate con il suo servizio gratuito, e i risultati variano molto a seconda del server selezionato per effettuare il test.

Pingdom test

Fast or Slow è il più giovane degli speed test. Il suo punto di forza è nell’eseguire l’analisi contemporaneamente da più server dislocati in diverse parti del mondo. Il report generato include i risultati per ogni singolo server e mostra anche una forma aggregata dei valori ottenuti, come raffigurato in questa immagine.

Fast or Slow test

WebPageTest è uno strumento orientato verso test approfonditi per le prestazioni piuttosto che a misurare l’usabilità. Fornisce opzioni per diverse test location, velocità di connessione variabile, browser mobili, anteprime video, waterfall e test multipli. Il risultato A sul Security Score è stato ottenuto con un lavoro svolto sui Security Header.

WebPageTest test

Cloudflare site speed test tool attesta il grado di miglioramento delle prestazioni del nostro sito a seguito dell’utilizzo del loro servizio di CDN (vedi sezione Setup di Lazy Bit più avanti in questo articolo).

Cloudflare site speed test tool

A questo punto dovremmo cambiare il nostro nome in Not-so-lazy Bit, giusto? :) Come puoi notare tutti i risultati dei test qui pubblicati riguardano la nostra home page. Si è scelto così per semplicità e coerenza, in realtà vengono fuori i medesimi risultati per tutte le pagine del sito, anche quelle più ricche di contenuto. Questo puoi verificarlo tu stesso effettuando i singoli test, e volendo puoi cliccare qui per effettuare il PageSpeed Insight per la pagina dell’articolo che stai leggendo.

I risultati degli speed test sono soggetti a fluttuazioni in base a diversi fattori che riguardano network e server utilizzati, quindi è possibile che test ripetuti diano esiti diversi anche se eseguiti a breve distanza di tempo. In questo articolo abbiamo pubblicato i risultati più vicini a quelli mediamente ottenuti eseguendo i test più volte.

Esperienza utente

Gli speed test sono dei metodi per “misurare” in modo standard il grado di performance di una pagina web. In realtà quello che conta davvero è l’esperienza utente del visitatore, nel caso specifico la velocità percepita. Se navighi un po’ per il nostro sito noti che i risultati dei test rispecchiano quello che si percepisce ad occhio nudo, ossia una velocità di visualizzazione delle pagine estremamente alta.

Questo sito è allo stesso tempo un laboratorio sperimentale di esperienza utente (UX) e un blog di Tecnologia a tutti gli effetti. Per ottenere e conservare questi risultati in termini di performance non sacrifichiamo la presenza di alcun elemento tipico di un blog. Come puoi vedere in ogni pagina ci sono:

  • immagini di buona qualità;
  • barra menu fissa in alto (sticky header);
  • form per iscrizione alla newsletter nella colonna laterale fissa (sticky sidebar) su schermi abbastanza grandi o dopo ogni articolo su schermi più piccoli;
  • indice dei contenuti all’inizio in ogni articolo;
  • icone social per sharing e following;
  • thumbnail che linkano a molteplici articoli;
  • sezione in fondo alla pagina (footer) con informazioni su chi siamo;
  • cookie bar.

Ora è il momento di svelare il setup di Lazy Bit, ossia i componenti del sistema utilizzato per ottenere questi risultati sul nostro sito. Sei pronto? Parliamo di velocità, quindi tieniti forte!

Setup di Lazy Bit

Il seguente setup è facile da implementare ed è quello che usiamo al momento. Aggiorneremo l’articolo in caso di cambiamenti.

Webhost: FastComet, piano shared FastCloud Plus con server in Germania. Non offre alcun tipo di server-level cache. HostMantis, piano Shared Entry con server in UK.

CDN (Content Delivery Network): Cloudflare, piano Free (gratuito). Un CDN serve ad ospitare il sito su più server distribuiti in tutto il mondo, a differenza del server unico che un normale webhost rende disponibile. In questo modo viene ridotta la distanza geografica fra il server e i visitatori. In pratica ogni modifica effettuata sul server del webhost viene automaticamente replicata su tutti i server del network del CDN a cui accedono i visitatori. Per sapere come configurare Cloudflare per funzionare al meglio con WordPress leggi la guida di BikeGremlin.

CMS (Content Management System): WordPress, che nativamente non è proprio veloce come una scheggia ma è una buona base su cui lavorare.

Tema WordPress: Soledad. Questo tema integra nativamente lazy load e ottimizzazione di CSS, JS e HTML raggiungendo risultati migliori di quelli ottenibili con i plugin di WordPress normalmente utilizzati allo scopo. Sulla scelta del nostro tema abbiamo pubblicato un articolo dedicato.

Cache: plugin WP Cloudflare Super Page Cache, che va installato dopo aver attivato il servizio di Cloudflare. Il plugin ufficiale di Cloudflare non deve essere abilitato. Di default Cloudflare genera la cache solo per i file statici (CSS, JS, immagini etc.), ma grazie a questo plugin viene generata la cache anche per le pagine html senza creare problemi in amministrazione. La cache oltre ad essere generata sul network di Cloudflare viene generata anche sul server del webhost. La seconda entra in azione quando la prima non riesce a soddisfare le richieste. È un plugin relativamente poco conosciuto ma geniale nella concezione e nell’esecuzione delle sue funzioni.

Page preloading: plugin Flying Pages by WP Speed Matters sviluppato dal guru della velocità Gijo Varghese. Funziona giocando in anticipo e carica in cache l’HTML delle pagine interne prima del click del visitatore. Semplicemente geniale.

Ottimizzazione immagini: IrfanView per Windows, gratuito per uso non commerciale. Usiamo il formato PNG per le immagini con pochi e ben separati colori e WebP per le immagini fotografiche.

Per i PNG decrementiamo il numero di colori portandoli fra 16 (4 BPP) e 256 (8 BPP) attraverso il comando Image > Decrease Color Depth prima di salvare il file dell’immagine da pubblicare. Pro tip: Wordpress nella generazione delle thumbnail ignora il numero di colori e automaticamente lo incrementa a 16.7 milioni (24 BPP). Per questo motivo generiamo anche versioni della stessa immagine aventi dimensioni uguali a quelle delle thumbnail effettivamente utilizzate dal tema. Infine ne facciamo upload via FTP sovrascrivendo quelle generate da WordPress con le nostre che hanno fra 16 e 256 colori.

Ecco raffigurate le impostazioni di salvataggio file utilizzate in IrfanView per entrambi i formati. L’interfaccia mostrata è in inglese, ma è disponibile in più lingue.

ottimizzare un sito web significa anche ottimizzarne le immagini

IrfanView “ricorda” le ultime opzioni utilizzate per ogni singolo formato in occasione del salvataggio precedente, quindi nella maggior parte dei casi generare il file di cui fare upload tramite il Media Library di WordPress è questione di un paio di clic.

Al momento dell’ultimo aggiornamento di questo articolo il formato WebP non è ancora supportato dal 100% dei browser, puoi controllarne i dati di diffusione aggiornati su Can I use. È possibile utilizzare il plugin per WordPress WebP Converter for Media che mostra al visitatore un’immagine JPG o la corrispondente auto-generata WebP in base alla compatibilità del browser, ma è un metodo che non supporta Cloudflare e quindi la sua adozione è incompatibile col nostro setup.

Fin qui abbiamo descritto la nostra procedura di ottimizzazione delle immagini prima della pubblicazione. Se invece vuoi ottimizzare immagini già pubblicate (originali e thumbnail generate da WordPress) allora leggi la nostra guida sull’argomento.

Sul sito di Shortpixel abbiamo effettuato l’Image Optimization Quick Test per la pagina di questo articolo, che è ricca di immagini. Ecco il risultato:

Image Optimization Quick Test
Qui ci dicono che non c’è alcunché da migliorare :)

Analytics: Koko Analytics perché non ha alcun impatto sulla velocità del sito, rispetta la privacy dei visitatori e viene ignorato dagli ad blocker. Spieghiamo più estesamente la scelta nella nostra pagina della Privacy Policy, così quest’ultima serve a qualcosa :)

Criteri generali del setup: layout minimal, plugin di buona qualità e se davvero necessari.

Da evitare: form contatti Forminator, che è in perenne conflitto con l’optimizer interno di Soledad e con qualsiasi plugin di cache provato.

Pro tip: per avere la percezione della velocità reale in occasione della prima visita sul tuo sito da desktop usa Chrome in modalità Incognito, di modo da riprodurre il setup più comune dei visitatori. Di default in Incognito non c’è alcuna estensione attivata, ma dovresti installare Incognito Mode Reset Button e attivarla per cancellare history, cookie e cache all’occorrenza. I visitatori normali non disabilitano la cache del loro browser, quindi se vuoi simulare di essere uno di loro NON selezionare Disable Cache in DevTools.

Conclusioni

Il nostro metodo non è migliore di altri, ma è possibile applicarlo con relativa semplicità e senza affrontare costi extra. Ottimizzare un sito web non è un virtuosismo tecnico fine a se stesso. L’obiettivo è quello di migliorare l’esperienza utente dei visitatori e aumentare il grado di apprezzamento da parte dei motori di ricerca sempre più sensibili al fattore velocità. Poi facci sapere com’è andata!

Questo articolo è stato pubblicato anche in inglese.

Sentiti libero di contattarci per segnalare eventuali errori, dare suggerimenti o semplicemente per salutarci.

Se trovi che questo articolo sia utile offrici un caffè, puoi farlo anche in criptovaluta.


Share

Scorrendo questa pagina verso il basso potresti trovare altri articoli di tuo interesse, dai un'occhiata :)

Questo sito usa i cookie, quelli buoni OK Privacy Policy