Evoluciones de las herramientas de velocidad: aspectos destacados de Chrome Developer Summit 2019

Nuevas métricas de rendimiento, actualizaciones de PageSpeed Insights y el Informe sobre la experiencia del usuario en Chrome (CrUX), y mucho más.

Elizabeth Sweeny
Elizabeth Sweeny

En la Cumbre de desarrolladores de Chrome, Paul Ireland y yo anunciamos actualizaciones para Lighthouse: Lighthouse CI, nueva fórmula de puntuación de rendimiento y mucho más. Junto con las novedades importantes de Lighthouse, presentamos desarrollos interesantes de herramientas de rendimiento, como nuevas métricas de rendimiento, actualizaciones de PageSpeed Insights y el Informe sobre la experiencia del usuario en Chrome (CrUX), y estadísticas del análisis del ecosistema web que realiza la Web Almanac.

Nuevas métricas de rendimiento

Medir los matices de la experiencia de un usuario es la clave para cuantificar el impacto que tiene en tus resultados y hacer un seguimiento de las mejoras y las regresiones. Con el tiempo, las métricas nuevas evolucionaron para capturar esos matices y llenar los vacíos en la medición de la experiencia del usuario. La incorporación más reciente a la historia de las métricas son dos métricas de campo: el procesamiento de imagen con contenido más grande (LCP) y el Cambio de diseño acumulado (CLS), que se incuban en el grupo de trabajo de rendimiento web de W3C, y una nueva métrica de lab: el tiempo de bloqueo total (TBT).

Procesamiento de imagen con contenido más grande (LCP)

La métrica Largest Contentful Paint (LCP) informa el momento en que se hace visible el elemento de contenido más grande en el viewport.

Antes de Largest Contentful Paint, First Meaningful Paint (FMP) y el Índice de velocidad (SI) capturaban la experiencia de carga después del procesamiento inicial, pero estas métricas son complejas y, a menudo, no identifican cuándo se cargó el contenido principal de la página. Hay investigaciones que demuestran que con solo mirar cuándo se renderiza el elemento más grande de la página, se puede representar mejor el momento en que se carga el contenido principal de una página.

La nueva métrica de Largest Contentful Paint pronto estará disponible en los informes de Lighthouse y, mientras tanto, puedes medir el LCP en JavaScript.

Tiempo de bloqueo total (TBT)

La métrica Tiempo de bloqueo total (TBT) mide la cantidad de tiempo total entre el primer procesamiento de imagen con contenido (FCP) y el tiempo de interacción (TTI), en el que el subproceso principal se bloqueó durante el tiempo suficiente para evitar la capacidad de respuesta de la entrada.

Una tarea se considera larga si se ejecuta en el subproceso principal durante más de 50 milisegundos. Cualquier milisegundo de ese valor se cuenta para el tiempo de bloqueo de esa tarea.

Un diagrama que representa una tarea de 150 milisegundos que tiene 100 milisegundos de tiempo de bloqueo.

El tiempo de bloqueo total de una página es la suma de los tiempos de bloqueo de todas las tareas largas que se produjeron entre FCP y TTI.

Un diagrama que representa cinco tareas con 60 milisegundos de tiempo de bloqueo total de 270 milisegundos de tiempo del subproceso principal.

Si bien el tiempo de carga hace un buen trabajo al identificar cuándo se calma el subproceso principal más adelante en la carga, el tiempo de bloqueo total busca cuantificar la tensión del subproceso principal durante la carga. De esta manera, TTI y TBT se complementan y proporcionan equilibrio.

Cambio de diseño acumulado (CLS)

Cambio de diseño acumulado (CLS) mide la estabilidad visual de una página y cuantifica la frecuencia con la que los usuarios experimentan cambios de diseño inesperados. Los movimientos inesperados del contenido pueden ser muy frustrantes, y esta métrica nueva te ayuda a abordar ese problema midiendo la frecuencia con la que ocurre para tus usuarios.

Una presentación en pantalla que ilustra cómo la inestabilidad del diseño puede afectar negativamente a los usuarios.

Consulta la guía detallada sobre el Cambio de diseño acumulado para obtener información sobre cómo se calcula y cómo medirlo.

