Reducer cache duration-underdelen af Time to First Byte

Reducer cache duration af Time to First Byte

Time to First Byte (TTFB) kan opdeles i følgende underdele:

• Waiting + Redirect (eller ventevarighed)
  
• Worker + Cache (eller cache duration)
• DNS (eller DNS-varighed)
• Connection  (eller forbindelsesvarighed)
• Request (eller anmodningsvarighed)

Vil du optimere Time to First Byte? Denne artikel giver en dybdegående analyse af ventevarighedsdelen af Time to First Byte. Hvis du vil forstå eller rette time to first byte og ikke ved, hvad ventevarigheden betyder, se venligst hvad er time to first byte og ret og identificer time to first byte-problemer før du begynder med denne artikel

Bemærk: normalt er Cache Duration-delen af Time to First Byte ikke en flaskehals. Så fortsæt med at læse, hvis a) du bruger en service worker, b) du er en pagespeed-entusiast ligesom mig!

Normalt er cache duration-underdelen af time to first byte ikke en flaskehals og vil ske inden for 10 til 20 ms. Når du bruger en service worker, er en acceptabel tid under 60ms.

Hvordan påvirker service workers Time to First Byte?

Service workers kan have en positiv og en negativ indvirkning på Time to First Byte (TTFB), men kun for websites, der bruger Service Workers. 

Sådan kan service workers muligvis påvirke TTFB:

Sænker TTFB på grund af Service Worker opstartstid: workerStart-værdien repræsenterer den tid, det tager for en Service Worker at starte op, hvis en er til stede for den anmodede ressource. Denne opstartstid er inkluderet i TTFB-beregningen. Hvis en Service Worker skal startes eller genoptages fra en afsluttet tilstand, kan det tilføje en forsinkelse til den indledende svartid og øge TTFB.

Fremskynder TTFB med caching: Ved at bruge en cachingstrategi som stale-while-revalidate kan en service worker levere indhold direkte fra cachen, hvis det er tilgængeligt. Dette fører til en næsten øjeblikkelig TTFB for hyppigt tilgåede ressourcer, da browseren ikke behøver at vente på et serversvar. Denne strategi fungerer kun for sjældent opdateret indhold, da dynamisk genereret indhold kræver opdaterede oplysninger.

Fremskynder TTFB med app-shell: For klient-renderede applikationer leverer app shell-modellen en grundlæggende sidestruktur fra cachen via en service worker og indlæser indhold dynamisk senere, hvilket reducerer TTFB for den base til næsten nul.

Sænker TTFB med uoptimeret kode: Komplicerede og ineffektive service workers kan sænke cache-opslagsprocessen og dermed også sænke TTFB.

Er service workers dårlige for pagespeed? Nej (normalt) er de slet ikke dårlige! Selvom Service Workers indledningsvis kan øge TTFB på grund af opstartstid, kan deres evne til at opsnappe netværksanmodninger, administrere caching og give offline-understøttelse føre til seriøse ydeevneforbedringer på lang sigt, især for tilbagevendende besøgende på et websted.

Sådan måler du cache duration-underdelen af Time to First Byte

Du kan måle cache duration-underdelen af time to first byte med dette lille kodestykke:

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

Sådan finder du TTFB-problemer forårsaget af en høj cache duration

For at finde den påvirkning, som rigtige brugere oplever forårsaget af cache duration, skal du bruge et RUM-værktøj som CoreDash. Real user monitoring giver dig mulighed for at spore Core Web Vitals i stor detalje.

I CoreDash navigerer du blot til 'Time to First Byte' og ser nedbrydningsdetaljerne. Dette viser dig TTFB-nedbrydningen i alle dens underdele og fortæller dig præcist, hvor lang tid cacheDuration tager for den 75. percentil

/p>

Sådan minimerer du service worker cache-tidspåvirkning

For at optimere TTFB ved brug af Service Workers:

• Minimer kompleksiteten af Service Worker-scripts for at reducere opstartstiden.
• Implementer effektive cachingstrategier inden for Service Worker.
• Overvej at pre-cache kritiske ressourcer under Service Worker-installation.
• Overvåg og analyser regelmæssigt Service Workers' indvirkning på dit websteds TTFB.

Ved omhyggeligt at administrere Service Worker-implementering og forstå dens indvirkning på TTFB kan udviklere balancere den indledende overhead med de langsigtede ydeevnefordele, som Service Workers giver.