Reduzieren Sie die Cache-Dauer-Teilkomponente der Time to First Byte

Reduzieren Sie die Cache-Dauer der Time to First Byte

Die Time to First Byte (TTFB) kann in die folgenden Teilbereiche unterteilt werden:

• Warten + Redirect (oder Wartezeit)
  
• Worker + Cache (oder Cache-Dauer)
• DNS (oder DNS-Dauer)
• Verbindung  (oder Verbindungsdauer)
• Anfrage (oder Anfragedauer)

Möchten Sie die Time to First Byte optimieren? Dieser Artikel bietet eine modifizierte Analyse des Wartezeit-Teils der Time to First Byte. Wenn Sie die Time to First Byte verstehen oder beheben möchten und nicht wissen, was die Wartezeit bedeutet, lesen Sie bitte was ist die Time to First Byte und Time to First Byte-Probleme finden und beheben, bevor Sie mit diesem Artikel beginnen.

Hinweis: Normalerweise ist der Cache-Dauer-Teil der Time to First Byte kein Engpass. Lesen Sie also weiter, wenn a) Sie einen Service Worker verwenden, b) Sie ein Pagespeed-Enthusiast wie ich sind!

Normalerweise ist der Cache-Dauer-Teilbereich der Time to First Byte kein Engpass und findet innerhalb von 10 bis 20 ms statt. Bei Verwendung eines Service Workers liegt eine akzeptable Zeit unter 60 ms.

Wie beeinflussen Service Worker die Time to First Byte?

Service Worker können einen positiven und einen negativen Einfluss auf die Time to First Byte (TTFB) haben, aber nur für Websites, die Service Worker verwenden. 

So können Service Worker möglicherweise die TTFB beeinflussen:

Verlangsamen der TTFB aufgrund der Service Worker Startzeit: Der workerStart-Wert repräsentiert die Zeit, die ein Service Worker zum Starten benötigt, falls einer für die angeforderte Ressource vorhanden ist. Diese Startzeit ist in der TTFB-Berechnung enthalten. Wenn ein Service Worker gestartet oder aus einem beendeten Zustand wiederaufgenommen werden muss, kann dies eine Verzögerung zur anfänglichen Antwortzeit hinzufügen und die TTFB erhöhen.

Beschleunigen der TTFB durch Caching: Durch die Verwendung einer Caching-Strategie wie stale-while-revalidate kann ein Service Worker Inhalte direkt aus dem Cache bereitstellen, falls verfügbar. Dies führt zu einer nahezu sofortigen TTFB für häufig abgerufene Ressourcen, da der Browser nicht auf eine Serverantwort warten muss. Diese Strategie funktioniert nur für selten aktualisierte Inhalte, nicht für dynamisch generierte Inhalte, die aktuelle Informationen erfordern.

Beschleunigen der TTFB mit App-Shell: Für clientseitig gerenderte Anwendungen, das App-Shell-Modell, bei dem ein Service Worker eine grundlegende Seitenstruktur aus dem Cache liefert und Inhalte später dynamisch lädt, wird die TTFB für diese Basis fast auf Null reduziert.

Verlangsamen der TTFB mit nicht optimiertem Code: Komplizierte und ineffiziente Service Worker können den Cache-Suchprozess verlangsamen und dadurch auch die TTFB verlangsamen.

Sind Service Worker schlecht für Pagespeed? Nein (normalerweise) sind sie überhaupt nicht schlecht! Während Service Worker die TTFB aufgrund der Startzeit zunächst erhöhen können, kann ihre Fähigkeit, Netzwerkanfragen abzufangen, Caching zu verwalten und Offline-Unterstützung zu bieten, langfristig zu erheblichen Leistungsverbesserungen führen, insbesondere für wiederkehrende Besucher einer Website.

Wie man den Cache-Dauer-Teilbereich der Time to First Byte misst

Sie können den Cache-Dauer-Teilbereich der Time to First Byte mit diesem kleinen Schnipsel messen:

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

  // relevante Zeitstempel abrufen
  const activationStart = navigationEntry.activationStart || 0;
  const waitEnd = Math.max(
    (navigationEntry.workerStart || navigationEntry.fetchStart) -
    activationStart,
    0,
  );
  const dnsStart = Math.max(
    navigationEntry.domainLookupStart - activationStart,
    0,
  );

  // Cache-Dauer berechnen
  const cacheDuration = dnsStart - waitEnd;

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

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

Wie man TTFB-Probleme findet, die durch eine hohe Cache-Dauer verursacht werden

Um die Auswirkungen zu finden, die echte Benutzer durch Cache-Dauer erfahren, müssen Sie ein RUM-Tool wie CoreDash verwenden. Real User Monitoring lässt Sie die Core Web Vitals bis ins Detail verfolgen.

In CoreDash navigieren Sie einfach zu 'Time to First Byte' und sehen sich die Aufschlüsselungsdetails an. Dies zeigt Ihnen die TTFB-Aufschlüsselung in alle ihre Teilbereiche und sagt Ihnen genau, wie lange die cacheDuration für das 75. Perzentil dauert.

/p>

Wie man die Auswirkungen der Service Worker Cache-Zeit minimiert

Um TTFB bei der Verwendung von Service Workern zu optimieren:

• Minimieren Sie die Komplexität von Service Worker-Skripten, um die Startzeit zu reduzieren.
• Implementieren Sie effiziente Caching-Strategien innerhalb des Service Workers.
• Erwägen Sie das Pre-Caching kritischer Ressourcen während der Service Worker-Installation.
• Überwachen und analysieren Sie regelmäßig die Auswirkungen von Service Workern auf die TTFB Ihrer Website.

Durch sorgfältiges Management der Service Worker-Implementierung und das Verständnis ihrer Auswirkungen auf die TTFB können Entwickler den anfänglichen Overhead mit den langfristigen Leistungsvorteilen ausbalancieren, die Service Worker bieten.