Convertir JPG a WebP para mejorar la velocidad y los Core Web Vitals

Google mide la experiencia de usuario de tu web con los Core Web Vitals y los usa como señal de ranking desde 2021. El formato de imagen es uno de los factores más directos para mejorar estas métricas: convertir a WebP mejora el LCP, reduce el peso total de la página y hace que tu puntuación en PageSpeed Insights suba notablemente.

Clique ou arraste seus images
JPG / JPEG  ·  max. 15 MB per image  ·  up to 20 files

82 %

82% — optimal quality / file size balance for WebP

Cómo WebP impacta en los Core Web Vitals

Los tres Core Web Vitals que mide Google son LCP, CLS e INP (anteriormente FID). Las imágenes afectan principalmente al LCP, pero tienen impacto indirecto en las otras dos:

  • LCP (Largest Contentful Paint): mide cuándo el elemento visual más grande es visible para el usuario. Si ese elemento es una imagen (lo es en la mayoría de páginas), reducir su peso con WebP baja directamente el tiempo de LCP. El umbral "bueno" de Google es ≤2.5 s. WebP puede ser la diferencia entre pasar o no ese corte.
  • CLS (Cumulative Layout Shift): WebP no lo corrige directamente, pero migrar a WebP es un buen momento para añadir width y height explícitos a las imágenes, lo que elimina el reflow que causa el CLS.
  • INP (Interaction to Next Paint): imágenes más ligeras = menos trabajo de parseo y renderizado para el hilo principal del navegador = más capacidad de respuesta a interacciones del usuario.

Cómo medir el impacto real de WebP con PageSpeed

  1. Audita antes de migrar: abre PageSpeed Insights y anota tu puntuación actual de Performance y los valores de LCP, CLS e INP.
  2. Convierte las imágenes a WebP usando esta herramienta y súbelas a tu sitio reemplazando los JPG originales. Empieza por la imagen hero (LCP) para el mayor impacto inmediato.
  3. Limpia la caché de tu CMS y CDN para que los visitantes carguen las nuevas imágenes WebP. WP Rocket, Cloudflare y similares tienen un botón de purga.
  4. Audita de nuevo: vuelve a PageSpeed Insights. La auditoría "Serve images in next-gen formats" debería desaparecer o reducirse significativamente. El LCP y la puntuación general deberían mejorar.

Usa también Lighthouse en Chrome DevTools (F12 → Lighthouse) para auditorías locales sin esperar datos de campo acumulados.

Checklist de optimización WebP por posición en la página

Posición loading Calidad Peso objetivo Impact en Core Web Vitals
Hero / LCP (above the fold) eager 82–85 % <200 KB ⬆️ LCP directo
Imágenes de contenido (below fold) lazy 80–82 % <100 KB ⬆️ Peso total de página
Open Graph image N/A 85 % <150 KB Previews en redes sociales
Thumbnails en listados lazy 75–80 % <60 KB ⬆️ Tiempo total de carga
Fondo / background decorativo CSS background 78–82 % <100 KB ⬆️ Peso de hoja de estilos cargada

Preguntas frecuentes

¿WebP mejora directamente el LCP?

Sí, cuando la imagen es el elemento LCP (normalmente la hero). Al pesar menos, el navegador la descarga antes. Una página con LCP de 3.2s con JPG puede bajar a 2.4-2.8s con WebP, cruzando el umbral "bueno" de Google (≤2.5s).

¿AVIF es mejor que WebP para velocidad de carga?

AVIF comprime hasta un 50% mejor que JPG, frente al 25-35% de WebP. Pero la codificación AVIF es más lenta y el soporte de navegadores es menor (~90% vs ~96% de WebP). Para producción en 2026, WebP ofrece el mejor equilibrio rendimiento/compatibilidad.

¿Cuánto mejora Lighthouse al convertir todas las imágenes a WebP?

En sitios con muchas imágenes JPG pesadas, la mejora puede ser 10-25 puntos en Performance. La auditoría "Serve images in next-gen formats" desaparece del informe al usar WebP, lo que sube el score directamente.

¿WebP ayuda a mejorar el CLS (Cumulative Layout Shift)?

Indirectamente. El CLS se genera por imágenes sin dimensiones definidas en el HTML. Añadir width y height a tus etiquetas <img> corrige el CLS. Si al migrar a WebP también añades esos atributos, el beneficio sobre el CLS es combinado.

¿Qué herramientas uso para medir el impacto de WebP en velocidad?

Google PageSpeed Insights (datos de campo reales), Lighthouse en Chrome DevTools (auditoría local), WebPageTest (tests con filmstrip detallado) y CrUX Dashboard para seguimiento histórico de Core Web Vitals de tu dominio.