Utiliza 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.
¿Por qué implementar un panel nuevo?
El nuevo panel Estadísticas de rendimiento es un experimento que aborda estos 3 problemas para desarrolladores cuando trabaja con el panel Rendimiento existente:
- Contiene 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 casos de uso. El panel Estadísticas de rendimiento admite el análisis basado en casos de uso. Por el momento, solo admite casos de uso de carga de páginas, y se agregarán más en el futuro en función de tus comentarios, como la interactividad.
- Se requiere una amplia experiencia en el funcionamiento de los navegadores para poder usarse de forma eficaz. El panel Estadísticas de rendimiento destaca las estadísticas clave en el panel Estadísticas, junto 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 tus páginas con el panel Estadísticas de rendimiento. Continúa leyendo o mira la versión en vídeo de este tutorial.
Abrir el panel Estadísticas de rendimiento
- Abre 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 Estadísticas de rendimiento.
Récord de rendimiento
El panel Estadísticas de rendimiento puede registrar el rendimiento general y basado en casos de uso (por ejemplo, la carga de páginas).
- Abre esta página de demostración en una pestaña nueva y, en la página, abre el panel Estadísticas de rendimiento.
Puedes limitar la red y la CPU durante el registro. En este instructivo, marca Inhabilitar caché y establece CPU en 4x velocidad en el menú desplegable:
Haz clic en Medir la carga de la página. Herramientas para desarrolladores registra las métricas de rendimiento mientras la página se vuelve a cargar y, luego, detiene automáticamente la grabación unos segundos después de que termina de cargarse.
Volver a reproducir una grabación de una presentación
Usa los controles de la parte inferior para controlar la reproducción de tu grabación.
Aquí hay un ejemplo de cómo hacerlo.
- Haz clic en Reproducir para reproducir la grabación.
- Haz clic en Pause para pausar la reproducción.
- Ajusta la velocidad de reproducción con el menú desplegable.
- Haz clic en Activar o desactivar la vista previa visual para ocultar o mostrar la vista previa.
Cómo navegar por una grabación de la presentación
Herramientas para desarrolladores se aleja automáticamente para mostrar la línea de tiempo de grabación completa. Puedes navegar por la grabación con zoom y mover la línea de tiempo.
Para acercar o alejar la línea de tiempo y moverla hacia la izquierda y hacia la derecha, usa los botones de navegación correspondientes:
- Haz clic en Cronograma para mover el cabezal de reproducción para ver un fotograma en particular.
- Haz clic en los controles Acercar y Alejar en la parte inferior para acercar la imagen. En este caso, el zoom se basa en el cabezal de reproducción.
- Arrastra la barra de desplazamiento horizontal en la parte inferior para mover la línea de tiempo hacia la izquierda y hacia 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, el zoom se basa en el cursor del mouse.
Consulta las estadísticas de rendimiento
Obtén una lista de estadísticas de rendimiento en el panel Insights (Estadísticas). Identificar y corregir 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 Details. Para comprender mejor el problema, examina las secciones Archivo, Problema, Cómo solucionar el problema y mucho más.
Consulta las métricas de rendimiento de las Métricas web
Las Métricas web son una iniciativa de Google que brinda 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 en Cronograma 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 web esenciales. Informa el tiempo de renderización de la imagen o el bloque de texto más grande visible en el viewport, en relación con el momento en que la página comenzó a cargarse por primera vez.
Una buena puntuación LCP es de 2.5 segundos o menos.
Si el procesamiento de imagen con contenido más grande de la página tarda más tiempo en renderizarse, en el cronograma verás la insignia de LCP con un cuadrado amarillo o un triángulo rojo.
Para abrir el panel Details, haz clic en la insignia de LCP en el cronograma o en el panel Insights que se encuentra a la derecha. En el panel, puedes descubrir las posibles causas de los retrasos y las sugerencias para corregirlos.
En este ejemplo, una solicitud bloquea la renderización y puedes aplicar estilos críticos de forma intercalada para corregirla. Para obtener más información, consulta Cómo eliminar recursos que bloquean el procesamiento.
Para ver las subpartes del tiempo de renderización de LCP, desplázate hacia abajo hasta la sección Detalles > Desglose de tiempos.
El tiempo de renderización de 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 comienza a cargar la página hasta que el navegador recibe el primer byte de la respuesta del documento HTML. |
| Retraso en la carga de recursos | El delta entre TTFB y el momento en que el navegador comienza a cargar el recurso LCP. |
| Tiempo de carga del recurso | Es el tiempo que tarda en cargarse el recurso LCP. |
| Retraso en la renderización de los elementos | El delta entre el momento en que el recurso LCP termina de cargarse hasta que el elemento LCP se renderiza por completo. |
Si un elemento LCP no requiere una carga de recursos para su renderización, se omiten el retraso y el tiempo de carga de los recursos. Por ejemplo, en caso de que el elemento sea un nodo de texto renderizado con una fuente del sistema.
Cómo ver la actividad de cambios de diseño
Consulta la actividad de 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 espacios entre ellas.
Los cambios de diseño acumulados (CLS) son una 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.
Siempre comienza con la ventana de sesión más grande cuando mejoras la métrica CLS. En nuestro ejemplo, la ventana de sesión 1 es la más grande, según el color y el nivel de fondo.
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 tamaño. Para obtener información sobre cómo solucionarlo, consulta Cómo optimizar el cambio de diseño acumulado.
Cómo interpretar la puntuación de los cambios de diseño
Para comprender cómo se calculan las puntuaciones, usa la sección Window en el panel Details. 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, se necesita mejorar. El color de fondo de la ventana de sesión refleja el mismo color.
El gráfico de fondo de la ventana de sesión aumenta con el tiempo. La puntuación acumulativa 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 procesador
Consulta la actividad de renderización en el segmento Renderer. Puedes expandir cada procesador para ver las actividades y hacer clic en cada elemento para ver los detalles.
Cómo ver la actividad de GPU
Consulta la actividad de la GPU en el segmento GPU. El segmento de GPU está oculto de forma predeterminada. Para habilitarlo, marca la opción GPU en Configuración.
Cómo ver los tiempos de los usuarios
Para obtener medidas de rendimiento personalizadas, puedes usar la función Sincronización de usuarios y visualizar los tiempos en el segmento de Sincronización. Para obtener más información, consulta la API de User Timing.
Consulta esta página de demostración que calcula el tiempo transcurrido para cargar el texto.
Para ver los tiempos de los usuarios, haz lo siguiente:
- Marca lugares en tu aplicación con
performance.mark(). - Mide el tiempo transcurrido entre marcas con
performance.measure(). - Registra el rendimiento.
- Consulta las mediciones en el segmento Tiempos. Si no puedes ver el segmento, consulta Tiempos de los usuarios en Configuración.
- Para ver los detalles, haz clic en los tiempos del segmento.
Personaliza la IU
Para personalizar el cronograma y los seguimientos, haz clic en el ícono Configuración del panel y marca las opciones que prefieras.
Cómo exportar una grabación
Para guardar una grabación, haz clic en Export .
Cómo importar una grabación
Para cargar una grabación, selecciona Import .
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 esta acción.