Por qué la velocidad es SEO

Desde 2021, Google usa los Core Web Vitals como factor de ranking. Esto significa que si tu web carga lenta, no solo pierdes usuarios: pierdes posiciones en buscadores.

Un estudio de Google mostró que el 53% de usuarios abandonan una web que tarda más de 3 segundos en cargar. Y cada segundo extra reduce las conversiones un 7%.

Velocidad no es solo "técnica". Es visibilidad. Es confianza. Es dinero.

Mide primero: Lighthouse y Core Web Vitals

Antes de arreglar nada, necesitas saber qué está mal. No adivines, mide.

Cómo abrir Lighthouse

1. Abre tu web en Chrome
2. Presiona F12 (o clic derecho → Inspeccionar)
3. Ve a la pestaña Lighthouse
4. Clic en "Analyze page load"

En 30 segundos tendrás un reporte completo. Busca la sección Performance.

Qué significan las métricas

LCP (Largest Contentful Paint): Cuándo carga el contenido principal de tu página. Si tu hero image tarda 4 segundos en aparecer, tu LCP es 4s. ideal: menos de 2.5 segundos.

CLS (Cumulative Layout Shift): Si el contenido se mueve mientras carga. Imagina que estás leyendo y de repente todo se desplaza hacia abajo. Eso es CLS alto. Ideal: menos de 0.1.

INP (Interaction to Next Paint): Qué tan rápido responde tu web a clicks y teclas. Si clickeas un botón y hay delay, INP es alto. Ideal: menos de 200ms.

Imágenes: el error #1 que te penaliza

El 90% de las webs lentas tienen el mismo problema: imágenes mal optimizadas. Subes una foto de 4MB del teléfono y la muestras en un thumbnail de 300px. Eso es desperdicio.

Formatos modernos

Usa WebP en lugar de JPG o PNG. Reduce el tamaño un 30-50% sin perder calidad visible. Si tu CMS lo permite, WebP es el mínimo.

Tamaño real vs tamaño mostrado

Si tu imagen se muestra en 800px de ancho, no subas una de 3000px. Redimensiona antes de subir. Herramienta gratis: Squoosh.app (de Google).

Lazy loading

Una línea que cambia todo:

<img src="foto.webp" loading="lazy" alt="..." />

Las imágenes que están "abajo" en la página no se cargan hasta que el usuario llegue ahí. Ahorra ancho de banda y mejora el primer carga.

Imágenes responsive

Para que el navegador cargue el tamaño correcto según el dispositivo:

<img 
  src="foto-800.webp" 
  srcset="foto-400.webp 400w, foto-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="Descripción clara"
/>

Fuentes y CSS: render-blocking

Tus fuentes pueden estar frenando tu web sin que te des cuenta. El navegador no muestra nada hasta que carga las fuentes. Eso se llama FOIT (Flash of Invisible Text).

font-display: swap

Esta propiedad le dice al navegador: "muestra el texto con la fuente del sistema mientras carga la personalizada". Evita que el usuario vea texto invisible.

@font-face {
  font-family: 'MiFuente';
  src: url('fuente.woff2') format('woff2');
  font-display: swap;
}

CSS crítico inline

El CSS que afecta lo que se ve "arriba del fold" (sin hacer scroll) debería ir inline en el <head>. Esto evita una request extra y mejora el primer render.

JavaScript que frena tu ranking

Por defecto, los scripts bloquean el render. Mientras se carga tu JavaScript, el navegador no puede seguir pintando la página.

defer y async

defer: carga el script sin bloquear y lo ejecuta después de que el HTML esté listo. Es el más seguro.

async: carga y ejecuta tan rápido como pueda. Útil para analytics, pero puede causar conflicto.

<!-- No bloquea el render -->
<script src="app.js" defer></script>

<!-- Carga en paralelo -->
<script src="analytics.js" async></script>

Menos librerías, más código propio

Cada librería que importas es peso extra. Si usas jQuery solo para un querySelector, estás pagando un costo enorme por algo que JavaScript vanilla hace en una línea.

Hosting y CDN: infraestructura que importa

Puedes tener la web más optimizada del mundo, pero si tu hosting está en un servidor lento o lejos de tus usuarios, la velocidad se resiente.

CDN

Un CDN (Content Delivery Network) es una red de servidores repartidos por el mundo. Cuando un usuario entra a tu web, el contenido se sirve desde el servidor más cercano. Menos distancia = más velocidad.

Plataformas como Vercel y Netlify ya incluyen CDN automáticamente.

TTFB (Time to First Byte)

Cuánto tarda el navegador en recibir el primer byte de datos. Si es mayor a 800ms, tu hosting es lento. PageSpeed Insights te muestra esta métrica.

Checklist de performance para tu web

Resumen rápido. Si haces solo esto, ya estás por encima del 80% de las webs:

• Medir con Lighthouse y tener score 90+
• Imágenes en WebP con lazy loading
• Fuentes con font-display: swap
• Scripts con defer
• CDN activo
• Compresión Gzip/Brotli habilitada
• Cache headers configurados
• Imágenes responsive con srcset