Panel de rendimiento: analiza el rendimiento de tu sitio web

Usa el panel Rendimiento para analizar el rendimiento de tu sitio web.

Descripción general

El panel Rendimiento te permite registrar perfiles de rendimiento de la CPU de tus aplicaciones web. Analiza los perfiles para encontrar posibles cuellos de botella en el rendimiento y formas de optimizar el uso de recursos.

Usa el panel Rendimiento para hacer lo siguiente:

• Graba un perfil de rendimiento.
• Cambiar la configuración de captura
• Analizar un informe de rendimiento

Si deseas obtener una guía completa para mejorar el rendimiento de tu sitio web, consulta Analiza el rendimiento del tiempo de ejecución.

Abre el panel Rendimiento.

Para abrir el panel Rendimiento, abre Herramientas para desarrolladores y selecciona Rendimiento en el conjunto de pestañas de la parte superior.

Como alternativa, sigue estos pasos para abrir el panel Rendimiento con el menú de comandos:

1. Abre las Herramientas para desarrolladores.
2. Abre el menú de comandos presionando lo siguiente:
3. macOS: Comando + Mayúsculas + P
4. Windows, Linux y ChromeOS: Control + Mayúsculas + P
5. Comienza a escribir Performance panel, selecciona Show Performance panel y presiona Intro.

Observa las Métricas web esenciales en vivo

Cuando abres el panel Rendimiento, este captura y muestra de inmediato tus métricas locales de Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS), y te indica su puntuación (buena, necesita mejoras o mala).

Si interactúas con tu página, el panel Rendimiento también captura tu Interaction to Next Paint (INP) local y su puntuación, lo que, además del LCP y el CLS, te brinda una descripción general completa de las Core Web Vitals de tu página con tu conexión de red y dispositivo.

Debajo de las tres tarjetas de métricas de las pestañas Interacciones y Cambios de diseño, puedes encontrar tablas con información sobre las interacciones y los cambios de diseño capturados, incluidos los elementos, los tiempos, las fases (para las interacciones) y las puntuaciones (para los cambios de diseño). Para borrar ambas listas, haz clic en Bloquear Borrar.

Para obtener un desglose de la puntuación de una métrica, coloca el cursor sobre el valor de la métrica para ver una sugerencia.

Compara tu experiencia con la de tus usuarios

También puedes recuperar datos de campo del Chrome UX Report y comparar la experiencia de los usuarios de tu sitio con tus métricas locales.

Para agregar datos de campo, haz lo siguiente:

1. En Rendimiento > Próximos pasos > Datos de campo, haz clic en Configurar.

   

2. En el cuadro de diálogo Configurar la recuperación de datos de campo, ten en cuenta la Divulgación de privacidad y haz clic en Aceptar.

   Avanzado: Configura una asignación entre los entornos de desarrollo y producción…

   De manera opcional, para obtener automáticamente los datos de campo más pertinentes, puedes configurar (varias) asignaciones entre tus orígenes de desarrollo y producción:

   1. En la ventana de diálogo, expande la sección Avanzado y haz clic en + Nuevo.

   2. En la tabla de asignación, ingresa las URLs de desarrollo y producción, y haz clic en +.

      

      Por ejemplo, una asignación de http://localhost:8080 a https://example.com mostrará los datos de campo de example.com/page1 cuando navegues a localhost:8080/page1.

      Además, si por algún motivo no puedes obtener los datos de campo automáticamente, puedes activar check_boxMostrar siempre los datos de campo de la siguiente URL y proporcionar una URL. El panel Rendimiento intentará recuperar los datos de campo para esta URL primero y, luego, te mostrará estos datos de campo, independientemente de la página a la que navegues.

      Para cambiar la configuración de recuperación de datos de campo después de la configuración, haz clic en Datos de campo > Configurar.

   Con la recuperación de datos de campo configurada, el panel Rendimiento ahora te muestra una comparación entre tus puntuaciones de métricas locales y las que experimentan tus usuarios. Puedes ver el período de recopilación en la sección Datos de campo a la derecha.

   

   Para obtener un desglose de la puntuación de una métrica, coloca el cursor sobre el valor de la métrica para ver una sugerencia.

Configura tu entorno para que se parezca más al de tus usuarios

Con la recuperación de datos de campo configurada como se describe en la sección anterior, el panel Rendimiento te proporciona recomendaciones para configurar tu entorno de modo que se ajuste mejor a la experiencia de tus usuarios.

Para configurar tu entorno, haz lo siguiente:

1. En cada tarjeta de métrica, expande la sección Ten en cuenta las condiciones de prueba locales, si corresponde, y lee las recomendaciones.

   

   En este ejemplo, parece que, para que coincida mejor con la experiencia de tus usuarios, te convendría usar un tamaño de pantalla de escritorio común y limitar la velocidad de la CPU y la red.

2. Para que coincida con la configuración del entorno de este ejemplo, haz lo siguiente:

   1. Configura tu viewport en uno de los tamaños de pantalla comunes (por ejemplo, 720p o 1080p). Para emular dispositivos y tamaños de pantalla específicos, puedes usar el modo de dispositivo en el panel Elementos.
   2. El 82% de los usuarios del sitio web de este ejemplo usan computadoras de escritorio para navegar. Para asegurarte de comparar tus puntuaciones de métricas locales con los datos de campo correctos, puedes seleccionar Computadoras en la lista desplegable Datos de campo > Dispositivo.
   3. En la sección Configuración del entorno, establece la lista desplegable Red en, por ejemplo, 4G rápida y la CPU en, por ejemplo, 20x slowdown. También puedes asegurarte de check_box inhabilitar la caché de red en la misma sección.

3. Una vez que hayas configurado tu entorno, vuelve a cargar la página, interactúa con ella para capturar tu INP local y vuelve a comparar las puntuaciones de las métricas.

   

   Parece que las puntuaciones de las métricas ahora son más similares a las que experimentan tus usuarios. En consecuencia, las secciones Ten en cuenta las condiciones de prueba locales desaparecieron de las tarjetas de métricas.

Con eso, ya puedes comenzar a mejorar las Métricas web esenciales de tu sitio web:

• Optimiza la métrica LCP
• Optimiza el INP
• Optimiza la métrica CLS

Cómo capturar y analizar un informe de rendimiento

En las siguientes secciones, sigue las instrucciones para registrar un perfil, cambiar la configuración de captura y analizar el informe.

Cómo grabar un perfil de rendimiento

Cuando esté todo listo para grabar, el panel Rendimiento te brindará las siguientes opciones:

• Cómo registrar el rendimiento del tiempo de ejecución
• Cómo registrar el rendimiento de carga
• Cómo tomar capturas de pantalla durante la grabación
• Cómo forzar la recolección de elementos no utilizados durante la grabación
• Cómo guardar una grabación
• Cómo cargar una grabación
• Cómo borrar una grabación

Cómo cambiar la configuración de captura

La configuración de captura te permite cambiar la forma en que las Herramientas para desarrolladores capturan las grabaciones de rendimiento y pueden brindarte información adicional en el informe. Haz clic en Configuración de captura configuración para acceder al menú Configuración de captura.

Selecciona las siguientes opciones en el menú Configuración de captura:

• Inhabilitar muestras de JavaScript: Inhabilita el registro de los seguimientos de pila de JavaScript que se muestran en el segmento Principal y que se llaman durante el registro. Se reducirá la sobrecarga de rendimiento.
• Habilita la instrumentación de pintura avanzada (lenta): Captura la instrumentación de pintura avanzada. Afecta el rendimiento de forma significativa.
• Habilitar las estadísticas del selector CSS (lento): Captura las estadísticas del selector CSS. Afecta el rendimiento de forma significativa.
• Limitación de la CPU: Simula velocidades de CPU más lentas.
• Limitación de la red: Simula velocidades de red más lentas.

Cómo analizar un informe de rendimiento

Consulta Analiza una grabación de rendimiento para obtener una guía completa sobre cómo usar el panel de Rendimiento.

A continuación, se presenta una agrupación de temas de la guía, además de otra documentación útil:

Para obtener información sobre cómo navegar por el informe, sigue estos pasos:

• Cómo navegar por la grabación
• Actividades de búsqueda
• Realiza un seguimiento de los iniciadores de eventos

Usa las estadísticas de rendimiento para obtener estadísticas prácticas sobre el rendimiento de tu sitio web:

• Estadísticas de rendimiento

Para enfocarte en lo que importa en tu flujo de trabajo, sigue estos pasos:

• Cómo cambiar el orden de los segmentos y ocultarlos
• Cómo ocultar funciones y sus elementos secundarios en el gráfico tipo llama
• Crea rutas de navegación y salta entre los niveles de zoom

Para obtener información sobre las pestañas De abajo hacia arriba, Árbol de llamadas y Registro de eventos, haz lo siguiente:

• Cómo ver las actividades en una tabla

Para obtener información sobre cómo analizar el informe, sigue estos pasos:

• Cómo ver la actividad del subproceso principal
• Cómo leer el gráfico tipo llama
• Ver una captura de pantalla
• Cómo ver las métricas de memoria
• Cómo ver la duración de una parte de una grabación
• Analiza el rendimiento del selector CSS durante los eventos de Recalculate Style
• Crea perfiles del rendimiento de Node.js con el panel Rendimiento
• Analizar los fotogramas por segundo (FPS)
• Referencia de eventos de la línea de tiempo

Mejora el rendimiento con estos paneles

Descubre otros paneles que pueden ayudarte a mejorar el rendimiento de tu sitio web:

• Lighthouse: Optimiza la velocidad del sitio web
• Memoria: Descripción general del panel Memoria
• Renderización: Descubre problemas con el rendimiento de la renderización
• Problemas: Encuentra y corrige problemas
• Rendimiento: Información de las capas de vista

Recursos adicionales