Buscando oportunidades para mejorar la experiencia del usuario con las herramientas web de Chrome
Fecha de publicación: 11 de mayo de 2021
Hoy, hablaremos de las nuevas funciones de herramientas en Lighthouse, PageSpeed y DevTools para ayudarte a identificar cómo tu sitio puede mejorar en las Métricas web.
A modo de repaso, Lighthouse es una herramienta automatizada de código abierto que sirve 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, 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 versiones de lab de estas métricas. Puedes usar esto como una vista de resumen 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 sobre la experiencia del usuario en Chrome o en la 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 laboratorio, por lo que ambos van de la mano.
Identifica dónde puedes mejorar en 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 se cargó el contenido principal (o "más grande") y es visible para el usuario.
Lighthouse tiene una auditoría "Largest Contentful Paint element" que identifica qué elemento fue el Procesamiento de imagen con contenido más grande. Si colocas el cursor sobre el elemento, se destacará en la ventana principal del navegador.
Si este elemento es una imagen, esta información es una sugerencia útil que te indica que debes optimizar la carga de esta imagen. Lighthouse incluye varias 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 entregar en un formato de imagen moderno más óptimo.
También te puede resultar útil la Bookmarklet de LCP de Annie Sullivan para identificar rápidamente el elemento de LCP con un rectángulo rojo con un solo clic.
Precarga las imágenes descubiertas tarde para mejorar el LCP
Para mejorar el Largest Contentful Paint, precarga tus imágenes hero fundamentales si el navegador las descubre tarde. Puede ocurrir un descubrimiento tardío si se debe cargar un paquete de JavaScript antes de que la imagen sea detectable.
Existen algunas preguntas frecuentes que nos hacen sobre la carga previa de imágenes de LCP que también podrían ser útiles para abordar brevemente.
¿Puedes precargar imágenes responsivas? Sí.
Supongamos que tenemos una imagen hero 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 cargar previamente 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 carga previa si la imagen de la LCP se define a través de un fondo CSS? Sí.
Cualquier imagen marcada como la imagen de LCP, ya sea a través del fondo de CSS o <img>
, es una opción si se descubre en una profundidad de cascada de tres o más.
Carga diferida de 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 se pueden cargar de forma 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 "Defer offscreen images" puede ayudarte en este caso:
Las imágenes importantes de la mitad superior de la página, como la imagen del procesamiento de imagen con contenido más grande, no deben cargarse de forma diferida. De esta manera, se puede retrasar la carga de la imagen de LCP. Lighthouse destacará si una imagen de LCP se carga de forma diferida de forma incorrecta a través de la auditoría "La imagen del 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 "Evitar grandes cambios 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 Elemento a la izquierda, verás la lista de estos elementos DOM y, a la derecha, su contribución general al CLS.
Gracias a la nueva función de capturas de pantalla de elementos de Lighthouse, podemos ver una vista previa visual de los elementos clave que se anotaron en la auditoría y hacer clic para acercar la imagen y obtener una vista más clara:
En el caso del CLS posterior a la carga, puede ser útil visualizar de forma persistente con rectángulos 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 con el generador de GIF de cambio de diseño de Defaced para lo siguiente:
Para obtener una vista general de los problemas de cambio de diseño en todo el sitio, me resulta muy útil el informe 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, ayuda a identificar por mi cuenta en qué partes de la plantilla debo enfocarme):
Identifica el CLS a partir de imágenes sin dimensiones
Para limitar el cambio de diseño acumulativo que causan las imágenes sin dimensiones, incluye atributos de tamaño de ancho y alto en tus imágenes y elementos de video. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen.
Consulta Por qué es importante establecer la altura y el ancho de las imágenes para obtener un buen artículo sobre la importancia de pensar en las dimensiones y la relación de aspecto de las imágenes.
Cómo identificar CLS a partir de los anuncios
Los anuncios del publicador para Lighthouse te permiten 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 la rapidez con la que los usuarios pueden usar tu página. En Lighthouse, puedes habilitar esta opción a través de los complementos de Community.
Recuerda que los anuncios son uno de los factores más importantes en los cambios de diseño en la Web. Es importante hacer lo siguiente:
- Ten cuidado cuando coloques anuncios no fijos cerca de la parte superior del viewport
- y eliminar los cambios, reservando el tamaño más grande posible para el espacio publicitario
Evita las animaciones no compuestas
Las animaciones que no están compuestas pueden presentarse como entrecortadas en dispositivos de gama baja si las tareas pesadas de JavaScript mantienen ocupado el subproceso principal. Estas animaciones pueden generar cambios de diseño.
Si Chrome descubre que no se pudo combinar una animación, la informa a un registro de DevTools que lee Lighthouse, lo que le permite enumerar qué elementos con animaciones no se combinaron y por qué. Puedes encontrarlas en la auditoría Evitar animaciones no compuestas.
Debug First Input Delay / Total Blocking Time / Long Tasks
La primera entrada mide el tiempo que transcurre 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 que el navegador puede comenzar a procesar controladores de eventos en respuesta a esa interacción. Las tareas de JavaScript largas pueden afectar esta métrica y el proxy de esta métrica, el tiempo de bloqueo total.
Lighthouse incluye una auditoría Evitar tareas largas en el subproceso principal, que enumera las tareas más largas del subproceso principal. Esto puede ser útil para identificar los peores factores que contribuyen a la demora de entrada. En la columna izquierda, podemos ver la URL de las secuencias de comandos responsables de las tareas de subproceso principal prolongadas.
A la derecha, podemos ver la duración de estas tareas. Recuerda que las tareas de larga duración 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 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 las secundarias que contribuyen a las tareas largas que afectan la interactividad.
Bloquea las solicitudes de red para ver el impacto antes y 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 su falta de disponibilidad. Esto puede ser útil para comprender el costo que tienen las secuencias de comandos individuales (p. ej., incorporaciones o servicios de seguimiento de terceros) en métricas como el tiempo de bloqueo total (TBT) y el tiempo de respuesta interactivo.
El bloqueo de solicitudes de red también funciona con Lighthouse. Veamos rápidamente el informe de Lighthouse de un sitio. La puntuación de rendimiento es de 63/100 con un TBT de 400 ms. Si analizamos el código, veremos que este sitio carga un polyfill de Intersection Observer en Chrome 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 DevTools y, luego, en Block Request URL
para bloquearla. Aquí, lo haremos para el polyfill de Intersection Observer.
A continuación, podemos volver a ejecutar Lighthouse. Esta vez, podemos ver que nuestra puntuación de rendimiento mejoró (70/100) porque tiene un tiempo de bloqueo total (400 ms => 300 ms).
Reemplaza las incorporaciones costosas de terceros por una fachada
Es común usar recursos de terceros para incorporar videos, publicaciones en redes sociales o widgets en las páginas. De forma predeterminada, la mayoría de las incorporaciones se cargan de inmediato y pueden incluir cargas útiles costosas que afectan negativamente 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 estos widgets es cargarlos de forma diferida en la interacción del usuario. Para ello, se puede renderizar una vista previa liviana del widget (una fachada) y solo cargar la versión completa 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 bloquee 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 podrían ser más convenientes para diferir o cargar de forma diferida si lo que renderizan requiere desplazarse 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 una guía concreta que puedes seguir para mejorar la rapidez con la que se pueden cargar las aplicaciones web con mucho código JavaScript si tienes activados los mapas de origen.
Estas incluyen una colección creciente de auditorías para reducir el costo de JavaScript en tu página, como reducir la dependencia de polyfills y 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 Lighthouse y Novedades de Herramientas para desarrolladores.
Imagen hero de Mercedes Mehling en Unsplash.