Embora ferramentas como Lighthouse e Chrome DevTools sejam ótimas, às vezes você precisa de insights personalizados adaptados ao seu site. É aí que entram as Performance Web APIs! Nesta lição, vamos explicar como usar três APIs Web principais para medir e analisar a velocidade do seu site. Mas primeiro, o que são Performance Web APIs? As Performance Web APIs permitem que os desenvolvedores acompanhem com que eficiência uma página da web carrega e responde, diretamente do código. Essas APIs permitem que você meça os tempos de carregamento da página, acompanhe os atrasos de renderização e interação e analise o tempo de execução do JavaScript. Com essas APIs, você pode criar suas próprias ferramentas de monitoramento de desempenho sem depender de software de terceiros! Vamos explorar três poderosas Web APIs que você pode usar hoje. Primeiro, performance.now(). Esta API fornece timestamps de alta precisão (em milissegundos) para medir quanto tempo diferentes partes do seu site levam para carregar. Vamos supor que você queira medir quão rápido uma função é executada:

const start = performance.now();  
// Run some code here  
const end = performance.now();  

console.log(Execution time: ${end - start}ms);

Isto é mais preciso do que usar Date.now() porque mede o tempo em milissegundos com precisão de microssegundos, evitando problemas de deriva do relógio. Você pode usá-lo para rastrear o tempo de execução do script, atrasos na resposta de eventos e desempenho de animações. Em seguida, a Performance Timing API. Esta API fornece uma análise detalhada de cada etapa do carregamento da página, desde a consulta DNS até DOMContentLoaded. Quer medir quanto tempo sua página leva para carregar completamente?

let [navigationTiming] = performance.getEntriesByType("navigation");

if (navigationTiming instanceof PerformanceNavigationTiming) {
  // Calculate time from navigation start to DOM content loaded
  const pageLoadTime =
    navigationTiming.domContentLoadedEventEnd - navigationTiming.startTime;

  console.log("DOM Content Loaded Time:", pageLoadTime, "ms");
}

Métricas principais que você pode acompanhar com esta API são o tempo de pesquisa DNS - ou em outras palavras a velocidade de conexão, o Time to First Byte (TTFB) - ou velocidade de resposta do servidor e o DOMContentLoaded - ou em outras palavras, quando a página está pronta para interação. Se o tempo de carregamento da sua página estiver lento, esta API identifica exatamente onde o atraso acontece! E finalmente, vamos falar sobre PerformanceObserver. Esta API escuta eventos de desempenho como layout shifts, long tasks e user interactions. Quer monitorar tarefas JavaScript de longa duração?

const observer = new PerformanceObserver((list) => {  
  list.getEntries().forEach((entry) => {  
    console.log(Long task detected: ${entry.duration}ms);  
  });  
});  

observer.observe({ type: "longtask", buffered: true });

E o que essa API pode rastrear? Bem, ele pode rastrear tarefas longas - ou em outras palavras, JavaScript que bloqueia a renderização, mudanças de layout para detectar travamentos na interface e First Input Delay (FID) - ou quão rápido uma página responde à entrada do usuário. Se você quer monitoramento de desempenho em tempo real, esta API é revolucionária. Então, qual API você deve usar? Aqui está uma comparação rápida: | Performance API | Best For | | :--------------------- | :------------------------------------------------- | | performance.now() | Precise timing of functions and scripts | | Performance Timing API | Measuring full page load performance | | Performance Observer | Real-time monitoring of interactions and rendering | Ao combinar essas APIs, você pode criar suas próprias ferramentas de medição de desempenho e acompanhar exatamente o que mais importa para o seu site.