TTF: Come Ottimizzare Time To First Byte. Guida Completa

Il tempo al primo byte (TTFB) è una metrica fondamentale per misurare il tempo di configurazione della connessione e la reattività del server Web sia in laboratorio che sul campo. Aiuta a identificare quando un server Web è troppo lento per rispondere alle richieste. Nel caso delle richieste di navigazione, ovvero richieste di un documento HTML, precede ogni altra metrica significativa delle prestazioni di caricamento.

Che cos’è il First Iput Delay (FID) e perché è importante?

First Input Delay è una metrica di Core Web Vitals e misura quanto tempo impiega il browser a rispondere alla prima interazione dell’utente con una pagina, ovvero facendo clic su un collegamento, toccando un pulsante o interagendo con un altro elemento.

Diciamo che atterri su un sito e fai clic su un collegamento. Ovviamente, ti aspetteresti che la pagina risponda il prima possibile, giusto? Sfortunatamente, questo non è sempre il caso. Ad esempio, puoi fare clic su un collegamento e per un po’ non succede nulla, perché il browser non è in grado di elaborare immediatamente la richiesta dell’utente.

In parole più tecniche, è perché il thread principale del browser sta elaborando un’altra richiesta e non può rispondere a quella dell’utente. Molto spesso, le richieste che tengono occupato il browser sono legate all’elaborazione di file JavaScript. Esamineremo i file JS nella sezione successiva e spiegheremo come risolvere i problemi principali.

Quindi, torniamo a te: fai clic su un link e continui ad aspettare che succeda qualcosa sulla pagina… Abbastanza fastidioso, non è vero?

Ecco perché FID fa parte delle metriche Core Web Vitals e aiuta a misurare l’esperienza utente di una pagina.

A differenza delle altre due metriche di Core Web Vitals, il FID può essere misurato solo sul campo, dopotutto, si tratta solo dell’interazione degli utenti.

Per questo motivo, alcuni strumenti, come Lighthouse, non possono misurare il First Input Delay e utilizzare Total Blocking Time come proxy. TBT è una metrica di laboratorio che misura anche l’interattività e la reattività (senza l’interazione dell’utente). Finché il punteggio TBT è buono, anche il voto FID dovrebbe andare bene.

TBT rappresenta il 25% del punteggio complessivo di PageSpeed ​​Insights . È il peso più alto e solo LCP ha lo stesso. Migliorando le prestazioni TBT, probabilmente migliorerai il tuo grado di velocità della pagina e le prestazioni FID.

Che cos’è un buon punteggio FID

Come per gli altri Core Web Vital, i punteggi sono divisi in tre bucket: Buono, Necessita di miglioramento e Scarso.

Un buon punteggio FID deve avere un First Input Delay inferiore o uguale a 100 millisecondi.

Il punteggio “ha bisogno di miglioramenti” se è compreso tra 100 e 300 millisecondi.

D’altra parte, un punteggio “scarso” supera i 300 millisecondi.

Qual è un buon punteggio di tempo di blocco totale

Potresti chiederti se gli stessi intervalli di punteggio si applicano al tempo di blocco totale. Il punteggio TBT è leggermente diverso, come lo è la metrica stessa. La differenza fondamentale è che TBT misura l’interattività senza l’input dell’utente. Ecco perché può essere calcolato come dati di laboratorio.

Il tempo di blocco totale misura per quanto tempo la pagina è “bloccata” prima di rispondere all’input dell’utente come la pressione della tastiera, il tocco dello schermo o il clic del mouse: nessuna interazione dell’utente, vedi? La somma di tutti i “tempi di blocco” determina il punteggio TBT.

Per essere un po’ più tecnici, TBT misura la somma di tutti i periodi tra First Contentful Paint (quando puoi interagire con il primo contenuto della pagina) e Time to Interactive (quanto tempo impiega la pagina per diventare completamente interattiva).

Come al solito, Total Blocking Time include tre bucket:

Buono : minore o uguale a 300 millisecondi

Ha bisogno di miglioramenti – Tra 300-600 millisecondi

Scarso : oltre 600 millisecondi.

In breve: sia FID che TBT catturano l’interattività e la reattività di una pagina, anche se FID tiene conto dell’interazione dell’utente, mentre TBT si basa sull’input dell’utente. Per questo motivo, entrambe le metriche sono simili in termini di miglioramenti necessari.

Qual è il potenziale massimo ritardo di input del primo

Potresti esserti imbattuto nel ritardo massimo potenziale del primo input e ti sei chiesto qual è il rapporto con FID.

Il Maximum Potential First Input Delay misura il ritardo massimo tra l’interazione dell’utente e la risposta del browser.

