Cómo experimentar con el retraso de primera entrada en el informe sobre la UX de Chrome

El objetivo del Informe sobre la experiencia del usuario en Chrome es ayudar a la comunidad web a comprender la distribución y la evolución del rendimiento real de los usuarios. Hasta la fecha, nos hemos enfocado en las métricas de pintura y carga de página, como First Contentful Paint (FCP) y Onload (OL), que nos ayudaron a comprender el rendimiento visual de los sitios web para los usuarios. A partir de la actualización de junio de 2018, experimentamos con una nueva métrica centrada en el usuario que se enfoca en la interactividad de las páginas web: el retraso de primera entrada (FID). Esta nueva métrica nos permitirá comprender mejor cómo son los sitios web responsivos ante la entrada de los usuarios.

Recientemente, se habilitó el FID en Chrome como una prueba de origen, lo que significa que los sitios web pueden optar por experimentar con esta nueva función de plataforma web. De manera similar, el FID estará disponible en el informe de UX de Chrome como una métrica experimental, lo que significa que estará disponible mientras dure la prueba de origen dentro de un espacio de nombres "experimental" independiente.

Cómo se mide el FID

¿Qué es exactamente el FID? A continuación, se muestra cómo se define en la entrada de blog sobre el anuncio Retraso de primera entrada:

El retraso de primera entrada (FID) mide el tiempo que transcurre desde que un usuario interactúa con tu sitio por primera vez (es decir, cuando hace clic en un vínculo, presiona un botón o usa un control personalizado con tecnología JavaScript) hasta que el navegador puede responder a esa interacción.

Animación que muestra cómo un subproceso principal ocupado retrasa la respuesta a una interacción del usuario.

Es como medir el tiempo que transcurre desde que suena el timbre de alguien hasta que abre la puerta. Si lleva mucho tiempo, puede haber muchas razones. Por ejemplo, quizás la persona esté lejos de la puerta o tal vez no pueda moverse rápido. Del mismo modo, las páginas web pueden estar ocupadas con otros trabajos o el dispositivo del usuario puede funcionar lento.

Cómo explorar FID en el informe de UX de Chrome

Con un mes de datos FID de millones de orígenes, ya existe una gran cantidad de estadísticas interesantes por descubrir. Veamos algunas consultas que demuestran cómo extraer estas estadísticas del informe de UX de Chrome en BigQuery.

Comencemos por consultar el porcentaje de experiencias rápidas de FID para developers.google.com. Podemos definir una experiencia rápida como una en la que FID es inferior a 100 ms. Según las recomendaciones de RAIL, si el retraso es de 100 ms o mejor, debería ser instantáneo para el usuario.

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

Los resultados muestran que el 95% de las experiencias de FID en este origen se perciben como instantáneas. Parece muy bueno, pero ¿cómo se compara con todos los orígenes del conjunto de datos?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

Los resultados de esta consulta muestran que el 84% de las experiencias de FID son inferiores a 100 ms. Por lo tanto, developers.google.com está por encima del promedio.

A continuación, intentemos dividir estos datos para ver si hay una diferencia entre el porcentaje de FID rápido en computadoras de escritorio y en dispositivos móviles. Una hipótesis es que los dispositivos móviles tienen valores de FID más lentos, posiblemente debido a un hardware más lento en comparación con las computadoras de escritorio. Si la CPU es menos potente, puede estar más ocupada durante más tiempo y dar como resultado experiencias de FID más lentas.

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor
form_factor fast_fid
computadora 96.02%
teléfono 79.90%
tablet 76.48%

Los resultados corroboran nuestra hipótesis. Las computadoras de escritorio tienen una mayor densidad acumulativa de experiencias de FID rápidas que los factores de forma de teléfonos y tablets. Comprender por qué existen estas diferencias, p. ej., el rendimiento de la CPU, requerirían pruebas A/B fuera del alcance del Informe de UX de Chrome.

Ahora que vimos cómo identificar si un origen tiene experiencias de FID rápidas, veamos algunos orígenes que funcionan muy bien.

Ejemplo 1: http://secretlycanadian.com

Tira de película WebPageTest de secretlycanadian.com

El 98% de las experiencias de FID de este origen son inferiores a 100 ms. ¿Cómo lo hacen? Si analizamos cómo está integrado en WebPageTest, podemos ver que es una página de WordPress con muchas imágenes, pero tiene 168 KB de JavaScript que se ejecuta en unos 500 ms en nuestra máquina del lab. No se trata de mucho JavaScript según el archivo HTTP, que coloca esta página en el percentil 28.

Cascada AWebPageTest de secretlycanadian.com

La barra rosa que abarca entre 2.7 y 3.0 segundos es la fase Analizar HTML. Durante este tiempo, la página no es interactiva y parece visualmente incompleta (consulta “3.0 s” en la tira de diapositivas anterior). Después de eso, las tareas largas que deben procesarse se dividen se dividen para garantizar que el subproceso principal permanezca inactivo. Las líneas rosadas de la fila 11 demuestran cómo se distribuye el trabajo de JavaScript en aumentos de actividad rápidos.

Ejemplo 2: https://www.wtfast.com

WebPageTest de wtfast.com

Este origen tiene el 96% de experiencias de FID instantáneas. Carga 267 KB de JavaScript (percentil 38 en el archivo HTTP) y lo procesa durante 900 ms en la máquina del lab. La tira de película muestra que la página tarda unos 5 segundos en pintar el fondo y otros 2 segundos más para pintar el contenido.

Cascada WebPageTest de wtfast.com

Lo más interesante de los resultados es que no se puede ver nada interactivo mientras el subproceso principal esté ocupado entre 3 y 5 segundos. En realidad, la lentitud del FCP de esta página mejora el FID. Este es un buen ejemplo de la importancia de usar muchas métricas para representar la experiencia del usuario.

Comienza a explorar

Obtén más información sobre los FID en el episodio de esta semana sobre El estado de la Web:

Tener el FID disponible en el informe de UX de Chrome nos permite establecer una referencia de experiencias de interactividad. Con este modelo de referencia, podemos observar los cambios en versiones futuras o comparar orígenes individuales. Si quieres comenzar a recopilar FID en las mediciones de campo de tu propio sitio, regístrate en la prueba de origen. Para ello, ve a bit.ly/event-timing-ot y selecciona la función Tiempo de evento. Y, por supuesto, comienza a explorar el conjunto de datos para obtener estadísticas interesantes sobre el estado de la interactividad en la Web. Esta métrica todavía es experimental, por lo que envíanos tus comentarios y compártelos en el grupo de discusión del Informe de UX de Chrome o en @ChromeUXReport en Twitter.