Descubra problemas de desempenho de renderização com esta referência de opções relacionadas ao desempenho na guia Renderização.
Destaque áreas repintadas com tinta piscando
Com essa opção ativada, o Chrome pisca a tela na cor verde sempre que ocorre uma nova pintura.
Para conferir áreas que estão sendo repintadas:
- Abra a guia Rendering nesta demonstração e marque Paint atualização.
- Observe a repintura destacada em verde.
Se, em outra página, você vir toda a tela verde piscando ou áreas da tela que você acha que não deveriam ser pintadas, investigue mais.
Destacar regiões de mudança de layout
As mudanças de layout causam reexibiçãos inesperadas e podem não ser apenas irritantes, mas prejudiciais.
Para visualizar o local e o tempo das mudanças de layout em uma página:
Abra a guia Rendering e marque Layout Shift Regiões.
Atualize a página. As áreas de mudança de layout são brevemente destacadas em roxo.
Visualizar camadas e blocos com bordas de camadas
Use Bordas da camada para visualizar uma sobreposição das bordas da camada e dos blocos na parte superior da página.
Para ativar as bordas de camadas:
- Abra a guia Renderização e marque Bordas da camada.
- Observe as bordas das camadas em laranja e verde-oliva e os blocos em ciano.
Consulte os comentários em debug_colors.cc para ver uma explicação sobre os códigos de cores.
Visualize quadros por segundo em tempo real com estatísticas de renderização de frames
As Estatísticas de renderização de frames são uma sobreposição exibida no canto superior direito da janela de visualização.
Para abrir Estatísticas de renderização de frames, siga estas etapas:
- Abra a guia Rendering e marque a caixa de seleção Estatísticas de renderização de frames.
- Observe as estatísticas no canto superior direito da página.
A sobreposição de Estatísticas de renderização de frames mostra:
- Estimativa em tempo real de quadros por segundo à medida que a página é exibida.
- Linha do tempo do frame como um gráfico com três tipos de frames:
- Os frames foram renderizados (linhas azuis)
- Frames parcialmente apresentados (linhas amarelas)
- Frames eliminados (linhas vermelhas).
- O estado da varredura da GPU: ativado ou desativado. Para saber mais, consulte Como fazer a varredura da GPU.
- Uso da memória da GPU: o número de MB de memória usados e máximo.
Identificar problemas de desempenho de rolagem
Use Problemas de desempenho de rolagem para identificar elementos da página que têm listeners de eventos relacionados à rolagem que podem prejudicar o desempenho da página.
Para conferir os elementos potencialmente problemáticos:
- Abra a guia Rendering e marque Scrolling Performance issues (Problemas de desempenho de rolagem).
- Observe os elementos potencialmente problemáticos destacados.
Conferir as Core Web Vitals
As Métricas da Web são uma iniciativa do Google para fornecer orientações unificadas quanto aos indicadores de qualidade essenciais para oferecer uma ótima experiência do usuário na Web.
As Core Web Vitals são o subconjunto que se aplica a todas as páginas da Web. Cada uma das Core Web Vitals representa uma faceta distinta da experiência do usuário, é mensurável no campo e reflete a experiência real de um resultado crítico centrado no usuário. As Core Web Vitals são:
- Maior exibição de conteúdo (LCP): mede a performance do carregamento. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em até 2,5 segundos após o início do carregamento da página.
- Interação com a próxima exibição (INP, na sigla em inglês): mede a interatividade. Para oferecer uma boa experiência do usuário, as páginas precisam ter um INP de 200 milissegundos ou menos.
- Mudança de layout cumulativa (CLS): mede a estabilidade visual. Para oferecer uma boa experiência do usuário, as páginas precisam manter um CLS de 0.1. ou menos.
Use a extensão Métricas da Web do Chrome para conferir os valores das Core Web Vitals na sua página.