Core Web Vitals - ¿Qué, Por qué y Cómo?

Rate this content
Bookmark

El rendimiento puede hacer o deshacer un sitio web, pero ¿cómo puedes cuantificar eso? En esta sesión, veremos los Core Web Vitals como una forma de medir el rendimiento en la web. Específicamente, repasaremos la historia de las mediciones de rendimiento web, de dónde provienen las nuevas métricas y cómo se miden.

This talk has been presented at TestJS Summit - January, 2021, check out the latest edition of this JavaScript Conference.

FAQ

Los Core Web Vitals son tres métricas específicas que Google considera importantes para la experiencia del usuario en un sitio web. Estas métricas son: Largest Contentful Paint, que mide la carga visual de los contenidos más significativos; First Input Delay, que evalúa la interactividad y la respuesta de la página; y Cumulative Layout Shift, que mide la estabilidad visual de los elementos en la página.

Los Core Web Vitals son parte de la señal de Experiencia de Página de Google, que incluye otros factores como la amigabilidad móvil y la seguridad de la navegación. Un buen rendimiento en estas métricas puede mejorar la clasificación de un sitio en los resultados de búsqueda, ya que Google considera la experiencia del usuario como un factor importante para la calidad de un sitio web.

El Largest Contentful Paint (LCP) mide el tiempo que tarda en cargarse el contenido principal de la página desde que el usuario inicia la carga de la página. Google recomienda un LCP de menos de 2.5 segundos para proporcionar una buena experiencia de usuario.

El First Input Delay (FID) mide la interactividad y la respuesta de una página, es decir, el tiempo que tarda la página en ser interactuable. Google sugiere que un FID de menos de 100 milisegundos es ideal para ofrecer una buena experiencia de usuario.

El Cumulative Layout Shift (CLS) mide la estabilidad visual de una página, evaluando cuánto se mueven los elementos visibles durante la carga. Un CLS menor de 0.1 es considerado bueno y proporciona una experiencia visual estable para los usuarios.

Para mejorar los Core Web Vitals, los desarrolladores pueden optimizar los tiempos de carga, mejorar la interactividad reduciendo el JavaScript que bloquea el hilo principal, y asegurar la estabilidad visual evitando cambios inesperados en el layout de la página. Herramientas como Lighthouse y PageSpeed Insights pueden ayudar a identificar y solucionar problemas relacionados con estas métricas.

La señal de Experiencia de Página combina los Core Web Vitals con otros factores de clasificación como la amigabilidad móvil y la seguridad de la navegación. Esta señal influye en la clasificación de las páginas en los resultados de búsqueda de Google, destacando aquellos sitios que ofrecen una mejor experiencia de usuario.

Martin Splitt
Martin Splitt
27 min
15 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla proporciona una introducción al núcleo de Vitals y su contribución a la búsqueda de Google. Discute la evolución de las métricas de rendimiento del sitio web y la necesidad de considerar factores más allá del tiempo hasta el primer byte. Se introduce el concepto de Core Web Vitals, que consta de tres métricas: Largest Contentful Paint, First Input Delay y Cumulative Layout Shift. La próxima señal de Page Experience, que se lanzará en mayo de 2021, combinará Core Web Vitals con las señales de clasificación existentes. La charla también aborda los desafíos en la medición del rendimiento y proporciona ideas sobre la estabilidad del diseño y la integridad visual.

1. Introducción a Vitals

Short description:

Hola y bienvenidos a mi sesión sobre el núcleo de Vitals. Hablaremos sobre el rendimiento web, el núcleo de Vitals y cómo contribuye a una búsqueda de Google. El rendimiento del sitio web se trata de cuantificar si un sitio web es rápido y agradable para los usuarios. Ha evolucionado con el tiempo y continúa evolucionando a medida que nuestra comprensión del rendimiento web cambia.

Hola y bienvenidos a mi sesión sobre el núcleo de Vitals, su qué, por qué y cómo, más específicamente. Entonces, esta es una conferencia de testing, y siempre me siento un poco humilde al hablar en conferencias de testing porque ya no estoy tan metido en el espacio de testing. Escribo pruebas cuando escribo mi code, pero probablemente todos ustedes sean más expertos aquí que yo. Sin embargo, probar el rendimiento de su sitio web es algo importante, y el núcleo de Vitals es una herramienta para lograr exactamente eso.

