ITMay 26, 2026

Optimización de Velocidad Web 2026 — Cómo Alcanzar Core Web Vitals de 90+

Guía completa 2026 de optimización de Google Core Web Vitals. Cubre medición y mejora de LCP, INP y CLS: optimización de imágenes (WebP/AVIF), precarga de fuentes, división de paquetes JavaScript, configuración de CDN. Incluye una lista de verificación de 30 elementos para lograr Lighthouse 90+ con ejemplos de código para Next.js.

> **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

``` ### 2. Precarga de fuentes críticas (impacto en LCP) ```html

``` ### 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 ## FAQ **P1. ¿Cuánto afectan los Core Web Vitals al ranking?** Son un factor de clasificación desde 2021. Pasar de "Necesita mejorar" a "Bueno" puede mejorar el ranking en páginas competitivas. **P2. ¿Next.js ayuda automáticamente con Core Web Vitals?** Sí. Next.js incluye optimización automática de imágenes, división de código y otras optimizaciones por defecto. --- *Este artículo contiene marketing de afiliados y se pueden ganar comisiones.*