O Resource Waterfall desenha cada solicitação feita pela página em uma linha do tempo, cada barra dividida em suas fases reais – fila, DNS, TCP, TLS, espera e download – com marcadores para FCP, LCP, DOMContentLoaded e carregamento.
Quando uma página parece lenta, a pergunta é sempre a mesma: o que ela está esperando? A resposta do próprio navegador fica no painel Rede, o que significa abrir o DevTools, encaixar uma gaveta na página que você está inspecionando e recarregar para capturar o início do carregamento.
Resource Waterfall coloca essa linha do tempo em um painel flutuante ao lado da página. Cada solicitação aparece como uma barra posicionada por quando foi iniciada e segmentada por onde seu tempo realmente foi: enfileirado ou paralisado, pesquisa de DNS, conexão TCP, handshake TLS, espera pelo servidor e, em seguida, download. Um longo segmento azul é um servidor lento; uma longa e verde é uma lima grossa; um longo cinza significa que a solicitação estava aguardando sua vez. A distinção decide o que você deve corrigir.
Marcadores tracejados na linha do tempo mostram First Contentful Paint, Largest Contentful Paint, DOMContentLoaded e carregamento, para que você possa ver quais solicitações terminam antes que o usuário veja qualquer coisa e quais ainda estão em andamento depois. Os recursos de bloqueio de renderização e ocorrências de cache são sinalizados em cada linha, e um único filtro de bloqueio reduz a lista ao que realmente está atrasando a primeira pintura.
Filtre por tipo, pesquise por URL ou classifique por mais lento ou maior para encontrar rapidamente o pior infrator. Clique em qualquer linha para ver seu URL completo, protocolo, tamanhos de transferência e decodificação, status e detalhamento completo da fase. As solicitações que chegam enquanto o painel está aberto são transmitidas diretamente e o Export JSON copia toda a linha do tempo, incluindo os marcos, para que uma descoberta de desempenho possa ser entregue a outra pessoa sem uma captura de tela.
Cada barra é dividida em fila, DNS, TCP, TLS, espera e download, de modo que um servidor lento, um arquivo gordo e uma solicitação na fila são imediatamente distinguíveis.
As linhas tracejadas para FCP, LCP, DOMContentLoaded e load mostram quais solicitações são concluídas antes que o usuário veja o conteúdo e quais ainda estão em execução depois dele.
Um clique reduz a lista aos recursos que realmente retêm a primeira tinta, com contagens totais de bloqueios na barra de resumo.
Os recursos servidos pelo cache são marcados e rotulados em vez de aparecerem como linhas misteriosas de zero bytes, para que você possa verificar se o cache realmente funciona.
Restrinja por tipo — documento, CSS, JS, imagens, fontes, XHR, mídia — pesquise por URL ou classifique por mais lento ou maior para alcançar o pior infrator em segundos.
Copie toda a cascata como JSON, incluindo marcos, totais e fases por solicitação, para anexar a um ticket ou comparar com uma execução posterior.
Filtre para recursos de bloqueio de renderização e veja as folhas de estilo e scripts exatos entre o visitante e o conteúdo visível.
Classifique pelo mais lento e observe um provedor de análise, fonte ou chat aparecer no topo com uma longa fase de espera que não tem nada a ver com seu código.
Leia as cores das fases: o tempo gasto na espera é um problema de back-end ou CDN, o tempo gasto no download é um problema de tamanho do arquivo. A correção é diferente para cada um.
Recarregue e confirme se os ativos vêm do cache e se os tamanhos de transferência são muito menores que os tamanhos decodificados, provando que a compactação está realmente ativada.
Exporte a linha do tempo como JSON e anexe-a a um ticket para que a próxima pessoa veja os mesmos números em vez de tentar reproduzir sua sessão.
Clique no ícone Resource Waterfall no dock do DevSuite Pro. Tudo o que a página carregou até agora aparece na linha do tempo imediatamente.
Recarregue com o painel aberto para capturar a carga desde a primeira solicitação, incluindo o próprio documento e os marcos da pintura.
Pressione o chip de bloqueio para ver apenas os recursos de bloqueio de renderização ou escolha um tipo como js ou img. Classifique pelo mais lento para colocar o pior infrator no topo.
Clique em qualquer linha para ver seu URL completo, protocolo, tamanhos, status e um detalhamento fase por fase em milissegundos – e copie o URL se precisar.
Exportar JSON copia o cronograma completo com marcos e totais, pronto para colar em um ticket ou manter como um registro de antes e depois.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 71 ferramentas de desenvolvedor para seu navegador.