La nueva fórmula de puntuación de rendimiento de Lighthouse pronto dejará de enfatizar FMP y FCI, y también incluirá las tres métricas nuevas (LCP, TBT y CLS), ya que capturan mejor cuándo se puede usar una página.

En Lighthouse v6, First Contentful Paint, Speed Index y Largest Contentful Paint son las principales métricas de rendimiento de carga. Las métricas de interactividad principales son el tiempo de carga interactiva, el retraso de primera entrada, el máximo potencial de primera entrada y el tiempo total de bloqueo. El cambio de diseño acumulado es la métrica principal de previsibilidad.

Para obtener más información, consulta la puntuación de rendimiento de Lighthouse y la nueva colección de métricas web.dev.

Umbrales de datos de campo (CrUX) ajustados en PageSpeed Insights

Durante el último año, analizamos el rendimiento web desde el campo a través de los datos de Experiencia del usuario de Chrome (CrUX). Con las estadísticas de esos datos, volvimos a evaluar los umbrales que usamos para etiquetar un sitio web como “lento”, “moderado” o “rápido” en el rendimiento de campo.

Dos gráficos de barras que muestran la distribución de la velocidad lenta, rápida y moderada para FCP y FID.

Para obtener una evaluación general de un sitio, PageSpeed Insights (PSI) usa un percentil determinado de la distribución total de los datos de campo como número dorado para ese sitio. Los umbrales utilizados anteriormente eran el percentil 90 para la primera pintura con contenido y el percentil 95 para el retraso de primera entrada (FID).

Por ejemplo, si un sitio tiene una distribución de FCP del 50% rápida, un 30% moderada, un 20% lenta, el FCP del percentil 90 se encuentra en la sección lenta, lo que hace que la puntuación general del campo del sitio sea lenta.

Esto se ajustó para tener una mejor distribución general entre los sitios web, y el nuevo desglose es el siguiente:

Métrica Percentil general Rápida (ms) Moderado (ms) Lento (ms)
FCP Percentil 75 1000 1000-3000 3,000 o más
FID Percentil 95 100 100-300 300+

Por ejemplo, si un sitio tiene una distribución de FCP del 50% rápida, un 30% moderada y un 20% lenta, el FCP del percentil 75 se encuentra en la sección moderada, lo que hace que la puntuación general del campo del sitio sea moderada.

Redireccionamientos de URL canónicas en PageSpeed Insights

Para que puedas medir la experiencia del usuario de la manera más precisa posible, el equipo de PageSpeed Insights agregó una solicitud de nuevo análisis a PSI. En el caso de los sitios que se redireccionan a una URL nueva, se te solicitará que vuelvas a ejecutar el informe en la URL de destino para obtener un panorama más completo de tu rendimiento real.

Interfaz de usuario de PSI que muestra el redireccionamiento de la URL y el botón “Reanalyze”

CrUX en el nuevo Informe de velocidad de Search Console

Search Console lanzó su nuevo informe de velocidad una semana antes de la Cumbre de desarrolladores de Chrome. Usa datos del Informe sobre la experiencia del usuario en Chrome para ayudar a los propietarios de sitios a descubrir posibles problemas con la experiencia del usuario. El Informe de velocidad asigna automáticamente grupos de URLs similares a buckets de "Rápida", "Moderada" y "Lenta", y ayuda a priorizar las mejoras de rendimiento para problemas específicos.

Informe de velocidad de Search Console

Calendario web

Dion Almaer presenta Web Almanac en CDS 2019.

En el discurso de apertura, anunciamos el lanzamiento de Web Almanac, un proyecto anual que combina las estadísticas y tendencias sobre el estado de la Web con la experiencia de la comunidad web. 85 colaboradores, formados por desarrolladores de Chrome y la comunidad web, se ofrecieron como voluntarios para trabajar en el proyecto, que analiza 20 aspectos principales de la Web que abordan la forma en que se crean, entregan y experimentan los sitios. Comienza a explorar el navegador web para obtener más información sobre el estado del rendimiento, JavaScript y el código de terceros en la Web.

Más información

Para obtener más detalles sobre las actualizaciones de las herramientas de rendimiento de Chrome Developer Summit, mira la charla sobre la evolución de las herramientas de velocidad: