Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Use la herramienta Rendimiento para analizar el rendimiento de su sitio web. Hay dos vistas principales:
- La página principal muestra las métricas locales a medida que interactúa con la página web actual.
- Registre un perfil y vea una escala de tiempo de rendimiento.
Contenido detallado:
- Información general
- Supervisión de métricas de Core Web Vitals
- Captura y análisis de un informe de rendimiento
- Mejora del rendimiento con estas herramientas
Para ver un tutorial sobre el uso de la herramienta Rendimiento para mejorar el rendimiento del sitio web, consulte Análisis del rendimiento en tiempo de ejecución (tutorial).
Información general
La herramienta Rendimiento muestra métricas locales para las interacciones de páginas y le permite registrar perfiles de rendimiento de CPU de las aplicaciones web. Analice perfiles para encontrar posibles cuellos de botella de rendimiento y formas de optimizar el uso de recursos.
Abrir la herramienta Rendimiento
Para abrir la herramienta Rendimiento :
Vaya a una página web, como la demostración Exploración del universo , en una nueva ventana o pestaña.
Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.
Se abre DevTools.
En la barra de actividad de la parte superior, haga clic en el
de la herramienta Rendimiento.Si la herramienta Rendimiento del
no se muestra en la barra de actividad, haga clic en el botón Más herramientas (
) y, a continuación, seleccione la herramienta Rendimiento.
Uso del menú Comando
Para abrir la herramienta Rendimiento mediante el menú Comandos:
Vaya a una página web, como la demostración Exploración del universo , en una nueva ventana o pestaña.
Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.
Se abre DevTools.
En la esquina superior derecha de DevTools, haga clic en Personalizar y controlar DevTools y haga clic en Ejecutar comando.
O bien, presione:
- macOS: Comando+Mayús+P
- Windows, Linux, ChromeOS: Control+Mayús+P
Se abre el menú Comando y lee Ejecutar >comando.
Empiece a escribir rendimiento, seleccione Mostrar rendimiento [panel] y, a continuación, presione Entrar.
Métricas locales para interacciones de páginas
Use la herramienta Rendimiento para ver las métricas de Core Web Vitals en la vista de métricas local inicial. La página principal de la herramienta Rendimiento muestra métricas locales, que son métricas de rendimiento sobre la página web representada:
- Pintura con contenido más grande (LCP): rapidez con la que se carga el contenido principal de la página.
- Cambio de diseño acumulativo (CLS): una medida del cambio de diseño de página inesperado más reciente.
- Interacción con la siguiente pintura (INP): la capacidad de respuesta de la interacción del usuario más reciente en la página.
Al abrir inicialmente la herramienta Rendimiento , se muestran las métricas de Core Web Vitals en tres tarjetas de una sección Métricas locales :
Escala de tiempo del perfil grabado
Use también la herramienta Rendimiento para ver un seguimiento de rendimiento grabado, incluido:
- Registre un perfil de rendimiento.
- Cambie la configuración de captura.
- Analice un informe de rendimiento. Muestra información sobre el rendimiento de la página durante el período de tiempo en el que se produjo la grabación, como:
- Interacciones del usuario que se produjeron durante la grabación.
- Código JavaScript que se ejecutó.
- Las operaciones de estilo y diseño que se produjeron.
- Otras métricas de rendimiento a lo largo del tiempo, como solicitudes de red y cambios de diseño.
Después de registrar un seguimiento de rendimiento, se muestra el seguimiento de rendimiento en lugar de las métricas locales.
Cambio a la visualización de métricas locales u otro perfil
Para cambiar a mostrar la vista de métricas local inicial, haga clic en el Volver en la página de métricas dinámicas (el botón 
).
Para cambiar a la visualización de una escala de tiempo de perfil grabada abierta diferente, haga clic en la lista desplegable Mostrar sesiones de escala de tiempo recientes, a la derecha de la Volver a la página de métricas activas (el botón ).
Supervisión de métricas de Core Web Vitals
Use la herramienta Rendimiento para ver las métricas de Core Web Vitals en la vista de métricas local inicial. En la página principal de la herramienta Rendimiento se muestran las métricas locales, que son métricas de rendimiento sobre la página web representada:
- Pintura con contenido más grande (LCP): rapidez con la que se carga el contenido principal de la página.
- Cambio de diseño acumulativo (CLS): una medida del cambio de diseño de página inesperado más reciente.
- Interacción con la siguiente pintura (INP): la capacidad de respuesta de la interacción del usuario más reciente en la página.
Terminología
| Término | Descripción | Docs |
|---|---|---|
| Aspectos vitales web | Un gran conjunto de métricas que proporcionan una guía unificada para ofrecer una excelente experiencia de usuario en la web. | Aspectos vitales web en web.dev. |
| Aspectos vitales web principales | Subconjunto de Elementos vitales web que se aplican a todas las páginas web y que deben medir todos los propietarios del sitio. Cada uno de los núcleos web vitales representa una faceta distinta de la experiencia del usuario, es medible en el campo y refleja la experiencia real de un resultado crítico centrado en el usuario. | Aspectos vitales web principales en Web Vitals en web.dev. |
| Pintura con contenido más grande (LCP) | Mide el rendimiento de carga . Para proporcionar una buena experiencia de usuario, LCP debe producirse en un plazo de 2,5 segundos a partir de la primera vez que la página comienza a cargarse. Tiempo de representación de la imagen, bloque de texto o vídeo más grande visible en la ventanilla, en relación con la primera vez que el usuario navega a la página. | Pintura contentante más grande (LCP) en glosario en MDN. LargestContentfulPaint en MDN. |
| Desplazamiento de diseño acumulativo (CLS) | Mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de 0.1. o menos. La mayor ráfaga de puntuaciones de desplazamiento de diseño para cada cambio de diseño inesperado que se produce durante todo el ciclo de vida de una página. | Cambio de diseño acumulativo (CLS) en glosario en MDN. LayoutShift en MDN. |
| Interacción con la siguiente pintura (INP) | Mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un INP de 200 milisegundos o menos. La capacidad de respuesta general de la página a las interacciones del usuario, en función de la latencia de todas las interacciones de clic, pulsación y teclado que se producen a lo largo de la vida útil de la visita de un usuario a una página. | Interacción con la siguiente pintura (INP) en glosario en MDN. PerformanceEventTiming en MDN. |
| métricas locales, datos locales | Métricas LCP, CLS e INP. Se capturan localmente en la página web inspeccionada y se actualizan a medida que interactúa con la página. |
Uso de la página de demostración
Para generar una métrica de mejoradeficiente o necesaria en las tarjetas LCP, CLS e INP en la herramienta rendimiento:
Abra una página web, como la demostración Exploración del universo , en una nueva ventana o pestaña.
La página de demostración "Exploración del universo" está diseñada para cargar y controlar las interacciones lentamente a propósito, con el fin de ilustrar cómo se pueden usar las métricas LCP, CLS e INP en la herramienta Rendimiento para identificar y corregir problemas de rendimiento.
Haga clic con el botón derecho en la página web y seleccione Inspeccionar.
Se abre DevTools.
En la barra de actividad de la parte superior, seleccione el
herramienta rendimiento.Si la herramienta Rendimiento del
no se muestra en la barra de actividad, haga clic en el botón Más herramientas () y, a continuación, seleccione la herramienta Rendimiento.Maximice la ventana y haga que el panel de la página de demostración sea ancho, como el 60 % del ancho de la ventana.
Si el panel de la página de demostración es demasiado estrecho, algunas tarjetas podrían seguir mostrándose bien, con un valor verde, que no es el resultado previsto.
Seleccione el panel Pasos siguientes en >la lista desplegable >Limitación de CPU de la tarjeta > configuración del entorno, seleccione Ralentización 4 veces, recomendada.
O bien, seleccione Capture settings (
) CPU throttling dropdown4x slowdown (Capturar configuración con un punto azul) > Lista desplegable > de limitación de CPU 4 veces, recomendado.Seleccione siguiente panel pasos panel Configuración del entorno> tarjeta >red limitación desplegable > seleccione Slow 4G.
Seleccione la tarjeta >Configuración del entorno en el panel >Pasos siguientes, seleccione la casilla Deshabilitar caché de red.
Haga clic con el botón derecho (o haga clic con el botón largo) en el botón Actualizar situado a la izquierda de la barra de direcciones y, a continuación, seleccione Caché vacía y actualización rígida.
Esto garantiza que la imagen se cargue de nuevo desde el servidor, en lugar de desde la caché local.
Las tarjetas LCP y CLS muestran un valor naranja y necesitan mejorar, o un valor rojo y deficiente, en lugar de un valor verde y bueno.
Si la tarjeta LCP o CLS sigue siendo verde y dice que es buena después de que la imagen de la galaxia termine de representarse, maximice la ventana y haga que el panel de la página de demostración sea más ancho.
La tarjeta LCP muestra que la imagen de la galaxia tardó mucho tiempo en cargarse. La tarjeta muestra un valor naranja y necesita una mejora, o un valor rojo y deficiente, en lugar de un valor verde y bueno. El motor identifica esta imagen como el elemento más grande que se va a representar.
En la tarjeta LCP , mantenga el puntero sobre el valor de la métrica para ver información en una información sobre herramientas.
La tarjeta CLS muestra que los saltos repentinos e inesperados en el diseño pueden afectar negativamente a los usuarios. Esto también se debe a que la imagen tarda algún tiempo en cargarse. Por diseño, la página web de demostración no especifica un alto para la imagen, por lo que la página se carga inicialmente sin reservar mucho espacio para la imagen. Cuando la imagen comienza a aparecer, el contenido debajo de ella salta repentinamente hacia abajo.
En la tarjeta CLS , mantenga el puntero sobre el valor de la métrica para ver información en una información sobre herramientas.
Una vez que la imagen de la galaxia termine de representarse, en la página de demostración representada, haga clic en uno de los encabezados de la columna Detecciones de la derecha, como Teoría heliocéntrica (1543).
La tarjeta INP cambia de no mostrar un valor, a mostrar un valor naranja y necesita una mejora, o un valor rojo y deficiente. Se muestra un valor INP .
En la tarjeta INP , mantenga el puntero sobre el valor de la métrica para ver información en una información sobre herramientas.
En la tarjeta INP , haga clic en el valor INP.
En la página de demostración, las tarjetas Detecciones están diseñadas para expandirse y volver a representarse lentamente, de modo que tarde mucho tiempo entre hacer clic en el encabezado y representar el contenido de la tarjeta expandida. El retraso es un valor aleatorio entre 100 ms y 1000 ms, lo que da lugar a un valor INP alto.
Debajo de las tarjetas Métricas locales , se rellenan las pestañas Interacciones y Desplazamientos de diseño .
Pestaña Interacciones
La pestaña Interacciones muestra información sobre las interacciones con la página web:
La pestaña Interacciones incluye:
- Fases.
- Elementos.
- Sincronizaciones.
Para borrar la pestaña Interacciones , haga clic en el botón Borrar el registro actual (
) situado a la derecha de la pestaña Interacciones .
Pestaña Desplazamientos de diseño
La pestaña Turnos de diseño muestra información sobre los cambios de diseño:
La pestaña Cambios de diseño incluye:
- Puntuaciones.
- Elementos.
Captura y análisis de un informe de rendimiento
En las secciones siguientes, siga las instrucciones sobre cómo registrar un perfil, cambiar la configuración de captura y analizar el informe.
Registro de un perfil de rendimiento
Cuando esté listo para grabar, la herramienta Rendimiento le ofrece las siguientes opciones:
- Registre el rendimiento en tiempo de ejecución en la referencia de características de rendimiento.
- Registro del rendimiento de carga en la referencia de características de rendimiento.
- Captura de pantalla durante la grabación en Referencia de características de rendimiento.
- Forzar la recolección de elementos no utilizados durante la grabación en Referencia de características de rendimiento.
- Guarde y comparta una grabación en Referencia de características de rendimiento.
- Carga de una grabación en referencia de características de rendimiento.
- Borre la grabación anterior en Referencia de características de rendimiento.
Cambiar la configuración de captura
La configuración de captura le permite cambiar la forma en que DevTools captura las grabaciones de rendimiento y puede proporcionar información adicional en el informe. Haga clic en el botón Capturar configuración (
) para acceder al menú Configuración de captura .
Seleccione las siguientes opciones en el menú Configuración de captura :
Active la casilla Deshabilitar ejemplos de JavaScript : deshabilita la grabación de las pilas de llamadas de JavaScript que se muestran en la pista Principal a la que se llama durante la grabación. Reduce la sobrecarga de rendimiento. Consulte Deshabilitar ejemplos de JavaScript en Referencia de características de rendimiento.
Active la casilla Habilitar instrumentación de representación avanzada (lenta): Captura la instrumentación avanzada de pintura. Dificulta significativamente el rendimiento. Consulte Habilitación de la instrumentación avanzada de pintura en La referencia de características de rendimiento.
Active la casilla Habilitar estadísticas del selector CSS (lentas ): captura las estadísticas del selector CSS. Dificulta significativamente el rendimiento. Consulte Ver los costos del selector CSS en la barra lateral de la herramienta Rendimiento en Novedades de DevTools (Microsoft Edge 131).
Limitación de CPU: simula velocidades de CPU más lentas. Consulte Limitación de la CPU durante la grabación en Referencia de características de rendimiento.
Limitación de red: simula velocidades de red más lentas. Consulte Limitación de la red durante la grabación en Referencia de características de rendimiento.
Análisis de un informe de rendimiento
Para obtener una guía completa sobre cómo usar la herramienta Rendimiento , consulte Análisis de una grabación de rendimiento en Referencia de características de rendimiento.
Para navegar por un informe de rendimiento:
Consulte Navegar por la grabación en Referencia de características de rendimiento.
Consulte Actividades de búsqueda en Referencia de características de rendimiento.
Consulte Seguimiento de los iniciadores de eventos en Referencia de características de rendimiento.
Para centrarse en lo que importa para el flujo de trabajo:
Ocultar funciones y sus elementos secundarios en el gráfico de llamas
Acercar partes de una grabación y cambiar entre niveles de zoom en Referencia de características de rendimiento.
Para obtener información sobre las pestañas Abajo arriba, Árbol de llamadas y Registro de eventos:
- Vea las actividades de una tabla en Referencia de características de rendimiento.
Para analizar un informe de rendimiento:
- Vea la actividad de subproceso principal en Referencia de características de rendimiento.
- Lea el gráfico de llama en Referencia de características de rendimiento.
- Vea una captura de pantalla en Referencia de características de rendimiento.
- Vea las métricas de memoria en Referencia de características de rendimiento.
- Vea la duración de una parte de una grabación en Referencia de características de rendimiento.
- Analice el rendimiento del selector CSS durante los eventos recalcular estilo.
- Analice fotogramas por segundo (FPS) en Referencia de características de rendimiento.
- Referencia de eventos de grabación de rendimiento
Mejora del rendimiento con estas herramientas
Descubra otras herramientas que pueden ayudarle a mejorar el rendimiento de su sitio web:
| Herramienta | Artículo |
|---|---|
| Herramienta Lighthouse | Optimización de la velocidad del sitio web mediante Lighthouse |
| Herramienta memoria | Corrección de problemas de memoria |
| Pestaña Conclusiones de la herramienta > de rendimiento | Obtenga información útil en Referencia de características de rendimiento. |
| Herramienta de representación | Herramienta de representación, para ver el aspecto de una página web con diferentes opciones de visualización o deficiencias visuales |
| Herramienta de problemas | Búsqueda y corrección de problemas mediante la herramienta Problemas |
| Herramienta de rendimiento | Visualización de información de capas en referencia de características de rendimiento |
Vea también
Nota:
Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Dale St. Marthe y Sofia Emelianova.
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.