Optimización de Velocidad Web 2026 — Cómo Alcanzar Core Web Vitals de 90+
Guía práctica sobre Optimización de Velocidad Web 2026 — Cómo Alcanzar Core Web Vitals de 90+, con puntos clave, riesgos y herramientas relacionadas para tomar mejores decisiones.
> **Resumen clave** Core Web Vitals de Google en 2026: LCP (Largest Contentful Paint) <2,5s, INP (Interaction to Next Paint) <200ms y CLS (Cumulative Layout Shift) <0,1. Estas tres métricas influyen de forma directa en el posicionamiento en Google. Las optimizaciones con mayor impacto son: ① convertir imágenes a WebP/AVIF ② precargar fuentes ③ dividir el código JavaScript ④ desplegar en una CDN edge.
¿Qué son los Core Web Vitals? Los Core Web Vitals son las tres métricas de experiencia de usuario que Google tiene en cuenta directamente para el ranking de búsqueda: | Métrica | Descripción | Objetivo | Necesita mejorar |
|---|---|---|---|
| **LCP** | Tiempo de renderizado del elemento más grande | <2,5s | >4,0s |
| **INP** | Retraso desde interacción hasta siguiente pintura | <200ms | >500ms |
| **CLS** | Movimiento inesperado de elementos visuales | <0,1 | >0,25 |
Herramientas de medición - **PageSpeed Insights**: análisis gratuito de Google para URLs concretas
**Chrome DevTools**: pestaña Performance + pestaña Core Web Vitals
**Search Console**: informe de Core Web Vitals para todo el sitio
**WebPageTest**: pruebas detalladas desde varias ubicaciones globales
Optimizaciones de mayor impacto
1. Conversión de imágenes (impacto en LCP) ```bash
Convertir PNG/JPG a WebP (70–80% reducción de tamaño)
cwebp input.jpg -q 80 -o output.webp
Convertir a AVIF (mejor compresión que WebP)
avifenc input.jpg output.avif
``` **En Next.js:**
```jsx
import Image from 'next/image'
// Next.js convierte automáticamente a WebP/AVIF
<Image src="/hero.jpg" width={1200} height={628} priority alt="Hero" />
```
2. Precarga de fuentes críticas (impacto en LCP) ```html
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
```
3. División de código JavaScript (impacto en INP) **En Next.js:**
```jsx
import dynamic from 'next/dynamic'
const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false })
```
4. Evitar CLS ```css
/* Reservar espacio para imágenes */
img { aspect-ratio: 16/9; width: 100%; } /* Evitar CLS por fuentes */
@font-face { font-display: swap; }
```
Lista de verificación de 30 elementos (Lighthouse 90+) **Imágenes (LCP):**
[ ] Todas las imágenes en formato WebP o AVIF
[ ] `loading="lazy"` en imágenes fuera del viewport inicial
[ ] `priority` en la imagen hero (LCP element)
[ ] Width y height definidos en todas las imágenes **JavaScript (INP/FCP):**
[ ] Eliminar JavaScript no utilizado (bundle analysis)
[ ] Lazy loading de componentes pesados
[ ] Eliminar dependencias grandes innecesarias **CSS:**
[ ] Inline CSS crítico en el `<head>`
[ ] `font-display: swap` en todas las @font-face