Il caricamento rapido dei contenuti di una pagina web non solo è importante per i visitatori, ma è anche un fattore di posizionamento di Google che influisce sulla SEO. Quindi, ottimizzare i tempi di caricamento delle pagine può portare anche più traffico al tuo sito.
In questo articolo esamineremo cosa si intende per tempo di caricamento delle pagine, come misurarlo e come ottimizzare le performance del tuo sito web.
Cosa si intende per Tempo di Caricamento delle Pagine?
Il tempo di caricamento delle pagine misura quanto tempo impiega il contenuto di un sito web per essere visualizzato nel browser dell’utente.
Il processo di caricamento di un sito web consiste in diversi traguardi, come ad esempio iniziare a mostrare il testo o visualizzare un’immagine di apertura.
Non esiste una singola metrica che misura il tempo di caricamento delle pagine. Quando si vedono i tempi di caricamento delle pagine riportati, assicurati di capire quale specifica metrica viene misurata.
Perché il processo di caricamento delle pagine consiste in più traguardi?
Ciò avviene perché il caricamento di una pagina web segue diversi passaggi, come:
- Caricamento dell’HTML del documento
- Caricamento dei fogli di stile CSS
- Caricamento delle immagini
- Esecuzione del codice JavaScript
Per migliorare l’esperienza di navigazione, i browser cercano di visualizzare i contenuti non appena sono pronti. I contenuti di solito appaiono gradualmente sulla pagina.
Non c’è un momento preciso in cui la pagina è “caricata”. Una pagina potrebbe aver caricato il 98% dei suoi contenuti tranne una piccola immagine a piè di pagina e uno script di analisi, ma questo non influisce sull’utente, quindi non diremmo che la pagina non è ancora caricata. Contare l’ultimo tratto fino al 100% come “il” tempo di caricamento non è ciò che vogliamo misurare, poiché gli utenti possono utilizzare quella pagina tranquillamente prima di quel momento.
Invece ci sono più metriche che possono essere considerate:
- Tempo di Primo Byte (TTFB): Quanto tempo impiega il server per rispondere alla richiesta HTML iniziale?
- Primo Contenuto Visibile (FCP): Quanto presto appare qualche contenuto (ad esempio testo o un’immagine)?
- Largest Contentful Paint (LCP): Quanto presto appare il contenuto principale della pagina?
- Tempo di Interazione (TTI): Quando la rete e la CPU diventano inattive?
- Visualmente Completo: Quando la pagina smette di cambiare visualmente (ciò potrebbe non accadere mai se un sito contiene video o animazioni)?
- Caricamento Completo del Browser: Quando la pagina ha caricato tutte le risorse dipendenti come fogli di stile e immagini?
È anche importante sottolineare che i tempi di caricamento delle pagine non sono assoluti. Variano a seconda del tipo di dispositivo (desktop/mobile), del browser, della posizione dell’utente, della connessione Internet e molti altri fattori.
Perché Concentrarsi sul Largest Contentful Paint?
Ci sono alcune ragioni per cui il LCP è il miglior punto di partenza per ottimizzare il tempo di caricamento delle pagine:
- Misura quanto presto l’utente può vedere i contenuti, anziché misurare un dettaglio tecnico
- Si concentra sul contenuto principale della pagina
- È uno dei tre Core Web Vitals che influenzano il posizionamento di Google
Qual è un Buon Tempo di Caricamento delle Pagine?
Secondo i Core Web Vitals di Google, un Largest Contentful Paint di 2.5 secondi o meno è considerato un buon tempo di caricamento della pagina.
I tempi di caricamento delle pagine fino a 4 secondi sono accettabili, e Google li segnalerà come “Necessita di Miglioramento”.
Un tempo di caricamento delle pagine superiore a 4 secondi è lento e Google lo valuterà come “Scadente”.
Quale è la Velocità Media di un Sito Web?
Secondo il dataset CrUX di Google, il contenuto più grande impiega 2.6 secondi per essere visualizzato sui dispositivi mobili. I siti desktop sono leggermente più veloci, con un Largest Contentful Paint di 2.3 secondi. Quindi un tempo di caricamento normale per gli utenti reali è nell’intervallo di 2-3 secondi.
Un altro aspetto della velocità di caricamento della pagina è quanto tempo ci vuole affinché una pagina risponda all’input dell’utente. Questo viene misurato utilizzando la metrica Interaction to Next Paint. Su mobile, la media INP è di 274 millisecondi. Sugli utenti desktop aspettano solo 108 millisecondi affinché la pagina risponda all’interazione dell’utente.
Questi numeri guardano al 75° percentile delle esperienze, il che significa che il 25% degli utenti aspetta più a lungo del valore riportato, mentre il 75% non aspetta così a lungo.
Il Tempo di Caricamento della Pagina Influenza il SEO?
Sì, i tempi di caricamento delle pagine possono avere un impatto sui ranking nei motori di ricerca.
Sebbene la qualità del contenuto sia più importante della velocità della pagina, Google utilizza un insieme di metriche di esperienza della pagina come parte del loro algoritmo di ranking.
Oltre alla metrica Largest Contentful Paint, Google guarda anche il Cumulative Layout Shift e il First Input Delay.
Come Misurare il Tempo di Caricamento delle Pagine?
Puoi misurare il tempo di caricamento delle pagine utilizzando un tool gratuito come PageSpeed Insights di Google o GTmetrix.
Inserisci semplicemente l’URL del tuo sito web per vedere le metriche di velocità delle tue pagine e ottenere raccomandazioni su come ottimizzare le performance del tuo sito web.
Spesso vedrai una combinazione di dati di laboratorio e di campo:
- I dati di laboratorio vengono raccolti su richiesta in un ambiente di test controllato
- I dati di campo vengono raccolti dagli utenti reali
- I dati di campo si basano spesso sul Chrome User Experience Report (CrUX) che aggrega dati degli ultimi 28 giorni.
Ecco un esempio di come potrebbe apparire parte di un report sulle performance del sito web.
Come Monitorare il Tempo di Caricamento delle Pagine?
Misurare continuamente il tempo di caricamento delle pagine non solo ti permette di verificare se le tue ottimizzazioni stanno funzionando, ma ti avviserà anche se il tuo sito diventa più lento.
Con PageSpeed Insights di Google pui monitorare la velocità del sito nel tempo, inclusa la metrica Core Web Vitals che influisce sui ranking dei motori di ricerca.
Come Ridurre il Tempo di Caricamento delle Pagine?
Puoi ridurre il tempo di caricamento delle pagine guardando tre grandi componenti:
- Tempi di risposta del server
- Dimensioni del download
- Tempi di rendering
Per far caricare velocemente il tuo sito web, devi elaborare rapidamente le richieste sul server, utilizzare la compressione delle immagini e del testo per ridurre le dimensioni dei file e ridurre al minimo la quantità di JavaScript sulla tua pagina.
Fase 1: Ottimizza i Tempi di Risposta del Server
Una volta che un utente clicca su un link o digita un URL, il browser richiede quella pagina da un server remoto. Quindi attende finché il server non risponde con i contenuti della pagina.
Questa parte del processo di caricamento della pagina è rappresentata dalla metrica TTFB (Time To First Byte). Oltre al tempo impiegato per elaborare la richiesta sul server, TTFB include anche il tempo impiegato per cercare l’indirizzo IP del server tramite DNS e stabilire una connessione sicura al server usando TCP e SSL.
Se noti che il tuo TTFB è troppo alto, puoi concentrarti su questa parte del processo di caricamento. Un TTFB inferiore a 0.8 secondi è considerato buono da Google. Se è superiore a 1.8 secondi, è considerato povero.
Ottimizzazione dei Tempi di Elaborazione sul Server
I documenti HTML di solito non sono statici ma vengono generati dal server per ogni richiesta. Ad esempio, agli utenti diversi verranno forniti contenuti diversi o il contenuto di un sito di notizie cambierà durante il giorno. Generare l’HTML coinvolge il caricamento dei dati da un database e l’uso di modelli per costruire la pagina.
La memorizzazione nella cache di tutto o parti dell’HTML può velocizzare le risposte del server. Invece di rigenerare la risposta ogni volta, il server salverà la risposta generata e la riutilizzerà in seguito.
Se stai utilizzando un sistema di gestione dei contenuti come WordPress, assicurati di non utilizzare troppi plugin, poiché questi possono rallentare il tuo sito web. Per siti web semplici potresti considerare anche di passare a una soluzione più veloce come un generatore di siti statici.
Un altro fattore chiave per i tempi di elaborazione è il provider di hosting. Se il tuo provider di hosting è troppo lento, dovrai cambiare piano di hosting o scegliere un provider diverso.
Distanza Fisica tra Client (Browser) e Server
Indipendentemente da quanto veloce sia il tuo server, c’è comunque il tempo che ci vuole per far viaggiare la richiesta dal browser del visitatore ai tuoi server, e poi per inviare i contenuti indietro.
Ad esempio, se il tuo server è basato a New York ma alcuni dei tuoi visitatori sono a Tokyo, ci vorranno circa 180 millisecondi per ogni viaggio di andata e ritorno tra client e server. Tipicamente sono necessari almeno 3 viaggi di andata e ritorno per creare una connessione e fare una richiesta. Quindi questo fattore da solo potrebbe causare un ritardo di 0.5 secondi solo per una singola richiesta.
Le Content Delivery Network (CDN) possono affrontare questo problema. Hanno sedi in centinaia di luoghi in tutto il mondo, quindi i tempi di viaggio saranno molto più bassi.
Fase 2: Ottimizza le Dimensioni del Download
Una volta che il tuo server ha fornito l’HTML della pagina per il sito web, inizierà a scaricare altri contenuti sulla pagina. Ad esempio, caricherà i fogli di stile che bloccano il rendering e scaricheranno le immagini.
La quantità di larghezza di banda disponibile e la latenza determinano quanto tempo ci vuole per scaricare un determinato file. I file più grandi impiegheranno più tempo per scaricare.
Puoi spesso vedere le pagine che si rendono gradualmente disponibili man mano che più contenuti diventano disponibili.
Ci sono alcune cose che puoi fare per ridurre le dimensioni dei download e caricare le risorse in modo efficiente.
Compressione di Immagini, Video e Testo
La compressione significa rendere un file più piccolo senza modificarne il contenuto. Per le immagini, la qualità dell’immagine può anche talvolta essere ridotta.
L’utilizzo di formati di immagine moderni come WebP o AVIF può ridurre le dimensioni dei download senza influire sulla qualità dell’immagine. Puoi anche ridurre la risoluzione delle tue immagini o caricare immagini diverse a seconda delle dimensioni del dispositivo utilizzando l’attributo srcset.
I file di testo come HTML, CSS e JavaScript possono essere compressi con algoritmi come gzip e brotli.
Ci sono molti plugin WordPress e strumenti per comprimere automaticamente le risorse, ad esempio WP Rocket.
Ottimizzazione delle Priorità delle Risorse
Non tutte le risorse sul tuo sito web sono ugualmente importanti. Puoi migliorare il LCP e l’esperienza complessiva dell’utente controllando quando caricare quali asset. In questo modo la larghezza di banda viene allocata al contenuto più importante.
Ad esempio, puoi utilizzare Priority Hints per dire al browser che un’immagine di apertura sul tuo sito web dovrebbe avere la priorità.
Le immagini più in basso sulla pagina possono essere caricate in modo pigro, in modo che non competano per la larghezza di banda con il contenuto più importante.
Se uno script non è importante, dovrebbe essere caricato in modo asincrono con l’attributo HTML asincrono.
Puoi anche precaricare risorse importanti se il browser non le scopre immediatamente.
Fase 3: Riduci i Tempi di Rendering
Il visitatore è connesso al tuo server e ha scaricato le tue risorse importanti. Ma c’è ancora del lavoro da fare.
Il browser ha bisogno di tempo per elaborare le risorse, visualizzare il layout, caricare slider, widget o rendere contenuti dinamici. Il rendering di questo contenuto è particolarmente importante nei browser mobili, poiché hanno meno potenza di elaborazione.
Puoi misurare l’impatto della CPU sui tempi di caricamento delle pagine con metriche come Total Blocking Time (TBT) e Time To Interactive (TTI).
Identifica quale Codice sta Rallentando il tuo Sito Web
Le linee temporali della CPU nella scheda Prestazioni di Chrome DevTools ti diranno se ciò sta rallentando il tuo sito web e quali compiti il browser sta svolgendo.
Utilizza meno JavaScript
Quando aggiungi JavaScript alla tua pagina, devi considerare la potenza di elaborazione che richiederà. Le notifiche, le animazioni, gli slider, i codici di tracciamento, sono tutti molto utili. Ma fai attenzione a quanto potrebbero costare in termini di conversioni, posizionamenti e ricavi se rallentano il tuo sito.
A volte la soluzione migliore è semplicemente rimuoverli.
Questo approccio fornirà una panoramica completa su come misurare e ottimizzare il tempo di caricamento delle pagine del tuo sito web, garantendo una migliore esperienza utente e migliori posizionamenti nei motori di ricerca.
