Speed Index Come migliorare lo Speed Index del sito

Cos’è Speed Index?

Speed Index è un core web vital, una metrica delle prestazioni di velocità di caricamento della pagina Web, la quale mostra la rapidità con cui gli elementi di una pagina Web diventano visibili.

Speed Index (SI) viene misurato solo sulla parte visibile dello schermo. La parte visibile dello schermo, sopra la sezione principale, influisce sul punteggio dell’indice di velocità con l’avanzamento visivo e la velocità di completamento visiva graduale dei contenuti della pagina web.

Diverse dimensioni del viewport produrranno quindi diversi punteggi dell’indice di velocità. Speed Index è stato introdotto da Webpagetest nel 2012.

E, data l’importanza di Speed Index insieme alle sue metodologie di misurazione e ottimizzazione, esistono molti approcci diversi alla sua ottimizzazione. L’indice di velocità è anche correlato alla “Percezione della velocità della pagina” insieme alla “Velocità effettiva della pagina”.

Indice

• Cos’è Speed Index?
• Quali metriche influenza Speed Index?
• Perché Speed Index è importante per SEO e UX??
• Cosa misura Speed Index?
• Come viene misurato Speed Index ?
• Qual’è il punteggio giusto per Speed Index?
• Come ottimizzare Speed Index per un sito Web

 

Un punteggio Speed Index migliorato significa che un sito Web comunica visivamente più velocemente con l’utente e offre all’utente un’opportunità più rapida per raggiungere lo scopo della sua visita. Speed Index non è una misura delle prestazioni di caricamento della pagina Web nei Core Web Vitals. Tuttavia, l’indice di velocità è uno degli indicatori importanti che mostrano l’efficienza con cui una pagina web viene caricata per l’utente.

Pertanto, esiste un collegamento importante tra l’intento di ricerca e l’indice di velocità. Se l’intento di ricerca di un utente “richiede un’azione rapida”, l’importanza di Speed Index aumenterà ancora di più sia per la UX che per SEO.

Visualizzazione della misurazione di Speed Index.

La misurazione dell’indice di velocità si basa sul progresso di graduale completamento della completezza visiva della pagina.

Quali metriche delle prestazioni di caricamento della pagina Web sono influenzate da Speed Index?

Tutte le metriche delle prestazioni di caricamento delle pagine Web sono collegate. Sebbene un sito web abbia un cattivo Time to First Byte,  può non avere un buon Speed Index. Oppure, se un sito Web ha un buon LCP ed è  ricco di contenuti, è probabile che anche il punteggio di Speed index sia buono.

Tutte le metriche delle prestazioni delle pagine Web si influenzano a vicenda. Pertanto, quando si considerano Core Web Vitals e altre metriche sulle prestazioni delle pagine Web, è necessario conoscere il collegamento tra di loro. Le metriche più rilevanti per Speed ​​Index sono First Contentful Paint, Largest Contentful Paint, poiché lo Speed ​​Index viene misurato direttamente sul campo nel “viewport”. A parte questo, la metrica più rilevante per l’altro indice di velocità è il tempo al primo byte. È impossibile che la parte superiore di una pagina Web abbia una velocità di completamento dell’immagine elevata se il tuo server gestisce lentamente ogni richiesta.

Le metriche sulle prestazioni delle pagine Web relative all’indice di velocità sono elencate di seguito per motivi.

• First Paint
• First Contentful Paint
• Largest Contentful Paint
• Time to First Byte

First Paint (FP), First Contentful Paint (FCP) e Largest Contentful Paint (LCP) sono direttamente correlati a Speed index perché vengono calcolati all’interno della misurazione dell’indice di velocità (SI) come “frame” o “eventi di apparizione frame”.

First Paint indica il primo evento di apparizione di una pagina Web con il primo pixel esposto, mentre First Contentful Paint indica il primo “frame visivo significativo”. Sono intrecciati con il concetto di Speed Index poiché entrambi influenzano il completamento visivo del contenuto nella parte superiore della pagina.

 

Il Time to First Byte dovrebbe essere preso in considerazione nel calcolo del punteggio dell’indice di velocità(Speed ​​Index) in quanto influisce direttamente sulla velocità di caricamento di tutte le risorse da utilizzare nel calcolo del punteggio di Speed ​​Index come Paint Event e “Video Frames“.

Di seguito sono elencate le metriche delle prestazioni delle pagine Web che non sono direttamente correlate allo Speed Index.

• Total Blocking Time
• First Input Delay
• First Idle Time

