Vähennä Time to First Byte -mittarin cache duration -osatekijää

Vähennä Time to First Byte -mittarin cache duration -osaa

Time to First Byte (TTFB) voidaan jakaa seuraaviin osatekijöihin:

• Waiting + Redirect (eli odotusaika)
  
• Worker + Cache (eli cache duration)
• DNS (eli DNS-aika)
• Connection  (eli yhteysaika)
• Request (eli pyyntöaika)

Haluatko optimoida Time to First Byte -mittarin? Tämä artikkeli tarjoaa syvällisen analyysin Time to First Byte -mittarin waiting duration -osasta. Jos haluat ymmärtää tai korjata Time to First Byte -ongelmia etkä tiedä mitä waiting duration tarkoittaa, lue ensin mikä on Time to First Byte ja tunnista ja korjaa Time to First Byte -ongelmat ennen kuin jatkat tämän artikkelin lukemista

Huom: yleensä Time to First Byte -mittarin Cache Duration -osa ei ole pullonkaula. Jatka siis lukemista, jos a) käytät service workeria, b) olet pagespeed-intoilija kuten minä!

Yleensä Time to First Byte -mittarin cache duration -osa ei ole pullonkaula ja tapahtuu 10–20 ms:n sisällä. Service workeria käytettäessä hyväksyttävä aika on alle 60 ms.

Miten service workerit vaikuttavat Time to First Byte -mittariin?

Service workerit voivat vaikuttaa sekä positiivisesti että negatiivisesti Time to First Byte (TTFB) -mittariin, mutta vain verkkosivustoilla, jotka käyttävät Service Workereita. 

Näin service workerit voivat mahdollisesti vaikuttaa TTFB:hen:

Hidastaa TTFB:tä Service Workerin käynnistysajan vuoksi: workerStart-arvo kuvaa aikaa, joka Service Workerin käynnistymiseen kuluu, jos sellainen on käytössä pyydetylle resurssille. Tämä käynnistysaika sisältyy TTFB-laskentaan. Jos Service Worker täytyy käynnistää tai palauttaa lopetetusta tilasta, se voi lisätä viivettä alkuvasteaikaan ja kasvattaa TTFB:tä.

Nopeuttaa TTFB:tä välimuistituksen avulla: Käyttämällä välimuististrategiaa kuten stale-while-revalidate service worker voi tarjota sisältöä suoraan välimuistista, jos se on saatavilla. Tämä johtaa lähes välittömään TTFB:hen usein käytetyille resursseille, koska selaimen ei tarvitse odottaa palvelimen vastausta. Tämä strategia toimii vain harvoin päivittyvälle sisällölle, sillä dynaamisesti luotu sisältö vaatii ajantasaista tietoa.

Nopeuttaa TTFB:tä app-shell-mallilla: Asiakaspuolella renderöidyissä sovelluksissa app shell -malli, jossa service worker toimittaa perussivurakenteen välimuistista ja lataa sisällön dynaamisesti myöhemmin, TTFB kyseiselle perusrakenteelle pienenee lähes nollaan.

Hidastaa TTFB:tä optimoimattomalla koodilla: Monimutkaiset ja tehottomat service workerit voivat hidastaa välimuistihakuprosessia ja samalla hidastaa myös TTFB:tä.

Ovatko service workerit haitallisia sivunopeudelle? Eivät (yleensä), ne eivät ole lainkaan haitallisia! Vaikka Service Workerit voivat aluksi kasvattaa TTFB:tä käynnistysajan vuoksi, niiden kyky siepata verkkopyyntöjä, hallita välimuistia ja tarjota offline-tukea voi johtaa merkittäviin suorituskykyparannuksiin pitkällä aikavälillä, erityisesti sivuston toistuvien kävijöiden osalta.

Kuinka mitata Time to First Byte -mittarin cache duration -osa

Voit mitata Time to First Byte -mittarin cache duration -osan tällä koodinpätkällä:

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

Kuinka löytää korkean cache duration -arvon aiheuttamat TTFB-ongelmat

Löytääksesi todellisten käyttäjien kokeman vaikutuksen, jonka cache duration aiheuttaa, sinun on käytettävä RUM-työkalua kuten CoreDash. Real User Monitoring mahdollistaa Core Web Vitals -mittareiden seurannan erittäin yksityiskohtaisesti.

CoreDash-työkalussa navigoi yksinkertaisesti kohtaan 'Time to First Byte' ja tarkastele erittelyn yksityiskohtia. Tämä näyttää TTFB:n erittelyn kaikkiin osatekijöihinsä ja kertoo tarkalleen, kuinka kauan cacheDuration kestää 75. prosenttipisteessä

/p>

Kuinka minimoida service workerin välimuistiajan vaikutus

TTFB:n optimoimiseksi Service Workereita käytettäessä:

• Minimoi Service Worker -skriptien monimutkaisuus käynnistysajan vähentämiseksi.
• Toteuta tehokkaita välimuististrategioita Service Workerin sisällä.
• Harkitse kriittisten resurssien esivälimuistittamista Service Workerin asennuksen aikana.
• Seuraa ja analysoi säännöllisesti Service Workereiden vaikutusta sivustosi TTFB:hen.

Hallitsemalla Service Workerin toteutusta huolellisesti ja ymmärtämällä sen vaikutusta TTFB:hen kehittäjät voivat tasapainottaa alkuvaiheen lisäkuormituksen Service Workereiden tarjoamien pitkäaikaisten suorituskykyhyötyjen kanssa.