Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
Utilize a Ferramenta de desempenho para analisar o desempenho do seu site. Existem duas vistas principais:
- A home page mostra as métricas locais à medida que interage com a página Web atual.
- Grave um perfil e veja um linha do tempo de desempenho.
Conteúdo detalhado:
- Visão geral
- Monitorizar métricas do Core Web Vitals
- Capturar e analisar um relatório de desempenho
- Melhorar o desempenho com estas ferramentas
Para obter instruções sobre como utilizar a ferramenta Desempenho para melhorar o desempenho do seu site, veja Analisar o desempenho do runtime (tutorial).
Visão Geral
A ferramenta Desempenho apresenta métricas locais para interações de página e permite-lhe registar perfis de desempenho da CPU das suas aplicações Web. Analise os perfis para encontrar potenciais estrangulamentos de desempenho e formas de otimizar a utilização de recursos.
Abrir a ferramenta Desempenho
Para abrir a ferramenta Desempenho :
Aceda a uma página Web, como a demonstração Explorar o universo , numa nova janela ou separador.
Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.
O DevTools é aberto.
Na Barra de Atividade na parte superior, clique no
Ferramenta de desempenho.Se a ferramenta
Performance (Desempenho ) não for apresentada na Barra de Atividade, clique no botão Mais ferramentas (
) e, em seguida, selecione a ferramenta Desempenho .
Utilizar o Menu de Comandos
Para abrir a ferramenta Desempenho utilizando o Menu de Comandos:
Aceda a uma página Web, como a demonstração Explorar o universo , numa nova janela ou separador.
Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.
O DevTools é aberto.
No canto superior direito de DevTools, clique em Personalizar e controlar DevTools, clique em Executar comando.
Em alternativa, prima:
- macOS: Comando+Shift+P
- Windows, Linux, ChromeOS: Controlo+Shift+P
O Menu de Comandos é aberto e lê Executar >Comando.
Comece a escrever desempenho, selecione Mostrar Desempenho [painel] e, em seguida, prima Enter.
Métricas locais para interações de página
Utilize a ferramenta Desempenho para ver as métricas Core Web Vitals na vista inicial de Métricas locais . A home page da ferramenta Desempenho mostra as métricas locais, que são métricas de desempenho sobre a página Web composta:
- Contentful Paint (LCP) maior – a rapidez com que o conteúdo principal da página foi carregado.
- Shift de Esquema Cumulativo (CLS) – uma medida da mudança de esquema de página inesperada mais recente.
- Interação com o Next Paint (INP) – a capacidade de resposta da interação mais recente do utilizador na página.
Quando abre inicialmente a ferramenta Desempenho , são apresentadas as métricas Core Web Vitals, em três cartões numa secção de Métricas locais :
Linha do tempo de perfil gravado
Utilize também a ferramenta Desempenho para ver um rastreio de desempenho registado, incluindo:
- Grave um perfil de desempenho.
- Alterar as definições de captura.
- Analisar um relatório de desempenho. Mostra informações sobre o desempenho da página durante o período de tempo em que a gravação ocorreu, tais como:
- As interações do utilizador que ocorreram durante a gravação.
- O código JavaScript que foi executado.
- As operações de estilo e esquema que ocorreram.
- Outras métricas de desempenho ao longo do tempo, como pedidos de rede e turnos de esquema.
Depois de registar um rastreio de desempenho, o rastreio de desempenho é apresentado em vez de Métricas locais.
Mudar para a visualização de métricas locais ou de outro perfil
Para mudar para apresentar a vista inicial de Métricas locais, clique no Voltar para a página de métricas dinâmicas (o botão 
).
Para mudar para apresentar um perfil gravado diferente linha do tempo, clique no menu pendente Mostrar sessões de linha do tempo recentes, à direita do Voltar para a página de métricas dinâmicas ().
Monitorizar métricas do Core Web Vitals
Utilize a ferramenta Desempenho para ver as métricas Core Web Vitals na vista inicial de Métricas locais . A home page da ferramenta Desempenho mostra as métricas locais, que são métricas de desempenho sobre a página Web composta:
- Contentful Paint (LCP) maior – a rapidez com que o conteúdo principal da página foi carregado.
- Shift de Esquema Cumulativo (CLS) – uma medida da mudança de esquema de página inesperada mais recente.
- Interação com o Next Paint (INP) – a capacidade de resposta da interação mais recente do utilizador na página.
Terminologia
| Termo | Descrição | Docs |
|---|---|---|
| Sinais Vitais da Web | Um grande conjunto de métricas que fornece orientações unificadas para proporcionar uma excelente experiência de utilizador na Web. | Sinais Vitais da Web em web.dev. |
| Core Web Vitals | O subconjunto de Sinais Vitais da Web que se aplicam a todas as páginas Web e deve ser medido por todos os proprietários de sites. Cada Um dos Principais Vitais da Web representa uma faceta distinta da experiência do utilizador, é mensurável no campo e reflete a experiência do mundo real de um resultado crítico centrado no utilizador. | Core Web Vitals na Web Vitals em web.dev. |
| Maior Tinta Contentful (LCP) | Mede o desempenho de carregamento . Para proporcionar uma boa experiência de utilizador, o LCP deve ocorrer no prazo de 2,5 segundos após o início do carregamento da página. O tempo de composição da maior imagem, bloco de texto ou vídeo visível na janela viewport, relativamente à altura em que o utilizador navegou pela primeira vez para a página. | O Maior Contentful Paint (LCP) no Glossário na MDN. LargestContentfulPaint na MDN. |
| Shift de Esquema Cumulativo (CLS) | Mede a estabilidade visual. Para proporcionar uma boa experiência de utilizador, as páginas devem manter um CLS de 0.1. ou menos. A maior rajada de pontuações de turno de esquema para cada mudança de esquema inesperada que ocorre durante todo o ciclo de vida de uma página. | Shift de Esquema Cumulativo (CLS) no Glossário na MDN. LayoutShift na MDN. |
| Interação com o Next Paint (INP) | Mede a interatividade. Para proporcionar uma boa experiência de utilizador, as páginas devem ter um INP de 200 milissegundos ou menos. A capacidade de resposta geral da página às interações do utilizador, com base na latência de todas as interações de clique, toque e teclado que ocorrem ao longo do ciclo de vida da visita de um utilizador a uma página. | Interação com o Next Paint (INP) no Glossário no MDN. PerformanceEventTiming no MDN. |
| métricas locais, dados locais | As métricas LCP, CLS e INP. São capturados localmente na página Web inspecionada e atualizados à medida que interage com a página. |
Utilizar a página de demonstração
Para produzir uma métrica de melhoriafraca ou necessária nos cartões LCP, CLS e INP na ferramenta Desempenho:
Abra uma página Web, como a demonstração Explorar o universo , numa nova janela ou separador.
A página de demonstração "Explorar o universo" foi concebida para carregar e processar interações lentamente de propósito, de modo a ilustrar como as métricas LCP, CLS e INP podem ser utilizadas na ferramenta Desempenho para identificar e corrigir problemas de desempenho.
Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.
O DevTools é aberto.
Na Barra de Atividade na parte superior, selecione o
Ferramenta de desempenho.Se a ferramenta
Performance (Desempenho ) não for apresentada na Barra de Atividade, clique no botão Mais ferramentas () e, em seguida, selecione a ferramenta Desempenho .Maximize a janela e torne o painel de página de demonstração largo, tal como 60% da largura da janela.
Se o painel de páginas de demonstração for demasiado estreito, alguns cartões poderão continuar a ser apresentados corretamente, com um valor verde, que não é o resultado pretendido.
Selecione o painel Passos seguintes Definições do ambiente card > lista pendente >limitação da CPU, selecione >4x abrandamento - recomendado.
Em alternativa, selecione Definições de captura (
) > Limitação da CPU>4x abrandamento - recomendado.Selecione o painel Passos seguintes Definições do ambiente card > lista pendente >Limitação de rede, selecione >Lento 4G.
Selecione o painel Passos seguintes Definições do ambiente card > selecione > a caixa de verificação Desativar cache de rede.
Clique com o botão direito do rato (ou clique com o botão longo do rato) no botão Atualizar à esquerda da Barra de endereço e, em seguida, selecione Esvaziar cache e atualização rápida.
Isto garante que a imagem é novamente carregada a partir do servidor, em vez de a partir da cache local.
Os cartões LCP e CLS mostram um valor laranja e precisam de ser melhorados, ou um valor vermelho e fraco, em vez de um valor verde e bom.
Se o card LCP ou CLS permanecer verde e indicar bom depois de a imagem galaxy terminar a composição, maximize a janela e torne o painel de página de demonstração mais largo.
O card LCP mostra que a imagem da galáxia demorou muito tempo a carregar. O card mostra um valor laranja e precisa de ser melhorado, ou um valor vermelho e fraco, em vez de um valor verde e bom. O motor identifica esta imagem como o maior item a ser composto.
Na card LCP, paire o cursor sobre o valor da métrica para ver informações numa descrição.
A card cls ilustra que saltos repentinos e inesperados no esquema podem afetar negativamente os utilizadores. Isto também se deve ao facto de a imagem demorar algum tempo a carregar. Por predefinição, a página Web de demonstração não especifica uma altura para a imagem, pelo que a página é inicialmente carregada sem reservar muito espaço para a imagem. Quando a imagem começa a aparecer, o conteúdo abaixo passa subitamente para baixo.
Na card CLS, paire o cursor sobre o valor da métrica para ver informações numa descrição.
Após a imagem galaxy terminar a composição, na página de demonstração composta, clique num dos cabeçalhos na coluna Descobertas à direita, como Teoria Heliocêntrica (1543).
O INP card de não mostrar um valor para mostrar um valor laranja e precisa de ser melhorado ou um valor vermelho e fraco. É apresentado um valor INP .
Na card INP, paire o cursor sobre o valor da métrica para ver informações numa descrição.
Na card INP, clique no valor INP.
Na página de demonstração, os cartões Deteções foram concebidos para expandir e voltar a compor lentamente, de modo a demorar muito tempo entre clicar no cabeçalho e compor o conteúdo expandido card. O atraso é um valor aleatório entre 100 e 1000ms, o que resulta num valor INP elevado.
Abaixo dos cartões de métricas Locais , os separadores Interações e Turnos de esquema são preenchidos.
Separador Interações
O separador Interações apresenta informações sobre as suas interações com a página Web:
O separador Interações inclui:
- Fases.
- Elementos.
- Temporizações.
Para limpar o separador Interações , clique no botão Limpar o registo atual (
) à direita do separador Interações .
Separador Turnos de esquema
O separador Turnos de esquema apresenta informações sobre turnos de esquema:
O separador Turnos de esquema inclui:
- Pontuações.
- Elementos.
Capturar e analisar um relatório de desempenho
Nas secções seguintes, siga as orientações sobre como registar um perfil, alterar as definições de captura e analisar o relatório.
Gravar um perfil de desempenho
Quando estiver pronto para gravar, a Ferramenta de desempenho oferece-lhe as seguintes opções:
- Registar o desempenho do runtime na referência de Funcionalidades de desempenho.
- Registar o desempenho da carga na referência de Funcionalidades de desempenho.
- Captura de ecrã enquanto grava na referência de Funcionalidades de desempenho.
- Force a libertação da memória durante a gravação na referência de Funcionalidades de desempenho.
- Guarde e partilhe uma gravação na referência de Funcionalidades de desempenho.
- Carregue uma gravação na referência de Funcionalidades de desempenho.
- Limpe a gravação anterior na referência de Funcionalidades de desempenho.
Alterar definições de captura
As definições de captura permitem-lhe alterar a forma como o DevTools captura gravações de desempenho e pode fornecer-lhe informações adicionais no relatório. Clique no botão Definições de captura (
) para aceder ao menu Definições de captura.
Selecione as seguintes opções no menu Definições de captura :
Selecione a caixa de verificação Desativar exemplos de JavaScript : Desativa a gravação das pilhas de chamadas JavaScript apresentadas na faixa Principal que são chamadas durante a gravação. Reduz a sobrecarga de desempenho. Veja Desativar exemplos de JavaScript na Referência de funcionalidades de desempenho.
Selecione a caixa de verificação Ativar instrumentação de composição avançada (lenta ): captura a instrumentação avançada do paint. Dificulta significativamente o desempenho. Veja Enable advanced paint instrumentation in Performance features reference (Ativar a instrumentação avançada do paint na referência de funcionalidades de desempenho).
Selecione a caixa de verificação Ativar estatísticas do seletor CSS (lentas ): captura as estatísticas do seletor CSS. Dificulta significativamente o desempenho. Veja Ver os custos do seletor CSS na barra lateral da ferramenta Desempenho em Novidades no DevTools (Microsoft Edge 131).
Limitação da CPU: simule velocidades de CPU mais lentas. Veja Limitar a CPU durante a gravação na referência de Funcionalidades de desempenho.
Limitação de rede: simule velocidades de rede mais lentas. Veja Limitar a rede durante a gravação na Referência de funcionalidades de desempenho.
Analisar um relatório de desempenho
Para obter um guia completo sobre como utilizar a ferramenta Desempenho , veja Analisar uma gravação de desempenho na Referência de funcionalidades de desempenho.
Para navegar num relatório de desempenho:
Consulte Navegar na gravação na referência de Funcionalidades de desempenho.
Veja Pesquisa de atividades na Referência de funcionalidades de desempenho.
Veja Monitorizar iniciadores de eventos na Referência de funcionalidades de desempenho.
Para se concentrar no que é importante para o seu fluxo de trabalho:
Amplie partes de uma gravação e alterne entre níveis de zoom na Referência de funcionalidades de desempenho.
Para saber mais sobre os separadores Fundo para cima, Árvore de chamadas e Registo de eventos :
- Ver atividades numa tabela na Referência de funcionalidades de desempenho.
Para analisar um relatório de desempenho:
- Veja a atividade do thread principal na Referência de funcionalidades de desempenho.
- Leia o gráfico de chama na referência de Funcionalidades de desempenho.
- Veja uma captura de ecrã na referência de Funcionalidades de desempenho.
- Veja as métricas de memória na Referência de funcionalidades de desempenho.
- Veja a duração de uma parte de uma gravação na referência de Funcionalidades de desempenho.
- Analise o desempenho do seletor CSS durante os eventos Recalcular Estilo.
- Analise os fotogramas por segundo (FPS) na referência de Funcionalidades de desempenho.
- Referência de evento de gravação de desempenho
Melhorar o desempenho com estas ferramentas
Descubra outras ferramentas que podem ajudá-lo a melhorar o desempenho do seu site:
| Mal-Intencionado | Artigo |
|---|---|
| Ferramenta do Lighthouse | Otimizar a velocidade do site com o Lighthouse |
| Ferramenta de memória | Corrigir problemas de memória |
| SeparadorInformações da ferramenta > de desempenho | Obtenha informações acionáveis na Referência de funcionalidades de desempenho. |
| Ferramenta de composição | Ferramenta de composição, para ver o aspeto de uma página Web com diferentes opções de visualização ou deficiências visuais |
| Ferramenta de problemas | Localizar e corrigir problemas com a ferramenta Problemas |
| Ferramenta de desempenho | Ver informações de camadas na Referência de funcionalidades de desempenho |
Confira também
- Explorar a página de demonstração do universo
Observação
Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Dale St. Marthe e Sofia Emelianova.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.