Entonces, creo que tiene sentido discutir estas cosas. Esta noche veremos tres cosas diferentes con ustedes. Primero que nada, hablaremos sobre el rendimiento web, o qué es realmente el rendimiento de un sitio web. Hablaremos sobre el núcleo de Vitals, y también hablaremos sobre cómo el núcleo de Vitals contribuirá a una búsqueda de Google en forma de la señal de experiencia de página que se lanzará en mayo. Por lo tanto, también hay algunas implicaciones de SEO o implicaciones de optimización de motores de búsqueda de esto también.

Entonces, comencemos con qué es el rendimiento de un sitio web. Intuitivamente, todos sabemos la respuesta a esta pregunta es un sitio web rápido y agradable para usar o no. Pero si quieres comparar eso entre sitios, e incluso entre diferentes versiones del mismo sitio, se vuelve mucho más complicado, porque quieres algo que puedas comparar y seguir con el tiempo, y las mediciones intuitivas realmente no ayudan y no marcan esa casilla. El objetivo es cuantificarlo, tener algún tipo de número o métrica que podamos obtener que nos diga si un sitio web es rápido y agradable para un usuario usar o no. Como veremos en esta charla, esto ha evolucionado con el tiempo y continúa evolucionando incluso hoy a medida que nuestra comprensión de lo que hace que un sitio web sea rápido, eficiente y agradable para los usuarios cambia la web y el tipo de sitios web que construimos están cambiando. No habrá una respuesta fácil. Esa es una especie de alerta de spoiler. Pero echemos un vistazo a esto.

2. Cuantificando el rendimiento de la página web

Short description:

Una de las primeras métricas para cuantificar el rendimiento de la página web es el tiempo hasta el primer byte. Sin embargo, esta métrica ya no es suficiente para determinar si un sitio web es rápido y agradable. La arquitectura del sitio web ha cambiado, y el ancho de banda y la velocidad de conexión ya no son el principal cuello de botella. Una métrica mejor es la completitud general de la respuesta. Por ejemplo, un sitio web más lento que entrega una respuesta más completa se considera mejor que un sitio web más rápido que entrega una respuesta incompleta. El tiempo hasta el primer byte sigue siendo útil para identificar problemas de conexión, pero también se deben considerar otros factores como la velocidad de renderizado.

¿Cómo podríamos cuantificar el rendimiento de la página web? Probablemente una de las primeras métricas ha sido el tiempo hasta el primer byte. Mediríamos cuánto tiempo tarda en llegar el primer byte desde el servidor a nuestro ordenador o dispositivo y en realidad el navegador puede entonces empezar a analizar y eventualmente renderizar la página.

Y históricamente, esto ha tenido mucho sentido. Así, en los sitios web clásicos, como aquí, en este caso de example.com, nuestro navegador haría una solicitud, el servidor web respondería con el HTML, y luego el contenido sería visible en el navegador. Hay grandes diferencias y hay algunas cosas y factores que podemos influir como propietarios y desarrolladores de sitios web para asegurarnos de que esto sigue siendo rápido. Como asegurarnos de que nuestro servidor es rápido, tiene suficiente memoria, tiene suficiente capacidad, tiene un buen ancho de banda de red. También podemos asegurarnos de que el servidor está lo suficientemente cerca, físicamente cerca, porque simplemente lleva tiempo físicamente para que los datos como impulsos eléctricos o de luz viajen. Si estoy aquí en Suiza, el servidor está en Australia, entonces esto podría llevar un tiempo hasta que los datos hayan llegado a Australia y vuelvan. Podría perderse en el camino y entonces tendría que ser retransmitido. Así que esto puede llevar significativamente más tiempo que cuando el servidor está, por ejemplo, en mi propia ciudad, vivo cerca de un centro de datos. Así que tal vez si está ubicado allí, entonces literalmente no lleva tiempo en absoluto. Va a ser realmente, realmente rápido. Y así el tiempo hasta el primer byte será mucho más corto de lo que sería con un servidor en Australia.

