Cómo mejorar el rendimiento en PageSpeed con srcset

Si tu puntaje de PageSpeed cae cuando agregás una imagen hero, el problema generalmente es simple.

Qué está pasando

PageSpeed penaliza las páginas que sirven imágenes demasiado grandes a pantallas chicas. Si tu imagen hero mide 1200px de ancho y un usuario móvil la descarga igual, eso es ancho de banda desperdiciado, y se refleja en tu puntaje.

La solución es srcset. Le dice al navegador qué versión de una imagen cargar según el viewport del dispositivo.

Cómo implementarlo

Primero, generá varias versiones de tu imagen:

• 300w (para móviles)
• 768w (para tablets)
• 1200w o 1536w (para escritorio)

Luego referencialas en tu HTML:

<img
  srcset="/assets/img/hero.webp 1200w, 
          /assets/img/hero-768px.webp 768w,
          /assets/img/hero-300px.webp 300w"
  src="/assets/img/hero.webp"
  alt="Descripción de la imagen">

El navegador elige la correcta. No necesitás un CDN ni un servicio de imágenes.

Algunas notas prácticas

Usá el ancho real de tu imagen original como la versión más grande en srcset. Si la imagen mide 1536px de ancho, ese es tu máximo.

Para automatizar la generación de imágenes, sharp es una herramienta confiable de Node.js. Se integra en cualquier pipeline de build y maneja el redimensionado sin servicios externos.

Este cambio lleva a la mayoría de los sitios de un puntaje de imagen malo a uno aprobado. No es complicado. Simplemente no es obvio si nunca te lo encontraste antes.

Escríbenos si quieres ayuda con el rendimiento web.