Riduci la sotto-parte cache duration del Time to First Byte

Riduci la cache duration del Time to First Byte

Il Time to First Byte (TTFB) può essere suddiviso nelle seguenti sotto-parti:

• Waiting + Redirect (o waiting duration)
  
• Worker + Cache (o cache duration)
• DNS (o DNS duration)
• Connection  (o connection duration)
• Request (o request duration)

Vuoi ottimizzare il Time to First Byte? Questo articolo fornisce un'analisi approfondita della parte waiting duration del Time to First Byte. Se vuoi capire o risolvere problemi di Time to First Byte e non sai cosa significa la waiting duration, leggi prima cos'è il Time to First Byte e come identificare e risolvere problemi di Time to First Byte prima di iniziare con questo articolo

Nota: di solito la parte Cache Duration del Time to First Byte non è un collo di bottiglia. Quindi continua a leggere se a) stai usando un service worker, b) sei un appassionato di pagespeed come me!

Di solito la sotto-parte cache duration del Time to First Byte non è un collo di bottiglia e si completerà entro 10-20 ms. Quando si utilizza un service worker, un tempo accettabile è inferiore a 60ms.

Come influiscono i service worker sul Time to First Byte?

I service worker possono avere un impatto sia positivo che negativo sul Time to First Byte (TTFB), ma solo per i siti web che utilizzano i Service Worker. 

Ecco come i service worker possono influenzare il TTFB:

Rallentamento del TTFB a causa del tempo di avvio del Service Worker: Il valore workerStart rappresenta il tempo necessario per l'avvio di un Service Worker, se presente per la risorsa richiesta. Questo tempo di avvio è incluso nel calcolo del TTFB. Se un Service Worker deve essere avviato o ripreso da uno stato terminato, può aggiungere un ritardo al tempo di risposta iniziale e aumentare il TTFB.

Accelerazione del TTFB tramite caching: Utilizzando una strategia di caching come stale-while-revalidate un service worker può servire i contenuti direttamente dalla cache, se disponibili. Questo porta a un TTFB quasi istantaneo per le risorse frequentemente accedute, poiché il browser non deve attendere una risposta dal server. Questa strategia funziona solo per contenuti aggiornati raramente, poiché i contenuti generati dinamicamente richiedono informazioni aggiornate.

Accelerazione del TTFB con app-shell: Per le applicazioni renderizzate lato client, il modello app shell, in cui un service worker fornisce una struttura di pagina di base dalla cache e carica dinamicamente i contenuti successivamente, il TTFB per quella base è quasi ridotto a zero.

Rallentamento del TTFB con codice non ottimizzato: Service worker complessi e inefficienti possono rallentare il processo di ricerca nella cache e di conseguenza rallentare anche il TTFB.

I service worker sono dannosi per il pagespeed? No, (di solito) non sono affatto dannosi! Sebbene i Service Worker possano inizialmente aumentare il TTFB a causa del tempo di avvio, la loro capacità di intercettare le richieste di rete, gestire il caching e fornire supporto offline può portare a seri miglioramenti delle prestazioni nel lungo periodo, soprattutto per i visitatori abituali di un sito.

Come misurare la sotto-parte cache duration del Time to First Byte

Puoi misurare la sotto-parte cache duration del Time to First Byte con questo piccolo snippet:

new PerformanceObserver((entryList) => {
  const [navigationEntry] = entryList.getEntriesByType('navigation');

  // get the relevant timestamps
  const activationStart = navigationEntry.activationStart || 0;
  const waitEnd = Math.max(
    (navigationEntry.workerStart || navigationEntry.fetchStart) -
    activationStart,
    0,
  );
  const dnsStart = Math.max(
    navigationEntry.domainLookupStart - activationStart,
    0,
  );

  // calculate the cache duration
  const cacheDuration = dnsStart - waitEnd;

  // log the results
  console.log('%cTTFB cacheDuration', 'color: blue; font-weight: bold;');
  console.log(cacheDuration);

}).observe({
  type: 'navigation',
  buffered: true
});

Come trovare problemi di TTFB causati da un'elevata cache duration

Per trovare l'impatto che gli utenti reali subiscono a causa della cache duration, dovrai utilizzare uno strumento RUM come CoreDash. Il Real User Monitoring ti permetterà di monitorare i Core Web Vitals in grande dettaglio.

In CoreDash naviga semplicemente a 'Time to First Byte' e visualizza i dettagli della suddivisione. Questo ti mostrerà la suddivisione del TTFB in tutte le sue sotto-parti e ti dirà esattamente quanto tempo impiega il cacheDuration per il 75° percentile

/p>

Come minimizzare l'impatto del tempo di cache del service worker

Per ottimizzare il TTFB quando si utilizzano i Service Worker:

• Minimizza la complessità degli script del Service Worker per ridurre il tempo di avvio.
• Implementa strategie di caching efficienti all'interno del Service Worker.
• Considera il pre-caching delle risorse critiche durante l'installazione del Service Worker.
• Monitora e analizza regolarmente l'impatto dei Service Worker sul TTFB del tuo sito.

Gestendo attentamente l'implementazione del Service Worker e comprendendone l'impatto sul TTFB, gli sviluppatori possono bilanciare il sovraccarico iniziale con i benefici prestazionali a lungo termine forniti dai Service Worker.