Use o painel Insights de performance para receber insights úteis e orientados por casos de uso sobre a performance do seu site.
Visão geral
Com o painel Insights de performance, você pode fazer o seguinte:
- Registrar e medir a performance de carregamento de página.
- Confira as métricas de performance das Métricas da Web.
- Ver atividade de rede.
- Simule velocidades mais lentas de CPU e rede.
- Importar e exportar gravações.
Por que um novo painel?
O novo painel Insights de desempenho é um experimento para resolver esses três pontos problemáticos dos desenvolvedores ao trabalhar com o painel Desempenho atual:
- Informações em excesso. Com a interface redesenhada, o painel Insights de performance simplifica os dados e mostra apenas informações relevantes.
- É difícil distinguir entre casos de uso. O painel Insights de performance oferece suporte a análises orientadas por casos de uso. No momento, ele só oferece suporte ao caso de uso de carregamento de página, mas mais recursos serão adicionados no futuro com base no seu feedback, como interatividade.
- Exige um conhecimento profundo de como os navegadores funcionam para ser usado com eficiência. O painel Insights de performance destaca os principais insights no painel Insights, com feedback prático sobre como corrigir problemas.
Introdução
Este tutorial ensina como medir e entender o desempenho de carregamento da página com o painel Insights de performance. Continue lendo ou assista a versão em vídeo deste tutorial acima.
Abrir o painel de insights de performance
- Abra o DevTools.
Clique em Mais opções > Mais ferramentas > Insights de performance.
Como alternativa, use o Menu de comandos para abrir o painel Insights de performance.
Performance de gravação
O painel Insights de performance pode registrar o desempenho geral e orientado por casos de uso (por exemplo, carregamento de página).
- Abra esta página de demonstração em uma nova guia e, nela, abra o painel "Insights de performance".
É possível limitar a rede e a CPU durante a gravação. Para este tutorial, marque Desativar cache e defina CPU como Redução de velocidade em 4 vezes no menu suspenso:
Clique em Medir o carregamento da página. O DevTools registra métricas de desempenho enquanto a página é recarregada e interrompe automaticamente a gravação alguns segundos após o término do carregamento.
Reproduzir uma gravação de performance
Use os controles na parte de baixo para controlar a reprodução da gravação.
Confira um exemplo de como fazer isso.
- Clique em Reproduzir para ouvir a gravação.
- Clique em Pausar para interromper a reprodução.
- Ajuste a velocidade de reprodução com o menu suspenso.
- Clique em Alternar visualização para mostrar ou ocultar a visualização.
Navegar em uma gravação de desempenho
As DevTools diminuem o zoom automaticamente para mostrar a linha do tempo completa da gravação. Você pode navegar pela gravação com zoom e mover a linha do tempo.
Para aumentar o zoom e mover a linha do tempo para a esquerda e para a direita, use os botões de navegação correspondentes:
- Clique na Linha do tempo para mover o indicador de reprodução e ver um frame específico.
- Clique nos controles Aumentar zoom e Diminuir zoom na parte de baixo para ajustar o zoom. Nesse caso, você faz zoom com base no marcador de reprodução.
- Arraste a barra de rolagem horizontal na parte de baixo para mover a linha do tempo para a esquerda e para a direita.
Você também pode usar atalhos do teclado. Clique no botão para ver os atalhos.
Ao usar atalhos, o zoom é aplicado com base no cursor do mouse.
Conferir insights de performance
Confira uma lista de insights de performance no painel Insights. Identifique e corrija possíveis problemas de performance.
Passe o cursor sobre cada insight para destacá-los nas faixas principais.
Clique em um insight, por exemplo, a solicitação de bloqueio de renderização, para abrir no painel Detalhes. Para entender melhor o problema, examine as seções Arquivo, Problema, Como corrigir e muito mais.
Conferir métricas de desempenho das Métricas da Web
As Métricas da Web são uma iniciativa do Google para unificar as orientações relacionadas a indicadores de qualidade essenciais para proporcionar uma boa experiência do usuário na Web.
É possível conferir essas métricas nos painéis Linha do tempo e Insights.
Passe o cursor sobre os insights na Linha do tempo para saber mais sobre as métricas.
Descobrir atrasos do Largest Contentful Paint
A maior exibição de conteúdo (LCP) é uma das métricas dos Core Web Vitals. Ela informa o tempo de renderização do maior bloco de texto ou imagem visível na janela de visualização, em relação ao momento em que a página começou a ser carregada.
Uma boa pontuação de LCP é de 2,5 segundos ou menos.
Se a maior exibição de conteúdo na sua página levar mais tempo para renderizar, na linha do tempo, você vai ver o selo LCP com um quadrado amarelo ou um triângulo vermelho.
Para abrir o painel Detalhes, clique no selo LCP no cronograma ou no painel Insights à direita. No painel, você pode descobrir possíveis causas para os atrasos e sugestões de como corrigir o problema.
Neste exemplo, uma solicitação bloqueia a renderização, e você pode aplicar estilos críticos inline para corrigir isso. Para saber mais, consulte Eliminar recursos de bloqueio de renderização.
Para conferir as subpartes do tempo de renderização do LCP, role a tela para baixo até a seção Detalhes > Detalhes de tempo.
O tempo de renderização do LCP consiste nas seguintes subpartes:
| Subparte da LCP | Descrição |
|---|---|
| Tempo até o primeiro byte (TTFB) | O tempo desde o momento em que o usuário inicia o carregamento da página até o momento em que o navegador recebe o primeiro byte da resposta do documento HTML. |
| Atraso no carregamento de recursos | O delta entre o TTFB e o momento em que o navegador começa a carregar o recurso LCP. |
| Tempo de carregamento do recurso | O tempo necessário para carregar o próprio recurso LCP. |
| Atraso na renderização do elemento | O delta entre o momento em que o recurso LCP termina de carregar e o momento em que o elemento LCP é totalmente renderizado. |
Se um elemento LCP não exigir um carregamento de recurso para renderizar, o atraso e o tempo de carregamento do recurso serão omitidos. Por exemplo, se o elemento for um nó de texto renderizado com uma fonte do sistema.
Ver atividade de troca de layout
Confira a atividade de mudanças de layout na faixa Mudanças de layout.
As trocas de layout são agrupadas em uma janela de sessão. No exemplo, há duas janelas de sessão. As janelas de sessão têm intervalos entre elas.
A Cumulative Layout Shift (CLS) é uma das métricas dos Core Web Vitals. Use a faixa Mudanças de layout para identificar possíveis problemas e causas de mudanças de layout.
Sempre comece com a maior janela de sessão ao melhorar a métrica CLS. No nosso exemplo, a janela de sessão 1 é a maior, com base na cor e no nível do plano de fundo.
Clique em uma captura de tela para ver os detalhes da mudança de layout, identificar possíveis causas principais e elementos afetados.
No nosso exemplo, a possível causa raiz é mídia sem tamanho definido. Para saber como corrigir isso, consulte Otimizar a mudança de layout cumulativa.
Entender a pontuação de troca de layout
Para entender como as pontuações são calculadas, use a seção Janela no painel Detalhes. A janela mostra a qual janela de sessão pertence a troca de layout atual.
Se a página inteira for movida, a pontuação máxima de cada troca de layout será 1. No nosso exemplo, a primeira mudança de layout teve uma pontuação de 0.15. A segunda mudança de layout teve uma pontuação de 0.041.
A pontuação total para esta janela de sessão é 0.19. Com base no limite de CLS, ele precisa de melhorias. A cor do plano de fundo da janela da sessão reflete o mesmo.
O gráfico de plano de fundo da janela de sessão aumenta com o tempo. A pontuação cumulativa da mudança de layout reflete o aumento naquele momento.
Ver atividade de rede
Confira a atividade de rede na faixa Rede. É possível expandir a faixa de rede para conferir todas as atividades de rede e clicar em cada item para ver os detalhes.
Conferir a atividade do renderizador
Confira a atividade de renderização na faixa Renderer. É possível expandir cada renderizador para ver as atividades e clicar em cada item para conferir os detalhes.
Ver atividade da GPU
Confira a atividade da GPU na faixa GPU. A faixa da GPU fica oculta por padrão. Para ativar, marque GPU em Configurações.
Ver velocidade do usuário
Para receber medidas de performance personalizadas, use o User Timing e visualize seus tempos com a faixa Tempo. Para mais informações, consulte a API User Timing.
Confira esta página de demonstração que calcula o tempo decorrido do carregamento de texto.
Para ver a velocidade do usuário:
- Marque lugares no seu aplicativo com
performance.mark(). - Meça o tempo decorrido entre as marcações com
performance.measure(). - Registrar desempenho.
- Confira as medições na faixa Tempos. Se a faixa não aparecer, verifique Tempos do usuário em Configurações.
- Para ver os detalhes, clique na marcação de tempo na faixa.
Personalizar a interface
Para personalizar a Linha do tempo e as Faixas, clique no ícone Configurações do painel e marque as opções que preferir.
Exportar uma gravação
Para salvar uma gravação, clique em Exportar .
Importar uma gravação
Para carregar uma gravação, selecione Importar .
Excluir uma gravação
Para excluir uma gravação, faça o seguinte:
- Clique em Excluir. Uma caixa de diálogo de confirmação será aberta.
- Na caixa de diálogo, clique em Excluir para confirmar a remoção.