Indice di velocità: cos'è e come ottimizzare il tuo sito web per questo

L'indice di velocità (SI) è una metrica interessante quando si considera la velocità della pagina. È assolutamente un'indicazione delle prestazioni della tua pagina, ma è completamente diversa da altre metriche incentrate sull'utente come First Contentful Paint e Largest Contentful Paint. SI indica la velocità di caricamento del tuo sito above the fold. O per dirla in altro modo, quando tutto il contenuto all'interno della finestra dell'utente è completamente visibile. Quando guardi i tempi di caricamento della tua pagina, non sarai probabilmente penalizzato o ricompensato per il tuo indice di velocità. Non è una ragione per ignorarlo. Come singola metrica, è una delle poche che comprende più altre metriche e può darti una solida idea della velocità, dell'efficienza e delle prestazioni complessive del tuo sito.

Iscriviti al nostro canale Youtube

Che cos'è l'indice di velocità?

Lighthouse, la spina dorsale di Google per PageSpeed ​​Insights, esamina più metriche sul rendimento per valutare il tuo sito. L'indice di velocità (SI) è uno di questi e il rapporto mostrerà il tempo in secondi anziché in millisecondi come con altre metriche. Google definisce SI come "quanto velocemente i contenuti di una pagina sono visibilmente popolati".

Abbastanza semplice, vero?

L'indice di velocità non tiene conto degli script di back-end o di altri carichi non verniciati. Lo influenzano, però. SI è semplicemente una misura di quanto tempo impiegano gli utenti a vedere i tuoi contenuti per intero. Questo è il kicker. Per intero . Mentre altre metriche come LCP vengono misurate quando viene visualizzata la parte più grande del contenuto, l'indice di velocità tiene conto di tutti i contenuti che dovrebbero essere effettivamente visualizzati.

Questa non è una misura della velocità complessiva della pagina. Ciò tiene conto di quando il browser esegue il rendering di tutti gli elementi. Compresi script ed elementi non visibili che influiscono sulle prestazioni. Tuttavia, se desideri un buon indicatore di quando i tuoi utenti percepiscono che la pagina è completamente caricata , SI è la metrica da tenere d'occhio. A causa di quanto sia incentrato sull'utente, SI può essere una buona indicazione dello stato generale del sito, nonché una linea di base per l'esperienza utente (UX) del tuo sito.

Come misurare l'indice di velocità

Come per la maggior parte delle metriche sulle prestazioni del sito, uno dei migliori strumenti da utilizzare è PageSpeed ​​Insights di Google. Anche questo strumento è uno dei più particolari nei risultati che restituisce. È relativamente critico anche nei confronti dei siti più ben strutturati. PageSpeed ​​Insights fornisce più spesso dati di laboratorio per il tuo sito, in base a un aggregato degli ultimi 28 giorni di raccolta. Tuttavia, se hai abbastanza visitatori che trasmettono informazioni a Google tramite Chrome, puoi anche ottenere dati sul campo del mondo reale dal rapporto. Tuttavia, non tutti i siti possono ottenerlo.

Come puoi vedere, la velocità per molte di queste metriche è in verde. Questo indica che sono "buoni". Questo è ovviamente dove vuoi il tuo sito. Tuttavia, l'indice di velocità è 4,0 secondi e arancione. È molto tempo che l'utente aspetti di vedere tutto above the fold.

Che cos'è un buon punteggio dell'indice di velocità?

PageSpeed ​​Insights utilizza i seguenti punteggi per classificare l'indice di velocità del tuo sito e codificarlo a colori di conseguenza:

• Verde (buono) – da 0 a 3,4 secondi
• Arancione (moderato) – da 3,4 a 5,8 secondi
• Rosso (lento) – oltre 5,8 secondi

Come abbiamo detto prima, PageSpeed ​​Insights è molto critico nelle sue misurazioni. Se sei in arancione o rosso, potresti voler utilizzare uno strumento come GTmetrix o Speed ​​Test di Pingdom per vedere cosa mostrano i loro dati in tempo reale. Riteniamo che sia meglio testare il tuo sito utilizzando più strumenti in momenti diversi per ottenere il quadro migliore delle prestazioni complessive.

Come ottimizzare il punteggio dell'indice di velocità

Puoi eseguire una serie di passaggi per ottimizzare il punteggio dell'indice di velocità. Se hai provato a ottimizzare il tuo sito per qualsiasi tipo di aumento (o, tecnicamente, diminuzione della velocità della pagina), probabilmente hai in qualche modo influenzato anche il tuo punteggio SI. Ti mostreremo alcuni modi per indirizzare in modo specifico il tuo tempo SI in modo che la tua pagina si carichi il più rapidamente possibile per offrire ai tuoi visitatori la migliore esperienza possibile.

Riduci le risorse di blocco del rendering

Più specificamente, ridurre il tempo di esecuzione di JavaScript è uno dei modi migliori per aumentare il punteggio dell'indice di velocità. Le risorse di blocco del rendering sono script e codice che impediscono il caricamento di altre parti del tuo sito Web avendo la precedenza. Invece di caricare diversi elementi contemporaneamente, alcuni elementi mettono in pausa tutti gli altri finché non sono finiti.

