Come aumentare la velocità del sito - Guida a PageSpeed

La velocità del sito non è solo una questione di esperienza utente: è un fattore di ranking diretto su Google. Dal 2021, le metriche di velocità del sito di Google fanno parte dell'algoritmo di ranking, e Google PageSpeed Insights è lo strumento che mostra quanto bene si comporta il tuo sito. In questa guida vedremo i passi concreti per migliorare il tuo punteggio.

Comprendere le metriche di PageSpeed

Google PageSpeed Insights misura sei metriche chiave che insieme compongono il punteggio complessivo. Il Largest Contentful Paint (LCP) misura la velocità con cui si carica l'elemento visibile più grande della pagina - idealmente sotto i 2,5 secondi. L'Interaction to Next Paint (INP) misura la velocità con cui la pagina risponde alle interazioni dell'utente - idealmente sotto i 200 millisecondi.

Il Cumulative Layout Shift (CLS) misura la stabilità visiva della pagina - quanto si spostano gli elementi durante il caricamento. Il valore ideale è inferiore a 0,1. Il First Contentful Paint (FCP) misura quando appare il primo contenuto sullo schermo. Il Time to First Byte (TTFB) misura la velocità con cui il server risponde alla richiesta. Il Total Blocking Time (TBT) misura per quanto tempo il thread principale rimane bloccato.

Ottimizzazione delle immagini - l'impatto più grande

Le immagini sono la causa più comune di un sito lento. Una foto da 5 MB non ottimizzata può rallentare il caricamento della pagina di diversi secondi. Ecco cosa fare.

Innanzitutto, usa i formati di immagine moderni. Il formato WebP offre una dimensione dal 25 al 35% inferiore rispetto al JPEG a parità di qualità. AVIF va ancora oltre, con una dimensione inferiore del 50%, ma non ha un supporto completo in tutti i browser. Per WordPress, i plugin ShortPixel o Imagify convertono automaticamente le immagini in WebP.

Le dimensioni dell'immagine devono corrispondere alla dimensione di visualizzazione. Se un'immagine viene mostrata a 800x600 pixel, non ha senso caricare un originale da 4000x3000. Usa l'attributo srcset per le immagini responsive che si adattano alle dimensioni dello schermo.

La compressione è fondamentale: per la maggior parte delle immagini web, una qualità dell'80-85% è più che sufficiente. La differenza tra una qualità dell'85% e del 100% è impercettibile a occhio nudo, ma la differenza nelle dimensioni del file può essere enorme.

Lazy Loading - carica solo ciò che è visibile

Il lazy loading rinvia il caricamento delle immagini e delle altre risorse fino a quando l'utente non vi scorre sopra. Questo riduce drasticamente il tempo di caricamento iniziale della pagina, perché il browser non deve scaricare tutte le immagini in una sola volta.

Nell'HTML moderno, il lazy loading è banalmente semplice: basta aggiungere l'attributo loading="lazy" ai tag img. La piattaforma CMS WordPress aggiunge automaticamente il lazy loading a tutte le immagini dalla versione 5.5. Fai solo attenzione a non applicare il lazy loading alle immagini nella parte "above the fold" della pagina (immagini hero, logo), perché ciò può influire negativamente sulla metrica LCP.

Per gli iframe (video di YouTube, Google Maps), il lazy loading è particolarmente importante perché queste risorse possono essere estremamente pesanti. Invece di un embed diretto, valuta la possibilità di mostrare un'immagine in miniatura con un pulsante di riproduzione che carica l'iframe solo al clic.

Caching - non caricare due volte la stessa cosa

Il caching del browser consente di memorizzare le risorse statiche (immagini, CSS, JavaScript) nel browser del visitatore. Quando un utente torna sul tuo sito, queste risorse vengono caricate dal suo computer invece che dal server - all'istante.

Su BeoHosting, con un server LiteSpeed avanzato, il caching è eccezionalmente efficiente. LiteSpeed Cache per WordPress crea automaticamente versioni HTML statiche delle tue pagine, eliminando la necessità di elaborazione PHP e di query al database a ogni richiesta.

Configura gli header Cache-Control per i diversi tipi di file. Per immagini, CSS e file JS, imposta una durata di cache lunga (ad esempio 1 anno). Per le pagine HTML, usa una durata più breve o la rivalidazione, così le modifiche ai contenuti appaiono rapidamente.

Minificazione di CSS e JavaScript