È lo scenario peggiore basato sulla durata dell’attività più lunga dopo il Primo Contentful Paint, ovvero quando la prima parte della pagina di un contenuto viene visualizzata sullo schermo e puoi iniziare a interagire con la pagina.

Una volta che puoi fare clic su un collegamento o toccare un pulsante (Primo Contentful Paint completato), puoi misurare il tempo impiegato dalla pagina per rispondere alla tua richiesta mentre è in esecuzione l’attività più lunga. La lunghezza dell’attività più lunga è il Ritardo massimo potenziale del primo input.

Misurando il potenziale ritardo massimo di input prima, saprai quanto tempo aspetteranno gli utenti quando interagiscono con la pagina dopo aver visto il primo contenuto.

Come misurare il primo ritardo di input

Essendo una metrica di campo, il primo ritardo di input può essere misurato solo con alcuni strumenti:

Puoi anche misurare il FID in JavaScript utilizzando l’API Event Timing.

Puoi misurare la metrica proxy, Tempo di blocco totale, su questi altri strumenti:

Misurazione di FID e TBT con PageSpeed ​​Insights

PageSpeed ​​Insights ti offre l’opportunità più semplice di misurare il punteggio del Ritardo del primo input in base alla pagina, nonché il tempo di blocco totale:

Misurazione del FID con Search Console

Se desideri valutare le prestazioni FID a livello di sito del tuo sito, dai un’occhiata al rapporto Core Web Vitals in Search Console. Il rapporto si basa sul rapporto sull’esperienza utente di Chrome.

Scegliendo il rapporto mobile o desktop, puoi identificare i potenziali problemi di prestazioni del FID e approfondire gli URL interessati dallo stesso problema, ad esempio, Problema FID: più lungo di 100 ms.

Quali fattori influenzano il FID e causano un punteggio lento su WordPress

A questo punto, puoi intuire che il FID è principalmente influenzato dall’esecuzione di JavaScript. Quando il browser è impegnato a gestire file JavaScript pesanti, non può elaborare altre richieste, comprese quelle degli utenti.

Di conseguenza, l’interattività è scarsa; I tempi di esecuzione di JavaScript sono più lunghi; il thread principale è occupato e bloccato. In breve, la pagina non può rispondere agli input né alle interazioni dell’utente.

Vedremo diversi modi per risolvere questi problemi.

Poiché JavaScript è la chiave per migliorare FID, dovresti essere consapevole del fatto che avere molti plug -in, in particolare quelli basati su JavaScript, potrebbe anche influenzare il grado di First Input Delay. Dovresti evitare qualsiasi esecuzione JavaScript non necessaria nelle pagine in cui il plug-in non è necessario. È anche importante rimuovere tutti i plugin che non sono essenziali.

I temi pesanti di WordPress possono anche influenzare il grado di First Input Delay. Hanno più file JS, layout complessi e uno stile inefficiente che influenzerà il thread principale, quindi le prestazioni del FID.

Ecco perché meno complessità hanno i temi, meglio è. Ed è anche per questo che la tendenza ora è semplificare tutto: layout, animazioni, utilizzo più nativo di JS rispetto a librerie complesse.

Esamineremo le azioni per migliorare il FID nella prossima sezione. Se preferisci, puoi prima guardare il video che mostra come ottimizzare il FID con WP Rocket!

https://youtube.com/watch?v=-w1Yk-3fYNg%3Ffeature%3Doembed

Come ridurre il primo ritardo di input superiore a 100 ms o 300 ms su dispositivi mobili e desktop

Migliorare il modo in cui il browser gestisce l’esecuzione di JavaScript riduce il First Input Delay su WordPress e migliora il punteggio FID.

L’obiettivo è rendere il processo più veloce e fluido in modo che l’interattività e la reattività possano migliorare.

Se il tuo grado FID presenta problemi, nel rapporto Core Web Vitals su Search Console leggerai ” Problema FID: più di 100 ms ” o ” Problema FID: più di 300 ms “. Il problema può provenire da dispositivi mobili e/o desktop.

Esistono diversi modi per ottimizzare il grado di First Input Delay su WordPress:

Vediamo in dettaglio quali azioni dovresti intraprendere e qual è l’impatto sulle prestazioni.

1. Rinvia JavaScript

Impatto sulle prestazioni: elevato

Per quanto riguarda l’ottimizzazione dell’esecuzione di JavaScript, dovresti rimandare i file Javascript.

Rinviando i file JavaScript , queste risorse di blocco del rendering verranno caricate dopo che il browser ha eseguito il rendering del contenuto più pertinente, ovvero il contenuto necessario per consentire agli utenti di interagire con la pagina.

