Herramienta Rendimiento: Analizar el rendimiento de su sitio web

Usa la herramienta Rendimiento para analizar el rendimiento de tu sitio web. Hay dos vistas principales:

• La página principal muestra métricas locales a medida que interactúa con la página web actual.
• Graba un perfil y consulta una línea de tiempo de la actuación.

Contenido detallado:

• Información general
  • Abrir la herramienta Rendimiento
    • Uso del menú de comandos
  • Métricas locales para las interacciones de página
  • Escala de tiempo del perfil grabada
  • Cambiar a ver métricas locales u otro perfil
• Supervisar métricas de Core Web Vitals
  • Terminología
  • Usar la página de demostración
  • Pestaña Interacciones
  • Pestaña Cambios de diseño
• Captura y análisis de un informe de rendimiento
  • Grabar un perfil de rendimiento
  • Cambiar la configuración de captura
  • Analizar un informe de rendimiento
• Mejorar el rendimiento con estas herramientas

Para ver un tutorial sobre el uso de la herramienta Rendimiento para mejorar el rendimiento de su 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ágina y le permite registrar los perfiles de rendimiento de la CPU de las aplicaciones web. Analice los perfiles para encontrar posibles cuellos de botella en el rendimiento y formas de optimizar el uso de los recursos.

Abrir la herramienta Rendimiento

Para abrir la herramienta Rendimiento :

1. Ve a una página web, como la demostración Explorando el universo , en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En la parte superior de la barra de actividades , haga clic en el Herramienta Rendimiento .

   Si el herramienta Rendimiento no se muestra en la barra de actividades, haga clic en el botón Más herramientas () y luego seleccione la herramienta Rendimiento.

Uso del menú de comandos

Para abrir la herramienta Rendimiento mediante el menú de comandos:

1. Ve a una página web, como la demostración Explorando el universo , en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En la parte superior derecha de DevTools, haga clic en Personalizar y controlar DevTools, haga clic en Ejecutar comando.

   O bien, pulsa:

   • macOS: Comando+Mayús+P
   • Windows, Linux, ChromeOS: Control+Mayús+P

   Se abre el menú de comandos y se lee Ejecutar >comando.

4. Comience a escribir performance, seleccione Mostrar rendimiento [panel] y, a continuación, presione Entrar.

   

Métricas locales para las interacciones de página

Utilice la herramienta Rendimiento para ver las métricas de Core Web Vitals en la vista inicial de métricas locales . La página principal de la herramienta Rendimiento muestra métricas locales, que son métricas de rendimiento sobre la página web representada:

• Largest Contentful Paint (LCP): la rapidez con la que se cargó 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 Next Paint (INP): la capacidad de respuesta de la interacción del usuario más reciente en la página.

Cuando abre inicialmente la herramienta Rendimiento , se muestran las métricas de Core Web Vitals, en tres tarjetas en una sección de métricas locales :

Escala de tiempo del perfil grabada

Usa también la herramienta Rendimiento para ver un seguimiento del rendimiento registrado, incluido:

• Registrar un perfil de rendimiento.
• Cambiar la configuración de captura.
• Analizar 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:
  • Las interacciones de usuario que se produjeron durante la grabación.
  • El 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 del rendimiento, se muestra el seguimiento del rendimiento en lugar de las métricas locales.

Cambiar a ver métricas locales u otro perfil

Para cambiar a la visualización de la vista inicial de métricas locales, haga clic en el botón Volver a la página de métricas en tiempo real ().

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 del botón Volver a la página de métricas en vivo ().

Supervisar métricas de Core Web Vitals

Utilice la herramienta Rendimiento para ver las métricas de Core Web Vitals en la vista inicial de métricas locales . La página principal de la herramienta Rendimiento muestra métricas locales, que son métricas de rendimiento sobre la página web representada:

