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 qmXEt51tQQfe5kaiv2vg
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 proprio dal divulgare questi risultati!

Risultati speed test

PageSpeed Insight, lo speed test di Google. Nel bene e nel male è considerato il benchmark del settore. 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. Nel nostro caso abbiamo pubblicato quelli che riportano i valori ottenuti con maggior frequenza.

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 giri 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;
  • 2 widget per le donazioni che si aprono in pop-up cliccando sui rispettivi link nella parte finale di 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;
  • form contatti che si apre in pop-up cliccando in diversi punti (sticky header, parte finale di ogni articolo, footer);
  • 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 è facilmente riproducibile e viene aggiornato all’occorrenza dalla nostra redazione, quindi è quello effettivamente in uso al momento.

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

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 riprodotta su tutti i server del network del CDN a cui accedono i visitatori.

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

Tema WordPress: Soledad con tutte le funzioni del Penci Speed Optimizer abilitate tranne quelle indicate nella sezione Install cache. 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 tema per Lazy Bit 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, che tra l’altro includono il prefetch degli URL con diverse modalità.

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. In caso di PNG decrementiamo il numero di colori a 16 o 256 attraverso il comando Image > Decrease Color Depth prima di salvare il file dell’immagine da pubblicare.

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 della versione dell’articolo che stai leggendo 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, utilizzo di plugin solo se 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 del tuo sito usa l’estensione per Chrome Classic Cache Killer su un browser Chromium-based su cui non sei loggato all’amministrazione di WordPress. Una buona opzione è Brave. Mantieni abilitata Classic Cache Killer mentre navighi sul tuo sito, così avrai sempre l’esperienza della “prima visita” invece di quella che viene dalla cache locale del browser. La cache del browser viene automaticamente cancellata appena prima di caricare ogni pagina. E no, l’incognito mode non aiuta in questo perché anch’esso attinge alla cache del browser con inarrestabile prepotenza.

Conclusioni

Il nostro metodo non è migliore di altri, ma è possibile applicarlo con relativa semplicità e senza affrontare spese eccessive. 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