Optimizar la velocidad web: cómo mejorar los Core Web Vitals

Por muy atractiva que sea, una web lenta espanta a las visitas. Según Google, el 53 % de los usuarios abandona una web que tarda más de 3 segundos en cargar, y la velocidad es un factor de posicionamiento directo. Esta guía explica con claridad los Core Web Vitals y las técnicas que de verdad funcionan.

¿Qué son los Core Web Vitals?

Tres métricas clave de experiencia de usuario que Google presentó en 2020 e incorporó al posicionamiento en 2021, basadas en datos reales de usuarios.

1. LCP — Largest Contentful Paint

Tiempo hasta que aparece el elemento visible más grande (a menudo una imagen principal o un titular).

• Bueno: 2,5 segundos o menos
• Mejorable: 2,5–4 segundos
• Malo: más de 4 segundos

Factores principales: imágenes pesadas, servidor lento y JavaScript/CSS bloqueantes.

2. INP — Interaction to Next Paint

Rapidez de respuesta a las interacciones (clic, toque, teclado). Sustituyó a FID en 2024.

• Bueno: 200 ms o menos
• Mejorable: 200–500 ms
• Malo: más de 500 ms

Tareas largas de JavaScript, scripts de terceros pesados y manejadores de eventos ineficientes lo empeoran.

3. CLS — Cumulative Layout Shift

Mide cuánto “saltan” los elementos durante la carga.

• Bueno: 0,1 o menos
• Mejorable: 0,1–0,25
• Malo: más de 0,25

Imágenes sin dimensiones, contenido inyectado y anuncios tardíos son las causas principales.

Dónde medir

Google PageSpeed Insights — datos de laboratorio y reales (CrUX), gratis.

Google Search Console → informe Core Web Vitals — experiencia real por grupos de URL.

WebPageTest — gráficos en cascada, vídeos comparativos, pruebas en varios pasos.

Chrome DevTools → Lighthouse — mediciones inmediatas en local.

Mejorar el LCP

Formatos de imagen modernos

Pasar de JPEG/PNG a WebP o AVIF suele reducir el peso un 30–50 %.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

Con Next.js, el componente <Image> lo hace automáticamente.

Precargar la imagen principal

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

Reducir el tiempo de respuesta del servidor (TTFB)

• Generación estática (SSG) o ISR en vez de renderizar en cada petición
• CDN para servir el contenido desde cerca
• VPS o cloud si faltan recursos

CSS crítico en línea

Incluir en el HTML los estilos de la parte visible acorta el renderizado; Critical o Critters lo automatizan.

Mejorar el INP: menos JavaScript

Dividir las tareas largas

Más de 50 ms bloquean la interacción. Divide el trabajo con setTimeout(..., 0) o scheduler.yield():

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Un respiro al hilo principal cada 50 elementos if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

Eliminar scripts de terceros innecesarios

Chats, redes publicitarias, analítica y botones sociales pesan sobre el INP. Revisa Google Tag Manager con regularidad.

División de código en React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>Cargando…</div>, }); ``

Llevar el CLS a cero

Dimensiones en todas las imágenes

``html <img src="product.jpg" alt="Imagen del producto" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

Evitar FOUT/FOIT con las fuentes

Usa font-display: optional o swap y precarga las fuentes:

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

Marcadores de posición para contenido dinámico

``css .content-area { min-height: 120px; / reserva espacio hasta que cargue / } ``

Optimizaciones automáticas con Next.js

Con una web en Next.js estas funciones vienen de serie:

| Función | Qué aporta | |---|---| | Componente <Image> | WebP/AVIF automático, lazy loading, dimensiones | | <Script strategy="lazyOnload"> | Retrasa los scripts no críticos | | Generación estática (SSG) | Minimiza el TTFB | | Optimización de fuentes | Autoalojamiento, estrategia swap | | División automática de código | Cada página carga solo su JS |

Lo comentamos también en el artículo sobre el coste de una web corporativa.

Por dónde empezar

1. Optimizar imágenes — por sí solo suele mejorar el LCP un 30–40 %.

2. Eliminar JavaScript sin usar — herramienta Coverage de Chrome DevTools.

3. Reducir recursos bloqueantes — async/defer o CSS crítico en línea.

4. Revisar el servidor — con hosting compartido y TTFB superior a 800 ms, plantéate cambiar.

5. Auditar scripts de terceros — sección “Código de terceros” de PageSpeed Insights.

Conclusión: la velocidad es una necesidad

Los Core Web Vitals ya son una base obligatoria para el posicionamiento, la satisfacción y la conversión: trátalos como un ciclo continuo de medición y mejora.

¿Quieres conocer el estado de tus Core Web Vitals o una optimización profesional? Contáctanos — ofrecemos un análisis previo gratuito.