La extensión de Web Vitals ahora muestra más información de depuración para ayudarte a identificar las causas raíz de los problemas de las Métricas web esenciales.
Fecha de publicación: 4 de mayo de 2023
La extensión de Métricas web esenciales proporciona acceso fácil a la información de diagnóstico de las Métricas web esenciales para ayudar a los desarrolladores a medir y abordar los problemas de las Métricas web esenciales. Complementa las otras herramientas que proporciona el equipo de Chrome para ayudar a los desarrolladores a mejorar las experiencias en sus sitios web.
Actualizamos la extensión para proporcionar información de depuración adicional a los desarrolladores y facilitar la comprensión y solución de sus problemas de rendimiento.
Cómo mostrar información de depuración en la consola
La extensión de métricas web esenciales tiene una opción de depuración "Registro de consola" desde hace algún tiempo. Se puede habilitar en la pantalla Opciones:
Antes de esta última actualización, esto registraba los resultados de web-vitals library (que respalda la extensión) en un objeto JSON:
Luego, este objeto se podría expandir para obtener los detalles completos, y se podría colocar el cursor sobre elementos como la imagen de LCP para destacarlos en el panel principal:
Esto fue útil, pero el formato de salida no era muy fácil de usar, y pensamos que podíamos brindar una mejor experiencia para los desarrolladores. Por lo tanto, mejoramos la extensión para que la información más importante sea más visible y, al mismo tiempo, incluimos el objeto completo para quienes deseen más detalles.
Nueva información de depuración para cada métrica
Con la nueva versión, agregamos nueva información de depuración en un formato más legible para ayudarte a encontrar y abordar problemas. Se proporciona información diferente para cada una de las métricas, ya que cada una es distinta.
Información de depuración de LCP
Para el Procesamiento de imagen con contenido más grande (LCP), mostramos tanto el elemento como el desglose de las 4 fases en detalle en nuestra guía Optimiza el LCP:
El tiempo de LCP (2,876 milisegundos, o alrededor de 2.9 segundos) se destaca en ámbar, ya que se encuentra en la categoría "Se requieren mejoras".
En este ejemplo, vemos que Resource load time es el tiempo más largo, por lo que, para mejorar el tiempo de LCP, deberías optimizarlo, por ejemplo, evitando alojarlo en un dominio independiente o usando imágenes más pequeñas o formatos más eficientes. En este caso, se debe a que se redujo artificialmente la velocidad para demostrar el resultado: web.dev es un sitio rápido{/6}.
También puedes colocar el cursor sobre el elemento para destacar la imagen:
Si haces clic con el botón derecho en el elemento, también podrás mostrarlo en el panel de elementos.
Aquí, el elemento LCP es una imagen y, si colocas el cursor sobre ella en la consola de la derecha, también se destaca ese elemento en el sitio de la izquierda.
Información de depuración de CLS
Ahora también se muestran los cambios que contribuyen al Cambio de diseño acumulado (CLS) y se puede colocar el cursor sobre él para destacar el elemento relevante:
La captura de pantalla anterior muestra 2 desplazamientos, el primero consta de dos elementos (cuando se carga la imagen del banner y se desplaza el contenido debajo de él) y el segundo de 4 elementos (cuando se carga el anuncio dinámico y la mayor parte de la página se desplaza hacia abajo).
En esta captura de pantalla de la consola de la derecha, se coloca el cursor sobre el elemento h2, y puedes ver que se destaca el elemento en el sitio de la izquierda.
Información de depuración del FID
En el caso del retraso de primera entrada (FID), mostramos el elemento afectado (sobre el que se puede colocar el cursor para destacarlo en la página) y el tipo de interacción, junto con el objeto JSON completo como de costumbre:
Información de depuración de INP
Para Interaction to Next Paint (INP), agregamos dos registros nuevos:
- INP: La interacción más larga
- Interacciones: Todas las interacciones
Métrica de INP
En primer lugar, destacamos la métrica INP cuando cambia:
Al igual que con el LCP, la extensión desglosa el tiempo de INP para mostrar tres fases:
- Retraso de entrada
- Duración del procesamiento
- Retraso en la presentación
Esto te ayuda a identificar si el evento fue lento debido a que se retrasó por otros eventos (latencia de entrada), si el controlador de eventos en sí fue lento debido a tu código (duración del procesamiento), si la razón fue la demora en la renderización posterior al procesamiento (demora en la presentación) o una combinación de dos o más de estos factores.
Interacciones
La INP puede ser lenta debido a que las interacciones anteriores bloquean el subproceso principal y, por lo tanto, causan una gran demora en la entrada. Por este motivo, enumeramos todas las interacciones en un formato similar al registro de INP:
Esto te permite realizar un "seguimiento en vivo" de un sitio web interactuando con él y viendo en la consola qué interacciones, en qué combinaciones, pueden causar un problema de INP.
Esto también te permite identificar varias interacciones lentas, en lugar de solo la interacción INP más grande, para ayudarte a evitar la sensación de irte rápido a la hora de mejorar tu capacidad de respuesta.
Filtra los registros de la consola
Si bien toda esta información adicional es útil, puede distraer si estás realizando otro desarrollo no relacionado con las Métricas web esenciales o si solo te interesa una Métrica web esencial en particular en ese momento.
Puedes usar las opciones de filtrado de Console en DevTools para filtrar algunos o todos los mensajes:
- Para quitar todos los mensajes de extensión, puedes desactivar esta opción en las opciones o usar el filtro
-Extension. - Para ver solo la LCP, puedes usar el filtro
Web Vitals Extension LCP. - Para ver solo el INP y las interacciones, puedes usar el filtro
Web Vitals Extension -LCP -CLS -FID.
Intentamos mantener baja la cantidad de opciones para esta extensión, pero comunícanos un problema en GitHub si el filtrado de Herramientas para desarrolladores no es suficiente y si prefieres las opciones aquí.
Conclusión
Esperamos que las nuevas opciones de depuración en la versión más reciente de la extensión te resulten útiles y que faciliten la identificación y resolución de los problemas de Métricas web esenciales, lo que mejorará las experiencias del usuario en tu sitio web.
Recuerda que tus experiencias en la computadora del desarrollador pueden no ser representativas de lo que experimentan tus usuarios reales. Consulta nuestra entrada de blog anterior sobre cómo puedes ver los datos de campo de CrUX de tu sitio en la extensión para obtener una idea de qué tan alineadas están tus experiencias con tus usuarios.
Nos complacería recibir tus comentarios sobre estas mejoras o cualquier otra sugerencia en nuestro seguimiento de problemas de GitHub.