• Largest Contentful Paint (LCP): la rapidez con la que se cargó 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 Next Paint (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
Web Vitals	Un gran conjunto de métricas que proporcionan instrucciones unificadas para ofrecer una buena experiencia de usuario en la Web.	Web Vitals en web.dev.
Core Web Vitals	Subconjunto de Web Vitals que se aplica a todas las páginas web y que deben medir todos los propietarios del sitio. Cada uno de los Core Web Vitals representa una faceta distinta de la experiencia del usuario, es medible en el campo y refleja la experiencia del mundo real de un resultado crítico centrado en el usuario.	Core Web Vitals en Web Vitals en web.dev.
Largest Contentful Paint (LCP)	Mide el rendimiento de carga . Para proporcionar una buena experiencia de usuario, la LCP debe producirse en un plazo de 2,5 segundos desde que la página comienza a cargarse por primera vez. El tiempo de representación de la imagen, bloque de texto o vídeo de mayor tamaño visible en la ventanilla, en relación con el momento en que el usuario navegó por primera vez a la página.	La pintura de contenido más grande (LCP) en el glosario de MDN. LargestContentfulPaint en MDN.
Cambio 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 ráfaga más grande de cambios de diseño puntúa 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 el glosario de MDN. LayoutShift en MDN.
Interacción con Next Paint (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 Next Paint (INP) en el glosario de MDN. PerformanceEventTiming en MDN.
Métricas locales, datos locales	Las 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.

Usar la página de demostración

Para producir una métrica deficiente o necesita mejoras en las tarjetas LCP, CLS e INP en la herramienta Rendimiento :

1. Abre una página web, como la demostración Explorando el universo , en una nueva ventana o pestaña.

   La página de demostración "Explorando el universo" está diseñada para cargar y manejar 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 solucionar problemas de rendimiento.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En la parte superior de la Barra de Actividades , seleccione el herramienta Rendimiento .

   Si el herramienta Rendimiento no se muestra en la barra de actividades, haga clic en el botón Más herramientas () y luego seleccione la herramienta Rendimiento.

4. 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, es posible que algunas tarjetas sigan mostrándose en buen estado, con un valor verde, que no es el resultado esperado.

5. Seleccionar panel> Pasos siguientes Tarjeta > de configuración del entorno Lista desplegable >de limitación de CPU Seleccione 4x Ralentización: recomendado.

   O bien, selecciona Configuración de Captura () > Lista desplegable >de limitación de CPURalentización 4x: recomendado.

6. Seleccionar panel> Pasos siguientes Tarjeta > de configuración del entorno Lista desplegable >de limitación de red seleccione 4G lento.

7. Seleccionar el panel >Pasos siguientes Tarjeta >de configuración del entorno active la casilla Deshabilitar caché de red.

   

8. Haga clic con el botón derecho (o mantenga presionado) el botón Actualizar situado a la izquierda de la barra de direcciones y seleccione Vaciar caché y actualizar permanentemente.

   Esto garantiza que la imagen se carga de nuevo desde el servidor, en lugar de la memoria caché local.

   Las tarjetas LCP y CLS muestran un valor naranja y necesita mejorar, o un valor rojo y pobre, en lugar de un valor verde y bueno.

9. Si la tarjeta LCP o CLS permanece verde y dice "good " después de que la imagen de la galaxia termine de renderizarse, maximice la ventana y amplíe el panel de la página de demostración.

   La tarjeta LCP muestra que la imagen de la galaxia tardó mucho tiempo en cargarse. La carta muestra un valor naranja y necesita mejorar, o un valor rojo y pobre, en lugar de un valor verde y bueno. El motor identifica esta imagen como el elemento más grande que se va a representar.

10. En la tarjeta LCP , mantenga el puntero sobre el valor de la métrica para ver información en información en forma de 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 una altura para la imagen, por lo que la página se carga inicialmente sin reservar mucho espacio para la imagen. Cuando la imagen empieza a aparecer, el contenido que hay debajo de ella salta de repente.

11. En la tarjeta CLS , mantenga el puntero sobre el valor de la métrica para ver información en una información sobre herramientas.

12. Después de que la imagen de la galaxia termine de renderizarse, en la página de demostración renderizada, haga clic en uno de los encabezados de la columna de Descubrimientos 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 mejorar, o un valor rojo y deficiente. Se muestra un valor INP .

13. En la tarjeta INP , mueva el puntero sobre el valor de la métrica para ver información en una información sobre herramientas.

14. En la tarjeta INP , haga clic en el valor INP.

    En la página de demostración, las tarjetas de Descubrimientos están diseñadas para expandirse y volver a renderizarse lentamente, de modo que pasa mucho tiempo entre hacer clic en el encabezado y procesar el contenido de la tarjeta expandida. El retraso es un valor aleatorio entre 100 ms y 1000 ms, lo que da como resultado un valor INP alto.

    Debajo de las tarjetas de métricas locales , se rellenan las pestañas Interacciones y Turnos de diseño .

Pestaña Interacciones

La pestaña Interacciones muestra información sobre sus interacciones con la página web:

La pestaña Interacciones incluye:

• Fases.
• elementos.
• Horarios.

Para borrar la pestaña Interacciones , haga clic en el botón Borrar el registro actual () a la derecha de la pestaña Interacciones .

Pestaña Cambios de diseño

La pestaña Cambios de diseño muestra información sobre los cambios de diseño:

La pestaña Cambios de diseño incluye:

• Puntajes.
• elementos.

Captura y análisis de un informe de rendimiento

En las secciones siguientes, siga las instrucciones sobre cómo grabar un perfil, cambiar la configuración de captura y analizar el informe.

Grabar 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 Referencia de características de rendimiento.
• Registre el rendimiento de carga en la referencia de características de rendimiento.
• Captura de pantalla mientras grabas en Referencia de características de rendimiento.
• Forzar la recolección de elementos no utilizados mientras se graba en Referencia de características de rendimiento.
• Guardar y compartir una grabación en Referencia de características de rendimiento.
• Cargar una grabación en Referencia de características de rendimiento.
• Borrar la grabación anterior en Referencia de características derendimiento.

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 proporcionarle información adicional en el informe. Haga clic en el botón Configuración de Captura () para acceder al menú de configuración de Captura.

Seleccione las siguientes opciones en el menú de 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 las que se llama durante la grabación. Reduce la sobrecarga de rendimiento. Consulta 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 de pintura avanzada. Dificulta significativamente el rendimiento. Consulte Habilitar instrumentación avanzada de Paint en Referencia de características derendimiento.

• Active la casilla Habilitar estadísticas del selector CSS (lenta): captura las estadísticas del selector CSS. Dificulta significativamente el rendimiento. Consulte Ver los costos del selector de CSS en la barra lateral de la herramienta Rendimiento en Novedades de DevTools (Microsoft Edge 131).

• Limitación de CPU: simule velocidades de CPU más lentas. Consulte Limitar la CPU durante la grabación en Referencia decaracterísticas de rendimiento.

• Limitación de red: simule velocidades de red más lentas. Consulte Limitar la red durante la grabación en Referencia de características de rendimiento.

Analizar un informe de rendimiento

Para obtener una guía completa sobre cómo usar la herramienta Rendimiento , consulta Analizar 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 derendimiento.

• Consulte Actividades de búsqueda en Referencia de características de rendimiento.

• Consulte Realizar un seguimiento de los iniciadores de eventos en Referencia decaracterísticas de rendimiento.

Para centrarse en lo importante para su flujo de trabajo:

• Cambiar el orden de las pistas y ocultarlas

• Ocultar funciones y sus elementos secundarios en el gráfico de llamas

• Zoom en 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 De abajo a arriba, Árbol de llamadas y Registro de eventos :

• Ver las actividades de una tabla en Referencia de características de rendimiento.

Para analizar un informe de rendimiento:

• Vea la actividad de la conversación principal en Referencia de características de rendimiento.
• Lea la tabla de llama en Referencia decaracterísticas de rendimiento.
• Vea una captura de pantalla en la referencia de características de rendimiento.
• Vea las métricas de memoria en la referencia de características de rendimiento.
• Vea la duración de una parte de una grabación en Referencia de características de rendimiento.
• Analizar el rendimiento del selector CSS durante los eventos Recalcular estilo.
• Analiza los fotogramas por segundo (FPS) en la referencia de características de rendimiento.
• Referencia de evento de grabación de rendimiento

Mejorar el rendimiento con estas herramientas

Descubre otras herramientas que pueden ayudarte a mejorar el rendimiento de tu sitio web:

Herramienta	Artículo
Herramienta Faro	Optimizar la velocidad de un sitio web con Lighthouse
Herramienta Memoria	Solucionar problemas de memoria
Herramientas >Rendimiento Pestaña Conclusiones	Obtenga conclusiones útiles en la referencia de características de rendimiento.
Herramienta de representación	Herramienta de renderización, para ver cómo se ve una página web con diferentes opciones de visualización o deficiencias de visión
Herramienta Problemas	Buscar y corregir problemas con la herramienta Problemas
Herramienta Rendimiento	Ver información de capas en Referencia de características de rendimiento

Vea también

• Página de demostración de Exploring the universe

Nota:

Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Dale St. Marthe y Sofia Emelianova.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.