Réduire la durée du cache, sous-partie du Time to First Byte

Réduire la durée du cache du Time to First Byte

Le Time to First Byte (TTFB) peut être décomposé en les sous-parties suivantes :

• Attente + Redirection (ou durée d'attente)
  
• Worker + Cache (ou durée du cache)
• DNS (ou durée DNS)
• Connexion (ou durée de connexion)
• Requête (ou durée de la requête)

Vous cherchez à optimiser le Time to First Byte ? Cet article fournit une analyse approfondie de la partie durée d'attente du Time to First Byte. Si vous cherchez à comprendre ou à corriger le Time to First Byte et que vous ne savez pas ce que signifie la durée d'attente, veuillez consulter qu'est-ce que le Time to First Byte et corriger et identifier les problèmes de Time to First Byte avant de commencer cet article

Note : généralement, la partie Cache Duration du Time to First Byte n'est pas un goulot d'étranglement. Continuez donc votre lecture si a) vous utilisez un service worker, b) vous êtes un passionné de pagespeed comme moi !

Généralement, la sous-partie durée du cache du Time to First Byte n'est pas un goulot d'étranglement et se produit entre 10 et 20 ms. Lors de l'utilisation d'un service worker, un temps acceptable est inférieur à 60 ms.

Comment les service workers affectent-ils le Time to First Byte ?

Les service workers peuvent avoir un impact positif et négatif sur le Time to First Byte (TTFB), mais uniquement pour les sites web qui utilisent des Service Workers.

Voici comment les service workers peuvent affecter le TTFB :

Ralentir le TTFB à cause du temps de démarrage du Service Worker : La valeur workerStart représente le temps nécessaire au démarrage d'un Service Worker s'il en existe un pour la ressource demandée. Ce temps de démarrage est inclus dans le calcul du TTFB. Si un Service Worker doit être démarré ou repris à partir d'un état terminé, cela peut ajouter un délai au temps de réponse initial et augmenter le TTFB.

Accélérer le TTFB grâce à la mise en cache : En utilisant une stratégie de mise en cache comme stale-while-revalidate, un service worker peut servir le contenu directement depuis le cache s'il est disponible. Cela conduit à un TTFB quasi instantané pour les ressources fréquemment consultées, car le navigateur n'a pas besoin d'attendre une réponse du serveur. Cette stratégie ne fonctionne que pour le contenu mis à jour peu fréquemment, comme le contenu généré dynamiquement qui nécessite des informations à jour.

Accélérer le TTFB avec l'app-shell : Pour les applications rendues côté client, le modèle app shell, où un service worker fournit une structure de page de base à partir du cache et charge dynamiquement le contenu plus tard, réduit presque à zéro le TTFB pour cette base.

Ralentir le TTFB avec du code non optimisé : Des service workers compliqués et inefficaces peuvent ralentir le processus de recherche dans le cache et ainsi ralentir également le TTFB.

Les service workers sont-ils mauvais pour la pagespeed ? Non (généralement), ils ne sont pas mauvais du tout ! Bien que les Service Workers puissent initialement augmenter le TTFB en raison du temps de démarrage, leur capacité à intercepter les requêtes réseau, à gérer la mise en cache et à fournir un support hors ligne peut conduire à de sérieuses améliorations des performances à long terme, en particulier pour les visiteurs réguliers d'un site.

Comment mesurer la sous-partie durée du cache du Time to First Byte

Vous pouvez mesurer la sous-partie durée du cache du Time to First Byte avec ce petit extrait :

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

Comment trouver les problèmes de TTFB causés par une durée de cache élevée

Pour trouver l'impact que les utilisateurs réels subissent à cause de la durée du cache, vous devrez utiliser un outil RUM comme CoreDash. Le real user monitoring vous permettra de suivre les Core Web Vitals dans les moindres détails.

Dans CoreDash, naviguez simplement vers 'Time to First Byte' et visualisez les détails de la répartition. Cela vous montrera la répartition du TTFB dans toutes ses sous-parties et vous indiquera exactement combien de temps prend la cacheDuration pour le 75ème percentile.

/p>

Comment minimiser l'impact du temps de cache du service worker

Pour optimiser le TTFB lors de l'utilisation de Service Workers :

• Minimisez la complexité des scripts de Service Worker pour réduire le temps de démarrage.
• Implémentez des stratégies de mise en cache efficaces au sein du Service Worker.
• Envisagez de pré-mettre en cache les ressources critiques lors de l'installation du Service Worker.
• Surveillez et analysez régulièrement l'impact des Service Workers sur le TTFB de votre site.

En gérant soigneusement l'implémentation du Service Worker et en comprenant son impact sur le TTFB, les développeurs peuvent équilibrer la surcharge initiale avec les avantages de performance à long terme que les Service Workers fournissent.