Usa el panel Estadísticas de rendimiento para obtener estadísticas prácticas y basadas en casos de uso sobre el rendimiento de tu sitio web.
Descripción general
El panel Estadísticas de rendimiento te permite hacer lo siguiente:
- Registra y mide el rendimiento de carga de la página.
- Consulta las métricas de rendimiento de las Métricas web.
- Ver la actividad de red.
- Simula velocidades de CPU y red más lentas.
- Importa y exporta grabaciones.
¿Por qué un panel nuevo?
El nuevo panel Estadísticas de rendimiento es un experimento para abordar estos 3 problemas de los desarrolladores cuando trabajan con el panel Rendimiento existente:
- Hay demasiada información. Con la IU rediseñada, el panel Estadísticas de rendimiento optimiza los datos y muestra solo la información relevante.
- Es difícil distinguir entre los casos de uso. El panel Estadísticas de rendimiento admite análisis basados en casos de uso. Por el momento, solo admite el caso de uso de carga de página, y se agregarán más en el futuro en función de tus comentarios, por ejemplo, la interactividad.
- Requiere un conocimiento profundo de cómo funcionan los navegadores para usarlos de manera eficaz. En el panel Estadísticas de rendimiento, se destacan las estadísticas clave en el panel Estadísticas, con comentarios prácticos sobre cómo solucionar problemas.
Introducción
En este instructivo, aprenderás a medir y comprender el rendimiento de carga de tu página con el panel Estadísticas de rendimiento. Continúa leyendo o mira la versión en video de este instructivo que aparece más arriba.
Abre el panel Estadísticas de rendimiento
- Abre las Herramientas para desarrolladores.
Haz clic en Más opciones > Más herramientas > Estadísticas de rendimiento.
Como alternativa, usa el menú de comandos para abrir el panel Información sobre el rendimiento.
Cómo registrar el rendimiento
El panel Estadísticas de rendimiento puede registrar el rendimiento general y basado en casos de uso (por ejemplo, la carga de la página).
- Abre esta página de demostración en una pestaña nueva y, en ella, abre el panel de estadísticas de rendimiento.
Puedes reducir la velocidad de la red y la CPU mientras grabas. En este instructivo, marca Disable cache y establece CPU en 4x slowdown en el menú desplegable:
Haz clic en Medir la carga de la página. DevTools registra las métricas de rendimiento mientras se vuelve a cargar la página y, luego, detiene automáticamente la grabación unos segundos después de que finaliza la carga de la página.
Cómo volver a reproducir una grabación de rendimiento
Usa los controles que se encuentran en la parte inferior para controlar la repetición de la grabación.
Este es un ejemplo de cómo hacerlo.
- Haz clic en Reproducir para reproducir la grabación.
- Haz clic en Pausar para pausar la repetición.
- Ajusta la velocidad de reproducción con el menú desplegable.
- Haz clic en Activar/desactivar vista previa visual para mostrar o ocultar la vista previa visual.
Cómo navegar por una grabación de rendimiento
DevTools aleja automáticamente el zoom para mostrar el cronograma completo de la grabación. Puedes navegar por la grabación con zoom y mover la línea de tiempo.
Para acercar y mover el cronograma hacia la izquierda y la derecha, usa los botones de navegación correspondientes:
- Haz clic en la línea de tiempo para mover el punto de reproducción y ver un fotograma en particular.
- Haz clic en los controles Acercar y Alejar en la parte inferior para acercar o alejar la imagen. En este caso, aplicas zoom según el cabezal de reproducción.
- Arrastra la barra de desplazamiento horizontal que se encuentra en la parte inferior para mover la línea de tiempo hacia la izquierda y la derecha.
También puedes usar combinaciones de teclas. Haz clic en el botón para ver las combinaciones de teclas.
Cuando usas combinaciones de teclas, puedes hacer zoom según el cursor del mouse.
Consulta las estadísticas de rendimiento
Obtén una lista de estadísticas de rendimiento en el panel Estadísticas. Identifica y corrige posibles problemas de rendimiento.
Coloca el cursor sobre cada una de las estadísticas para destacarlas en los segmentos principales.
Haz clic en una estadística, por ejemplo, la solicitud de bloqueo de renderización, para abrirla en el panel Detalles. Para comprender mejor el problema, examina las secciones Archivo, Problema, Cómo corregir y mucho más.
Consulta las métricas de rendimiento de las métricas web
Las Métricas web son una iniciativa de Google para brindar orientación unificada sobre los indicadores de calidad que son esenciales para ofrecer una excelente experiencia del usuario en la Web.
Puedes ver estas métricas en el panel Cronograma y Estadísticas.
Coloca el cursor sobre las estadísticas de la Rutas para obtener más información sobre las métricas.
Descubre los retrasos del procesamiento de imagen con contenido más grande
El procesamiento de imagen con contenido más grande (LCP) es una de las métricas de las Métricas web esenciales. Indica el tiempo de renderización del bloque de imagen o texto más grande visible dentro del viewport, en relación con el momento en que la página comenzó a cargarse por primera vez.
Una buena puntuación de LCP es de 2.5 segundos o menos.
Si el procesamiento de imagen con contenido más grande de tu página tarda más en renderizarse, en el cronograma, verás la insignia de LCP con un cuadrado amarillo o un triángulo rojo.
Para abrir el panel Detalles, haz clic en la insignia de LCP en el cronograma o en el panel Estadísticas a la derecha. En el panel, puedes descubrir las posibles causas de las demoras y las sugerencias para solucionarlas.
En este ejemplo, una solicitud bloquea la renderización y puedes aplicar estilos críticos intercalados para solucionar el problema. Para obtener más información, consulta Cómo eliminar recursos que bloquean la renderización.
Para ver las subpartes del tiempo de renderización del LCP, desplázate hacia abajo hasta la sección Detalles > Desglose de tiempos.
El tiempo de renderización de la LCP consta de las siguientes subpartes:
| Subparte de LCP | Descripción |
|---|---|
| Tiempo hasta el primer byte (TTFB) | Es el tiempo que transcurre desde que el usuario inicia la carga de la página hasta que el navegador recibe el primer byte de la respuesta del documento HTML. |
| Retraso en la carga de recursos | Es la diferencia entre el TTFB y el momento en que el navegador comienza a cargar el recurso de LCP. |
| Tiempo de carga de recursos | Es el tiempo que tarda en cargarse el recurso de LCP. |
| Retraso en la renderización del elemento | Es la diferencia entre el momento en que se termina de cargar el recurso de LCP y el momento en que se renderiza por completo el elemento de LCP. |
Si un elemento LCP no requiere una carga de recursos para renderizarse, se omiten el retraso y el tiempo de carga de recursos. Por ejemplo, en el caso de que el elemento sea un nodo de texto renderizado con una fuente del sistema.
Cómo ver la actividad de los cambios de diseño
Consulta la actividad de los cambios de diseño en el segmento Cambios de diseño.
Los cambios de diseño se agrupan en una ventana de sesión. En el ejemplo, hay dos ventanas de sesión. Las ventanas de sesión tienen intervalos entre ellas.
El Cambio de diseño acumulado (CLS) es una de las métricas de las Métricas web esenciales. Usa el segmento Cambios de diseño para identificar posibles problemas y causas de los cambios de diseño.
Cuando quieras mejorar la métrica de CLS, siempre comienza con la ventana de sesión más grande. En nuestro ejemplo, la ventana de sesión 1 es la más grande, según el color de fondo y el nivel.
Haz clic en una captura de pantalla para ver los detalles del cambio de diseño, identificar las posibles causas raíz y los elementos afectados.
En nuestro ejemplo, la posible causa raíz es contenido multimedia sin ajustar el tamaño. Para obtener información sobre cómo solucionarlo, consulta Cómo optimizar el cambio de diseño acumulativo.
Información sobre la puntuación de cambios de diseño
Para comprender cómo se calculan las puntuaciones, usa la sección Ventana en el panel Detalles. En Window, se muestra a qué ventana de sesión pertenece el cambio de diseño actual.
Si se desplaza toda la página, la puntuación máxima de cada cambio de diseño es 1. En nuestro ejemplo, el primer cambio de diseño obtuvo una puntuación de 0.15. El segundo cambio de diseño obtuvo una puntuación de 0.041.
La puntuación total de esta ventana de sesión es 0.19. Según el umbral de CLS, necesita mejoras. El color de fondo de la ventana de la sesión refleja lo mismo.
El gráfico de fondo de la ventana de sesión aumenta con el tiempo. La Puntuación acumulada del cambio de diseño refleja el aumento en ese momento.
Cómo ver la actividad de red
Consulta la actividad de red en el segmento Red. Puedes expandir el segmento de red para ver todas las actividades de la red y hacer clic en cada elemento para ver los detalles.
Cómo ver la actividad del renderizador
Consulta la actividad de renderización en el segmento Renderizador. Puedes expandir cada renderizador para ver las actividades y hacer clic en cada elemento para ver los detalles.
Cómo ver la actividad de la GPU
Consulta la actividad de la GPU en el segmento GPU. La pista de la GPU está oculta de forma predeterminada. Para habilitarlo, marca GPU en Configuración.
Cómo ver los tiempos de los usuarios
Para obtener mediciones de rendimiento personalizadas, puedes usar los Tiempos de usuario y visualizar tus tiempos con el segmento Tiempos. Para obtener más información, consulta la API de User timing.
Consulta esta página de demostración que calcula el tiempo transcurrido de la carga de texto.
Para ver los tiempos de los usuarios, sigue estos pasos:
- Marca los lugares de tu aplicación con
performance.mark(). - Mide el tiempo transcurrido entre marcas con
performance.measure(). - Registra el rendimiento.
- Consulta las mediciones en la pista Tiempo. Si no ves la pista, revisa Tiempo de los usuarios en Configuración.
- Para ver los detalles, haz clic en el tiempo de la pista.
Cómo personalizar la IU
Para personalizar el Cronograma y las Pistas, haz clic en el ícono de Configuración del panel y marca las opciones que prefieras.
Cómo exportar una grabación
Para guardar una grabación, haz clic en Exportar .
Cómo importar una grabación
Para cargar una grabación, selecciona Importar .
Cómo borrar una grabación
Para borrar una grabación, haz lo siguiente:
- Haz clic en Borrar. Se abrirá un diálogo de confirmación.
- En el cuadro de diálogo, haz clic en Borrar para confirmar la eliminación.