Descubre problemas de rendimiento de renderización con esta referencia de opciones relacionadas con el rendimiento en la pestaña Renderización.
Destacar áreas repintadas con pintura destellante
Si esta opción está activada, la pantalla de Chrome parpadeará en color verde cada vez que se vuelva a renderizar.
Para ver las áreas que se vuelven a pintar:
- Abre la pestaña Renderización en esta demostración y marca la opción Painting flash.
- Observa cómo se pinta de nuevo en verde.
Si, en otra página, observas que toda la pantalla parpadea en color verde o áreas que no crees que deberían pintarse, considera investigar más a fondo.
Cómo destacar las regiones de cambio de diseño
Los cambios de diseño generan repeticiones inesperadas de dibujos y pueden ser no solo molestos, sino también perjudiciales.
Para ver la ubicación y la hora de los cambios de diseño en una página, haz lo siguiente:
Abre la pestaña Rendering y marca Layout Shift Regions.
Actualiza la página. Las áreas de cambio de diseño se destacan brevemente en púrpura.
Cómo ver capas y mosaicos con bordes de capas
Usa la opción Bordes de capas para ver una superposición de bordes de capas y mosaicos en la parte superior de la página.
Para habilitar los bordes de la capa, haz lo siguiente:
- Abre la pestaña Rendering y marca Layer Borders.
- Observa los bordes de la capa en naranja y verde oliva, y mosaicos en turquesa.
Consulta los comentarios en debug_colors.cc para ver una explicación de los códigos de color.
Ver fotogramas por segundo en tiempo real con las estadísticas de renderización de fotogramas
Las estadísticas de renderización de fotogramas son una superposición que aparece en la esquina superior derecha del viewport.
Para abrir las Estadísticas de renderización de fotogramas, haz lo siguiente:
- Abre la pestaña Renderización y habilita la casilla de verificación Estadísticas de renderización de fotogramas.
- Observa las estadísticas en la esquina superior derecha de la página.
La superposición de Estadísticas de renderización de fotogramas muestra lo siguiente:
- Estimación en tiempo real de fotogramas por segundo mientras se ejecuta la página.
- Define un marco de tiempo como un diagrama con tres tipos de fotogramas:
- Los fotogramas se renderizaron correctamente (líneas azules)
- Fotogramas presentados parcialmente (líneas amarillas)
- Pérdida de fotogramas (líneas rojas).
- El estado de la trama de la GPU: activada o desactivada (para obtener más información, consulta Cómo obtener la rasterización de GPU)
- Uso de memoria de GPU: la cantidad de memoria usada y el máximo de MB de memoria.
Cómo identificar problemas de rendimiento del desplazamiento
Utiliza Desplazamiento de problemas de rendimiento para identificar los elementos de la página que tienen objetos de escucha de eventos relacionados con el desplazamiento que pueden afectar el rendimiento de la página.
Para ver los elementos potencialmente problemáticos, sigue estos pasos:
- Abre la pestaña Renderización y marca la opción Problemas de rendimiento de desplazamiento.
- Observa los elementos potencialmente problemáticos destacados.
Consulta las Métricas web esenciales
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.
Son el subconjunto de Métricas web esenciales que se aplican a todas las páginas web. Cada una de las Métricas web esenciales representa una faceta distinta de la experiencia del usuario, se puede medir en el campo y refleja la experiencia en el mundo real de un resultado crítico centrado en el usuario. Las Métricas web esenciales son las siguientes:
- Largest Contentful Paint (LCP): Mide el rendimiento de la carga. Para proporcionar una buena experiencia del usuario, el LCP debe ocurrir en un plazo de 2.5 segundos a partir del momento en que la página comienza a cargarse.
- Interacción a la siguiente pintura (INP): Mide la interactividad. Para brindar una buena experiencia del usuario, las páginas deben tener un INP de 200 milisegundos o menos.
- Cambio de diseño acumulado (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia del usuario, las páginas deben mantener un CLS de 0.1. o menos.
Usa la extensión de Chrome de Métricas web para ver los valores de Métricas web esenciales de tu página.