Conoce las últimas novedades de PageSpeed Insights para medir y optimizar la calidad de tu página y sitio.
Con el paso de los años, PageSpeed Insights (PSI) evolucionó hasta convertirse en una fuente única para los datos de campo y de lab. Integra información del diagnóstico del informe de UX de Chrome (CrUX) y Lighthouse para proporcionar estadísticas que ayudan a mejorar el rendimiento del sitio web.
Hoy, nos complace anunciar una versión actualizada de PSI. Si bien es un elemento fundamental en nuestro paquete de herramientas de velocidad, la base de código PSI tenía diez años, contenía mucho código heredado y debía cambiar un diseño. Usamos esto como una oportunidad para abordar problemas relacionados con la interfaz en PSI que a veces dificultan la navegación de los usuarios por el informe. Nuestros principales objetivos eran los siguientes:
- Haz que la IU sea más intuitiva diferenciando claramente entre los datos derivados de un entorno sintético y los datos recopilados de los usuarios en el campo.
- Comunica con claridad cómo se calcula la evaluación de Métricas web esenciales en la IU.
- Moderniza el aspecto de PSI con Material Design.
En esta entrada, se presentan las funciones nuevas de PSI que se lanzarán más adelante este año.
Novedades
El nuevo diseño de la IU de PSI tiene como objetivo mejorar la presentación de los datos del informe y agregar claridad y detalle a los datos disponibles en el informe. El objetivo de la nueva IU es ser más intuitiva y ayudar a los desarrolladores a descubrir rápidamente estadísticas de rendimiento de labs y campos de sus páginas. Entre los cambios fundamentales de la IU, se incluyen los siguientes:
Separación clara de los datos de campo y de laboratorio
Cambiamos la IU para separar de forma distintiva los datos de campo de los datos de lab. Las etiquetas “Datos de campo” y “Datos de lab” se reemplazaron por texto que indica qué significan los datos y cómo pueden ayudar. También llevamos la sección Datos de campo a la parte superior. La puntuación de rendimiento tradicional basada en labs, que actualmente se muestra en la parte superior, se movió a la sección Datos de lab para evitar ambigüedades sobre el origen de la puntuación.
Evaluación de las Métricas web esenciales
El resultado de la evaluación de las Métricas web esenciales, que antes aparecía como una sola palabra "aprobada" o "reprobada" en los datos de campo, ahora se destaca como una subsección independiente con un ícono distinto.
Ten en cuenta que no hay cambios en el proceso de evaluación de las Métricas web esenciales. Las métricas de Métricas web esenciales FID, LCP y CLS se pueden agregar a nivel de la página o del origen. Para agregaciones con datos suficientes en las tres métricas, la agregación pasa la evaluación de Métricas web esenciales si los percentiles 75 de las tres métricas son correctos. De lo contrario, la agregación no pasa la evaluación. Si la agregación tiene datos de FID insuficientes, pasará la evaluación si los percentiles 75 de LCP y CLS son correctos. Si el LCP o el CLS tienen datos insuficientes, no se puede evaluar la agregación a nivel de la página o del origen.
Etiquetas para el rendimiento en dispositivos móviles y computadoras de escritorio
Cambiamos el menú de navegación en la parte superior e incluimos vínculos para dispositivos móviles y computadoras de forma centralizada en la página del informe. Los vínculos ahora son fácilmente visibles y señalan claramente la plataforma para la que se muestran los datos. Esto también ayudó a que la barra de navegación fuera más limpia.
Resumen del origen
El resumen de origen, que proporciona la puntuación CrUX agregada de todas las páginas del origen, aparece cuando se hace clic en una casilla de verificación. Movimos esta sección del informe a una pestaña nueva, “Origen”, en la sección Datos de campo.
Información útil adicional
El informe ahora incluye una nueva sección de información en la parte inferior de cada campo y una tarjeta del lab con los siguientes detalles sobre los datos de la muestra:
- Período de recopilación de datos
- Duración de las visitas
- Dispositivos
- Conexiones de red
- Tamaño de la muestra
- Versiones de Chrome
Esta información debería mejorar la distinción entre los datos de lab y de campo, además de ayudar a los usuarios que antes no sabían con seguridad cómo podrían diferir las dos fuentes de datos (lab y campo).
Expandir vista
Tenemos una nueva función "Expandir vista" que agrega una función de desglose a la sección de datos del campo y te permite ver información detallada de las métricas de las Métricas web esenciales.
Imagen de la página
Quitamos la imagen de la página cargada, que aparece junto a los datos del campo. La imagen y las miniaturas de la página que muestran la secuencia de carga estarán disponibles en la sección de datos del lab.
Para obtener documentación actualizada sobre los productos, visita https://developers.google.com/speed/docs/insights/.
Actualizaciones de web.dev/measure
Para reducir las incoherencias entre las distintas herramientas de nuestra caja de herramientas de rendimiento, también actualizaremos web.dev/measure para que funcione directamente con la API de PageSpeed Insights.
Anteriormente, los desarrolladores ejecutaban informes tanto con la herramienta PSI como con /measure, y veían diferentes cantidades de Lighthouse. Uno de los motivos principales de las diferencias fue que /measure originó todas las pruebas en EE.UU. (debido a que antes tenía un backend en la nube de EE.UU.).
Con /measure que llama directamente a la misma API que la IU de PSI, los desarrolladores obtendrán una experiencia más coherente cuando usen PSI y /measure. También hicimos algunos ajustes a la forma en que los usuarios utilizan la herramienta. Esto significa que dejará de estar disponible la experiencia de acceso para /measure, pero la funcionalidad más utilizada (que ve varias categorías) seguirá disponible.
PSI hoy
Demos un paso atrás y revisemos lo que ofrece el informe actual de PageSpeed Insights. El informe de PSI incluye datos de rendimiento de dispositivos móviles y de escritorio en pestañas individuales y sugiere cómo puedes mejorar una página. Los componentes clave del informe en cada caso son similares y constan de los siguientes elementos:
Puntuación de rendimiento: La puntuación de rendimiento aparece en la parte superior del informe de PSI y resume el rendimiento general de la página. Para determinar esta puntuación, ejecuta Lighthouse a fin de recopilar y analizar los datos de lab de la página. Una puntuación de 90 o más se considera buena, de 50 a 90 requiere mejoras y una puntuación inferior a 50 es baja.
Datos de campo: Los datos de campo, que se obtienen del conjunto de datos del informe de CrUX, proporcionan estadísticas sobre la experiencia del usuario en el mundo real. Los datos incluyen métricas como el First Contentful Paint (FCP) y miden las Métricas web esenciales (Retraso de primera entrada (FID), Largest Contentful Paint (LCP) y Cambio de diseño acumulado (CLS). Junto con los valores de la métrica, también puedes ver la distribución de las páginas en las que el valor de una métrica en particular era Bueno, Necesita mejora o Deficiente, indicado por barras verde, ámbar y rojas, respectivamente. La distribución y las puntuaciones se muestran en función de las cargas de página de los usuarios en el conjunto de datos de CrUX. Las puntuaciones se calculan para los últimos 28 días y no están disponibles para páginas nuevas en las que no hay suficientes datos de usuarios reales disponibles.
Resumen del origen: Los usuarios pueden hacer clic en la casilla de verificación Mostrar resumen de origen para ver la puntuación agregada de las métricas de todas las páginas que se publicaron desde el mismo origen en los últimos 28 días.
Datos de lab: La puntuación de rendimiento del lab, calculada con Lighthouse, ayuda a depurar los problemas de rendimiento, ya que se recopilan en un entorno controlado. En el informe, se muestra el rendimiento con métricas como First Contentful Paint, Largest Contentful Paint, Índice de velocidad, Cambio de diseño acumulado, Tiempo de interacción y Tiempo de bloqueo total. Cada métrica tiene una puntuación y una etiqueta con un ícono que indica Buena, Necesita mejoras o Mala. En esta sección, se proporciona una buena indicación de los cuellos de botella de rendimiento previo al lanzamiento y puede ayudar a diagnosticar problemas, pero es posible que no capte problemas del mundo real.
Auditorías:En esta sección, se enumeran todas las auditorías que ejecuta Lighthouse y se enumeran las auditorías aprobadas junto con las oportunidades de mejora y la información de diagnóstico adicional.
Desafíos del diseño de PSI actual
Como se ve en la captura de pantalla anterior, los diferentes datos de los datos de lab y de campo no están aislados con claridad, y es posible que los desarrolladores nuevos en PSI no entiendan con facilidad el contexto de los datos ni qué hacer a continuación. Esta confusión generó muchas entradas de blog sobre cómo descifrar el informe de PSI.
Con el nuevo diseño, esperamos que la interpretación del informe sea más fácil para los desarrolladores, de modo que pasen rápidamente de la generación del informe de PSI a tomar medidas basadas en las estadísticas que se incluyen en él.
Más información
Para obtener más detalles sobre las actualizaciones de las herramientas de rendimiento, mira el discurso de apertura de la Chrome Dev Summit 2021. Te mantendremos al tanto sobre la fecha de lanzamiento de PSI y los cambios en web.dev/measure.
Agradecimientos a Milica Mihajlija, Philip Walton, Brendan Kenny y Ewa Gasperowicz por sus comentarios en este artículo