Di conseguenza, il tempo di caricamento migliorerà, così come il grado FID.

Dopo aver identificato le risorse JS da rinviare, è necessario aggiungere l’attributo defer ai file JavaScript. Il browser saprà quindi quali file rinviare fino al completamento del rendering della pagina.

Ecco un esempio dell’attributo differimento:

<script defer src="/example-js-script"></script>

Puoi facilmente gestire il differimento dei file JavaScript con WP Rocket e la sua funzione Carica Javascript differito .

Troverai questa opzione nella scheda Ottimizzazione file. Sarai anche in grado di escludere dal differimento di file JS specifici, nel caso in cui sia necessaria questa opzione a causa di un conflitto.

Affronterai i consigli di PageSpeed ​​” Elimina le risorse di blocco del rendering ” e “Riduci l’impatto del codice di terze parti”, anche se i problemi relativi alle risorse di blocco del rendering JS non finiscono qui.

Continua a leggere per sapere quali altre azioni dovresti implementare.

2. Rimuovere JavaScript inutilizzato

Impatto sulle prestazioni: medio

Puoi anche affrontare i problemi di JS rimuovendo i file JavaScript inutilizzati che rallentano i tempi di download e peggiorano l’interattività.

I file JS inutilizzati sono le risorse JavaScript non essenziali per il rendering della pagina o per niente utili. Tuttavia, questi file sono nel codice, quindi dovresti gestirli. Esempi di file JS inutilizzati sono i file JavaScript di terze parti come i codici di monitoraggio di analisi e annunci.

Il report PageSpeed ​​Insights mostra l’elenco dei file JS inutilizzati di cui dovresti occuparti:

Hai due opzioni per affrontare i file Javascript inutilizzati:

1. Carica i file JavaScript solo quando necessario.
Puoi utilizzare plug-in come Perfmatters e Assets Cleanup per caricare questi file solo quando necessario. L’esecuzione dei file JavaScript dovrebbe essere disabilitata in ogni altro caso. Come suggerimento aggiuntivo, puoi chiedere agli sviluppatori di temi e plug-in di assicurarsi che vengano caricate solo le risorse necessarie quando vengono utilizzate le rispettive funzionalità.

2. Ritarda i file JavaScript.
Ritardare le risorse JavaScript significa che i file JavaScript non verranno caricati fino alla prima interazione dell’utente (ad esempio, scorrimento, clic su un pulsante). In altre parole, nessun file JS verrà caricato a meno che non ci sia l’interazione dell’utente. È importante tenere a mente che non tutti gli script dall’elenco dei consigli di PageSpeed, come quello incluso sopra, possono essere ritardati in modo sicuro. Un ulteriore vantaggio del ritardo di JavaScript è che Lighthouse non rileverà alcun file JS. Di conseguenza, lo strumento non includerà nessuna di queste risorse JS nella raccomandazione “Rimuovi i file Javascript inutilizzati”.

Per essere chiari: non dovresti ritardare i file JS per risolvere questa raccomandazione PSI. Troverai maggiori informazioni sul motivo principale per cui dovresti ritardare JS nel punto successivo. Tuttavia, è utile che tu lo sappia come valore aggiunto per migliorare il tuo punteggio PSI.

Quindi, come puoi ritardare i file JavaScript? Puoi usare un plugin gratuito come Flying Scripts .

D’altra parte, puoi sfruttare WP Rocket e la sua funzione di esecuzione Delay JavaScript. La scheda Ottimizzazione file consente di ritardare l’esecuzione di JavaScript in pochi clic .

Infine, ecco un elenco di altri plugin che possono aiutarti a ridurre al minimo JS inutilizzato. Consigliamo di usarli con attenzione:

La rimozione dei file Javascript inutilizzati risolverà la specifica raccomandazione di PageSpeed ​​elencata nel rapporto. Ti occuperai anche dei consigli “Eliminazione delle risorse di blocco del rendering” e “Riduzione del tempo di esecuzione di javascript”.

Non perdere l’occasione!

I cheat sheet di Core Web Vitals sono il modo più semplice e veloce per imparare a ottimizzare LCP, FID e CLS e dare priorità alle tue attività di performance.Sì, voglio questo!

3. Ritarda il tempo di esecuzione di JS fino all’interazione dell’utente

Impatto sulle prestazioni: molto elevato

Puoi ottimizzare le risorse JavaScript e dare priorità agli script necessari per l’interazione ritardando i file JS e la loro esecuzione fino all’interazione dell’utente.

