Usa el Monitor de rendimiento para obtener rápidamente una idea del rendimiento de carga y tiempo de ejecución de tu sitio.
Descripción general
El panel Monitor de rendimiento muestra un cronograma que grafica las métricas de rendimiento en tiempo real. Haz clic en una métrica para ocultarla o mostrarla. Luego, observa cómo cambia el gráfico a medida que interactúas con tu app.
El monitor de rendimiento realiza un seguimiento de las siguientes métricas:
- Uso de CPU
- Tamaño de la pila de JavaScript.
- Es la cantidad total de nodos DOM, objetos de escucha de eventos de JavaScript, documentos y marcos en la página.
- Diseños y recalculos de estilo por segundo.
Abre el panel del Monitor de rendimiento
Para abrir el panel Monitor de rendimiento, haz lo siguiente:
- Abre las Herramientas para desarrolladores.
- Para abrir el menú de comandos, presiona lo siguiente:
- macOS: Comando+Mayúsculas+P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Performance monitor, selecciona Show Performance monitor y presiona Intro. DevTools muestra el panel Monitor de rendimiento en la parte inferior de la ventana de DevTools.
Como alternativa, en la esquina superior derecha, selecciona Más opciones > Más herramientas > Supervisor de rendimiento.
Usa el panel del Monitor de rendimiento
El Monitor de rendimiento te brinda una idea general del rendimiento del entorno de ejecución de tu sitio web.
Observar cómo cambian los valores de las métricas a medida que interactúas con tu sitio web puede revelar oportunidades de mejora.
Una función útil del Monitor de rendimiento es que persiste durante la navegación por la página. Por lo tanto, como desarrollador de frontend, puedes evitar problemas como la fragmentación del diseño abriendo el Monitor de rendimiento, desplazándote por el sitio web y prestando atención a las métricas Nodos de DOM y Diseño/s.
Si los usuarios informan tiempos de carga lentos en tu sitio, el Monitor de rendimiento puede ayudarte a identificar las áreas problemáticas.
Por ejemplo, un aumento repentino y significativo en el uso de la CPU puede indicar un código ineficiente. Por lo general, si una página contiene una gran cantidad de objetos de escucha de eventos de JS, puede ser beneficioso refactorizar el código y reducir esas cantidades para liberar memoria.
Si recién estás comenzando a analizar el rendimiento, la ruta recomendada es usar primero el panel Lighthouse y, luego, investigar más con el panel Rendimiento o el Monitor de rendimiento.