Total Blocking Time (TBT), First Input Delay (FID), First Idle (FI) sono metriche delle prestazioni di caricamento della pagina Web più correlate all’esperienza dell’utente e alla “reattività del carico”. Poiché l’indice di velocità è correlato alla “velocità percettiva”, non è nella stessa categoria dei tempi di “TBT, FID e FI”.

Perché Speed Index è importante per SEO e UX?

Speed Index riguarda l’osservazione dell’evento di caricamento di una pagina Web visto attraverso gli occhi dell’utente anziché vagliare la performance di una pagina Web solo con gli eventi del browser. Per questo motivo, è una delle metriche di performance incentrate sull’utente dello Speed Index.

La velocità della pagina incentrata sull’utente o le metriche sulle prestazioni di caricamento della pagina Web sono metriche utilizzate per comprendere direttamente l’esperienza dell’utente durante il caricamento della pagina Web.

SEO e User Experience sono concetti direttamente correlati tra loro.  Quando una pagina Web che offre un’esperienza utente negativa viene notata dal motore di ricerca e sarà penalizzata nelle classifiche, perché non corrisponde all’intento di ricerca. Per questo motivo, un buon Speed Index Score indica visivamente una migliore e più rapida comunicazione con l’utente.

Una migliore esperienza utente è necessaria per una migliore performance di ottimizzazione dei motori di ricerca.

Cosa misura Speed Index?

Speed Index misura la velocità con cui il contenuto viene visualizzato visivamente durante il caricamento della pagina.

Lighthouse acquisisce prima un video del caricamento della pagina nel browser e calcola la progressione visiva tra i fotogrammi. Lighthouse utilizza quindi il modulo Speedline Node.js per generare il punteggio dell’indice di velocità.

Qual è la relazione tra Speed Index e l’API dei tempi di navigazione?

Navigation Timing API è un’applicazione che è stata utilizzata per misurare la velocità e le prestazioni di un sito Web per molto tempo. L’API Navigation Timing offre metriche più coerenti rispetto alla maggior parte degli strumenti basati su Javascript.

Navigation Timing API è un’applicazione che funziona con i “Real-world Data” ovvero “Real User Metrics (RUM)“. Per questo motivo, è più prezioso degli strumenti che misurano la velocità di caricamento della pagina web con “Lab Data”.

L’API Navigation Timing utilizza diversi elementi come “window.performance”, “window.performance.timing”, “window.performance.timing.navigationStart”. Sebbene “Window.performance” sia un elemento utilizzato dall’API High-Resolution Time, “Navigation Timing API” ha aggiunto due elementi separati come “timing” e “navigation”, consentendo di misurare metriche di velocità del sito Web difficili da misurare con dati utente reali.

L’API Navigation Timing funziona con XMLHttpRequest nel browser dell’utente, trasmettendo l’esperienza dell’utente al server.

Allora, qual è la relazione tra Speed Index e Navigation Timing API?

L’API Navigation Timing non può misurare in alcun modo il “completamento visivo e la velocità di completamento visivo”. Indica solo che determinati eventi di caricamento della pagina Web vengono completati in un determinato momento. Tuttavia, non può mostrare la funzione visiva di un “evento di misurazione delle prestazioni della pagina web” completato nel 3° secondo sulla pagina web.

In questo contesto, Speed Index è una risorsa che integra la mancanza del punto di misurazione del tempo di caricamento visivo dell’API Navigation Timing. Speed Index è anche al punto di “tempo di caricamento della pagina web percepito” ed è in un punto importante in SEO, UX e sviluppo web. Per misurare l’indice di velocità, è stato iniziato a utilizzare il “Modulo Speedline Node.js” da parte degli sviluppatori in modo da poter eseguire la misurazione dell’indice di velocità.

Chi ha migliorato il termine e il metodo di misurazione dello Speed Index?

Webpagetest.org ha trovato la metrica delle prestazioni di caricamento della pagina Web Speed Index.
Webpagetest.org ritiene che ogni parametro di velocità della pagina web misuri solo un singolo punto, quindi rappresenterà un valore solo se preso insieme.
Poiché Speed Index misura la velocità di completamento visivo del contenuto nella sezione above the fold, esso si riferisce alla combinazione di molte metriche di velocità.

Speed Index è una metrica di misurazione della velocità della pagina Web che mostra come l’evento “onload” su due pagine Web separate abbia valori diversi per l’esperienza di caricamento della pagina dell’utente
(WepPageTest)

Come viene misurato Speed Index ?

