Reduza a sub-parte da duração do cache do Time to First Byte

Reduza a duração do cache do Time to First Byte

O Time to First Byte (TTFB) pode ser dividido nas seguintes sub-partes:

• Waiting + Redirect (ou duração de espera)
  
• Worker + Cache (ou duração do cache)
• DNS (ou duração do DNS)
• Connection  (ou duração da conexão)
• Request (ou duração da requisição)

Quer otimizar o Time to First Byte? Este artigo fornece uma análise detalhada da parte de duração de espera do Time to First Byte. Se você está procurando entender ou corrigir o Time to First Byte e não sabe o que significa a duração de espera, por favor leia o que é o Time to First Byte e identifique e corrija problemas de Time to First Byte antes de começar com este artigo

Nota: geralmente a parte de Cache Duration do Time to Fist Byte não é um gargalo. Então continue lendo se a) você está usando um service worker, b) você é um entusiasta de pagespeed como eu!

Geralmente, a sub-parte de duração do cache do Time to First Byte não é um gargalo e acontece dentro de 10 a 20 ms. Ao usar um service worker, um tempo aceitável é abaixo de 60ms.

Como os service workers afetam o Time to First Byte?

Service workers podem ter um impacto positivo e negativo no Time to First Byte (TTFB), mas apenas para sites que usam Service Workers. 

Veja como os service workers podem afetar o TTFB:

Diminuem o TTFB por causa do Tempo de Inicialização do Service Worker: O valor workerStart representa o tempo que leva para um Service Worker iniciar, se houver um presente para o recurso solicitado. Este tempo de inicialização está incluído no cálculo do TTFB. Se um Service Worker precisar ser iniciado ou retomado de um estado encerrado, ele pode adicionar um atraso ao tempo de resposta inicial e aumentar o TTFB.

Aceleram o TTFB através de cache: Ao usar uma estratégia de cache como stale-while-revalidate um service worker pode servir conteúdo diretamente do cache, se disponível. Isso leva a um TTFB quase instantâneo para recursos acessados frequentemente, pois o navegador não precisa esperar pela resposta do servidor. Esta estratégia funciona apenas para conteúdo atualizado com pouca frequência, já que conteúdo gerado dinamicamente requer informações atualizadas.

Aceleram o TTFB com app-shell: Para aplicações renderizadas no cliente, o modelo app shell, onde um service worker entrega uma estrutura básica de página do cache e carrega conteúdo dinamicamente depois, o TTFB para essa base é quase reduzido a zero.

Diminuem o TTFB com código não otimizado: Service workers complicados e ineficientes podem desacelerar o processo de pesquisa de cache e, ao fazê-lo, também desacelerar o TTFB.

Service workers são ruins para pagespeed? Não (geralmente) eles não são ruins! Embora Service Workers possam inicialmente aumentar o TTFB devido ao tempo de inicialização, sua capacidade de interceptar requisições de rede, gerenciar cache e fornecer suporte offline pode levar a melhorias sérias de desempenho a longo prazo, especialmente para visitantes recorrentes de um site.

Como medir a sub-parte de Cache Duration do Time to First Byte

Você pode medir a sub-parte de duração do cache do Time to First Byte com este pequeno snippet:

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

Como encontrar problemas de TTFB causados por uma alta Cache Duration

Para encontrar o impacto que usuários reais experimentam causado pela duração do cache, você precisará usar uma ferramenta RUM como CoreDash. Real User Monitoring permitirá que você rastreie os Core Web Vitals em grande detalhe.

No CoreDash simplesmente navegue até 'Time to First Byte' e visualize os detalhes do breakdown. Isso mostrará o breakdown do TTFB em todas as suas sub-partes e dirá exatamente quanto tempo a cacheDuration leva para o percentil 75

/p>

Como minimizar o impacto do tempo de cache do service worker

Para otimizar o TTFB ao usar Service Workers:

• Minimize a complexidade dos scripts do Service Worker para reduzir o tempo de inicialização.
• Implemente estratégias de cache eficientes dentro do Service Worker.
• Considere pré-cachear recursos críticos durante a instalação do Service Worker.
• Monitore e analise regularmente o impacto dos Service Workers no TTFB do seu site.

Ao gerenciar cuidadosamente a implementação do Service Worker e entender seu impacto no TTFB, desenvolvedores podem equilibrar a sobrecarga inicial com os benefícios de desempenho a longo prazo que os Service Workers proporcionam.