In altre parole, nessun file JavaScript verrà caricato fino all’interazione dell’utente, ad esempio facendo clic su un pulsante o scorrendo il contenuto.

Come spiegato sopra, dovresti ritardare tutti i file JavaScript che influiscono sul tempo di caricamento e sull’interazione senza motivo, come i file JS inutilizzati inclusi nella sezione precedente.

Come già sai, hai diverse opzioni per ritardare i file JavaScript. Puoi utilizzare un plug-in gratuito come Flying Scripts o sfruttare l’opzione della funzione di esecuzione Ritarda JavaScript fornita da WP Rocket – maggiori dettagli sopra.

Questo è il modo in cui affronterai la raccomandazione PSI “Riduci il tempo di esecuzione di javascript”.

4. Minimizza JS

Impatto sulle prestazioni: basso

Un altro modo efficace per gestire il tempo di esecuzione di JavaScript passa attraverso la minimizzazione dei file JavaScript.

Riducendo al minimo i file JS, rimuoverai eventuali commenti, interruzioni di riga e spazi vuoti inclusi nel codice. L’obiettivo è rendere le dimensioni dei file più piccole e veloci.

La minimizzazione può richiedere molto tempo e c’è sempre il rischio di perdere qualcosa. Per questi motivi, è meglio utilizzare uno strumento di minimizzazione o utilizzare WP Rocket. WP Rocket è il modo più semplice per ridurre al minimo i file JS in pochi clic. Devi solo abilitare l’opzione Minimizza file JavaScript nella scheda Ottimizzazione file.

Ti occuperai dei seguenti consigli di PageSpeed ​​Insights:

  • Minimizza JS
  • Evita enormi carichi utili di rete.

5. Rimuovere (o ridurre) CSS inutilizzato

Impatto sulle prestazioni: medio

Come spiegato nella sezione LCP, rimuovere o ridurre i CSS inutilizzati aiuta a migliorare il tempo di caricamento, quindi migliora l’interattività e la metrica FID.

WP Rocket offre una potente funzionalità che ti consente di affrontare i CSS inutilizzati con un clic. Devi solo abilitare l’opzione di seguito e il plug-in rimuoverà il CSS inutilizzato incluso nell’HTML della pagina.

Abilitando questa funzione, affronterai facilmente il consiglio “Riduci CSS inutilizzati”.

6. Asincrono o differiscono CSS

Impatto sulle prestazioni: medio

Il lavoro del thread principale può avere un impatto significativo sull’interattività e sulle prestazioni del FID. Ecco perché una delle raccomandazioni PSI è ” Riduci al minimo il lavoro del thread principale “. Per risolvere il problema e migliorare il tempo FID, devi differire o asincronare i file CSS.

Nella sezione Defer JavaScript, leggi perché il differimento è essenziale per consentire al browser di concentrarsi solo sulle risorse essenziali per il rendering della pagina. Lo stesso vale per i file CSS che sono risorse di blocco del rendering.

Un’opzione consiste nell’includere l’attributo Defer a tutti i file CSS:

<script defer src="/example-css-script"></script>

Ed ecco un altro processo in 2 fasi per caricare in modo asincrono le risorse CSS che bloccano il rendering:

  1. Estrai e inline il Critical Path CSS (CPCSS) usando uno strumento generatore disponibile come questo .
  2. Carica il resto delle classi in modo asincrono applicando il modello seguente.

Se cerchi informazioni più dettagliate, ti consigliamo di leggere la risorsa Google dedicata .

Un ulteriore consiglio da tenere a mente è evitare di inserire codice CSS non critico di grandi dimensioni nella <head> del codice.

Se stai cercando un modo più semplice e veloce per occuparti rapidamente di CSS critici e non critici, WP Rocket può aiutarti. In Ottimizza pubblicazione CSS, il nostro plug-in cache offre l’ opzione Carica CSS in modo asincrono che rinvia CSS non critici e CSS critici in linea .

Rimuoverai tutte le risorse CSS che bloccano il rendering abilitando l’opzione nella scheda Ottimizzazione file:

Tieni presente che se hai già abilitato l’opzione Rimuovi CSS inutilizzati (RUCSS), non puoi scegliere questa opzione , semplicemente perché non ne hai bisogno. WP Rocket sta già ottimizzando al meglio i file CSS. Ti consigliamo di ottimizzare CSS Delivery solo nel caso in cui RUCSS non funzioni per te.

Implementando queste azioni, ti occuperai ancora una volta dei consigli di PageSpeed ​​Insights “Elimina le risorse che bloccano il rendering”. Ti occuperai anche della raccomandazione “Evita il concatenamento di richieste critiche”.

7. Comprimere i file di testo