Mentre viene misurato Speed Index, il contenuto nella parte visibile dello schermo di una pagina Web viene registrato in frame 10 volte ogni secondo, durante il caricamento della pagina. La differenza tra ogni record rilevato durante il caricamento della pagina, ovvero le differenze tra i frame, viene considerata il punto della velocità di caricamento del contenuto nella percezione dell’utente.

La ratio completa è calcolata in termini percentuali, comparando la differenza tra ciascun fotogramma registrato mentre la pagina si sta caricando e l’ultimo fotogramma catturato dopo che la pagina ha caricato. La ratio completa per i diversi frame è anch essa un indicatore del punteggio Speed Index.

In che modo Lighthouse misura Speed Index?

Speed Index viene misurato da Lighthouse in base alla velocità di avanzamento visivo del contenuto nel viewport. Lighthouse utilizza il metodo tradizionale per misurare l’indice di velocità utilizzando l’acquisizione di un video e la misurazione del livello di somiglianza tra i fotogrammi. Per calcolare il livello di somiglianza dei diversi fotogrammi del video che mostra l’avanzamento visivo del contenuto della pagina Web durante il caricamento, Lighthouse utilizza il “modulo Speedline Node.js”.

Inoltre, il modulo Speedline Node.js è stato utilizzato per la misurazione del punteggio Speed Index tramite “istogrammi”. Anche il modulo Speedline Node.js è stato migliorato per sostituire l’API Navigation Timing per la misurazione dell’indice di velocità.

La differenza principale qui è che Lighthouse non utilizza la distanza tra gli istogrammi per la misurazione dell’indice di velocità, Lighthouse per misurare Speed Index utilizza la misura dell’indice di somiglianza strutturale .

Qual’è il punteggio giusto per Speed Index secondo Lighthouse?

Un buon punteggio Speed Indexà deve essere inferiore a 4,3 secondi, secondo Lighthouse.
Il punteggio medio di Speed Index  è compreso tra 4,4 e 5,8 secondi. Uno Speed Index superiore a 5,8 secondi è considerato negativo. Tutti i dati qui sono calcolati da Lighthouse secondo gli standard di archivio HTTP. Se i dati dell’archivio HTTP cambiano, cambieranno anche le soglie del punteggio dell’indice di velocità buono, medio e cattivo per Lighthouse.

Per approfondire leggi: Come sono calcolate le soglie dei Core Web Vitals

Come ottimizzare Speed Index per un sito Web?

Ci sono due modi per migliorare Speed Index. Alcuni di questi metodi sono correlati al rendering progressivo, altri sono correlati all’ottimizzazione dell’ordine di caricamento delle risorse e alla compressione delle risorse. I metodi Page Speed che possono essere applicati per migliorare il punteggio dell’indice di velocità sono elencati di seguito:

• Caricamento di immagini fuori schermo con Lazyload.
• Aggiunta di segnaposto per le immagini.
• Utilizzo di estensioni Immagini di nuova generazione WebP.
• Pulizia di codici deprecati e inutilizzati.
• Comprimere CSS e Javascript insieme ad altre risorse necessarie per la pagina web.
• Riduzione del numero di richieste combinando i file CSS e Javascript.
• Creazione di una gerarchia e di una strategia della cache per le risorse delle pagine web.
• Ottimizzazione dei file immagine come lossless o lossy in base alle preferenze dell’utente.
• Posticipo del download di risorse tracker di terze parti.
• Comprimere, combinare e ottimizzare i file dei Font.
• Refactoring di file CSS e JS.
• Miglioramento delle condizioni del server per tempi di consegna e risposta più rapidi.
• Utilizzo di CDN per una consegna più rapida delle risorse della pagina web.
• Riduzione della dimensione DOM della struttura HTML in modo che l’evento DOMContentLoaded possa verificarsi più rapidamente.
• Precaricamento delle richieste chiave della pagina Web.
• L’uso di Shadow DOM per creare la sezione above the fold è la priorità principale.
• Utilizzo di Virtual DOM per transizioni di pagina più fluide.
• Utilizzo di Brotli, Gzip e Deflate come infrastruttura di compressione sul lato server.
• Utilizzo del pre-rendering per le pagine web.
• Utilizzo del rendering lato server per le pagine web.
• Utilizzo del CSS “content-visibility:auto” per ritardare il rendering dell’elemento della pagina Web fuori schermo

Esistono più metodi per migliorare Speed index.

Una parte importante dei metodi trasmessi qui può essere utilizzata per migliorare le metriche di velocità della pagina associate all’indice di velocità insieme all’indice di velocità.