Buscando oportunidades para mejorar la experiencia del usuario con las herramientas web de Chrome
Hoy vamos a abordar nuevas funciones de herramientas en Lighthouse, PageSpeed y Herramientas para desarrolladores para ayudar a identificar cómo puede mejorar tu sitio en las Métricas web.
Como repaso de las herramientas, Lighthouse es un una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Puedes encontrarla en la pestaña Chrome Conjunto de herramientas de depuración y ejecución de Herramientas para desarrolladores en cualquier página web, ya sea pública o que requiera autenticación. También puedes encontrar Lighthouse en PageSpeed Estadísticas, la CI y WebPageTest
Lighthouse 7.x incluye nuevas funciones, como capturas de pantalla de los elementos, para facilitar la inspección visual de partes de la IU que impactan en las métricas de la experiencia del usuario (p.ej., qué nodos contribuyen al diseño Mayúsculas).
También se agregó compatibilidad con capturas de pantalla de elementos en PageSpeed Insights, lo que permite a identificar fácilmente problemas en ejecuciones únicas de rendimiento de páginas.
Mide las Métricas web esenciales
Lighthouse puede medir sintéticamente las Métricas web esenciales, como Largest Contentful Paint y Acumulativa Cambio de diseño y 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 para la interacción. Otras métricas, como First Contentful Paint destacada en el futuro de Las Métricas web esenciales también están allí.
La sección “Métricas” del informe de Lighthouse incluye las versiones de lab de estas métricas. Puedes usar como una vista resumida de qué aspectos de la experiencia del usuario requieren tu atención.
Métricas de campo, como las que se encuentran en la UX de Chrome Denunciar o RUM, no tienen esta y son un complemento valioso de los datos de laboratorio, ya que reflejan la experiencia de usuarios reales tener. Los datos de campo no pueden ofrecer los tipos de información de diagnóstico que recibes en el lab, así que ambos van de la mano a 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 cargó y el usuario puede verlo.
Lighthouse tiene un "elemento de Procesamiento de imagen con contenido más grande" auditoría que identifica qué elemento fue el el 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 diversas 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 una imagen moderna más óptima de un conjunto de datos tengan un formato común.
También es posible que veas LCP Favoritelet de Annie Sullivan es útil para identificar rápidamente el elemento LCP con un rectángulo rojo con un solo clic.
Precarga las imágenes descubiertas tarde para mejorar el LCP
Para mejorar la métrica Largest Contentful Paint, precarga a tu héroe crítico imágenes si el navegador las descubre tarde. Un descubrimiento tardío puede ocurrir si un Se debe cargar el paquete de JavaScript antes de que la imagen sea detectable.
Hay algunas preguntas frecuentes que nos hacen acerca de la precarga de imágenes LCP que también pueden ser útiles explicar 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
precarga 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 mediante un CSS? en segundo plano? Sí.
Cualquier imagen marcada como imagen LCP, ya sea con fondo CSS o <img>, es candidata si es
descubierto 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 de forma diferida de forma incorrecta con el mensaje "La imagen de procesamiento de imagen con contenido más grande se cargó de forma diferida". auditoría:
Identifica las contribuciones de CLS
El Cambio de diseño acumulado es una medición de la estabilidad visual. Cuantifica la cantidad de almacenamiento el contenido cambia visualmente. Lighthouse tiene una auditoría para depurar el CLS llamada "Evita los problemas de cambios de diseño”.
Esta auditoría destaca los elementos del DOM que más contribuyen a los cambios de la página. En el elemento A la izquierda, verás la lista de estos elementos del DOM y, a la derecha, su CLS general. .
Gracias a la nueva función de capturas de pantalla de Lighthouse Element, ambos podemos obtener una vista previa de la elementos clave observados en la auditoría, así como la posibilidad de hacer clic para acercar, a fin de tener una vista más clara:
Para CLS posterior a la carga, puede haber valor en la visualización de forma persistente con rectángulos qué elementos contribuyeron más a CLS. Puedes encontrar esta función en herramientas de terceros, como El panel de Core Web Vitals de SpeedCurve y que me encanta usar el GIF de Layout Shift de Defaced. Generador para lo siguiente:
Para obtener una vista de todo el sitio de los problemas relacionados con los cambios de diseño, obtengo mucho margen de la página principal de Search Console. Informe de Métricas web Esto me permite ver los tipos de páginas de mi sitio con un CLS alto (en este caso, ayudar a identificar qué plantilla parciales a las que debo dedicar mi tiempo):
Identifica el CLS a partir de 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 Es importante configurar la altura y el ancho en las imágenes Nuevamente para un sobre la importancia de tener en cuenta las dimensiones de la imagen y la relación de aspecto.
Identifica CLS en anuncios
Publisher Ads for Lighthouse le permite hacer lo siguiente: Encontrar oportunidades para mejorar la experiencia de carga de los anuncios en tu página, incluidas las contribuciones al cambio de diseño y a las tareas largas que pueden provocar que los usuarios puedan usar tu página. En Lighthouse, puedes habilitarlo a través de los Complementos de la comunidad.
Recuerda que los anuncios son una de las contribuyentes más importantes 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 son pesadas. Las tareas de JavaScript mantienen el subproceso principal ocupado. 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 Herramientas para desarrolladores Lighthouse lee, lo que le permite enumerar los elementos con animaciones que no se compusieron y para qué motivo. Puedes encontrarlas en la sección Cómo evitar los elementos no compuestos de animaciones.
Depurar retraso de primera entrada / tiempo de bloqueo total / tareas largas
First Input mide el tiempo que transcurre desde que un usuario interactúa por primera vez con una página (por ejemplo, cuando hace clic en un un vínculo, presionar un botón o usar un control personalizado con tecnología JavaScript) hasta la hora en que el navegador está empezar a procesar controladores de eventos en respuesta a esa interacción. JavaScript largo Las tareas pueden afectar esta métrica y el proxy de esta métrica, Tiempo de bloqueo total.
Lighthouse incluye la auditoría Evita tareas largas del subproceso principal que enumera tareas más largas en el subproceso principal. Esto puede ser útil para identificar los peores contribuyentes a retraso de entrada. En la columna izquierda, podemos ver la URL de las secuencias de comandos responsables de los subprocesos principales largos. tareas.
A la derecha, podemos ver la duración de estas tareas. Como recordatorio, las tareas largas son tareas que ejecutarse por más de 50 milisegundos. Se considera que 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 la ejecución del subproceso principal. cronograma visual que Calibre tiene para visualizar estos costos, lo que destaca las tareas principales y secundarias que contribuyen a largos tareas 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 redes solicitudes para ver el impacto de la eliminación o no de los recursos individuales. 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 como Tiempo de bloqueo total (TBT) y Tiempo de carga.
El bloqueo de solicitudes de red también funciona con Lighthouse. Echemos un vistazo rápido a Informe de Lighthouse para un sitio. La puntuación de rendimiento es de 63/100 con un TBT de 400 ms. Si profundizamos en el código, Detectamos que este sitio carga un polyfill de Intersection Observer en Chrome, lo cual no es necesario. Vamos a bloquéalo.
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
que la modifica. 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) ya que tiene tiempo de bloqueo total (400 ms => 300 ms).
Reemplaza las costosas incorporaciones de terceros por una fachada
Es habitual utilizar recursos de terceros para incorporar videos, publicaciones de redes sociales o widgets en páginas. Por defecto, la mayoría de las incorporaciones se cargan con rapidez y pueden incluir cargas útiles costosas que afectar negativamente la experiencia del usuario. Esto es un desperdicio si el tercero no es crítico (p.ej., si el usuario debe desplazarse antes de verlo).
Un patrón para mejorar el rendimiento de esos widgets es cargarlos de forma diferida en interactiva. Esto se puede hacer renderizando una vista previa liviana del widget (una fachada) y solo cargar la versión completa si un usuario interactúa con él. Lighthouse tiene una auditoría que recomendará recursos de terceros de 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 intenta proporcionar orientación concreta que puedas seguir para mejorar la rapidez con la que el contenido web cargado de JavaScript las aplicaciones pueden cargarse si los mapas de origen están activados.
Entre ellas, se incluye una colección cada vez mayor de auditorías para reducir el costo de JavaScript en tu página, como como reducir la dependencia de polyfills y los elementos 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 Lighthouse equipo de Twitter y las Novedades de Herramientas para desarrolladores.
Hero image de Mercedes Mehling en Unsplash.