O Desempenho da Página fornece uma visão geral instantânea de qualquer página web — métricas de tempo de carregamento (FCP, DOMContentLoaded, carga total, TTI), estatísticas do DOM (contagem de elementos, profundidade de aninhamento, ouvintes de eventos) e um detalhamento de recursos mostrando a quantidade e o tamanho de JavaScript, CSS, imagens, fontes e outros ativos. Uma pontuação de desempenho codificada por cores fornece um indicador rápido de integridade.
O perfil de desempenho com o Lighthouse ou o WebPageTest fornece uma análise profunda, mas leva tempo para rodar e produz relatórios esmagadores. Às vezes, você só precisa de uma resposta rápida: "Essa página é rápida ou lenta? Qual é o maior problema?" O Desempenho da Página fornece essa visão geral instantânea. Ele lê os dados de tempo da API de Desempenho e da API de Tempo de Navegação do navegador (dados que já foram coletados — sem necessidade de carregamento adicional da página) e os apresenta em um painel visual e limpo. A seção superior mostra as principais métricas de tempo: First Contentful Paint (quando o primeiro conteúdo aparece), DOMContentLoaded (quando o HTML é totalmente analisado), Full Load (quando todos os recursos terminam) e Time to Interactive (quando a página se torna responsiva). Cada métrica é codificada por cores — verde para rápido, amarelo para moderado, vermelho para lento — com base nos limites dos Core Web Vitals. Abaixo disso, um detalhamento de recursos mostra quanta largura de banda é gasta em JavaScript, CSS, imagens, fontes e outros tipos de recursos, com gráficos de barras visuais para fácil comparação. A seção de estatísticas do DOM mostra a contagem total de elementos, a profundidade máxima de aninhamento e a contagem de ouvintes de eventos — indicadores de complexidade do DOM que afetam o desempenho de renderização.
Mostra o First Contentful Paint (FCP), DOMContentLoaded, Carga Total da Página (Full Load) e Time to Interactive (TTI) — as quatro métricas de desempenho mais importantes. Cada uma é codificada por cores: verde (rápido), amarelo (moderado), vermelho (lento) com base nos limites estabelecidos pelos Web Vitals.
Gráfico de barras visual mostrando a quantidade e o tamanho total de cada tipo de recurso: arquivos JavaScript, folhas de estilo CSS, imagens, fontes e outros ativos. Veja instantaneamente qual tipo de recurso contribui mais para o peso da página.
Mostra a contagem total de elementos do DOM, profundidade máxima de aninhamento e contagem total de ouvintes de eventos. Grandes tamanhos de DOM (2000+ elementos) e aninhamento profundo (15+ níveis) são sinalizados como potenciais gargalos de desempenho.
Uma única pontuação de 0 a 100 resume a integridade do desempenho da página, codificada por cores: verde (85+), amarelo (50-84) ou vermelho (0-49). Baseada em uma combinação ponderada de métricas de tempo e eficiência de recursos.
Mostra o tamanho combinado de todos os recursos baixados em MB. Detalhado por categoria para que você possa ver que 842 KB é JavaScript, 245 KB é imagens e 128 KB é CSS — identificando os maiores contribuintes.
Lê os dados de desempenho da API de Desempenho do navegador — dados que já são coletados durante o carregamento normal da página. Sem re-testes sintéticos, sem solicitações de rede adicionais e sem impacto no desempenho ao executar a ferramenta.
Abra qualquer página e tenha uma visão geral instantânea do desempenho. É rápida (pontuação verde), moderada (amarela) ou lenta (vermelha)? O painel responde isso em menos de um segundo — sem precisar esperar o funcionamento do Lighthouse.
Se a página estiver lenta, o detalhamento de recursos mostra o porquê. 1,2 MB de JavaScript? Esse é o gargalo. 800 KB de imagens não otimizadas? Essa é a correção. O detalhamento visual torna os maiores responsáveis muito óbvios.
Execute o Desempenho da Página antes de realizar as otimizações e note as métricas. Faça as alterações, recarregue a página e rode-a novamente. Compare o FCP, o tempo de carregamento e o peso total da página para verificar as melhorias esperadas.
Rode o Desempenho da Página em seu site e também nos sites dos concorrentes. Compare cada um por seu tempo de carregamento, peso da página e distribuição dos recursos. Os concorrentes enviam menos JavaScript? Suas imagens estão melhor otimizadas?
Execute habitualmente a ferramenta nas páginas principais durante o desenvolvimento. Se a pontuação de desempenho cair vertiginosamente ou o peso da página aumentar de repente, você notará a regressão introduzida precocemente antes de chegar ao fim de produção.
Abra o painel flutuante do DevSuite Pro e clique no ícone Desempenho da Página. O painel aparece instantaneamente com os dados de desempenho do carregamento da página atual.
Verifique as quatro principais métricas de tempo na parte superior: FCP, DOMContentLoaded, Full Load e TTI. Valores verdes são rápidos, amarelo é moderado, vermelho precisa de melhorias.
Olhe o gráfico de barras de recursos para ver qual é o tipo de ativo mais pesado. Freqüentemente o JavaScript é o maior contribuinte — se o JS for superior a 500 KB, pode valer a pena aplicar o code-splitting ou lazy-loading.
Revise as estatísticas do DOM. Se a contagem de elementos for superior a 1500 ou a profundidade de aninhamento for superior a 15, considere simplificar a marcação para melhorar o desempenho de renderização.
A pontuação geral fornece um benchmark rápido. Execute a ferramenta antes e depois de realizar otimizações para medir as melhorias.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 64 ferramentas de desenvolvedor para seu navegador.