E questo riduce l'indice di velocità del tuo sito. Per aggirare questo problema, puoi rimandare qualsiasi numero di script e bit di codice che vengono caricati fino a quando gli elementi visibili non sono stati dipinti nel DOM. Identificare i colpevoli è in realtà relativamente facile, poiché puoi utilizzare gli strumenti di sviluppo di Chrome per dare un'occhiata al tuo sito mentre viene caricato e lo strumento indicherà cosa sta interrompendo il rendering degli elementi.

Inoltre, gli utenti di WordPress possono utilizzare un plug-in di memorizzazione nella cache (o plug-in di ottimizzazione del sito) come W3 Total Cache o WP Rocket per gestirlo. Spesso questi plugin hanno un semplice interruttore per rinviare le risorse che bloccano il rendering.

Anche gli utenti Divi hanno un grande vantaggio nel bloccare tali risorse, poiché le opzioni del tema consentono di attivare il differimento CSS che blocca il rendering, nonché gli script jQuery. Inoltre, le funzionalità Critical CSS del tema rompono grandi blocchi di codice che possono ritardare il contenuto del tuo sito e farli caricare molto più rapidamente di quanto farebbero altrimenti. Mentre alcuni di questi sono interruttori, Divi ne abilita automaticamente altri. L'installazione di Divi dovrebbe aiutare immediatamente il tuo punteggio SI nella maggior parte dei casi.

Ridurre il lavoro del thread principale del tuo sito

Come le risorse di blocco del rendering, puoi rallentare le prestazioni del tuo sito caricando diversi elementi che richiedono molta potenza di elaborazione dal tuo server. Ridurli può aiutare a spingere il sito nel browser più rapidamente.

La soluzione più semplice per questo è smettere di usare così tanto JavaScript . GTmetrix lo mette meglio:

In generale, più JavaScript ha la tua pagina, più lungo è il processo di analisi/compilazione; con conseguente maggiore attesa per gli utenti di visualizzare i contenuti e interagire con la tua pagina.

Riconosciamo che potrebbe non essere facile. Hai progettato il sito per funzionare in un certo modo. Tuttavia, potrebbe esserci del codice inutilizzato che puoi eliminare e potresti essere in grado di ottimizzare qualsiasi JavaScript di terze parti che stai caricando nel tuo sito. Inoltre, minimizza il tuo JavaScript.

Oltre all'audit JS, assicurati di minimizzare CSS e HTML. Ciò allevierà ancora di più la tensione del filo principale. Anche i plug-in di memorizzazione nella cache e ottimizzazione hanno spesso queste opzioni.

Gli utenti Divi, ancora una volta, hanno un vantaggio qui, poiché il tema minimizza e divide automaticamente CSS e JavaScript in blocchi di dimensioni ridotte per un throughput più rapido, eliminando la necessità di tonnellate di focus dal thread principale.

Indice di velocità Domande frequenti

L'indice di velocità è un concetto semplice che ha ramificazioni complesse. Vogliamo rispondere ad alcune domande frequenti su SI per aiutarti a ottimizzare il tuo sito web nel miglior modo possibile.

In che modo l'indice di velocità si adatta alle prestazioni complessive del mio sito Web?

L'indice di velocità, come singola metrica, è un'ottima indicazione delle prestazioni del tuo sito web in una serie di aree diverse. Poiché tiene conto di contenuti above the fold completamente visibili, puoi utilizzarlo come indicatore non solo del caricamento percepito dall'utente, ma anche una stima approssimativa di ciò che il tuo sito sta facendo in una serie di aree diverse.

In realtà non ti dà molte informazioni da solo in termini di ciò che sta facendo il tuo sito web. Può essere visto come una metrica onnicomprensiva che, come afferma GTmetrix, "un utile benchmark generale per valutare le prestazioni del tuo sito web nella sua interezza".

Devo concentrarmi in particolare sul punteggio dell'indice di velocità?

Probabilmente no, no.

Sebbene sia molto utile eseguire il benchmark del tuo sito, concentrandosi su altri problemi più granulari come First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to First Byte (TTFB) e First Input Delay (FID) sono molto più importante. Puoi eseguire un numero qualsiasi di passaggi per migliorarli individualmente, il che a sua volta migliorerà il tuo indice di velocità. E se preso come benchmark generale, puoi vedere come stanno funzionando le tue ottimizzazioni attraverso SI.

Conclusione

L'ottimizzazione della velocità della pagina è una battaglia senza fine che i proprietari di siti Web combattono. Devi trovare l'equilibrio tra usabilità, esperienza e prestazioni e trovare quell'equilibrio può essere difficile. Quando i test restituiscono così tanti punteggi diversi su così tanti elementi diversi, può essere difficile sapere dove mettere le tue energie e risorse. L'indice di velocità può aiutare in questo, come singola metrica che mostra l'andamento del tuo sito mentre regoli altre parti più specifiche delle prestazioni del tuo sito.

Cosa hai fatto per ottimizzare l'indice di velocità del tuo sito web nel corso degli anni?

Immagine in primo piano dell'articolo di HappyDrawing / shutterstock.com