Impatto sulle prestazioni: elevato

Come puoi intuire a questo punto, la compressione è qualcosa di cui devi occuparti. Inutile dire che “Abilita compressione testo” è una delle raccomandazioni PSI che si applicano ai tempi FID.

Mediante la compressione e la riduzione delle dimensioni dei file, il browser e il server invieranno i file più velocemente. Il browser caricherà queste risorse più velocemente.

I formati di compressione più comuni sono Gzip e Brotli. Brotli è il formato più consigliato in questo momento. Puoi leggere di più su Brotli e GZIP nel nostro articolo dedicato .

Il modo più semplice per abilitare la compressione Gzip su WordPress è utilizzare un plug-in. Puoi scegliere tra diverse opzioni, dal plug-in Abilita compressione Gzip a WP Rocket, che include la compressione GZIP per impostazione predefinita. Tieni presente che alcuni host abilitano automaticamente la compressione GZIP.

8. Spezza le attività lunghe

Impatto sulle prestazioni: elevato

Come spiegato all’inizio dell’articolo, quando il thread principale è occupato e bloccato, il grado FID viene influenzato negativamente e la pagina non può rispondere agli input né alle interazioni dell’utente.

Il thread principale è bloccato a causa delle attività lunghe che il browser non può interrompere, ovvero tutte le attività in esecuzione per più di 50 ms. Ecco perché quando il thread principale è bloccato, una pagina non può rispondere agli input dell’utente e la reattività viene influenzata.

Per risolvere questo problema, dovresti dividere gli script di lunga durata in blocchi più piccoli che possono essere eseguiti in meno di 50 ms.

content-visibility è una nuova potente proprietà CSS che può aiutare a migliorare le prestazioni di rendering consentendo allo user agent di saltare il lavoro di rendering di un elemento finché non è necessario.

Puoi migliorare le prestazioni di carico applicando la visibilità del contenuto: auto; dimensione-intrinseca del contenuto: 1px 5000px; agli elementi in cui si desidera ritardare la vernice. Non dimenticare la seconda parte: è importante risolvere alcuni problemi di usabilità.

Attualmente, questa proprietà CSS funziona solo su Chrome e la maggior parte dei browser basati su di essa.

Infine, ti consigliamo di leggere due risorse su questo argomento, sulle attività lunghe e JavaScript intensivo .

Inizia oggi stesso a ottimizzare il tuo tempo FID su WordPress

Ora dovresti capire perché First Input Delay è essenziale per le prestazioni e l’esperienza dell’utente e come puoi migliorarne il punteggio. Applicando tutte queste tecniche di ottimizzazione, migliorerai il grado FID sul tuo sito WordPress.

Non sei ancora un cliente WP Rocket? Risparmia tempo e lascia che WP Rocket faccia il lavoro per te. WP Rocket è il modo più semplice per ottenere un eccellente punteggio FID . Non devi nemmeno toccare nessuna impostazione! WP Rocket applicherà automaticamente l’80% delle migliori pratiche per le prestazioni web. Vedrai subito un miglioramento istantaneo a occhio nudo nei tuoi punteggi di Core Web Vitals.

Inoltre, smetterai di gestire più plug-in per le prestazioni web. Avrai solo bisogno di WP Rocket per migliorare il tuo grado FID: non sono richieste conoscenze tecniche, lo promettiamo!

Vuoi dare un’occhiata prima? Quindi guarda il nostro video e  scopri come migliorare il First Input Delay con WP Rocket in pochi clic !

CORE WEB VITALS
Scopri le altre Metriche

LCP
Largest Contentful Paint

Largest Contentful Paint (LCP) è una metrica importante e incentrata sull’utente per misurare la velocità di caricamento percepita perché segna il punto netempo di caricamento della pagina in cui è probabile che il contenuto principale sia caricato.

LCP: Guida Completa

FID
First Input Delay

First Input Delay (FID) è una metrica importante e incentrata sull’utente per misurare la reattività del carico perché quantifica l’esperienza che gli utenti provano quando tentano di interagire con pagine che non rispondono.

FID: Guida Completa

CLS
Cumulative Layout Shift

Cumulative Layout Shift (CLS) è una metrica importante e incentrata sull’utente per misurare la stabilità visiva perché aiuta a quantificare la frequenza con cui gli utenti subiscono cambiamenti di layout imprevisti

CLS: Guida Completa
Un team di professionisti

🚀
Vuoi Superare i Core Web Vitals?

Offriamo Hosting super rapido, consulenza avanzata e specializzata per l’ottimizzazione della velocità del tuo sito.

Velocizza il mio sito 🚀