Minska cache-durationdelen av Time to First Byte

Minska cache-durationen av Time to First Byte

Time to First Byte (TTFB) kan delas upp i följande deldelar:

• Väntan + Omdirigering (eller vänteduration)
  
• Worker + Cache (eller cache-duration)
• DNS (eller DNS-duration)
• Anslutning  (eller anslutningsduration)
• Förfrågan (eller förfråganduration)

Vill du optimera Time to First Byte? Den här artikeln ger en djupgående analys av väntedurationdelen av Time to First Byte. Om du vill förstå eller åtgärda Time to First Byte och inte vet vad väntedurationen betyder, läs vad är Time to First Byte och åtgärda och identifiera Time to First Byte-problem innan du börjar med den här artikeln

Notera: vanligtvis är cache-durationdelen av Time to First Byte inte en flaskhals. Så fortsätt läsa om a) du använder en service worker, b) du är en pagespeed-entusiast som jag!

Vanligtvis är cache-durationdelen av Time to First Byte inte en flaskhals och sker inom 10 till 20 ms. När man använder en service worker är en acceptabel tid under 60 ms.

Hur påverkar service workers Time to First Byte?

Service workers kan ha både positiv och negativ inverkan på Time to First Byte (TTFB), men bara för webbplatser som använder Service Workers. 

Så här kan service workers påverka TTFB:

Sakta ner TTFB på grund av Service Worker-uppstartstid: workerStart-värdet representerar den tid det tar för en Service Worker att starta om en sådan finns för den begärda resursen. Denna uppstartstid inkluderas i TTFB-beräkningen. Om en Service Worker behöver startas eller återupptas från ett avslutat tillstånd kan det lägga till en fördröjning till den initiala svarstiden och öka TTFB.

Snabba upp TTFB genom cachelagring: Genom att använda en cachestrategi som stale-while-revalidate kan en service worker servera innehåll direkt från cachen om det finns tillgängligt. Detta leder till en nästan omedelbar TTFB för ofta besökta resurser, eftersom webbläsaren inte behöver vänta på ett serversvar. Denna strategi fungerar bara för sällan uppdaterat innehåll då dynamiskt genererat innehåll kräver aktuell information.

Snabba upp TTFB med app-shell: För klientrenderade applikationer, där app-shell-modellen innebär att en service worker levererar en grundläggande sidstruktur från cachen och dynamiskt laddar innehåll senare, reduceras TTFB för den basen till nästan noll.

Sakta ner TTFB med ooptimerad kod: Komplicerade och ineffektiva service workers kan sakta ner cache-uppslagsprocessen och därmed också sakta ner TTFB.

Är service workers dåliga för pagespeed? Nej (vanligtvis) är de inte alls dåliga! Även om Service Workers initialt kan öka TTFB på grund av uppstartstid, kan deras förmåga att fånga upp nätverksförfrågningar, hantera cachelagring och ge offlinestöd leda till betydande prestandaförbättringar på lång sikt, särskilt för återkommande besökare på en webbplats.

Hur man mäter cache-durationdelen av Time to First Byte

Du kan mäta cache-durationdelen av Time to First Byte med det här lilla kodavsnittet:

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
});

Hur man hittar TTFB-problem orsakade av en hög cache-duration

För att hitta den påverkan som riktiga användare upplever orsakad av cache-duration behöver du använda ett RUM-verktyg som CoreDash. Real User Monitoring låter dig spåra Core Web Vitals i stor detalj.

I CoreDash navigerar du helt enkelt till 'Time to First Byte' och visar nedbrytningsdetaljerna. Detta visar dig TTFB-nedbrytningen i alla dess deldelar och berättar exakt hur lång tid cacheDuration tar för den 75:e percentilen

/p>

Hur man minimerar service worker cache-tidspåverkan

För att optimera TTFB vid användning av Service Workers:

• Minimera komplexiteten hos Service Worker-skript för att minska uppstartstiden.
• Implementera effektiva cachestrategier inom Service Workern.
• Överväg att förcachea kritiska resurser under Service Worker-installationen.
• Övervaka och analysera regelbundet påverkan av Service Workers på din webbplats TTFB.

Genom att noggrant hantera Service Worker-implementeringen och förstå dess påverkan på TTFB kan utvecklare balansera den initiala overheaden med de långsiktiga prestandafördelarna som Service Workers ger.