Optimizar la velocidad de carga: haz tu web ultrarrápida

Cada segundo cuenta. Si tu web tarda demasiado en cargar, pierdes a muchos de tus visitantes. Vuelven atrás, eligen otro resultado y no regresan nunca. Además, la velocidad de carga es un factor oficial de posicionamiento en Google. Las webs lentas bajan en los resultados de búsqueda.

En esta guía te muestro paso a paso cómo hacer tu web más rápida, desde lo básico como la optimización de imágenes hasta técnicas avanzadas como Critical CSS y lazy loading.

Core Web Vitals: las 3 métricas que mide Google

Google valora el rendimiento de tu web con tres métricas concretas, los Core Web Vitals:

1. Largest Contentful Paint (LCP)

Mide cuán rápido carga el mayor elemento visible, normalmente una imagen de cabecera, un vídeo o un bloque grande de texto.

• Bien: por debajo de 2,5 s
• Mejorable: 2,5-4,0 s
• Mal: por encima de 4,0 s

2. Interaction to Next Paint (INP)

Mide cuán rápido reacciona la página a las interacciones del usuario, clics, taps, teclado. Desde 2024 sustituye al antiguo First Input Delay (FID).

• Bien: bajo 200 ms
• Mejorable: 200-500 ms
• Mal: por encima de 500 ms

3. Cumulative Layout Shift (CLS)

Mide cuánto se desplazan los elementos en la página mientras carga. ¿Conoces esa sensación? Vas a clicar un botón y de repente entra una imagen y clicas otra cosa. Eso es CLS alto.

• Bien: por debajo de 0,1
• Mejorable: 0,1-0,25
• Mal: por encima de 0,25

Optimización de imágenes: la mayor palanca

En la mayoría de las webs, las imágenes suponen la mayor parte del volumen de datos. Aquí está el mayor potencial de optimización.

Elige el formato correcto

• WebP: el mejor formato todoterreno para 2026. Hasta un 30% más pequeño que JPEG con la misma calidad. Soportado por todos los navegadores modernos
• AVIF: todavía mejor que WebP (hasta un 50% más pequeño) y compatible con todos los navegadores actuales. Ideal como primera opción, con WebP como alternativa
• JPEG: para fotos si WebP/AVIF no son opción. Calidad 75-85% suele bastar
• PNG: solo para imágenes con transparencia o gráficos/iconos nítidos. Demasiado grande para fotos
• SVG: para logos, iconos y gráficos sencillos. Escalable al infinito, tamaño minúsculo

Dimensiona correctamente

Uno de los problemas más frecuentes: una imagen tiene 4000 px de ancho pero se muestra a 800. El navegador debe descargar igualmente la imagen completa y escalarla. Solución:

• Crea imágenes en el tamaño real de visualización (máx. 2x para pantallas Retina)
• Usa el atributo srcset para imágenes responsive: sirve tamaños distintos para pantallas distintas
• Pon siempre width y height en el HTML: evita layout shifts (CLS)

Compresión de imágenes

Incluso tras elegir formato y tamaño, puedes comprimir más:

• Squoosh (squoosh.app): herramienta gratuita de Google, directamente en el navegador
• TinyPNG (tinypng.com): comprime PNG y JPEG con mínima pérdida de calidad
• ShortPixel: plugin WordPress para compresión automática al subir

Regla práctica: ninguna imagen individual de tu web debería pesar más de 200 KB. Hero máximo 300 KB. Miniaturas bajo 50 KB.

Lazy loading: cargar solo lo visible

Lazy loading significa que las imágenes y otros recursos se cargan solo cuando el usuario llega a ellos. Todo lo que esté fuera del viewport se carga bajo demanda.

La implementación más sencilla:

<img src="imagen.webp" loading="lazy" alt="descripción" width="800" height="600">

El atributo loading="lazy" está soportado por todos los navegadores modernos y no requiere JavaScript. Importante: la primera imagen visible (hero, logo) no debe cargarse en lazy: empeoraría el LCP.

Caching: acelera las visitas repetidas

La caché del navegador guarda ficheros estáticos (CSS, JS, imágenes, fuentes) localmente en el dispositivo. En la siguiente visita no hace falta volver a bajarlos.

Configurar cabeceras Cache-Control

Vía el servidor (p. ej. nginx, Apache, Caddy) decides cuánto tiempo se cachean los archivos:

• Imágenes, fuentes: 1 año (raramente cambian)
• CSS y JavaScript: de 1 mes a 1 año (con versionado en el nombre)
• Archivos HTML: corto o sin caché (deben estar siempre al día)

