Lección 04: Ingeniería de Rendimiento
MOD 02- LCP (Largest Contentful Paint): Debe ocurrir antes de 2.5s. Depende de la velocidad del servidor y del bloqueo de CSS/JS.
- CLS (Cumulative Layout Shift): Estabilidad visual. Usa
aspect-ratioen imágenes para evitar saltos. - INP (Interaction to Next Paint): Reemplaza a FID. Mide la latencia de respuesta ante clics. Bloquear el "Main Thread" mata esta métrica.
- Google usa datos reales de usuarios (CrUX), no solo lo que ves en tu Lighthouse local.
La velocidad no es un lujo, es un requisito funcional. Desde 2021, Google incluye los Core Web Vitals como factor de ranking directo. Pero cuidado: no se trata de obtener un "100/100" en Lighthouse manipulando el laboratorio.
En m8d.io, abordamos el rendimiento como un problema de ingeniería. Analizamos el Critical Rendering Path (la ruta crítica de renderizado) para entender qué recursos bloquean el dibujado de píxeles en pantalla y cómo optimizar la entrega de bytes al navegador.
Critical Rendering Path
Desbloqueando el Renderizado
El navegador no puede pintar nada hasta que construye el CSSOM. Si tienes un archivo JS pesado en el <head>, el navegador detiene todo hasta descargarlo y ejecutarlo (Barra Roja). Optimizar el CRP significa diferir todo lo que no sea esencial para la "mitad superior".
- Minimizar CSS bloqueante.
- Atributos
deferyasyncen Scripts. - Preload de fuentes críticas (WOFF2).
- Compresión Brotli/Gzip en servidor.
Critical Rendering Path (CRP)
Todo comienza aquí. El CRP es la secuencia de pasos que el navegador realiza para convertir HTML, CSS y JavaScript en píxeles visibles. Tu objetivo de ingeniería es acortar esta ruta. Cada milisegundo que el navegador pasa parseando un CSS innecesario es un milisegundo que el usuario ve una pantalla blanca.
LCP y CLS: Carga y Estabilidad
LCP (Largest Contentful Paint) mide cuándo se renderiza el elemento más grande (imagen o bloque de texto). Si tarda más de 2.5 segundos, fallas. La causa número uno suele ser una imagen hero no optimizada o un servidor lento (TTFB alto).
CLS (Cumulative Layout Shift) penaliza el movimiento inesperado. ¿Alguna vez has ido a hacer clic en un botón y se ha movido porque cargó un anuncio encima? Eso es CLS. En ingeniería, solucionamos esto reservando espacio con propiedades CSS `aspect-ratio` o definiendo atributos `width` y `height` en imágenes y iframes.
INP: Interacción Real
Interaction to Next PaintGoogle reemplazó FID por INP en 2024. Esta métrica es despiadada: mide la latencia de todas las interacciones (clics, toques, teclado). Si tienes scripts pesados de terceros ejecutándose en el "hilo principal" (Main Thread), tu sitio se congelará y el INP se disparará.
- Dividir tareas largas (Long Tasks).
- Usar
Web Workerspara lógica pesada. - Evitar re-layouts complejos.
- Debounce en eventos de input.
INP: La Nueva Métrica de Interacción
La interactividad lo es todo. Un sitio puede cargar rápido (LCP bueno), pero si al hacer clic en un menú tarda medio segundo en responder (INP malo), la experiencia es nefasta. La ingeniería de rendimiento moderna consiste en liberar el hilo principal del navegador para que siempre esté listo para responder al usuario.
Documentación Oficial
Fuentes de verdad sobre métricas web.