Cada segundo cuenta. El 53% de usuarios abandona una web móvil si tarda más de 3 segundos en cargar. Amazon calculó que 100ms de retraso les costaba un 1% en ventas. Google confirma que la velocidad es factor de posicionamiento.
Una web lenta no solo frustra a tus visitantes: te cuesta dinero, posiciones en Google y credibilidad.
Esta guía te muestra exactamente cómo medir, diagnosticar y mejorar la velocidad de tu web. Con técnicas que funcionan, ordenadas de mayor a menor impacto.
Si estás creando tu página web profesional, la velocidad debe ser prioridad desde el primer día, no algo que arreglar después.
Por qué la velocidad importa (con números)
Impacto en conversiones
| Tiempo de carga | Impacto |
|---|---|
| 1-3 segundos | Óptimo, mínimo abandono |
| 3-5 segundos | +32% probabilidad de rebote |
| 5-10 segundos | +90% probabilidad de rebote |
| +10 segundos | +123% probabilidad de rebote |
Impacto en SEO
Google usa la velocidad como factor de ranking desde 2010 (desktop) y 2018 (móvil). Los Core Web Vitals son ahora métricas oficiales de posicionamiento.
Impacto en ingresos
- Walmart: +2% conversiones por cada segundo de mejora
- Pinterest: -40% tiempo de espera = +15% registros
- BBC: -10% usuarios por cada segundo adicional de carga
Cómo medir la velocidad de tu web
Core Web Vitals (las métricas oficiales de Google)
| Métrica | Qué mide | Bueno | Necesita mejora | Malo |
|---|---|---|---|---|
| LCP | Carga del elemento más grande | <2.5s | 2.5-4s | >4s |
| INP | Respuesta a interacciones | <200ms | 200-500ms | >500ms |
| CLS | Estabilidad visual | <0.1 | 0.1-0.25 | >0.25 |
LCP (Largest Contentful Paint): Cuánto tarda en aparecer el contenido principal. Suele ser la imagen hero o el título principal.
INP (Interaction to Next Paint): Cuánto tarda la web en responder cuando el usuario hace clic o interactúa. Reemplazó a FID en 2024.
CLS (Cumulative Layout Shift): Cuánto se mueven los elementos mientras carga. Ese molesto salto cuando vas a hacer clic y el botón se mueve.
Herramientas de medición
| Herramienta | Tipo | URL |
|---|---|---|
| PageSpeed Insights | Google oficial | pagespeed.web.dev |
| GTmetrix | Análisis detallado | gtmetrix.com |
| WebPageTest | Testing avanzado | webpagetest.org |
| Chrome DevTools | Integrado en navegador | F12 → Lighthouse |
| Search Console | Datos reales de usuarios | search.google.com/search-console |
Recomendación: Usa PageSpeed Insights para diagnóstico rápido y Search Console para datos de usuarios reales.
Datos de laboratorio vs datos de campo
Datos de laboratorio: Mediciones en condiciones controladas (PageSpeed Insights, Lighthouse). Útiles para diagnóstico, pero no reflejan la experiencia real.
Datos de campo (CrUX): Datos reales de usuarios de Chrome. Más fiables, pero requieren tráfico suficiente. Los ves en Search Console y PageSpeed Insights.
Las causas más comunes de webs lentas
1. Imágenes sin optimizar (el problema #1)
Las imágenes suelen ser el 50-80% del peso de una web. Errores comunes:
- Subir fotos directamente de la cámara (3-10MB cada una)
- Usar PNG para fotografías
- No especificar dimensiones
- No usar lazy loading
Impacto: Una imagen de 3MB tarda 2-3 segundos en conexión 4G.
2. Hosting lento o inadecuado
El hosting barato tiene:
- Servidores sobrecargados
- Hardware antiguo
- Ubicación lejana
- Sin caché ni optimizaciones
Impacto: Puede añadir 1-3 segundos de TTFB (tiempo hasta el primer byte).
3. Demasiados plugins/scripts
Cada plugin añade:
- Archivos CSS y JavaScript
- Peticiones al servidor
- Posibles conflictos
En WordPress: Webs con 30+ plugins activos suelen ser lentas. Muchos plugins hacen lo mismo.
4. Sin caché configurada
Sin caché, el servidor procesa cada visita desde cero:
- Consultas a base de datos repetidas
- Generación de HTML cada vez
- Recursos descargados de nuevo
Impacto: La caché puede reducir tiempos de carga un 50-80% para visitantes recurrentes.
5. JavaScript bloqueante
JavaScript que bloquea el renderizado:
- Scripts en el head sin defer/async
- Librerías pesadas innecesarias
- Código no optimizado
Impacto: Puede retrasar la visualización varios segundos.
6. Fuentes web mal cargadas
Las fuentes personalizadas pueden:
- Bloquear el texto hasta que cargan (FOIT)
- Añadir múltiples peticiones HTTP
- Pesar cientos de KB si cargas todos los pesos
7. Sin CDN
Sin CDN, todos los recursos vienen del servidor principal:
- Mayor latencia para usuarios lejanos
- Servidor más cargado
- Sin optimizaciones de edge
Cómo optimizar la velocidad (por impacto)
Nivel 1: Alto impacto, fácil implementación
Optimizar imágenes
Formato correcto:
- WebP: Para la mayoría de imágenes (30% más ligero que JPEG)
- AVIF: Aún más ligero, pero menos compatible
- SVG: Para iconos y gráficos vectoriales
- JPEG: Fotografías si no soporta WebP
- PNG: Solo si necesitas transparencia
Tamaño correcto:
- No subas imágenes de 4000px si se muestran a 800px
- Usa srcset para servir tamaños diferentes según dispositivo
Compresión:
- Herramientas: TinyPNG, Squoosh, ShortPixel
- Calidad 80-85% es suficiente para web
- Meta: menos de 200KB por imagen, idealmente menos de 100KB
Lazy loading:
<img src="imagen.webp" loading="lazy" alt="Descripción">Las imágenes fuera de pantalla cargan cuando el usuario hace scroll.
Elegir buen hosting
El hosting es la base. Con mal hosting, las demás optimizaciones tienen límite.
Qué buscar:
- Servidores con SSD NVMe
- LiteSpeed o NGINX (más rápidos que Apache)
- Ubicación cercana a tu audiencia (Europa para España)
- Caché integrada
- CDN incluido o fácil de añadir
El hosting de Avantys incluye servidores LiteSpeed en Europa, caché LSCache y CDN, optimizado para velocidad desde 4€/mes.
Activar caché
Caché de página: Guarda el HTML generado para no procesarlo cada vez.
Caché de navegador: Indica al navegador que guarde recursos estáticos (imágenes, CSS, JS).
En WordPress: Plugins como LiteSpeed Cache, WP Super Cache o W3 Total Cache.
En hosting con LiteSpeed: LSCache está integrado y es más eficiente.
Nivel 2: Alto impacto, implementación media
Optimizar CSS y JavaScript
Minificar: Eliminar espacios, comentarios y caracteres innecesarios.
Combinar: Reducir el número de archivos (menos peticiones HTTP).
Diferir JavaScript:
<script src="script.js" defer></script>El script se descarga en paralelo y ejecuta después de parsear el HTML.
CSS crítico: Incluir inline el CSS necesario para el contenido visible inicialmente.
Optimizar fuentes
Cargar solo lo necesario:
- Solo los pesos que uses (400, 600, 700)
- Solo los caracteres que necesites (latin)
Preconectar:
<link rel="preconnect" href="https://fonts.googleapis.com">Font-display swap:
@font-face {
font-family: 'MiFuente';
font-display: swap;
}Muestra texto inmediatamente con fuente del sistema, cambia cuando carga la personalizada.
Usar CDN
Un CDN (Content Delivery Network) distribuye tu contenido en servidores globales:
- Menor latencia (servidor más cercano al usuario)
- Menor carga en tu servidor principal
- Mejor disponibilidad
CDNs populares: Cloudflare (gratis), Bunny CDN, KeyCDN.
Nivel 3: Impacto medio, requiere conocimientos
Optimizar base de datos (WordPress)
- Eliminar revisiones antiguas de posts
- Limpiar transients expirados
- Optimizar tablas
- Eliminar datos de plugins desinstalados
Plugins: WP-Optimize, Advanced Database Cleaner.
Reducir peticiones HTTP
Cada recurso (imagen, CSS, JS, fuente) es una petición. Reducirlas:
- Combinar archivos CSS/JS
- Usar sprites para iconos pequeños
- Inline SVGs críticos
- Eliminar recursos no utilizados
Preload recursos críticos
Indicar al navegador qué recursos cargar primero:
<link rel="preload" href="fuente.woff2" as="font" crossorigin>
<link rel="preload" href="hero.webp" as="image">Nivel 4: Optimizaciones avanzadas
HTTP/2 y HTTP/3
Protocolos modernos que permiten:
- Múltiples peticiones en paralelo
- Compresión de headers
- Server push
La mayoría de hostings modernos ya los soportan.
Compresión Gzip/Brotli
Comprime archivos de texto (HTML, CSS, JS) antes de enviarlos:
- Gzip: Estándar, reduce 70-80%
- Brotli: Más eficiente, reduce 80-90%
Normalmente configurado a nivel de servidor.
Service Workers y PWA
Para webs avanzadas, los Service Workers permiten:
- Caché offline
- Carga instantánea en visitas repetidas
- Experiencia tipo app
Velocidad en WordPress
WordPress puede ser muy rápido o muy lento según cómo se configure.
Plugins de optimización recomendados
| Plugin | Función | Precio |
|---|---|---|
| LiteSpeed Cache | Caché completa (solo en hosting LiteSpeed) | Gratis |
| WP Super Cache | Caché de página | Gratis |
| Autoptimize | Minificar CSS/JS | Gratis |
| ShortPixel | Optimizar imágenes | Freemium |
| Perfmatters | Desactivar recursos innecesarios | $24.95/año |
Tema rápido
El tema es fundamental. Evita:
- Temas multipropósito pesados (Avada, Divi sin optimizar)
- Temas con muchas funciones que no usas
- Temas de dudosa procedencia
Temas rápidos: GeneratePress, Astra, Kadence, Blocksy.
Hosting WordPress optimizado
El hosting WordPress de Avantys incluye:
- LiteSpeed + LSCache preconfigurado
- PHP 8.2+ optimizado
- Caché de objetos (Redis)
- CDN integrado
Velocidad en constructores web
Los constructores modernos como Sitejet (incluido en Avantys) están optimizados de base:
- Imágenes comprimidas automáticamente
- CSS/JS optimizado
- Lazy loading integrado
- Hosting optimizado incluido
Con el constructor web con IA de Avantys, la velocidad viene optimizada por defecto.
Checklist de optimización
Prioridad alta (hacer primero)
- Imágenes en WebP, menos de 200KB
- Lazy loading en imágenes
- Hosting con LiteSpeed o NGINX
- Caché de página activa
- Caché de navegador configurada
Prioridad media
- CSS y JS minificados
- JavaScript con defer
- Fuentes optimizadas (font-display: swap)
- CDN activo
- Solo plugins necesarios
Prioridad baja (optimización fina)
- CSS crítico inline
- Preload de recursos críticos
- Base de datos optimizada
- HTTP/2 o HTTP/3
- Compresión Brotli
Preguntas frecuentes
¿Cuál es un buen tiempo de carga?
Menos de 3 segundos para móvil, menos de 2 segundos para escritorio. El objetivo ideal es menos de 2 segundos en cualquier dispositivo.
¿Qué métrica es más importante?
LCP (Largest Contentful Paint) es la más importante para la percepción del usuario. Es lo que Google pondera más.
¿Los plugins de caché realmente funcionan?
Sí, pueden reducir tiempos de carga un 50-80% para visitantes recurrentes y reducir carga del servidor. Son imprescindibles en WordPress.
¿Necesito un CDN?
Si tu audiencia está concentrada en una región y tu servidor está cerca, no es crítico. Si tienes audiencia internacional o quieres máximo rendimiento, sí.
¿Puedo tener puntuación 100 en PageSpeed?
Es posible pero no siempre necesario. Una puntuación de 80-90 con buenos Core Web Vitals es excelente. No sacrifiques funcionalidad por puntuación perfecta.
¿La velocidad afecta directamente al SEO?
Sí. Los Core Web Vitals son factor de ranking oficial desde 2021. Además, webs lentas tienen mayor rebote, lo que afecta indirectamente al SEO.
Conclusión: Velocidad es experiencia
Una web rápida no es un lujo técnico. Es respeto por el tiempo del usuario, mejor posicionamiento en Google y más conversiones.
Resumen de acciones por impacto:
- Optimiza imágenes (mayor impacto, más fácil)
- Elige buen hosting (base de todo)
- Activa caché (mejora drástica)
- Optimiza CSS/JS (mejora notable)
- Usa CDN (especialmente si tienes audiencia amplia)
¿Quieres una web rápida sin complicaciones técnicas? El hosting de Avantys viene con LiteSpeed, caché LSCache y CDN integrado. Velocidad optimizada desde el primer día.
Continúa con nuestra guía completa para crear tu página web profesional para más consejos de optimización.
Artículos relacionados del cluster
Sigue optimizando tu web:
- Diseño responsive: adaptar tu web a móvil
- Imágenes para web: formatos y optimización
- Qué es el hosting web y qué tipo necesitas
- Errores comunes al crear una página web
- WordPress vs constructor web
- Cómo elegir los colores para tu web
¿Quieres que lo hagamos por ti?
En Avantys gestionamos tu web, hosting y crecimiento digital de punta a punta. Tú a lo importante.