CDN (Content Delivery Network)

Una CDN distribuye tus archivos en servidores por todo el mundo. El servidor más cercano sirve los ficheros, reduce mucho la latencia. Para webs alemanas con público alemán, lo ideal es una CDN con servidores en Frankfurt o Ámsterdam.

• Cloudflare: plan base gratuito con CDN, protección DDoS y optimización automática
• Bunny CDN: barato, potente, servidores en Europa

Optimizar CSS y JavaScript

Optimización CSS

• Minificación: elimina espacios, comentarios y caracteres innecesarios. Herramientas: cssnano, clean-css
• Critical CSS: extrae el CSS necesario para la parte visible y cárgalo inline. El resto se carga en async
• Eliminar CSS no usado: muchas webs cargan mucho CSS que no se usa en la página actual. Herramientas: PurgeCSS, UnCSS

Optimización JavaScript

• Defer y Async: no cargues JS bloqueando el render: <script defer src="..">
• Tree shaking: con bundlers (Webpack, Vite): incluye solo el código realmente usado
• Minimiza scripts de terceros: cada script externo (analytics, chats, botones sociales) ralentiza la página. Comprueba si cada uno es realmente necesario

Optimizar fuentes

Las fuentes web (Google Fonts, Adobe Fonts) pueden afectar mucho al tiempo de carga. Cada familia y cada peso es un archivo más.

• Máximo 2 familias y 3-4 pesos
• Activa font-display: swap: muestra al instante la fuente del sistema y la cambia cuando la web font carga
• Aloja las fuentes localmente en lugar de cargarlas de Google Fonts, ahorra un DNS lookup y es más RGPD-friendly
• Usa el formato WOFF2: el más compacto
• Subsetting: carga solo los caracteres que necesitas (latinos, no cirílicos etc.)

Mejorar el rendimiento del servidor

Calidad del hosting

El hosting compartido barato con decenas de webs en el mismo servidor es el principal asesino de rendimiento del lado del servidor. Para una web rápida necesitas:

• Time to First Byte (TTFB) rápido, idealmente bajo 200 ms
• Almacenamiento SSD: mucho más rápido que discos clásicos
• Servidor en Alemania: la línea más corta para visitantes alemanes
• HTTP/2 o HTTP/3: transferencia más rápida que HTTP/1.1

Activar compresión

La compresión Gzip o Brotli reduce el tamaño de HTML, CSS y JS un 60-80%. Brotli es más reciente y aún más eficiente que Gzip. Ambos deben estar activos en el servidor.

Las mejores herramientas para análisis de velocidad

• Google PageSpeed Insights (pagespeed.web.dev): el test estándar basado en Lighthouse. Da una puntuación 0-100 y sugerencias concretas
• GTmetrix (gtmetrix.com): informe detallado con waterfall. Muestra exactamente cuánto tarda cada archivo
• WebPageTest (webpagetest.org): el test pro. Distintos servidores, velocidades y navegadores
• Chrome DevTools: la pestaña Network muestra tiempos en directo, Performance mide Core Web Vitals
• Google Search Console: muestra Core Web Vitals para toda tu web con datos reales de usuarios

Checklist quick-win: 10 pasos para una web más rápida

• Convertir imágenes a WebP y comprimir
• Activar lazy loading para imágenes bajo el viewport
• Minificar CSS y JavaScript
• Cargar JavaScript con defer o async
• Configurar caché del navegador
• Alojar fuentes localmente y limitar a 2 familias
• Activar compresión Gzip/Brotli en el servidor
• Eliminar plugins y scripts de terceros innecesarios
• Indicar dimensiones de imagen (width/height) en HTML
• Revisar el proveedor de hosting: ¿TTFB bajo 200 ms?

Conclusión: la velocidad no es un lujo

Una web rápida no es un nice-to-have, es la base para buenos rankings, visitantes contentos y mayores conversiones. La mayoría de optimizaciones no cuestan dinero, solo algo de tiempo y conocimiento. Empieza por las imágenes: suele dar el mayor efecto inmediato.

¿Quieres que analicen y optimicen la velocidad de tu web de forma profesional? Reviso tu página en todos los factores de velocidad relevantes y hago las optimizaciones por ti, de forma medible y comprensible.

Stefanos Svarnas, Knusperholz en Ludwigsburg. Creo páginas web y me encargo de que los negocios aparezcan en Google. En persona, sin rodeos de agencia.

Reservar primera charlaMás sobre mí