Pero, ¿es esta una buena métrica exhaustiva? ¿Es todo lo que necesitamos para cuantificar si un sitio web es rápido y agradable? No. Y eso es en parte porque la arquitectura del sitio web ha cambiado con el tiempo, pero también porque el ancho de banda y las velocidades de conexión no son necesariamente el mayor cuello de botella. Así que vamos a mirar dos sitios web. Abro ambos sitios web en la misma máquina, en la misma ubicación física, al mismo tiempo. Tal vez tengo dos máquinas una al lado de la otra conectadas a la misma conexión a internet, realmente no importa. Voy a A.example.com y B.example.com, y asumimos que estos son servidores completamente separados y aplicaciones web completamente separadas. Así que estas solicitudes salen y A.example.com tarda un rato. Tal vez es como un programa clásico de PHP o Java o Python o Ruby que necesita ejecutarse en el servidor. Tal vez es una aplicación renderizada en el servidor que necesita hablar con un montón de backends y APIs y bases de datos para realmente obtener los datos y luego compilar el HTML antes de enviarlo por el cable, realmente no importa. El punto es que lleva un momento, no importa cuánto dure este momento, simplemente lleva un momento. Mientras que B.example.com, por otro lado, ha recibido la solicitud, responde inmediatamente y el tiempo hasta el primer byte ha llegado. Y es HTML, dice carga este pedazo de JavaScript. Y ahora, al segundo siguiente, B.example.com responde con el HTML completo, ha hecho todas las cosas que necesita hacer en el servidor, y mi navegador me muestra el sitio web, mientras que con B.example.com, no estamos en la etapa en la que obtenemos el App.js, que luego vuelve y probablemente empieza a renderizar o a ejecutar el JavaScript. Una vez que el JavaScript empieza a ejecutarse, descubre, oh, necesitamos hacer este montón de solicitudes de API y estas vuelven, mientras que el navegador todavía no tiene nada sustancial que mostrar al usuario. Ahora, ¿cuál de estos dos sitios web es mejor, más agradable y rápido, según un usuario que mira ambas ventanas del navegador? Bueno, muy claramente, A.example.com, pero si recuerdas, originalmente, según la métrica del tiempo hasta el primer byte, A.example.com era el más lento, tardó más hasta que recibimos el primer byte de la respuesta, pero cuando lo recibimos, la respuesta fue más completa que la otra respuesta. Así que el tiempo hasta el primer byte no es suficiente en estos días y realmente no ha sido una métrica útil. Sigue siendo relativamente útil porque te ayuda, si ves, como, oh mi sitio web es lento y ves que, en realidad, el renderizado en sí es realmente rápido y no tenemos que esperar tanto hasta que las cosas se pintan, es solo el tiempo de conexión y el tiempo que tarda para que los datos vayan por el cable y vuelvan, entonces ese es el cuello de botella que necesitas solucionar y puedes solucionarlo utilizando un CDN o algo así.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced Conference 2023React Advanced Conference 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Maximizar el rendimiento de la aplicación optimizando las fuentes web
Vue.js London 2023Vue.js London 2023
49 min
Maximizar el rendimiento de la aplicación optimizando las fuentes web
WorkshopFree
Lazar Nikolov
Lazar Nikolov
Acabas de llegar a una página web y tratas de hacer clic en un elemento en particular, pero justo antes de hacerlo, se carga un anuncio encima y terminas haciendo clic en eso en su lugar.
Eso... eso es un cambio de diseño. Todos, tanto los desarrolladores como los usuarios, saben que los cambios de diseño son malos. Y cuanto más tarde ocurran, más interrupciones causarán a los usuarios. En este masterclass vamos a analizar cómo las fuentes web causan cambios de diseño y explorar algunas estrategias para cargar fuentes web sin causar grandes cambios de diseño.
Tabla de contenidos:¿Qué es CLS y cómo se calcula?¿Cómo las fuentes pueden causar CLS?Estrategias de carga de fuentes para minimizar CLSRecapitulación y conclusión