Cómo optimizar la velocidad de carga web

Técnicas probadas para reducir tiempos de carga y mejorar Core Web Vitals

10 min

La velocidad de carga no es solo una métrica técnica: es un factor directo de conversión, retención y posicionamiento SEO. Google utiliza Core Web Vitals (LCP, FID, CLS) como señales de ranking desde 2021. Cada 100 ms de mejora en tiempo de carga puede incrementar las conversiones hasta un 8% según datos de Akamai.

Esta guía recorre las técnicas más efectivas para reducir el tiempo de carga: optimización de imágenes, code splitting, estrategias de caché, CDN, fuentes web y gestión de scripts de terceros. Técnicas aplicables a cualquier stack, con impacto medible.

Core Web Vitals: las métricas que importan

Core Web Vitals son tres métricas que Google considera esenciales para la experiencia de usuario: Largest Contentful Paint (LCP) mide el tiempo de carga del contenido principal, First Input Delay (FID) mide la interactividad y Cumulative Layout Shift (CLS) mide la estabilidad visual.

  • LCP (Largest Contentful Paint): objetivo < 2.5 segundos. Optimiza la imagen hero, el servidor y el critical rendering path
  • INP (Interaction to Next Paint): reemplaza FID desde 2024, objetivo < 200 ms. Reduce JavaScript bloqueante y mejora la respuesta a interacciones
  • CLS (Cumulative Layout Shift): objetivo < 0.1. Reserva espacio para imágenes, ads y contenido dinámico

Optimización de imágenes

Las imágenes suelen representar entre el 40% y el 70% del peso total de una página. Optimizarlas es la acción con mayor impacto inmediato en la velocidad de carga.

  • Usa formatos modernos: WebP reduce el tamaño un 25-35% vs JPEG, AVIF un 50% adicional
  • Implementa imágenes responsive con srcset y sizes para servir el tamaño adecuado a cada dispositivo
  • Aplica lazy loading nativo (loading="lazy") para imágenes below the fold
  • Comprime con herramientas como Sharp, Squoosh o ImageOptim sin pérdida perceptible de calidad
  • Precarga la imagen LCP con <link rel="preload"> para reducir el tiempo de renderizado

Code splitting y carga diferida de JavaScript

JavaScript es el recurso más costoso en términos de rendimiento: no solo se descarga, sino que se parsea, compila y ejecuta. El code splitting divide tu bundle en chunks más pequeños que se cargan bajo demanda, reduciendo el JavaScript inicial que el navegador necesita procesar.

Frameworks como Next.js, Astro y Nuxt aplican code splitting automático por ruta. Para componentes pesados (editores, mapas, gráficos), usa import() dinámico para cargarlos solo cuando el usuario los necesite. Tree shaking elimina código muerto de tus bundles.

Estrategias de caché

La caché evita que el navegador descargue recursos que no han cambiado. Una estrategia de caché bien diseñada puede reducir drásticamente los tiempos de carga en visitas repetidas y ahorrar ancho de banda tanto al usuario como al servidor.

  • Cache-Control con immutable para assets con hash en el nombre (CSS, JS): max-age=31536000
  • ETag o Last-Modified para HTML y recursos dinámicos: permite revalidación condicional
  • Service Workers para caché programática en PWAs: estrategias stale-while-revalidate o cache-first
  • Caché de servidor: Redis o Varnish para páginas generadas dinámicamente

CDN: content delivery network

Un CDN distribuye copias de tus assets estáticos en servidores ubicados en múltiples regiones del mundo. Cuando un usuario solicita un recurso, se sirve desde el nodo más cercano, reduciendo la latencia de red. Cloudflare, Fastly, AWS CloudFront y Bunny CDN son opciones populares.

Además de servir assets estáticos, los CDN modernos ofrecen edge computing (ejecutar lógica en el borde de la red), compresión Brotli automática, optimización de imágenes on-the-fly y protección DDoS integrada.

Optimización de fuentes web

Las fuentes web personalizadas pueden añadir entre 100 KB y 500 KB al peso de la página si no se gestionan correctamente. El FOIT (Flash of Invisible Text) y el FOUT (Flash of Unstyled Text) afectan tanto a la percepción de velocidad como al CLS.

  • Precarga las fuentes críticas: <link rel="preload" as="font" type="font/woff2" crossorigin>
  • Usa font-display: swap para mostrar texto inmediatamente con fuente de sistema mientras carga la custom
  • Limita los character sets: incluye solo los glifos que necesitas (latin, latin-extended)
  • Self-host en lugar de usar Google Fonts para evitar conexiones a dominios externos
  • Usa formato WOFF2: la mejor compresión con soporte universal en navegadores modernos

Gestión de scripts de terceros

Los scripts de terceros (analytics, chat widgets, pixels de conversión, mapas) son una de las causas principales de degradación del rendimiento. Cada script añade peso, peticiones de red y tiempo de ejecución JavaScript que compite con tu contenido por recursos del navegador.

Audita todos los scripts de terceros regularmente: elimina los que no aporten valor medible. Carga scripts no críticos con defer o async. Considera Partytown o estrategias de web workers para mover scripts de terceros fuera del hilo principal.

Puntos clave

  • Core Web Vitals (LCP, INP, CLS) son factores directos de ranking en Google
  • Optimizar imágenes (WebP/AVIF, lazy loading, responsive) tiene el mayor impacto inmediato
  • Code splitting y tree shaking reducen el JavaScript que el navegador necesita procesar
  • Una estrategia de caché bien diseñada mejora drásticamente las visitas repetidas
  • Audita y minimiza los scripts de terceros: son la causa oculta de rendimiento degradado

¿Tu web necesita mejorar su velocidad de carga?

Realizamos auditorías de rendimiento con herramientas profesionales y optimizamos tu sitio para alcanzar los mejores Core Web Vitals.