Optimización del Rendimiento Web: Core Web Vitals y Mejora de Velocidad

¿Qué son los Core Web Vitals?

Core Web Vitals son tres métricas clave definidas por Google para medir la experiencia del usuario: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) e INP (Interaction to Next Paint).

LCP mide el tiempo de carga del elemento de contenido más grande de la página (generalmente una imagen hero o encabezado). Debe ser inferior a 2,5 segundos. Un LCP lento provoca que los usuarios abandonen la página.

CLS mide los cambios de diseño inesperados durante la carga. Los cambios causados por imágenes o anuncios que se cargan tarde frustran a los usuarios. Debe ser inferior a 0,1.

INP mide el tiempo de respuesta a las interacciones del usuario (clics, pulsaciones de teclas). Debe ser inferior a 200 milisegundos. Un INP lento hace el sitio inutilizable.

Unos buenos Core Web Vitals ayudan, pero no garantizan posiciones altas en las búsquedas.

Optimización de LCP

Cargue rápidamente el elemento de contenido más grande. La imagen hero o el encabezado principal suele ser el elemento LCP. Priorice su carga.

No aplique carga diferida a la imagen LCP. Resérvela para imágenes fuera de la vista inicial.

Reduzca el tiempo de respuesta del servidor (TTFB). Use CDN (Content Delivery Network), optimice las consultas de base de datos, implemente caché de página.

async y defer se aplican a JavaScript; el CSS no crítico necesita otra estrategia de carga.

Precargue recursos críticos con la directiva preload: <link rel="preload" as="image" href="hero.webp">. Esto ayuda al navegador a descubrir recursos antes.

Optimización de CLS

Agregue atributos width y height a los elementos de imagen y video. Esto permite al navegador reservar espacio y evitar el cambio de diseño.

Reserve contenedores de tamaño fijo para anuncios y embeds. Los anuncios que se cargan tarde desplazan el diseño de la página y aumentan el CLS.

Optimice las fuentes web: use font-display: swap, precargue fuentes críticas. Minimice los problemas de FOUT (Flash of Unstyled Text) y FOIT (Flash of Invisible Text).

Insertar elementos sin espacio reservado encima del contenido puede desplazar el diseño.

Use transform y opacity en animaciones CSS. Estas propiedades no activan el layout y no contribuyen al CLS.

Optimización de INP

Reduzca el tiempo de ejecución de JavaScript. Divida las tareas largas en fragmentos más pequeños. Las tareas de más de 50ms afectan negativamente el INP.

Optimice los event handlers. Escriba handlers que respondan rápidamente a clics y pulsaciones de teclas. Mueva cálculos pesados a Web Workers.

Los scripts pesados de terceros pueden aumentar INP. Elimine los innecesarios y mida otra vez.

Difiera operaciones pesadas con requestIdleCallback y setTimeout. Mueva el trabajo no crítico al segundo plano durante las interacciones del usuario.

En frameworks como React/Vue, evite re-renders innecesarios. Omita cálculos innecesarios con useMemo, useCallback y memo.

Optimización General de Velocidad

Use HTTP/2 o HTTP/3. Permiten procesamiento paralelo de múltiples solicitudes y compresión de headers. Los proveedores de hosting modernos los soportan por defecto.

Habilite compresión Gzip o Brotli. Los recursos basados en texto (HTML, CSS, JS) se reducen un 60-80%. Habilítelo en la configuración del servidor.

Almacene en caché los activos estáticos. Configure duraciones de caché del navegador y CDN con headers Cache-Control. Use TTL largos para activos inmutables.

Incorpore CSS crítico inline, cargue el resto de forma asíncrona. Incruste el CSS necesario para el contenido above-the-fold en la parte superior de la página.

Divida JavaScript con code splitting. Cargue solo el código necesario para cada página. Aplique lazy loading con dynamic import().

Cargue imágenes con lazy load. Cargue las imágenes debajo del fold solo cuando sean visibles. El atributo loading="lazy" es suficiente.

Precargue recursos con prefetch y preconnect. Establezca conexiones DNS y TCP por adelantado con <link rel="preconnect" href="https://fonts.googleapis.com">.

Herramientas de Medición

Google PageSpeed Insights: Informe de rendimiento basado en Lighthouse. Proporciona puntuaciones separadas para móvil y escritorio. Ofrece sugerencias de mejora.

Chrome DevTools Performance tab: Analiza el proceso de carga de la página paso a paso. Muestra tareas largas, cambios de diseño y tiempos de pintura.

La extensión Web Vitals ya no tiene soporte. Utilice Performance en Chrome DevTools.

CrUX (Chrome User Experience Report): Recopila datos de usuarios reales. Aparece como informe de Core Web Vitals en Search Console.

Informe de Core Web Vitals de Search Console: Clasifica sus URLs como 'Bueno', 'Necesita mejorar' y 'Malo'. Muestra qué páginas necesitan optimización.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience