Ottimizza un sito web e vai a 100 negli speed test, metodo altsetup

Also available in
fast website

Vuoi 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 per questo sito. Non abbiamo alcun interesse economico a promuovere i servizi descritti più avanti, il nostro unico intento è la divulgazione. Quindi partiamo!

Risultati speed test per altsetup

PageSpeed Insight è lo speed test di Google. Nel bene e nel male è considerato il benchmark del settore. È ampiamente documentato che la velocità di caricamento è un fattore di piazzamento per il motore di ricerca di Google stessa. Il nostro punteggio è 100 per entrambi desktop e mobile su tutte le pagine. Puoi verificare da te eseguendo il test per la nostra home page. Comunque qui sotto c’è un’immagine del risultato, fai caso anche alle “metrics”.

pagespeed insight mobile

Ci sono altri servizi di speed test, li trovi tutti elencati e pronti all’uso su Chckr. Meritano particolare attenzione GTmetrix, WebPageTest e SpeedVitals.

I punteggi negli speed test sono importanti?

Gli speed test sono i principali strumenti per misurare le performance del tuo sito web, quindi i punteggi ottenuti posso guidarti al meglio nell’ottimizzazione.

Questi punteggi 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.

Uno degli argomenti più utilizzati per screditare l’importanza dei punteggi degli speed test è in affermazioni del tipo Questo sito carica velocemente sul mio computer, questo significa il punteggio basso non ha importanza. Le persone che visitano il tuo sito vivono in diverse parti del mondo e hanno differenti dispositivi e connessioni. Questo significa che potrebbe caricare più velocemente o più lentamente a seconda di questi fattori. Alcuni “lab test” come PageSpeed Insight mobile riproducono condizioni meno favorevoli per vedere il tuo sito come se la cava.

Un’altra tipica obiezione è Devi piacere ai tuoi visitatori, non a Google. Tutti sappiamo che se non piacciamo a Google, non abbiamo visitatori a cui piacere. Triste ma vero, tutto quello che conta per il ranking sono le Core Web Vitals. Su questo puoi leggere l’eccellente articolo di Kishorchand Thangjam.

La presunta bassa priorità è un pretesto spesso adottato per minimizzare l’importanza di raggiungere buoni risultati in termini di ottimizzazione e velocità. Qualcuno afferma che sia più importante creare contenuti di buona qualità piuttosto che impiegare tempo ed energie per mostrarli velocemente ai visitatori. In realtà tutte e due le cose sono importanti, e nulla impedisce di farle entrambe.

Spesso chi afferma che i risultati degli speed test non contano lo fa guidato dalla frustrazione di non riuscire a ottenere buoni risultati, un po’ come ne La volpe e l’uva 🙂

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 di noi;

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

Setup di altsetup (gioco di parole involontario)

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

Hosting: non importa, e spieghiamo il perché in un’intervista. Al momento è HostMantis, piano Shared Entry con server in UK.

CDN (Content Delivery Network): Cloudflare, piano Free (gratuito). Una CDN serve ad ospitare il sito su più server distribuiti in tutto il mondo, a differenza del server unico che un tradizionale fornitore di web hosting rende disponibile. In questo modo viene ridotta la distanza geografica fra il server e i visitatori. In pratica ogni modifica effettuata sul server dell’hosting 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 degli sviluppatori di Perfmatters.

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

Tema WordPress: Kadence. È il miglior compromesso fra ricchezza di funzionalità e performance.

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. Il risultato è una full-page cache analoga a quella che puoi ottenere con l’add-on di Cloudflare Automatic Platform Optimization (APO). La cache oltre a essere generata sul network di Cloudflare viene generata anche sul server dell’hosting. 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.

Lazy Loading: plugin Perfmatters. Il principio è quello di caricare i file solo quando l’utente che visita una pagina ne ha bisogno, quindi non prima. Non tutte le risorse sono rilevanti per il rendering iniziale della pagina, e ritardarle può migliorare il tempo iniziale di caricamento. Il Lazy Loading può essere applicato a JavaScript (delaying, deferring), CSS (eliminazione dell’unused), HTML, fonts, immagini, iframes.

Prima dell’interazione del visitatore, altsetup carica solo il file HTML e eventuali immagini da visualizzare subito. Il risultato è che le pagine degli articoli caricano due file, HTML e immagine in evidenza. Come demo, abbiamo un articolo che invia al network solo la richiesta dell’HTML.

Ottimizzazione immagini: SVGOMG (web) per le immagini SVG e IrfanView (Windows) per le immagini PNG e WebP. Usiamo SVG per illustrazioni e icone, PNG per immagini con pochi e ben separati colori e WebP per 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.

Ecco raffigurate le impostazioni di salvataggio file utilizzate in IrfanView per PNG e WebP. 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.

Considerando il nostro layout abbiamo deciso di disabilitare la generazione automatica di immagini di dimensioni minori che avviene normalmente al momento dell’upload nella Media Library di WordPress. Uno dei limiti di questa generazione automatica è che avviene con parametri fuori controllo. Ad esempio per i PNG il numero di colori viene incrementato automaticamente a 16.7 milioni (24 BPP).

Puoi disabilitarla dalla dashboard di WordPress in Settings > Media in questo modo:

wordpress media settings

Per i nostri articoli usiamo immagini con larghezza massima di 768 px, che è uno standard. In questo modo non viene generata alcuna immagine di dimensioni minori e la visualizzazione è adatta a ogni dispositivo. Facendo così abbiamo il completo controllo di cosa viene mostrato senza perdere tempo in ottimizzazioni successive. Un altro effetto positivo di questa scelta è che non viene generata una moltitudine d’immagini inutili che contribuisce solo ad aumentare lo spazio occupato sul tuo hosting.

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.

Statistiche delle visualizzazioni del sito: Statify 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 🙂

Suggerimenti

  • Adotta un layout minimale, è quello che piace alle persone
  • Usa plugin di buona qualità e solo se davvero necessari
  • Non usare page builders come Elementor, Divi etc.

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!

Sentiti libero di contattarci per segnalare eventuali errori, dare suggerimenti o semplicemente per salutarci. Siamo disponibili anche per consulenze.

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

Potresti trovare altri articoli di tuo interesse su Tecnologia, UX e altro, scorri la pagina verso il basso.