Google lo tiene claro: cada segundo extra de carga te cuesta conversiones. Un estudio de Portent reveló que una web que carga en 1 segundo convierte 3 veces más que una que tarda 5. Y sin embargo, la mayoría de webs de empresas españolas superan los 4 segundos.
¿Por qué pasa esto? Casi siempre por las mismas razones.
Las 5 causas más comunes de una web lenta
1. Imágenes sin optimizar
Es el culpable número uno. Una foto sacada directamente del móvil pesa 4-8 MB. Subida tal cual a la web, el navegador tiene que descargársela entera antes de mostrarla.
La solución: convertir a WebP o AVIF y usar tamaños adaptados a cada dispositivo.
<picture>
<source srcset="foto.avif" type="image/avif" />
<source srcset="foto.webp" type="image/webp" />
<img src="foto.jpg" alt="Descripción" width="800" height="600" loading="lazy" />
</picture>Con esto, la misma imagen pasa de 4 MB a unos 200-400 KB sin pérdida visual apreciable.
2. JavaScript bloqueante
Muchas webs cargan librerías enteras que solo usan una función. jQuery completo para un slider, Bootstrap para un formulario, plugins de analytics que se ejecutan antes de que se pinte nada.
El navegador tiene que descargar, parsear y ejecutar todo ese JS antes de mostrar la página. El resultado: pantalla en blanco durante segundos.
Qué hacer:
- Audita con
coveragede DevTools qué código se usa realmente - Carga scripts no críticos con
deferoasync - Considera alternativas nativas (el 90% de lo que hacía jQuery ya lo hace el DOM moderno)
3. Hosting inadecuado
Un servidor compartido en España con 500 webs conviviendo en la misma máquina tiene latencias altísimas. Si tu web está en un hosting de 3 €/mes, ahí tienes parte del problema.
Las opciones modernas: Vercel, Netlify o Cloudflare Pages sirven webs estáticas desde CDN global con tiempos de respuesta de 20-50 ms. Para webs dinámicas, un VPS bien configurado en Hetzner cuesta 4 €/mes y rinde 10 veces más que el hosting compartido estándar.
4. Render-blocking CSS
Los navegadores bloquean el pintado mientras cargan las hojas de estilo. Si tu CSS pesa 800 KB (lo que ocurre cuando usas frameworks “todo en uno” sin purgar), el usuario ve la pantalla en blanco hasta que se descarga todo.
Solución: hacer critical CSS inlining — incrustar en el <head> solo el CSS necesario para el “above the fold” y cargar el resto de forma diferida.
5. Sin caché o caché mal configurada
Si cada visita descarga los mismos recursos desde cero, estás desperdiciando el ancho de banda del usuario y tu servidor. Los recursos estáticos (imágenes, fuentes, JS, CSS) deberían tener cabeceras Cache-Control configuradas con vidas largas.
Cache-Control: public, max-age=31536000, immutableCómo medir el rendimiento de tu web ahora mismo
Abre PageSpeed Insights e introduce tu URL. En 30 segundos tienes:
- LCP (Largest Contentful Paint): cuánto tarda en aparecer el contenido principal. Objetivo: < 2,5 s
- FID / INP: tiempo hasta que la web responde a interacciones. Objetivo: < 200 ms
- CLS: cuánto se “mueve” el contenido mientras carga. Objetivo: < 0,1
Estos tres son los Core Web Vitals que Google usa como factor de posicionamiento desde 2021.
El proceso que sigo en mis proyectos
- Auditoría inicial con Lighthouse y WebPageTest
- Identificar el cuello de botella principal (casi siempre imágenes o JS)
- Optimizar assets (compresión, lazy loading, formatos modernos)
- Revisar el hosting y CDN
- Medir de nuevo y repetir hasta superar 90 en PageSpeed
En proyectos con Astro o Next.js, gran parte de esto ya sale de fábrica. Pero si tienes una web en WordPress u otro CMS, hay trabajo que hacer.
¿Tu web tarda más de 3 segundos? Cuéntame tu situación y echo un vistazo sin compromiso.
