Los Números que Demuestran que la Velocidad es Dinero
Antes de hablar de técnicas, los datos:
- •Google: Un aumento de 0,1 segundos en velocidad mejora las tasas de conversión hasta un 8,4% en retail y 10,1% en viajes (2023)
- •Amazon: Calculó que cada 100ms de retraso le costaba 1% de ventas
- •Portent: Los sitios que cargan en 1 segundo tienen conversiones 3 veces superiores a los que cargan en 5 segundos
- •Walmart: Cada segundo de mejora en tiempo de carga aumentaba las conversiones un 2%
Y desde el punto de vista SEO: Google usa la velocidad como factor de ranking desde 2010. Los Core Web Vitals (métricas específicas de velocidad y experiencia) son factores de ranking oficiales desde 2021.
Un sitio lento pierde visitas, pierde conversiones y pierde posicionamiento. Triple castigo.
Los Core Web Vitals: Las Métricas que Google Mide
LCP (Largest Contentful Paint)
Qué mide: Cuánto tiempo tarda en aparecer el elemento de contenido más grande visible en el viewport inicial (típicamente la imagen principal o el bloque de texto héroe).
Objetivo: Menos de 2,5 segundos para "Bueno". Entre 2,5-4s es "Necesita mejora". Más de 4s es "Malo".
Por qué importa: Es el primer indicador de que la página "está cargada" desde la perspectiva del usuario.
CLS (Cumulative Layout Shift)
Qué mide: Cuánto se mueven los elementos de la página durante la carga. Si un botón que ibas a pulsar se desplaza porque cargó una imagen encima, eso genera CLS.
Objetivo: Menos de 0,1 para "Bueno".
Por qué importa: Un CLS alto es frustrante, genera abandono y en e-commerce puede provocar compras accidentales o fallidas.
INP (Interaction to Next Paint)
Qué mide: Cuánto tarda la página en responder visualmente cuando el usuario interactúa (clics, escritura, toques). Reemplazó al FID en marzo 2024.
Objetivo: Menos de 200ms para "Bueno".
Cómo Medir la Velocidad de tu Web
Google PageSpeed Insights (pagespeed.web.dev)
La herramienta oficial de Google. Gratuita. Analiza mobile y desktop y muestra:
- •Puntuación 0-100 (verde >90, naranja 50-89, rojo <50)
- •Cada Core Web Vital con su valor
- •Lista de oportunidades priorizadas por impacto
Cómo usarlo: Analiza la homepage y las 2-3 páginas más visitadas (producto, servicios, contacto).
GTmetrix (gtmetrix.com)
Análisis más detallado con cascada de carga (waterfall), comparación histórica y análisis desde múltiples ubicaciones geográficas.
WebPageTest (webpagetest.org)
La más potente para análisis técnico profundo. Permite simular conexiones lentas, dispositivos específicos y múltiples localizaciones.
Técnicas de Optimización: De Mayor a Menor Impacto
1. Optimiza las imágenes (impacto: MUY ALTO)
Las imágenes son típicamente el 50-80% del peso de una página.
Formato moderno: Usa WebP en lugar de JPEG/PNG. WebP es 25-35% más pequeño con la misma calidad visual. Compatibilidad prácticamente universal en 2026. AVIF es aún mejor (hasta 50% más pequeño) pero con menor soporte.
Dimensiones correctas: Si tu imagen se muestra a 400px de ancho, no subas una imagen de 2000px. Sube al tamaño real de visualización.
Compresión: Usa Squoosh (gratis, web) o TinyPNG. Objetivo: ninguna imagen supera 200KB en una web normal.
Lazy loading: Las imágenes fuera del viewport inicial no deben cargarse hasta que el usuario haga scroll: ``html ``
Dimensiones explícitas: Siempre especifica width y height en el para que el navegador reserve el espacio antes de cargar. Esto elimina CLS: ``html ``
2. Hosting de calidad (impacto: MUY ALTO)
Un hosting lento limita todo lo demás. Señales de hosting lento:
- •TTFB (Time To First Byte) mayor de 600ms
- •Servidor compartido con decenas de webs
- •Sin CDN
Solución: Para webs de empresa en España, un VPS con LiteSpeed o Nginx, o hosting de calidad como SiteGround, Kinsta o Cloudways. Para webs estáticas/Next.js: desplegar en Vercel o Cloudflare Pages (gratuito y muy rápido).
3. Fuentes auto-hospedadas (impacto: MEDIO-ALTO)
Google Fonts añade 3-4 peticiones externas antes de renderizar el texto. Descarga las fuentes y sírvelas desde tu servidor.
Herramienta para facilitar esto: google-webfonts-helper.herokuapp.com
Añade siempre font-display: swap para evitar texto invisible durante la carga: ``css @font-face { font-family: 'MiFuente'; src: url('/fonts/mifuente.woff2') format('woff2'); font-display: swap; } ``
4. Minificación y bundle (impacto: MEDIO)
CSS y JavaScript minificados (eliminar espacios, comentarios, nombres largos) y combinados para reducir el número de peticiones.
Frameworks modernos como Next.js hacen esto automáticamente. En WordPress: plugins como Autoptimize o WP Rocket.
5. Caché del navegador (impacto: MEDIO)
Los recursos que no cambian (CSS, JS, imágenes de marca, fuentes) deben tener headers de caché de 1 año para no volver a descargarse en visitas repetidas.
6. CDN (impacto: ALTO para audiencia internacional)
Distribuye contenido estático desde servidores cercanos al usuario. Para tráfico principalmente español el impacto es menor, pero Cloudflare gratuito es el primer paso recomendado para cualquier web.
7. Elimina JavaScript bloqueante (impacto: ALTO)
El JavaScript síncrono en el bloquea el renderizado. Añade defer a los scripts no críticos: ``html ``
Elimina scripts de terceros innecesarios (widgets sin usar, analytics duplicados).
Checklist de Optimización
- •[ ] Todas las imágenes en WebP con dimensiones explícitas y lazy loading
- •[ ] Ninguna imagen supera 200KB
- •[ ] TTFB menor de 600ms (verificar en GTmetrix)
- •[ ] LCP menor de 2,5s en móvil
- •[ ] CLS menor de 0,1
- •[ ] Fuentes servidas desde servidor propio con font-display: swap
- •[ ] CSS y JS minificados
- •[ ] Caché del navegador configurada para recursos estáticos
- •[ ] Cloudflare o CDN activo
- •[ ] Sin scripts de terceros innecesarios
Herramientas Recomendadas
| Herramienta | Uso | Precio |
|---|---|---|
| PageSpeed Insights | Diagnóstico oficial | Gratis |
| GTmetrix | Análisis detallado | Gratis / 15€/mes |
| WebPageTest | Análisis técnico avanzado | Gratis |
| Squoosh | Compresión de imágenes | Gratis |
| WP Rocket | Optimización WordPress | 50€/año |
| Cloudflare | CDN + optimizaciones | Gratis (plan básico) |
Preguntas Frecuentes
¿Qué puntuación de PageSpeed es suficiente? Apunta a verde (90+) en móvil. Un 70-89 es aceptable pero deja margen de mejora. Por debajo de 70 tienes un problema que afecta conversiones y SEO.
¿WordPress es inherentemente lento? No. Con buen tema, caché (WP Rocket o LiteSpeed Cache), imágenes optimizadas y buen hosting, un WordPress puede puntuar 90+ en PageSpeed. El problema es que muchos WordPress tienen demasiados plugins, temas pesados y hosting barato.
¿Vale la pena pagar por WP Rocket? Para la mayoría de webs WordPress, WP Rocket (50€/año) es la forma más rápida de conseguir mejoras significativas sin configuración manual compleja. La combinación gratuita de LiteSpeed Cache + Cloudflare puede conseguir resultados similares con más tiempo de configuración.
¿Quieres que tu web cargue más rápido y convierta más? En ROXEX optimizamos el rendimiento de webs de empresa y e-commerce.
Escríbenos por WhatsApp: https://wa.me/34644458637