Cuando se trata de rendimiento web, existen métricas que pueden determinar si tu sitio aparece o no en los resultados de búsqueda. Google y otros navegadores han desarrollado un conjunto de indicadores que miden la experiencia real de los usuarios, y entenderlos es fundamental para cualquier proyecto que dependa de visibilidad en Internet.

¿Por qué las métricas de rendimiento afectan a tu negocio?

No se trata solo de Google Chrome. Navegadores como Firefox, Brave e incluso los nuevos navegadores con inteligencia artificial toman en cuenta estas métricas para decidir si tu sitio carga correctamente o si debería mostrarse en resultados [0:30]. El motor de Google ya puede decidir si muestra o no tu sitio web dependiendo de qué tan saludables sean estos indicadores.

Pero no todos los proyectos tienen las mismas necesidades. Si trabajas en un e-commerce, necesitas que motores como Google, Microsoft Bing y motores de AI indexen tu contenido [1:00]. En cambio, si desarrollas dashboards empresariales o aplicaciones con acceso exclusivo a través de login, que no están indexadas públicamente, estas métricas no serán tu prioridad. Identificar las necesidades del negocio es el primer paso antes de optimizar cualquier métrica.

¿Qué mide cada métrica de rendimiento web?

Cada métrica evalúa un momento exacto en el ciclo de carga de una página [1:48]. Dependiendo de lo que quieras optimizar, te interesará más una u otra.

¿Qué significan FCP, LCP y CLS?

• First Paint: el primer elemento que se dibuja en pantalla [2:10].
• First Contentful Paint (FCP): cuánto tarda en aparecer el primer contenido visible.
• Largest Contentful Paint (LCP): cuánto tarda en renderizarse el elemento más grande.
• Cumulative Layout Shift (CLS): mide la estabilidad visual durante la carga.
• Tiempos de respuesta e interactividad: evalúan cuándo el usuario puede realmente interactuar con el sitio.

Todos los navegadores principales se han puesto de acuerdo para medir estas métricas de forma estandarizada [2:50].

¿Cuáles son las tres métricas más importantes?

Google estableció un estándar llamado Core Web Vitals, compuesto por tres métricas esenciales [3:10]:

• LCP (Largest Contentful Paint): mide tiempos de carga.
• INP (Interaction to Next Paint): mide interactividad.
• CLS (Cumulative Layout Shift): mide estabilidad visual.

Existen métricas adicionales que, al mejorarlas, impactan positivamente en alguna de estas tres. Pero LCP, INP y CLS son las que Google prioriza.

¿Cómo entender los Core Web Vitals con una analogía simple?

Imagina que llegas a un restaurante [3:35]. El LCP sería cuánto tardan en entregarte el menú: qué tan rápido te atienden inicialmente. El INP representa el momento en que ya tienes el menú, sabes qué quieres pedir y esperas a que el mesero tome tu orden. Si te dieron el menú rápido pero el mesero tarda diez minutos en atenderte, la experiencia no es óptima [4:10].

El CLS sería como estar sentado comiendo y que de pronto te cambien de mesa. Esa sensación incómoda es equivalente a cuando entras a una página y los elementos se mueven de lugar mientras carga [4:40]. Todo se desplaza, los botones cambian de posición y la interfaz se siente inestable.

¿Cómo medir los Core Web Vitals de cualquier sitio?

La herramienta PageSpeed Insights en web.dev te permite ingresar cualquier URL y obtener un reporte completo [5:05]. Puedes analizar cómo se comporta un sitio tanto en móvil como en ordenador.

Algunos resultados interesantes de la práctica en clase [5:20]:

• Sketch: no supera los Core Web Vitals con buenas calificaciones.
• MercadoLibre: pasa sin problema todas las métricas.
• Open Spotify: presenta un LCP muy alto, lo que indica tiempos de carga elevados.

¿Esto significa que son malos sitios web? No necesariamente. Cada sitio tiene una estrategia y un objetivo diferente [6:00]. Un dashboard de streaming no tiene las mismas prioridades que un e-commerce que depende del posicionamiento orgánico.

Prueba tus sitios web favoritos en PageSpeed Insights y comparte en los comentarios qué métricas obtuviste. Los resultados pueden ser muy reveladores.