Esta página es una referencia completa de las funciones de las Herramientas para desarrolladores de Chrome relacionadas con el análisis del rendimiento.
Consulta Analiza el rendimiento del tiempo de ejecución para obtener un instructivo guiado sobre cómo analizar el rendimiento de una página con las Herramientas para desarrolladores de Chrome.
Pantalla de métricas en tiempo real
Cuando abras el panel Rendimiento por primera vez, verás la pantalla Métricas en tiempo real, que te brinda un resumen instantáneo del rendimiento de la página actual con las tres Métricas web esenciales.
Las métricas se actualizan a medida que interactúas con la página y navegas a páginas nuevas, incluidas las navegaciones suaves del cliente en aplicaciones de una sola página, indicadas con una insignia de SOFT NAV. Esta es una buena manera de identificar problemas de rendimiento, en especial para INP y CLS si solo aparecen en determinadas circunstancias. Una vez que un problema de rendimiento se repite de forma constante, puedes grabar un registro para obtener más detalles y depurar el problema subyacente.
Funciones de la pantalla de métricas en tiempo real
Además de las métricas, la pantalla Métricas en tiempo real tiene las siguientes funciones:
- Métricas de campo de CrUX cuando se habilitan en el panel Métricas de campo
- Es un resumen de las diferencias notables entre las métricas locales y las de campo.
- El elemento LCP, sobre el que puedes colocar el cursor para destacarlo en la página
- Detalles del clúster de CLS y el tipo de INP
- Más detalles sobre cómo colocar el cursor sobre las métricas (por ejemplo, las subpartes de LCP e INP, y los histogramas de campo)
- Paneles de Interacciones y Cambios de diseño que registran el historial de interacciones y cambios de diseño.
- Un panel de Métricas de campo en el que se pueden activar los datos de CrUX, detalles del período de esos datos, la capacidad de alternar entre los datos de origen y de URL (cuando estén disponibles) y entre los datos de computadoras de escritorio y dispositivos móviles.
- Un panel de configuración del entorno con orientación sobre qué dispositivo, CPU y limitación de la red usar, según los datos de CrUX
Para obtener más detalles, consulta la entrada de blog Supervisa el rendimiento de las Core Web Vitals locales y de usuarios reales en Herramientas para desarrolladores.
Registra el rendimiento
Puedes registrar el rendimiento del tiempo de ejecución o de carga con los botones que se encuentran en la parte superior izquierda o inferior derecha de la pantalla:
Cómo registrar el rendimiento del entorno de ejecución
Graba el rendimiento del tiempo de ejecución cuando quieras analizar el rendimiento de una página mientras se ejecuta, en lugar de cuando se carga.
- Ve a la página que quieras analizar.
- Haz clic en la pestaña Rendimiento en Herramientas para desarrolladores.
- Haz clic en Grabar
. - Interactúa con la página. Las Herramientas para desarrolladores registran toda la actividad de la página que se produce como resultado de tus interacciones.
- Vuelve a hacer clic en Grabar o en Detener para detener la grabación.
Rendimiento de carga de registros
Registra el rendimiento de carga cuando quieras analizar el rendimiento de una página mientras se carga, en lugar de cuando se ejecuta.
- Ve a la página que quieras analizar.
- Abre el panel Rendimiento de las Herramientas para desarrolladores.
- Haz clic en Record and reload
. Primero, las Herramientas para desarrolladores navegan a about:blankpara borrar las capturas de pantalla y los registros restantes. Luego, las Herramientas para desarrolladores registran las métricas de rendimiento mientras se vuelve a cargar la página y, luego, detienen automáticamente el registro unos segundos después de que finaliza la carga.
DevTools acerca automáticamente la parte de la grabación en la que se produjo la mayor parte de la actividad.
En este ejemplo, el panel Rendimiento muestra la actividad durante la carga de una página.
Cómo tomar capturas de pantalla durante la grabación
Habilita la casilla de verificación Screenshots para capturar una captura de pantalla de cada fotograma durante la grabación.
Para personalizar la fidelidad de la grabación visual dentro de los límites de memoria, abre Configuración de captura 
y selecciona un parámetro predeterminado de límite de recuento y tamaño de fotogramas en el menú desplegable Captura de pantalla.
Consulta Cómo ver una captura de pantalla para obtener información sobre cómo interactuar con las capturas de pantalla.
Forzar la recolección de elementos no utilizados durante la grabación
Mientras grabas una página, haz clic en Collect garbage para forzar la recolección de elementos no utilizados.
Mostrar la configuración de grabación
Haz clic en Capture settings
para
mostrar más parámetros de configuración relacionados con la forma en que las Herramientas para desarrolladores capturan las grabaciones de rendimiento.
Inhabilitar muestras de JavaScript
De forma predeterminada, la pista Main de una grabación muestra pilas de llamadas detalladas de las funciones de JavaScript que se llamaron durante la grabación. Para inhabilitar estos registros de pila de llamadas, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Cómo mostrar la configuración de grabación. - Habilita la casilla de verificación Inhabilitar muestras de JavaScript.
- Graba la página.
En las siguientes capturas de pantalla, se muestra la diferencia entre inhabilitar y habilitar las muestras de JavaScript. La pista Main de la grabación es mucho más corta cuando se inhabilita el muestreo, ya que omite todas las pilas de llamadas de JavaScript.
En este ejemplo, se muestra una grabación con muestras de JS inhabilitadas.
En este ejemplo, se muestra una grabación con muestras de JS habilitadas.
Limita la red durante la grabación
Para limitar la red mientras grabas, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Cómo mostrar la configuración de grabación. - Establece Red en el nivel de limitación elegido.
En el menú desplegable, el panel Rendimiento también puede recomendar un ajuste predeterminado de limitación o un ajuste predeterminado que se aproxime a la experiencia de tu base de usuarios según los datos de campo.
Regula el uso de CPU durante la grabación
Para regular el uso de CPU durante la grabación, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Cómo mostrar la configuración de grabación. - Establece la CPU en el nivel de limitación elegido.
La limitación se relaciona con las capacidades de tu computadora. Por ejemplo, la opción 2x slowdown hace que la CPU funcione 2 veces más lento de lo habitual. Las Herramientas para desarrolladores no pueden simular realmente las CPU de los dispositivos móviles, ya que la arquitectura de estos dispositivos es muy diferente de la de las computadoras de escritorio y las laptops.
En el menú desplegable, el panel Rendimiento también puede recomendar un ajuste predeterminado de limitación o un ajuste predeterminado que se aproxime a la experiencia de tu base de usuarios según los datos de campo.
Habilitar las estadísticas del selector CSS
Para ver las estadísticas de los selectores de reglas CSS durante los eventos de Recalcular estilo de larga duración, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Mostrar configuración de grabación. - Marca la casilla de verificación Habilitar las estadísticas del selector CSS.
Para obtener más detalles, consulta cómo analizar el rendimiento de los selectores CSS durante los eventos de Recalculate Style.
Habilita la instrumentación de pintura avanzada
Para ver la instrumentación detallada de la pintura, haz lo siguiente:
- Abre el menú Configuración de captura . Consulta Cómo mostrar la configuración de grabación.
- Marca la casilla de verificación Habilitar la instrumentación de pintura avanzada.
Para obtener información sobre cómo interactuar con la información de pintura, consulta Cómo ver capas y Cómo ver el generador de perfiles de pintura.
Mostrar segmentos personalizados
Habilita los seguimientos personalizados y los resúmenes de grupos de seguimientos personalizados en el resumen de seguimiento, que se puede personalizar con la API de extensibilidad de las Herramientas para desarrolladores.
Borra la grabación anterior.
Después de realizar una grabación, presiona Borrar grabación
para borrar esa grabación del panel Rendimiento.
Cómo analizar una grabación de rendimiento
Después de registrar el rendimiento del tiempo de ejecución o registrar el rendimiento de la carga, el panel Rendimiento proporciona muchos datos para analizar el rendimiento de lo que acaba de suceder.
Cómo anotar una grabación y compartirla
Consulta Cómo anotar y compartir tus hallazgos de rendimiento.
Obtén estadísticas prácticas
El panel Rendimiento incluye estadísticas de rendimiento que también se muestran en los informes de Lighthouse. Estas estadísticas pueden sugerir formas de mejorar el rendimiento y proporcionar un análisis guiado sobre los siguientes problemas de rendimiento, como las subpartes de LCP y de INP, los problemas de descubrimiento de solicitudes de LCP, los recursos de terceros y los recursos de JavaScript heredados y duplicados. Para obtener una lista completa, consulta la documentación de Performance Insights.
Las estadísticas se aprueban cuando no se detectan problemas. En la pestaña Estadísticas, se enumeran en la sección contraída Estadísticas aprobadas en la parte inferior. Las estadísticas que no se aprobaron se indican en sus propias secciones dedicadas.
Para aprovechar las estadísticas, haz lo siguiente:
- Cómo realizar una grabación de rendimiento.
- En la barra lateral izquierda del panel Rendimiento, abre la pestaña Estadísticas, expande diferentes secciones y coloca el cursor sobre los elementos y haz clic en ellos. En el panel Rendimiento, se destacarán los eventos correspondientes en el registro.
Cómo navegar por la grabación
Para ayudarte a navegar, cuando colocas el cursor sobre el registro de rendimiento, el panel Rendimiento hace lo siguiente:
- Cuando colocas el cursor sobre la Descripción general de la línea de tiempo, se muestra un marcador vertical que abarca todo el registro de rendimiento.
- Destaca un rango en la Descripción general de la línea de tiempo cuando colocas el cursor sobre los elementos de la pista Principal.
Para inspeccionar de cerca tu grabación de rendimiento, puedes seleccionar una parte de una grabación, desplazarte por un gráfico tipo llama largo, acercar y alejar la imagen, y usar rutas de navegación para saltar entre los niveles de zoom.
Cómo usar combinaciones de teclas para navegar
Para usar las combinaciones de teclas y navegar rápidamente por la grabación, primero elige tu estilo preferido de navegación con el teclado.
En la esquina superior derecha del panel, haz clic en Mostrar combinaciones de teclas y selecciona una de las siguientes opciones:
- Clásico: Acerca o aleja la imagen con la rueda del mouse (panel táctil hacia arriba o hacia abajo) y desplázate verticalmente con Mayúsculas + rueda del mouse.
- Moderno: Desplazamiento vertical con la rueda del mouse, desplazamiento horizontal con Mayúsculas + rueda del mouse y zoom con Comando/Control + rueda del mouse.
El diálogo de accesos directos también te proporciona una hoja de referencia de los accesos directos disponibles.
Selecciona una parte de la grabación
En la barra de acciones del panel Rendimiento y en la parte superior de la grabación, puedes ver la sección Resumen de la línea de tiempo con los gráficos CPU y NET.
Para seleccionar una parte de una grabación, haz clic y mantén presionado, luego, arrastra el dedo hacia la izquierda o la derecha en el Resumen de la línea de tiempo.
Para seleccionar una parte con el teclado, sigue estos pasos:
- Enfoca la pista Principal o cualquiera de sus vecinas.
- Usa las teclas W, A, S y D para acercar, mover hacia la izquierda, alejar y mover hacia la derecha, respectivamente.
Para seleccionar una parte con un panel táctil, haz lo siguiente:
- Coloca el cursor sobre la sección Resumen de la línea de tiempo o cualquiera de los segmentos (Principal y sus vecinos).
- Con dos dedos, desliza hacia arriba para alejar, hacia la izquierda para moverte hacia la izquierda, hacia abajo para acercar y hacia la derecha para moverte hacia la derecha.
Crea rutas de navegación y cambia entre los niveles de zoom
La descripción general de la línea de tiempo te permite crear varias rutas de navegación anidadas de forma sucesiva, aumentar los niveles de zoom y, luego, saltar libremente entre los niveles de zoom.
Para crear y usar rutas de navegación, haz lo siguiente:
- En Descripción general de la línea de tiempo, selecciona una parte de la grabación.
- Coloca el cursor sobre la selección y haz clic en el botón N ms . La selección se expande para completar la Descripción general de la línea de tiempo. Se comienza a crear una cadena de rutas de navegación en la parte superior de la descripción general de la línea de tiempo.
- Repite los dos pasos anteriores para crear otra ruta de navegación anidada. Puedes seguir anidando rutas de navegación siempre que el rango de selección sea superior a 5 milisegundos.
- Para ir a un nivel de zoom elegido, haz clic en el elemento de ruta correspondiente en la cadena que se encuentra en la parte superior del Resumen de la línea de tiempo.
Para quitar los elementos secundarios de una ruta de navegación, haz clic con el botón derecho en el elemento principal y selecciona Quitar rutas de navegación secundarias.
Cómo desplazarse por un gráfico tipo llama largo
Para desplazarte por un gráfico tipo llama largo en la pista Main o en cualquiera de sus vecinas, mantén presionado y, luego, arrastra en cualquier dirección hasta que aparezca lo que buscas.
Ignorar las secuencias de comandos irrelevantes en el gráfico de llamas
Para enfocarte mejor en tu código, puedes agregar secuencias de comandos irrelevantes a la lista de elementos ignorados.
Para ignorar los secuencias de comandos, realiza una de las siguientes acciones:
- Haz clic en Mostrar diálogo de configuración de la lista de elementos ignorados en la barra de acciones de la parte superior y escribe una expresión regular en el campo de entrada. El gráfico tipo llama aplicará la regla nueva a medida que escribas.
- Haz clic con el botón derecho en una secuencia de comandos y selecciona Agregar secuencia de comandos a la lista de elementos ignorados. El panel Rendimiento agrega esta secuencia de comandos a la lista en el diálogo Mostrar configuración de la lista de elementos ignorados de .
El panel contraerá automáticamente el anidamiento excesivo de esas secuencias de comandos y las marcará como On ignore list (REGULAR_EXPRESSION).
En el diálogo Mostrar configuración de la lista de elementos ignorados de , puedes activar y desactivar las reglas de la lista de elementos ignorados.
Para quitar una secuencia de comandos de la lista de elementos ignorados, haz clic con el botón derecho en ella en el gráfico tipo llama y selecciona Quitar secuencia de comandos de la lista de elementos ignorados o coloca el cursor sobre ella en el cuadro de diálogo Mostrar configuración de la lista de elementos ignorados y haz clic en Quitar .
Las Herramientas para desarrolladores guardan las reglas de la lista de elementos ignorados que agregas en Configuración > Lista de elementos ignorados.
Además, para enfocarte solo en las secuencias de comandos propias, marca Atenuar terceros. El panel Rendimiento inhabilitará las secuencias de comandos de terceros.
Buscar actividades
Puedes buscar en las actividades de la pista Main y en las solicitudes de la pista Network.
Para abrir un cuadro de búsqueda en la parte inferior del panel Rendimiento, presiona lo siguiente:
- macOS: Comando + F
- Windows y Linux: Control + F
En este ejemplo, se muestra una expresión regular en el cuadro de búsqueda de la parte inferior que encuentra cualquier actividad que comience con E.
Para recorrer las actividades que coinciden con tu consulta, haz lo siguiente:
- Haz clic en los botones Anterior o Siguiente.
- Presiona Mayúsculas + Intro para seleccionar el anterior o Intro para seleccionar el siguiente.
El panel Rendimiento muestra una información sobre la herramienta sobre la actividad seleccionada en el cuadro de búsqueda.
Para modificar la configuración de la consulta, haz lo siguiente:
- Haz clic en Coincidir mayúsculas y minúsculas para que la consulta distinga mayúsculas de minúsculas.
- Haz clic en Expresión regular para usar una expresión regular en tu búsqueda.
Para ocultar el cuadro de búsqueda, haz clic en Cancelar.
Cambia el orden de las pistas y ocúltalas
Para ordenar el registro de rendimiento, puedes cambiar el orden de los registros y ocultar los que no sean relevantes en el modo de configuración de registros.
Para mover y ocultar pistas, haz lo siguiente:
- Para ingresar al modo de configuración, haz clic con el botón derecho en el nombre de un seguimiento y selecciona Configure tracks.
- Haz clic en hacia arriba o hacia abajo para mover una pista hacia arriba o hacia abajo. Haz clic en para ocultarlo.
- Cuando termines, haz clic en Terminar de configurar seguimientos en la parte inferior para salir del modo de configuración.
Mira el video para ver este flujo de trabajo en acción.
El panel Rendimiento guarda la configuración de seguimiento para los seguimientos nuevos, pero no en las siguientes sesiones de Herramientas para desarrolladores.
Cómo ver la actividad del subproceso principal
Usa la pista Main para ver la actividad que se produjo en el subproceso principal de la página.
Haz clic en un evento para ver más información sobre él en la pestaña Resumen, que incluye, entre otros, la duración (y la duración propia), el vínculo a la línea correspondiente en la secuencia de comandos de origen, la URL de origen (con un nombre de entidad, si se conoce), el seguimiento de pila, si lo hay, y el desglose de los tiempos en un gráfico circular.
El panel Rendimiento destaca el evento seleccionado en azul.
En este ejemplo, se muestra más información sobre el evento de llamada a función get en la pestaña Summary.
Distinguir entre eventos propios y de terceros
La dependencia excesiva del código de terceros puede afectar negativamente el rendimiento de carga. El panel Rendimiento puede ayudarte a distinguir visualmente entre los eventos propios y de terceros en el seguimiento, de modo que puedas tomar una decisión más fundamentada sobre cómo reducir o aplazar la carga de código de terceros para priorizar el contenido de tu página.
Para enfocarte solo en el rendimiento del código de origen, haz lo siguiente:
- Asegúrate de que no haya nada seleccionado en el registro de rendimiento ni en la pestaña Estadísticas. Para ello, haz clic en un espacio vacío del registro.
- Marca Atenuar terceros en la barra de acciones de la parte superior. El panel Rendimiento atenúa los eventos relacionados con terceros del registro de rendimiento y solo deja destacados los propios.
Destaca eventos con la tabla "Propios / De terceros"
Dentro de un intervalo seleccionado en el Resumen del cronograma y cuando no se selecciona ninguno de los eventos, la pestaña Resumen muestra una tabla de propios / terceros que enumera los tamaños de transferencia respectivos y los tiempos del subproceso principal de lo siguiente:
- Entidad propia marcada con una insignia de
1st party. - Todas las entidades de terceros detectadas en el rango seleccionado, sin marcar.
- Extensiones marcadas con insignias de
Extension. - Otras entidades de
[unattributed]
Para ver los eventos relacionados destacados en el registro y el resto en gris, coloca el cursor sobre las entidades de la tabla. Para dejar destacados los eventos de una entidad, selecciónala en la tabla. Para quitar el destacado, haz clic en cualquier espacio vacío del registro.
Para abrir las actividades agrupadas por esta entidad en la pestaña Bottom-up, coloca el cursor sobre la entidad en la tabla y haz clic en Bottom-up junto a ella.
Cómo leer el gráfico tipo llama
El panel Rendimiento representa la actividad del subproceso principal en un gráfico tipo llama. El eje X representa la grabación a lo largo del tiempo. El eje Y representa la pila de llamadas. Los eventos de la parte superior causan los eventos de la parte inferior.
En este ejemplo, se muestra un gráfico tipo llama en el segmento Principal. Un evento click causó una llamada a función anónima. A su vez, esta función llamó a onEndpointClick_, que llamó a handleClick_, y así sucesivamente.
El panel Rendimiento asigna colores aleatorios a las secuencias de comandos para dividir el gráfico tipo llama y hacerlo más legible. En el ejemplo anterior, las llamadas a función de una secuencia de comandos se muestran en azul claro. Las llamadas de otro script se muestran en color rosa claro. El amarillo más oscuro representa la actividad de scripting, y el evento púrpura representa la actividad de renderización. Estos eventos de color amarillo y morado más oscuros son coherentes en todas las grabaciones.
Las tareas largas también se destacan con un triángulo rojo y con la parte que supera los 50 milisegundos sombreada en rojo:
En este ejemplo, la tarea tardó más de 400 milisegundos, por lo que la parte que representa los últimos 350 milisegundos se muestra en rojo, mientras que los 50 milisegundos iniciales no.
Además, la pista Main muestra información sobre los perfiles de CPU que se iniciaron y detuvieron con las funciones de la consola profile() y profileEnd(). Si llamas a console.profileEnd() en tu código o en la Consola, se abrirá automáticamente el panel Rendimiento y se mostrará el registro grabado.
Para ocultar el gráfico tipo llama detallado de las llamadas de JavaScript, consulta Cómo inhabilitar las muestras de JavaScript. Cuando se inhabilitan las muestras de JS, solo ves los eventos de alto nivel, como Event (click) y Function Call.
Realiza un seguimiento de los iniciadores de eventos
La pista Main puede mostrar flechas que conectan los siguientes iniciadores y los eventos que causaron:
- Invalidación de estilo o diseño -> Recalculate styles o Layout
- Request Animation Frame -> Animation Frame Fired
- Request Idle Callback -> Fire Idle Callback
- Install Timer -> Timer Fired
- Create WebSocket -> Send… y Receive WebSocket Handshake o Destroy WebSocket
- Programar postTask -> Activar postTask o Anular postTask
Para ver las flechas, busca un iniciador o el evento que causó en el gráfico tipo llama y selecciónalo.
Cuando se selecciona, la pestaña Resumen muestra los vínculos Iniciador de para los iniciadores y los vínculos Iniciado por para los eventos que causaron. Haz clic en ellas para saltar entre los eventos correspondientes.
Oculta funciones y sus elementos secundarios en el gráfico tipo llama
Para ordenar el gráfico tipo llama en el subproceso Main, puedes ocultar las funciones seleccionadas o sus funciones secundarias:
En la pista Main, haz clic con el botón derecho en una función y elige una de las siguientes opciones o presiona la combinación de teclas correspondiente:
- Ocultar función (
H) - Ocultar elementos secundarios (
C) - Ocultar elementos secundarios recurrentes (
R) - Restablecer elementos secundarios (
U) - Restablecer registro (
T) - Agregar secuencia de comandos a la lista de elementos ignorados (
I)
Aparece un botón desplegable junto al nombre de la función con elementos secundarios ocultos.
- Ocultar función (
Para ver la cantidad de elementos secundarios ocultos, coloca el cursor sobre el botón desplegable .
Para restablecer una función con elementos secundarios ocultos o todo el gráfico tipo llama, selecciona la función y presiona
U, o haz clic con el botón derecho en cualquier función y selecciona Reset trace, respectivamente.
Ignora las secuencias de comandos en el gráfico tipo llama
Para agregar una secuencia de comandos a la lista de elementos ignorados, haz clic con el botón derecho en una secuencia de comandos del gráfico y selecciona Agregar secuencia de comandos a la lista de elementos ignorados.
El gráfico contrae las secuencias de comandos ignoradas, las marca como En la lista de elementos ignorados y las agrega a las reglas de Exclusión personalizada en Configuración > Lista de elementos ignorados. Las secuencias de comandos ignoradas se guardan hasta que las quitas del seguimiento o de las Reglas de exclusión personalizadas.
Cómo ver las actividades en una tabla
Después de grabar una página, no es necesario que te bases solo en el segmento Principal para analizar las actividades. Las Herramientas para desarrolladores también proporcionan tres vistas tabulares para analizar las actividades. Cada vista te brinda una perspectiva diferente de las actividades:
- Cuando quieras ver las actividades raíz que causan la mayor cantidad de trabajo, usa la pestaña Call tree.
- Cuando quieras ver las actividades en las que se invirtió más tiempo directamente, usa la pestaña Bottom-up.
- Cuando quieras ver las actividades en el orden en que ocurrieron durante la grabación, usa la pestaña registro de eventos.
Puedes hacer clic en un elemento de cualquiera de las tres tablas (y en la tabla de origen / de terceros de la pestaña Summary) para mantener destacados los eventos correspondientes en el seguimiento y atenuar el resto mientras exploras el seguimiento de rendimiento.
Para ayudarte a encontrar lo que buscas más rápido, las tres pestañas tienen botones para el filtrado avanzado junto a la barra Filtrar:
- Coincidir mayúsculas y minúsculas.
- Expresión regular.
- Coincidir palabra completa.
Cada vista tabular del panel Rendimiento muestra vínculos para actividades, como llamadas a funciones. Para ayudarte a depurar, las Herramientas para desarrolladores encuentran las declaraciones de funciones correspondientes en los archivos de origen. Además, si los mapas de origen adecuados están presentes y habilitados, las Herramientas para desarrolladores encuentran automáticamente los archivos originales.
Haz clic en un vínculo para abrir un archivo de origen en el panel Fuentes.
Actividades raíz
Aquí encontrarás una explicación del concepto de actividades raíz que se menciona en las secciones de las pestañas Call tree, Bottom-up y registro de eventos.
Las actividades raíz son aquellas que hacen que el navegador realice algún trabajo. Por ejemplo, cuando haces clic en una página, el navegador activa una actividad Event como la actividad raíz. Ese Event podría hacer que se ejecute
un controlador.
En el gráfico tipo llama de la pista Main, las actividades raíz se encuentran en la parte superior del gráfico. En las pestañas Call Tree y registro de eventos, las actividades raíz son los elementos de nivel superior.
Consulta la pestaña Árbol de llamadas para ver un ejemplo de actividades raíz.
Pestaña Call tree
Usa la pestaña Árbol de llamadas para ver qué actividades raíz causan la mayor cantidad de trabajo.
La pestaña Call tree solo muestra las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para obtener más información.
En este ejemplo, el nivel superior de los elementos de la columna Activity, como Event, Paint y Composite Layers, son actividades raíz. El anidamiento representa la pila de llamadas. En
este ejemplo, el Event causó el Function Call, que causó button.addEventListener, que causó b,
y así sucesivamente.
Tiempo propio representa el tiempo que se dedicó directamente a esa actividad. Tiempo total representa el tiempo invertido en esa actividad o en cualquiera de sus elementos secundarios.
Haz clic en Self Time, Total Time o Activity para ordenar la tabla por esa columna.
Usa el cuadro Filtro para filtrar los eventos por nombre de actividad.
De forma predeterminada, el menú Agrupación está configurado como Sin agrupar. Usa el menú Agrupación para ordenar la tabla de actividad según varios criterios.
La pestaña Ascendente
Usa la pestaña Bottom-up para ver qué actividades consumieron más tiempo en total.
La pestaña Bottom-up solo muestra las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para obtener más información.
En el gráfico tipo llama del segmento Main de este ejemplo, puedes ver que casi todo el tiempo se dedicó a la ejecución de las tres llamadas a wait(). En consecuencia, la actividad principal en la pestaña Bottom-up es wait. En el gráfico tipo llama, el color amarillo que se encuentra debajo de las llamadas a wait representa miles de llamadas a Minor GC. En consecuencia, puedes ver que, en la pestaña Bottom-up, la siguiente actividad más costosa es Minor GC.
La columna Self Time representa el tiempo total que se dedicó directamente a esa actividad, en todas sus instancias.
La columna Total Time representa el tiempo agregado que se dedicó a esa actividad o a cualquiera de sus elementos secundarios.
Tabla de la pila más pesada
En el lado derecho de las pestañas Call tree o Bottom-up, haz clic en Show heaviest stack para revelar la tabla Heaviest stack.
En esta tabla, se muestran los elementos secundarios de la actividad seleccionada que tardaron más tiempo en ejecutarse. Coloca el cursor sobre un elemento de la tabla para ver el evento correspondiente destacado en la pista Main y el resto atenuado.
De esta manera, puedes encontrar visualmente en el registro de rendimiento las actividades anidadas de la pila de llamadas que tardan más tiempo.
La pestaña Registro de eventos
Usa la pestaña registro de eventos para ver las actividades en el orden en que ocurrieron durante la grabación.
La pestaña registro de eventos solo muestra las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para obtener más información.
La columna Start Time representa la hora de inicio de esa actividad, en relación con el inicio de la grabación. La hora de inicio de 1573.0 ms para el elemento seleccionado en este ejemplo significa que la actividad comenzó 1,573 ms después de que se inició la grabación.
La columna Tiempo propio representa el tiempo que se dedicó directamente a esa actividad.
Las columnas Total Time representan el tiempo que se dedicó directamente a esa actividad o a cualquiera de sus elementos secundarios.
Haz clic en Hora de inicio, Self Time o Total Time para ordenar la tabla por esa columna.
Usa el cuadro Filtrar para filtrar las actividades por nombre.
Usa el menú Duration para filtrar las actividades que tardaron menos de 1 ms o 15 ms. De forma predeterminada, el menú Duration se establece en All, lo que significa que se muestran todas las actividades.
Inhabilita las casillas de verificación Carga, Secuencias de comandos, Renderización o Pintado para filtrar todas las actividades de esas categorías.
Cómo ver los marcadores de rendimiento
En una superposición con líneas verticales en el registro de rendimiento, puedes ver marcadores de rendimiento importantes, como los siguientes:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Evento DOMContentLoaded (DCL)
- Evento onload (L)
Coloca el cursor sobre los nombres de los marcadores en la parte inferior del seguimiento para ver su marca de tiempo.
Ver tiempos personalizados
En la pista Timings, consulta tus marcadores de rendimiento personalizados, como los siguientes:
performance.mark()llamadas. A continuación, se muestra una marca individual con información sobre la herramienta en 813.44 ms, etiquetada como Starting to run JavaScript.performance.measure()llamadas. A continuación, se muestra un intervalo amarillo etiquetado como Interacción lenta.
Selecciona un marcador para ver más detalles en la pestaña Summary, como su marca de tiempo, el tiempo total, el tiempo propio y el objeto detail. En el caso de las llamadas a performance.mark() y performance.measure(), la pestaña también muestra seguimientos de pila.
Visualiza las interacciones
Consulta las interacciones del usuario en la pista Interactions para detectar posibles problemas de capacidad de respuesta.
Para ver las interacciones, haz lo siguiente:
- Abre DevTools, por ejemplo, en esta página de demostración.
- Abre el panel Rendimiento y comienza una grabación.
- Haz clic en un elemento (café) y detén la grabación.
- Busca la pista Interactions en el cronograma.
En este ejemplo, la pista Interactions muestra la interacción Pointer. Las interacciones tienen bigotes que indican los retrasos de entrada y presentación en los límites de tiempo de procesamiento. Coloca el cursor sobre la interacción para ver un cuadro de información con el retraso de entrada, el tiempo de procesamiento y el retraso de presentación.
El registro Interacciones también muestra advertencias de Interaction to Next Paint (INP) para las interacciones que duran más de 200 milisegundos en la pestaña Resumen y en una sugerencia sobre el desplazamiento del cursor:
La pista Interactions marca las interacciones de más de 200 milisegundos con un triángulo rojo en la esquina superior derecha.
Cómo ver los cambios de diseño
Consulta los cambios de diseño en la pista Layout shifts. Los cambios se muestran como diamantes de color morado y se agrupan en clústeres (líneas de color morado) según su proximidad en la línea de tiempo.
Para destacar un elemento que provocó un cambio de diseño en el viewport, coloca el cursor sobre el diamante correspondiente.
Para ver más información sobre un cambio de diseño o cambios en la pestaña Resumen con tiempos, puntuaciones, elementos y posibles culpables, haz clic en el diamante o clúster correspondiente.
Para obtener más información, consulta Cumulative Layout Shift (CLS).
Cómo ver animaciones
Mira las animaciones en el segmento Animations. Las animaciones se nombran como propiedades o elementos de CSS correspondientes, si los hay, por ejemplo, transform o my-element. Las animaciones que no son de composición se marcan con triángulos rojos en la esquina superior derecha.
Selecciona una animación para ver más detalles en la pestaña Summary, incluidos los motivos de los errores de composición.
Cómo ver la actividad de la GPU
Consulta la actividad de la GPU en la sección GPU.
Cómo ver la actividad de ráster
Consulta la actividad de ráster en la sección Grupo de subprocesos.
Analiza los fotogramas por segundo (FPS)
Las Herramientas para desarrolladores ofrecen varias formas de analizar los fotogramas por segundo:
- Usa la sección Frames para ver cuánto tiempo tardó un fotograma en particular.
- Usa el medidor de FPS para obtener una estimación en tiempo real de los FPS a medida que se ejecuta la página. Consulta Cómo ver los fotogramas por segundo en tiempo real con el medidor de FPS.
La sección Frames
En la sección Frames, se indica exactamente cuánto tardó un fotograma en particular.
Coloca el cursor sobre un fotograma para ver un cuadro de información con más detalles.
En este ejemplo, se muestra un cuadro de información cuando colocas el cursor sobre un fotograma.
La sección Frames puede mostrar cuatro tipos de fotogramas:
- Marco inactivo (blanco). Sin cambios.
- Estructura (verde). Se renderizó como se esperaba y a tiempo.
- Fotograma presentado de forma parcial (amarillo con un patrón de líneas discontinuas anchas y dispersas). Chrome hizo todo lo posible para renderizar al menos algunas actualizaciones visuales a tiempo. Por ejemplo, en caso de que el trabajo del subproceso principal del proceso de renderización (animación de lienzo) se retrase, pero el subproceso del compositor (desplazamiento) esté a tiempo.
- Marco descartado (rojo con un patrón denso de líneas continuas). Chrome no puede renderizar el fotograma en un tiempo razonable.
En este ejemplo, se muestra una información sobre herramientas cuando colocas el cursor sobre un fotograma presentado parcialmente.
Haz clic en un fotograma para ver aún más información sobre él en la pestaña Resumen. Las Herramientas para desarrolladores destacan el marco seleccionado en azul.
Cómo ver las solicitudes de red
Expande la sección Red para ver una cascada de solicitudes de red que se produjeron durante la grabación del rendimiento.
Junto al nombre de la pista Network, hay una leyenda con tipos de solicitudes codificados por color.
Las solicitudes que bloquean la renderización se marcan con un triángulo rojo en la esquina superior derecha.
Coloca el cursor sobre una solicitud para ver un cuadro de información con los siguientes datos:
- Es la URL de la solicitud y el tiempo total que tardó en ejecutarse.
- Prioridad o cambio de prioridad, por ejemplo,
Medium -> High. - Indica si la solicitud es
Render-blockingo no. - Un desglose de los tiempos de solicitud, que se describe más adelante.
Cuando haces clic en una solicitud, el segmento Red dibuja una flecha desde su iniciador hasta la solicitud.
Además, el panel Rendimiento te muestra la pestaña Resumen con más información sobre la solicitud, incluidos, entre otros, los campos Prioridad inicial y Prioridad (final). Si sus valores difieren, la prioridad de recuperación de la solicitud cambió durante la grabación. Para obtener más información, consulta Cómo optimizar la carga de recursos con la API de Fetch Priority.
En la pestaña Resumen, también se muestra un desglose de los tiempos de la solicitud.
En este ejemplo, la solicitud de www.google.com se representa con una línea a la izquierda (|–), una barra en el medio con una parte oscura y una parte clara, y una línea a la derecha (–|).
Si está presente, la pestaña Resumen también muestra un desglose de los tiempos del servidor para las solicitudes de red que implementan tecnologías de renderización del servidor. Para estas solicitudes, el panel Rendimiento toma los datos del encabezado de respuesta Server-Timing.
Puedes encontrar otro desglose de tiempos en la pestaña Red. Haz clic con el botón derecho en la solicitud en el registro Red o en su URL en la pestaña Resumen y, luego, haz clic en Mostrar en el panel de red. Las Herramientas para desarrolladores te llevan al panel Red y seleccionan la solicitud correspondiente. Abre la pestaña Timing.
A continuación, se muestra cómo se relacionan estos dos desgloses:
- La línea izquierda (
|–) es todo lo que se encuentra hasta el grupo de eventosConnection start, inclusive. En otras palabras, es todo lo que se encuentra antes deRequest Sent. - La parte clara de la barra es
Request sentyWaiting for server response. - La parte oscura de la barra es
Content download. - La línea derecha (
–|) es el tiempo que se espera el subproceso principal. La pestaña Red > Tiempos no lo muestra.
Cómo ver las métricas de memoria
Habilita la casilla de verificación Memory para ver las métricas de memoria de la última grabación.
DevTools muestra un nuevo gráfico de Memoria, sobre la pestaña Resumen. También hay un gráfico nuevo debajo del gráfico NET, llamado HEAP. El gráfico HEAP proporciona la misma información que la línea JS Heap en el gráfico Memory.
En este ejemplo, se muestran las métricas de memoria sobre la pestaña Resumen.
Las líneas de color del gráfico se corresponden con las casillas de verificación de color que se encuentran sobre el gráfico. Inhabilita una casilla de verificación para ocultar esa categoría del gráfico.
El gráfico solo muestra la región de la grabación que está seleccionada. En el ejemplo anterior, el gráfico Memoria solo muestra el uso de memoria al inicio de la grabación, hasta aproximadamente la marca de 1,000 ms.
Cómo ver la duración de una parte de una grabación
Cuando analizas una sección como Network o Main, a veces necesitas una estimación más precisa de cuánto tiempo tardaron ciertos eventos. Mantén presionada la tecla Mayúsculas, haz clic y mantén presionado, y arrastra el mouse hacia la izquierda o la derecha para seleccionar una parte de la grabación. En la parte inferior de la selección, las Herramientas para desarrolladores muestran cuánto tiempo tardó esa parte.
En este ejemplo, la marca de tiempo 488.53ms que se encuentra en la parte inferior de la porción seleccionada indica cuánto duró esa porción.
Cómo ver una captura de pantalla
Consulta Cómo tomar capturas de pantalla durante la grabación para obtener información sobre cómo habilitar las capturas de pantalla.
Coloca el cursor sobre la Descripción general del cronograma para ver una captura de pantalla de cómo se veía la página durante ese momento de la grabación. La Descripción general del cronograma es la sección que contiene los gráficos de CPU, FPS y NET.
También puedes ver capturas de pantalla haciendo clic en un fotograma de la sección Frames. Las Herramientas para desarrolladores muestran una versión pequeña de la captura de pantalla en la pestaña Resumen.
En este ejemplo, se muestra la captura de pantalla del fotograma 195.5ms en la pestaña Summary cuando haces clic en él en la sección Frames.
Haz clic en la miniatura de la pestaña Summary para acercar la captura de pantalla.
En este ejemplo, se muestra una captura de pantalla ampliada después de hacer clic en su miniatura en la pestaña Summary.
Cómo ver la información de las capas
Para ver información avanzada sobre las capas de un fotograma, haz lo siguiente:
- Habilita la instrumentación avanzada de pintura.
- Selecciona un fotograma en la sección Fotogramas. DevTools muestra información sobre sus capas en la nueva pestaña Layers, junto a la pestaña registro de eventos.
Coloca el cursor sobre una capa para destacarla en el diagrama.
En este ejemplo, se muestra la capa #39 destacada cuando colocas el cursor sobre ella.
Para mover el diagrama, haz lo siguiente:
- Haz clic en Modo de desplazamiento
para moverte a lo largo de los ejes X e Y. - Haz clic en Modo de rotación
para rotar a lo largo del eje Z. - Haz clic en Restablecer transformación
para restablecer el diagrama a su posición original.
Mira el análisis de capas en acción:
Ver el generador de perfiles de pintura
Para ver información avanzada sobre un evento de pintura, haz lo siguiente:
- Habilita la instrumentación avanzada de pintura.
- Selecciona un evento Paint en el segmento Main.
Analiza el rendimiento de la renderización con la pestaña Renderización
Usa las funciones de la pestaña Renderización para visualizar el rendimiento de renderización de tu página.
Abre la pestaña Renderización.
Consulta los fotogramas por segundo en tiempo real con el medidor de FPS
Las estadísticas de renderización de fotogramas son una superposición que aparece en la esquina superior derecha de la vista. Proporciona una estimación en tiempo real de los FPS a medida que se ejecuta la página.
Consulta Estadísticas de renderización de fotogramas.
Cómo ver los eventos de renderizado en tiempo real con Paint Flashing
Usa Paint Flashing para obtener una vista en tiempo real de todos los eventos de pintura de la página.
Consulta Destello de pintura.
Cómo ver una superposición de capas con Layer Borders
Usa Layer Borders para ver una superposición de bordes de capas y mosaicos en la parte superior de la página.
Consulta Bordes de capas.
Encuentra problemas de rendimiento del desplazamiento en tiempo real
Usa Problemas de rendimiento de desplazamiento para identificar los elementos de la página que tienen objetos de escucha de eventos relacionados con el desplazamiento que pueden perjudicar el rendimiento de la página. Las Herramientas para desarrolladores destacan los elementos potencialmente problemáticos en color verde azulado.