Come misurare la velocità di caricamento di un sito…

La velocità di caricamento di un sito web può essere misurata in diversi modi:

Strumenti di sviluppo nel browser:
- Aprire la scheda "Network" (Rete) negli strumenti di sviluppo (F12).
- Aggiornare la pagina.
- Analizzare gli indicatori di tempo per ogni risorsa (HTML, CSS, JS, immagini):
  - Waiting (TTFB): Tempo fino a ricevere il primo byte dal server.
  - Content Download: Tempo di download del contenuto.
  - Total: Tempo totale di caricamento della risorsa.
- Prestare attenzione al diagramma Waterfall (cascata) per visualizzare la sequenza di caricamento delle risorse.
- Analizzare il riepilogo (Summary) in basso alla scheda per il tempo totale di caricamento e il numero di richieste.
Servizi online per misurare la velocità:
- Google PageSpeed Insights: Analizza le prestazioni su dispositivi mobili e desktop, fornisce raccomandazioni di ottimizzazione.
- GTmetrix: Fornisce metriche come PageSpeed e YSlow, rapporto dettagliato di caricamento, prestazioni e raccomandazioni.
- Pingdom Website Speed Test: Misura la velocità da diverse località, fornisce un'analisi dettagliata delle prestazioni.
- WebPageTest: Permette di testare da diverse località e browser, fornisce molte metriche e visualizzazioni.
Metriche a cui prestare attenzione:
- Time to First Byte (TTFB): Tempo fino a ricevere il primo byte dal server.
- Largest Contentful Paint (LCP): Tempo in cui appare l’elemento di contenuto più grande nella parte visibile dello schermo.
- First Input Delay (FID): Tempo dall’interazione iniziale dell’utente alla risposta del browser.
- Cumulative Layout Shift (CLS): Indicatore totale dello spostamento del layout durante il caricamento.
- DOMContentLoaded: Tempo in cui il browser ha caricato e analizzato completamente il documento HTML.
- Load: Tempo di caricamento completo di tutte le risorse della pagina.

Automazione con framework:

Lighthouse (strumento di Google): Può essere usato come strumento CLI o integrato in pipeline CI/CD.

# Esempio di utilizzo di Lighthouse CLI
lighthouse https://www.esempio.com --output json,html --output-path ./report.json

Selenium/WebDriver: Può essere usato per caricare la pagina e ottenere il tempo di caricamento tramite l’API Performance di JavaScript.

# Esempio di ottenimento del tempo di caricamento con Selenium e Performance API
from selenium import webdriver
import time

driver = webdriver.Chrome() # O altro browser
driver.get("https://www.esempio.com")

# Attendere che la pagina sia completamente caricata
time.sleep(5) # Si possono usare attese più affidabili

# Ottenere l’oggetto PerformanceTiming
performance_timing = driver.execute_script("return window.performance.timing")

# Calcolare il tempo di caricamento
load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
print(f"Tempo di caricamento: {load_time} ms")

driver.quit()

Cypress: Fornisce anche accesso all’API Performance.

Sistemi di monitoraggio in tempo reale (RUM):
- Strumenti che raccolgono dati sulle prestazioni direttamente dagli utenti reali sul sito. Esempi: Sentry, New Relic Browser.

La scelta del metodo dipende dagli obiettivi: per una valutazione rapida sono adatti i servizi online, per analisi dettagliate e debug gli strumenti di sviluppo, e per monitoraggio regolare e integrazione nei processi di sviluppo, automazione e sistemi RUM.

Come misurare la velocità di caricamento di un sito web?