La minificazione rimuove spazi bianchi, commenti e formattazione superflui dai file CSS e JavaScript, riducendone le dimensioni. Per un sito tipico, la minificazione può ridurre la dimensione del CSS del 10-30% e quella del JavaScript del 20-40%.

Per WordPress, il plugin LiteSpeed Cache ha la minificazione e la combinazione di file CSS/JS integrate. Autoptimize è un'ottima alternativa. Fai attenzione con la combinazione dei file JavaScript, perché può causare conflitti tra i plugin - testa accuratamente dopo averla attivata.

La tecnica del Critical CSS estrae il CSS necessario a renderizzare i contenuti "above the fold" e lo inserisce direttamente nell'HTML, mentre il resto del CSS si carica in modo asincrono. Questo migliora drasticamente le metriche FCP e LCP.

Ottimizzazioni lato server

La scelta del provider di hosting e la configurazione del server hanno un impatto enorme sulla velocità del sito. BeoHosting utilizza il server LiteSpeed Enterprise, dischi NVMe SSD e CloudLinux per prestazioni ottimali. Consulta i nostri piani di hosting.

La compressione GZIP o Brotli riduce la dimensione dei dati trasferiti del 60-80%. Su BeoHosting, la compressione Brotli è abilitata automaticamente per tutti i siti. I protocolli HTTP/2 e HTTP/3 consentono il caricamento parallelo di più risorse su un'unica connessione, accelerando notevolmente il caricamento delle pagine con molte immagini, stili e script.

PHP OPcache memorizza in memoria il codice PHP compilato, eliminando la necessità di ri-analizzarlo e ri-compilarlo a ogni richiesta. Su BeoHosting, OPcache è abilitato e configurato in modo ottimale automaticamente.

Ottimizzazione dei font

I web font possono rallentare notevolmente il caricamento della pagina. I Google Fonts, per quanto diffusi, richiedono ulteriori ricerche DNS e download da un server esterno. Valuta l'ospitare i font in locale (self-hosting) - scarica i file dei font e servili dal tuo stesso server.

Usa font-display: swap nel CSS, così il testo è immediatamente visibile con il font di sistema mentre il web font si carica. Limita il numero di varianti dei font - invece di caricare 6 pesi diversi, usa i 2-3 che ti servono davvero. Precarica i font chiave con link rel="preload" per un caricamento più rapido.

Ottimizzazione del database

Per i siti WordPress, il database può diventare un collo di bottiglia per le prestazioni se non viene mantenuto regolarmente. Elimina le revisioni dei post più vecchie di 30 giorni, i commenti spam, i transient e i metadati inutilizzati. Il plugin WP-Optimize può mantenere il database in automatico.

Usa l'object caching (Redis o Memcached) per memorizzare i risultati delle query al database più frequenti. Su BeoHosting, Redis è disponibile nei piani Business e Premium e può ridurre drasticamente il tempo di generazione delle pagine per i siti dinamici.

CDN - Content Delivery Network

Una CDN distribuisce le risorse statiche del tuo sito su server in tutto il mondo, così i visitatori caricano i contenuti dal server più vicino. Per i siti con un pubblico prevalentemente italiano, una CDN non è di importanza critica perché il server BeoHosting è già nella regione. Ma per i siti con un pubblico globale, una CDN può migliorare notevolmente la velocità.

Cloudflare offre un piano CDN gratuito che include la protezione DDoS e un'ottimizzazione di base. L'integrazione con WordPress è semplice e non richiede conoscenze tecniche.

Checklist pratica per l'ottimizzazione di PageSpeed

Comprimi e converti le immagini in WebP. Implementa il lazy loading per le immagini sotto la piega (below the fold). Abilita il caching del browser con durate lunghe per le risorse statiche. Minifica i file CSS e JavaScript. Usa PHP 8.4 per le massime prestazioni. Abilita la compressione GZIP o Brotli. Ottimizza i font e limita il numero di varianti. Pulisci regolarmente il database. Usa il caching delle pagine (LiteSpeed Cache per WordPress). Riduci al minimo il numero di script e risorse esterne.

Conclusione

Migliorare il punteggio di PageSpeed è un processo iterativo: non aspettarti di raggiungere il punteggio di 100/100 tutto in una volta. Concentrati prima sui problemi più grandi che PageSpeed Insights individua, di solito le immagini e il JavaScript. Con BeoHosting hai già una parte server ottimizzata, così puoi concentrarti sulle ottimizzazioni front-end. Punta a un punteggio verde (90+) sia per la versione mobile che per quella desktop del tuo sito.