Buscando 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 que te ayudarán a identificar cómo tu sitio puede mejorar en 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 conjunto de herramientas de depuración de Chrome DevTools y ejecutarla en cualquier página web, ya sea pública o que requiera autenticación. También puedes encontrar Lighthouse en PageSpeed Insights, CI y WebPageTest.
Lighthouse 7.x incluye funciones nuevas, como capturas de pantalla de los elementos, para facilitar la inspección visual de las partes de la IU que afectan las métricas de la experiencia del usuario (p.ej., qué nodos contribuyen al cambio de diseño).
También lanzamos compatibilidad con capturas de pantalla de elementos en PageSpeed Insights, que permite detectar con mayor facilidad problemas relacionados con ejecuciones de páginas de rendimiento por única vez.
Mide las Métricas web esenciales
Lighthouse puede medir de forma sintética las Métricas web esenciales, como Largest Contentful Paint, Cumulative Layout Shift y Total Blocking Time (un proxy de lab para retraso de primera entrada). Estas métricas reflejan la carga, la estabilidad del diseño y la preparación para la interacción. También están disponibles otras métricas, como First Contentful Paint, que se destaca en el futuro de las Métricas web esenciales.
La sección "Métricas" del informe de Lighthouse incluye las versiones de lab de estas métricas. Puedes usarla como una vista resumida de qué aspectos de la experiencia del usuario requieren tu atención.
Las métricas de campo, como las que se encuentran en el Informe sobre la UX de Chrome o en el RUM, no tienen esta limitación y son un complemento valioso de los datos de lab, ya que reflejan la experiencia que tienen los usuarios reales. Los datos de campo no pueden ofrecer los tipos de información de diagnóstico que obtienes en el lab, por lo que ambos van de la mano.
Identifica en qué aspectos puedes mejorar las Métricas web
Identifica el elemento Largest Contentful Paint
El LCP es una medición de la experiencia de carga percibida. Marca el punto durante la carga de la página en el que el contenido principal (o "más grande") se carga y es visible para el usuario.
Lighthouse tiene una auditoría de "Elemento de pintura con contenido más grande" que identifica qué elemento fue la pintura 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 la imagen. Lighthouse incluye una serie de auditorías de optimización de imágenes para ayudarte a comprender si tus imágenes podrían comprimirse, cambiarse de tamaño o entregarse en un formato de imagen moderno más óptimo.
También puede resultarte útil LCP Favoritelet de Annie Sullivan para identificar rápidamente el elemento LCP con un rectángulo rojo con solo un clic.
Precarga las imágenes descubiertas tarde para mejorar el LCP
Para mejorar la métrica Largest Contentful Paint, precarga tus imágenes hero críticas si el navegador las descubre tarde. Es posible que se produzca una detección tardía si se debe cargar un paquete de JavaScript antes de que la imagen sea detectable.
Hay algunas preguntas frecuentes que nos hacen sobre la precarga de imágenes de LCP que también pueden ser útiles abordarse brevemente.
¿Puedes precargar imágenes responsivas? Sí
Supongamos que tenemos una hero image responsiva, como se especifica con 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 agregados 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á oportunidades de precarga si la imagen LCP se define con un fondo de CSS? Sí.
Cualquier imagen marcada como imagen LCP, ya sea a través del fondo CSS o <img>, es candidata si se descubre a una profundidad de cascada de tres o más.
Carga de forma diferida las imágenes fuera de pantalla y evita esto para el LCP
Las imágenes fuera de pantalla que no son fundamentales para la experiencia inicial del usuario pueden tener una carga diferida. Esta es una técnica que aplaza la descarga de una imagen hasta que el usuario se desplaza cerca de ella, lo que puede reducir la contención de red para los elementos críticos y, en algunos casos, mejorar el LCP. La auditoría "Aplaza las imágenes fuera de pantalla" puede ayudarte con lo siguiente:
Las imágenes críticas de la mitad superior de la página, como la imagen de Procesamiento de imagen con contenido más grande, no deben cargarse de forma diferida. Esto puede retrasar la carga de la imagen LCP. Lighthouse destacará si una imagen de LCP se carga diferida de forma incorrecta a través de la auditoría "La imagen de procesamiento de imagen con contenido más grande se cargó de forma diferida":
Identifica las contribuciones de CLS
El Cambio de diseño acumulado es una medición de la estabilidad visual. Cuantifica cuánto se desplaza visualmente el contenido de una página. Lighthouse tiene una auditoría para depurar el CLS llamada "Evita cambios grandes en el 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 a la izquierda, verás la lista de estos elementos del DOM y, a la derecha, su contribución general al CLS.
Gracias a la nueva función Lighthouse Element Screenshots, podemos obtener una vista previa de los elementos clave observados en la auditoría y hacer clic para acercar y obtener una vista más clara:
Para el CLS posterior a la carga, puede haber valor en la visualización de forma persistente con rectángulos que los elementos contribuyeron más 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 vista de todo el sitio de los problemas de cambio de diseño, obtengo una gran cantidad de kilometraje 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 automáticamente en qué parte de la plantilla debo dedicar mi tiempo):
Identifica el CLS a partir de imágenes sin dimensiones
Para limitar el cambio de diseño acumulado que se genera por imágenes sin dimensiones, incluye los atributos de tamaño de ancho y alto en tus elementos de imágenes y video. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen.
Consulta Cómo volver a configurar la altura y el ancho en las imágenes para obtener un buen resumen sobre la importancia de considerar las dimensiones y la relación de aspecto de las imágenes.
Identifica 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 qué tan pronto los usuarios pueden usar la página. En Lighthouse, puedes habilitarlo mediante los complementos de la comunidad.
Recuerda que los anuncios son uno de los factores que contribuyen más a los cambios de diseño en la Web. Es importante hacer lo siguiente:
- Tenga cuidado al ubicar anuncios no fijos cerca de la parte superior del viewport.
- Si desea eliminar los cambios, reserve el tamaño más grande posible para el espacio publicitario
Evita las animaciones no compuestas
Las animaciones no compuestas pueden presentarse como bloqueadas 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 que no se puede componer, la informa a un seguimiento de lecturas de Lighthouse de Herramientas para desarrolladores, lo que le permite enumerar qué elementos con animaciones no se compusieron y por qué motivo. Puedes encontrarlas en la auditoría Cómo evitar animaciones no compuestas.
Depurar retraso de primera entrada / tiempo de bloqueo total / tareas largas
First Input 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 impulsado por 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 al proxy de esta métrica, Tiempo de bloqueo total.
Lighthouse incluye una auditoría de Evita tareas largas del subproceso principal que enumera las tareas más largas en ese subproceso. Esto puede ser útil para identificar los peores factores que contribuyen a la demora de 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. Como recordatorio, las tareas largas se ejecutan por más de 50 milisegundos. Se considera que esto bloquea el subproceso principal el tiempo suficiente como para afectar la velocidad de fotogramas o la latencia de entrada.
Si consideras servicios de terceros para la supervisión, también me gusta el cronograma de ejecución del subproceso principal que tiene Calibre visual para visualizar estos costos, en el que se destacan las tareas superiores y secundarias que contribuyen a las tareas largas que afectan la interactividad.
Bloquear solicitudes de red para ver el impacto anterior y posterior en Lighthouse
Las Herramientas para desarrolladores de Chrome admiten el bloqueo de solicitudes de red para ver el impacto de que los recursos individuales se quiten o no estén disponibles. Esto puede ser útil para comprender el costo que tienen las secuencias de comandos individuales (p. ej., las 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 de 63/100 con un TBT de 400 ms. Al profundizar en el código, vemos que este sitio carga un polyfill de Intersection Observer en Chrome, lo que no es necesario. ¡Bloquémoslo!
Podemos hacer clic con el botón derecho en una secuencia de comandos en el panel de red de Herramientas para desarrolladores y hacer clic en Block Request URL para bloquearla. Aquí, haremos esto para el polyfill Intersection Observer.
A continuación, podemos volver a ejecutar Lighthouse. Esta vez, podemos ver que nuestra puntuación de rendimiento mejoró (70/100), al igual que el tiempo de bloqueo total (400 ms => 300 ms).
Reemplaza las costosas incorporaciones de terceros por una fachada
Es común usar recursos de terceros para incorporar videos, publicaciones de redes sociales o widgets en páginas. De forma predeterminada, la mayoría de las incorporaciones se cargan con rapidez y pueden incluir cargas útiles costosas que afectan de forma negativa 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 durante la interacción del usuario. Para ello, se debe renderizar una vista previa ligera del widget (una fachada) y cargar la versión completa solo si un usuario interactúa con ella. Lighthouse tiene una auditoría que recomendará recursos de terceros que pueden tener una carga diferida con una fachada, como las incorporaciones de videos de YouTube.
Recuerda que 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 creadas por Google) que valdría la pena postergar o demorar más en cargarse 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 proporcionar orientación concreta que puedes seguir para mejorar la rapidez con la que las aplicaciones web de alto contenido de JavaScript pueden cargarse si tienes activados los mapas de fuentes.
Estos incluyen una colección cada vez mayor de auditorías para reducir el costo de JavaScript en tu página, como reducir la dependencia de polyfills y duplicados que podrían 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 Lighthouse y las Novedades de las Herramientas para desarrolladores.
Hero image de Mercedes Mehling en Unsplash.