Búsqueda de oportunidades para mejorar la experiencia del usuario con las herramientas web de Chrome
Hoy, analizaremos nuevas funciones de herramientas en Lighthouse, PageSpeed y Herramientas para desarrolladores para ayudarte a identificar de qué manera tu sitio puede mejorar las Métricas web.
A modo de repaso sobre las herramientas, Lighthouse es una herramienta automatizada de código abierto diseñada para mejorar la calidad de las páginas web. Puedes encontrarla en el paquete de herramientas de depuración de Chrome DevTools y ejecutarla en cualquier página web, pública o que requiera autenticación. También puedes encontrar Lighthouse en PageSpeed Insights, CI y WebPageTest.
Lighthouse 7.x incluye nuevas funciones, como capturas de pantalla de elementos, para facilitar la inspección visual de las partes de tu IU que afectan las métricas de la experiencia del usuario (p.ej., qué nodos contribuyen al cambio del diseño).
También incluimos compatibilidad con capturas de pantalla de elementos en PageSpeed Insights, lo que permite detectar con mayor facilidad problemas en ejecuciones de rendimiento únicas de páginas.
Mide las Métricas web esenciales
Lighthouse puede medir de forma sintética las métricas web esenciales, lo que incluye el Procesamiento de imagen con contenido más grande, el Cambio de diseño acumulado y el Tiempo de bloqueo total (un proxy de lab para Retraso de primera entrada). Estas métricas reflejan la carga, la estabilidad del diseño y la preparación de la interacción. También están disponibles otras métricas, como First Contentful Paint, en el futuro de Métricas web esenciales.
La sección "Métricas" del informe de Lighthouse incluye versiones del lab de estas métricas. Puedes usar esto como una vista resumida de los aspectos de la experiencia del usuario que requieren tu atención.
Las métricas de campo, como las que se encuentran en el Informe de UX de Chrome o en el RUM, no tienen esta limitación y son un complemento valioso para los datos de lab, ya que reflejan la experiencia que tienen los usuarios reales. Los datos de campo no pueden ofrecer el tipo de información de diagnóstico que se obtiene en el lab, por lo que ambos van de la mano.
Identificar qué aspectos puedes mejorar en las Métricas web
Identifica el elemento del Procesamiento de imagen con contenido más grande
El LCP es una medición de la experiencia de carga percibida. Marca el momento durante la carga de la página en el que se carga el contenido principal (o "más grande") y es visible para el usuario.
Lighthouse tiene una auditoría de "elemento de Procesamiento de imagen con contenido más grande" que identifica cuál fue el elemento de Procesamiento de imagen con contenido más grande. Si colocas el cursor sobre el elemento, este se destacará en la ventana principal del navegador.
Si este elemento es una imagen, esta información es una sugerencia útil para optimizar la carga de esta imagen. Lighthouse incluye una serie de auditorías de optimización de imágenes para ayudarte a comprender si tus imágenes se podrían comprimir mejor, cambiar de tamaño o entregarse en un formato de imagen moderno más óptimo.
También puede resultarte útil LCP Markerlet de Annie Sullivan para identificar rápidamente el elemento de LCP con un rectángulo rojo con solo un clic.
Precarga las imágenes descubiertas tardías para mejorar el LCP
Para mejorar el Largest Contentful Paint, precarga tus hero images críticas si el navegador las descubre tarde. Un descubrimiento tardío puede ocurrir si se debe cargar un paquete de JavaScript antes de que la imagen sea detectable.
A continuación, se muestran algunas preguntas frecuentes que se hacen sobre la precarga de imágenes de LCP y también vale la pena repasarlas brevemente.
¿Se pueden cargar previamente imágenes responsivas? Sí
Supongamos que tenemos una hero image responsiva, como se especifica mediante srcset y sizes a continuación:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Gracias a los atributos imagesrcset y imagesizes que se agregaron al atributo link, podemos precargar una imagen responsiva con la misma lógica de selección de imágenes que usan srcset y sizes:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
¿La auditoría también destacará las oportunidades de precarga si la imagen LCP se define con un fondo de CSS? Sí.
Cualquier imagen marcada como LCP, ya sea a través del fondo de CSS o <img>, es candidata si se descubre a una profundidad de cascada de tres o más.
Carga diferida de imágenes fuera de pantalla y cómo evitar esto para LCP
Las imágenes fuera de pantalla que no son críticas para la experiencia inicial del usuario se pueden cargar de forma diferida. Esta es una técnica que aplaza la descarga de una imagen hasta que un usuario se desplaza cerca de ella, lo que puede reducir la contención de red para recursos críticos y, en algunos casos, mejorar el LCP. La auditoría "Aplaza las imágenes fuera de pantalla" puede ser de ayuda en este caso:
Las imágenes críticas de la mitad superior de la página, como la imagen de Largest Contentful Paint, no se deben cargar de forma diferida. Esto puede retrasar la carga de la imagen LCP. Lighthouse destacará si una imagen LCP se está cargando de forma diferida de forma incorrecta mediante la auditoría "Largest Contentful Paint image was diferidaly":
Identifica las contribuciones de CLS
El Cambio de diseño acumulado es una medición de la estabilidad visual. Cuantifica cuánto cambia visualmente el contenido de una página. Lighthouse tiene una auditoría para depurar CLS llamada "Evita cambios grandes de diseño".
Esta auditoría destaca los elementos del DOM que más contribuyen a los cambios de la página. En la columna Element de la izquierda, verás la lista de estos elementos del DOM y, a la derecha, su contribución general en CLS.
Gracias a la nueva función de capturas de pantalla de Lighthouse Element, podemos obtener una vista previa de los elementos clave que se indican en la auditoría, así como hacer clic para acercar para obtener una vista más clara:
Para el CLS posterior a la carga, puede haber un valor en la visualización continua con rectángulos que fueron los elementos que más contribuyeron al CLS. Esta es una función que encontrarás en herramientas de terceros, como el panel de Métricas web esenciales de SpeedCurve, y que me encanta usar el Generador de GIF de Layout Shift de Defaced para lo siguiente:
Para obtener una visión general de los problemas de cambio de diseño, obtengo mucho más con el informe de Métricas web esenciales de Search Console. Esto me permite ver los tipos de páginas de mi sitio con un CLS alto (en este caso, me ayuda a identificar en qué fragmentos de la plantilla debo dedicar mi tiempo):
Identifica CLS en imágenes sin dimensiones
Para limitar el cambio de diseño acumulado que generan las imágenes sin dimensiones, incluye los atributos de tamaño de ancho y alto en tus elementos de imagen y video. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen.
Consulta Volver a establecer la altura y el ancho en las imágenes para obtener un buen resumen sobre la importancia de tener en cuenta las dimensiones y la relación de aspecto de las imágenes.
Identificación de CLS en anuncios
Publisher Ads for Lighthouse te permite encontrar oportunidades para mejorar la experiencia de carga de los anuncios en tu página, incluidas las contribuciones al cambio de diseño y las tareas largas que pueden retrasar el tiempo de uso de la página por parte de los usuarios. En Lighthouse, puedes habilitar esta función mediante los complementos de la comunidad.
Recuerda que los anuncios son uno de los más importantes que contribuyen a los cambios de diseño en la Web. Es importante hacer lo siguiente:
- Ten cuidado a la hora de colocar anuncios no fijos cerca de la parte superior del viewport
- Reserva el mayor tamaño posible para el espacio publicitario y elimine los cambios.
Evita las animaciones no compuestas
Las animaciones no compuestas pueden presentarse como inestables en dispositivos de gama baja si las tareas pesadas de JavaScript mantienen ocupado el subproceso principal. Estas animaciones pueden introducir cambios de diseño.
Si Chrome descubre que una animación no se pudo componer, la informa a una lectura de seguimiento de Lighthouse en las Herramientas para desarrolladores, lo que le permite enumerar qué elementos con animaciones no se compondrán y por qué motivo. Puedes encontrarlas en la auditoría de Evita animaciones no compuestas.
Depurar el retraso de primera entrada / tiempo de bloqueo total / tareas largas
La primera entrada mide el tiempo desde que un usuario interactúa por primera vez con una página (p.ej., cuando hace clic en un vínculo, presiona un botón o usa un control personalizado con tecnología de JavaScript) hasta el momento en que el navegador puede comenzar a procesar controladores de eventos en respuesta a esa interacción. Las tareas largas de JavaScript pueden afectar esta métrica y el proxy de esta métrica, el tiempo de bloqueo total.
Lighthouse incluye una auditoría para evitar tareas largas en el subproceso principal que enumera las tareas más largas en el subproceso principal. Esto puede ser útil para identificar los mayores factores que contribuyen a la demora en la entrada. En la columna de la izquierda, podemos ver la URL de las secuencias de comandos responsables de las tareas largas del subproceso principal.
A la derecha, podemos ver la duración de estas tareas. Recuerda que las tareas largas son tareas que se ejecutan durante más de 50 milisegundos. Se considera que esto bloquea el subproceso principal el tiempo suficiente para afectar la velocidad de fotogramas o la latencia de entrada.
Si se consideran servicios de terceros para la supervisión, también me gusta mucho el cronograma de ejecución del subproceso principal que Calibre tiene para visualizar estos costos, en el que se destacan las tareas superiores y secundarias que contribuyen a tareas largas que afectan la interactividad.
Bloquear las solicitudes de red para ver el impacto del antes y el después en Lighthouse
Las Herramientas para desarrolladores de Chrome admiten el bloqueo de solicitudes de red para ver el impacto de la eliminación de recursos individuales o la falta de disponibilidad. Esto puede ser útil para comprender el costo que tienen las secuencias de comandos individuales (p. ej., incorporaciones o herramientas de seguimiento de terceros) en métricas como el tiempo de bloqueo total (TBT) y el tiempo de carga.
El bloqueo de solicitudes de red también funciona con Lighthouse. Echemos un vistazo rápido al informe de Lighthouse para un sitio. La puntuación de rendimiento es 63/100 con un TBT de 400 ms. Al analizar el código, descubrimos que este sitio carga un polyfill Intersection Observer en Chrome, lo cual no es necesario. ¡Bloquémoslo!
Podemos hacer clic con el botón derecho en una secuencia de comandos del panel Network de Herramientas para desarrolladores y hacer clic en Block Request URL para bloquearla. Lo haremos con el polyfill Intersection Observer.
Luego, podemos volver a ejecutar Lighthouse. Esta vez, podemos ver que nuestra puntuación de rendimiento mejoró (70/100), ya que el tiempo de bloqueo total (400 ms => 300 ms)
Reemplaza inserciones costosas de terceros con una fachada
Es común el uso de recursos de terceros para incorporar videos, publicaciones de redes sociales o widgets en las páginas. De forma predeterminada, la mayoría de las incorporaciones se cargan con anticipación de inmediato y pueden tener cargas útiles costosas que tienen un impacto negativo en la experiencia del usuario. Esto es un desperdicio si el tercero no es crítico (p.ej., si el usuario necesita desplazarse antes de verlo).
Un patrón para mejorar el rendimiento de esos widgets es cargarlos de forma diferida en la interacción del usuario. Para ello, se renderiza una vista previa liviana del widget (una fachada) y solo se carga la versión completa si un usuario interactúa con ella. Lighthouse cuenta con una auditoría que recomendará recursos de terceros que se pueden cargar de forma diferida con una fachada, como las incorporaciones de videos de YouTube.
Como recordatorio, Lighthouse destacará el código de terceros que bloquea el subproceso principal durante más de 250 ms. Esto puede exponer todo tipo de secuencias de comandos de terceros (incluidas las de Google) que pueden valer más la pena diferir o cargar de forma diferida si lo que renderizan requiere desplazamiento para verlo.
Más allá de las Métricas web esenciales
Además de destacar las Métricas web esenciales, las versiones recientes de Lighthouse y PageSpeed Insights también intentan brindar orientación concreta que puedes seguir para mejorar la rapidez con la que se pueden cargar las aplicaciones web con alto contenido de JavaScript si tienes activados los mapas de origen.
Entre ellas, se incluye una colección cada vez más grande de auditorías para reducir el costo de JavaScript en tu página, como la reducción de la dependencia de polyfills y los duplicados que pueden no ser necesarios para la experiencia del usuario.
Para obtener más información sobre las herramientas de Métricas web esenciales, consulta la cuenta de Twitter del equipo de Lighthouse y las Novedades de Herramientas para desarrolladores.
Hero image de Mercedes Mehling en Unsplash.