¿Tu landing page carga en 4 segundos? Felicidades, 53% de tus visitantes ya se fueron.
Tu diseñador pasó 3 semanas en tu página. Tu copywriter perfeccionó cada palabra. Y aún así, la mitad de tus visitantes nunca la ve. Aquí te enseño a arreglarlo.
¿Tu landing page carga en 4 segundos? Felicidades, 53% de tus visitantes ya se fueron.
Tu diseñador pasó 3 semanas perfeccionando tu hero section. Tu copywriter sufrió con cada palabra para hacerla irresistible. Hiciste 12 pruebas A/B sobre colores de botón. Y tus conversiones siguen siendo una mierda.
¿Sabes por qué? Porque la mitad de tus visitantes nunca vieron tu página.
La masacre silenciosa: cuando la velocidad mata antes de que el contenido tenga oportunidad
Escucha lo que dicen los números. De verdad.
Cada segundo de carga adicional = -7% de conversiones. No es especulación. Es lo que muestra la data, y es consistente desde 2015. ¿Qué significa realmente? Si tu página carga en 4 segundos en lugar de 1, pierdes mínimo 21% de conversiones.
Agrega a eso: 53% de visitantes mobile se van si la página tarda más de 3 segundos. No es 53% de gente con mala intención. Es 53% de todo el mundo que hace clic en tu link.
Excepto que nadie habla de eso. ¿Sabes por qué? No es sexy. Un diseñador puede mostrar un hero perfecto. Un copywriter puede demostrar engagement aumentado. Pero la velocidad de página? Es invisible. Es técnico. Da miedo.
Así que la ignoramos. Seguimos subiendo imágenes hero de 5MB, 15 Google Fonts diferentes, y 47 scripts de terceros ejecutándose todos juntos. Y luego nos preguntamos por qué la tasa de conversión es patética.
Por qué tu página carga como un caracol asmático
No es completamente tu culpa. Bueno, un poco sí. Pero las herramientas y costumbres nos empujan hacia páginas lentas. Aquí están los culpables habituales.
La imagen hero en 4K sin comprimir
Alguien te dijo: "Una imagen hermosa impresiona." Así que encontraste esta imagen de 4K a 5440x3600 píxeles, 5MB. Se vió genial en tu Mac con fibra óptica.
Excepto en el teléfono de tu prospecto con 4G mediocre, eso es 6 segundos de carga solo para la imagen hero. El resto de la página espera pacientemente en segundo plano.
Analogía simple: abres un restaurante e haces que los clientes esperen 6 minutos afuera de la puerta antes de dejarlos entrar. Aunque la comida sea de Michelin, van al McDonald's de al lado.
Las 15 Google Fonts porque "la tipografía importa"
Un diseñador minimalista usa una fuente. Tú usas tres para headings, dos para subheadings, una para body, dos para acentos, tres de backup. ¿Total? 11 fuentes (sin contar variaciones de peso).
Cada fuente = una petición externa. Cada petición = 50-200ms de latencia. Más el FOUT (Flash of Unstyled Text) donde el texto aparece y se re-renderiza cuando carga la fuente. Los usuarios ven parpadeo. Es molesto. Cuesta tiempo.
Los 47 scripts de terceros disparándose todos a la vez
Tienes un pixel de Facebook. Un pixel de Google. Un script de heat mapping (Hotjar). Widget de chat (Intercom). Herramienta de feedback (Delighted). Analytics (Google Analytics 4, más el viejo que olvidaste). Conversion tracking. Tres scripts de monitoreo de performance. Un script de popups. Dos scripts de formularios dinámicos.
Y todos intentan ejecutarse simultáneamente al cargar la página. La página carga, pero no es interactiva por 2-3 segundos. Haces clic en el botón, nada pasa. Esto es la muerte lenta de la tasa de conversión.
El video background en 4K en loop
El apogeo de "esto se verá increíble". Un video background looping en 4K, sin comprimir, que nadie necesita porque los visitantes ni lo miran. Pesa 20MB. Solo carga en desktop (afortunadamente). Consume 40% del ancho de banda de tu página.
Spoiler: nadie lo ve. Los usuarios scrollean inmediatamente para ver contenido real.
Cómo arreglar esto: 5 pasos activos
El punto no es entender la teoría. Es actuar. Ahora. Aquí hay 5 pasos que puedes hacer hoy, sin desarrollador, sin presupuesto.
Paso 1: Mide tu vergüenza (5 minutos)
Primero, sabe dónde estás. No para sentirte mal. Pero para tener una línea base antes de hacer cambios.
Abre PageSpeed Insights (https://pagespeed.web.dev/). Ingresa la URL de tu landing page. Espera. Toma screenshot del score. Listo.
Presta especial atención a:
- El score mobile (ese es el que realmente importa)
- LCP (Largest Contentful Paint) — cuánto tiempo hasta que el contenido principal es visible
- INP (Interaction to Next Paint) — cuánto tiempo hasta que la página responde a un clic
- CLS (Cumulative Layout Shift) — si el layout cambia mientras carga (horrible UX)
Si el score es >90, puedes irte. Si no, sigue.
Luego, usa GTmetrix (https://gtmetrix.com/). Es más técnico pero te muestra exactamente dónde está la lentitud. Mira el "Waterfall Chart" — son recursos cargando en orden.
Finalmente, prueba desde tu teléfono real. No un emulador. Tu teléfono actual. Con 4G o WiFi real. Siente el sufrimiento.
Paso 2: Comprime tus imágenes como un profesional (15 minutos)
Mucho más impactante que cualquier otra cosa. Las imágenes son 60-80% del tamaño de una landing page. Redúcelas y tu página vuela.
Paso 2.1: Cambia el formato a WebP
WebP es un formato de imagen moderno que comprime 30-35% mejor que JPG sin pérdida de calidad visible. Chrome, Edge, Firefox, Safari (desde 2023) lo soportan.
¿Cómo? Usa Squoosh (https://squoosh.app/). Es gratis, sin registro, sube una imagen, descárgala en WebP. Un segundo.
O usa TinyPNG (https://tinypng.com/) que es más simple (sube, obtén el archivo) pero WebP es mejor para performance. Punto.
Paso 2.2: Redimensiona tu imagen hero correctamente
Si tu página mide 1200px de ancho en desktop, ¿por qué tu imagen hero mide 5440px? Estás enviando 20x más píxeles de los que muestras.
En Squoosh, redimensiona a 1200px máximo. En mobile son 375px. Así que necesitas 3 versiones:
- Mobile: 375px de ancho (la app maneja automáticamente 2x)
- Tablet: 768px
- Desktop: 1200px
Sí, son 3 archivos. No, no es complicado. Sí, puede salvarte 1-2 segundos de carga.
Paso 2.3: Activa lazy loading
Si tu página mide 3000px de alto con 5 imágenes, ¿por qué cargar las 5 al inicio? Carga solo la primera. Carga las demás cuando el usuario scrollea hacia ellas.
En HTML es una línea: <img loading="lazy" ... />
Listo.
Paso 3: Mata scripts innecesarios (10 minutos)
Regresa a GTmetrix. En el Waterfall Chart, ve cuál JavaScript es pesado.
Pregúntate brutalmente para cada script:
- "Este widget de chat que pesa 200kb y suma 500ms al tiempo de carga — ¿cuántos leads genera realmente por mes?"
- "Este script de heat mapping — ¿uso esos datos? ¿O lo puse para 'tener métricas'?"
- "Este pixel de Facebook — ¿lo probé en 100 visitantes para ver si mejora ROAS?"
Si la respuesta es "no sé" o "probablemente no," bórralo.
Para scripts que guardas, usa carga diferida:
<!-- Cargar en prioridad (crítico) -->
<script src="analytics.js"></script>
<!-- Cargar en background, después del resto (no-crítico) -->
<script src="chat.js" defer></script>
<!-- Cargar en paralelo, asincrónico (realmente no necesario inmediatamente) -->
<script src="tracking.js" async></script>
¿La diferencia? Con defer, el navegador carga el script en background y lo ejecuta al final. Sin esperar. Podría ahorrarte 1-2 segundos.
Paso 4: Agrega un CDN y activa caché (20 minutos setup)
Un CDN es una red de servidores alrededor del mundo que hospeda una copia de tu página. Un usuario en Japón obtiene la página de un servidor en Japón, no de España. Reduce latencia de red.
Gratis y estúpidamente simple: Cloudflare
- Ve a cloudflare.com
- Haz clic en "Agregar un sitio"
- Ingresa el dominio de tu landing page
- Sigue instrucciones (5 clics)
- Cloudflare te dice que cambies los nameservers de tu dominio — 2 minutos
- Espera 24 horas para que DNS se propague
- Ahora tienes un CDN gratis
Cloudflare además:
- Comprime automáticamente recursos (Brotli, gzip)
- Cachea imágenes, CSS, JS
- Bloquea bots que ralentizan tu sitio
- Minifica HTML, CSS, JS automáticamente
Es insano que no lo hagamos todos por defecto.
Browser caching
Dile al navegador: "Cachea esta imagen por 30 días, no la re-busques en cada visita." ¿Segunda visita? Las imágenes son instantáneas.
En Cloudflare es una casilla. En Apache/Nginx son unas pocas líneas de config.
Paso 5: Prueba antes/después y monitorea (10 minutos)
Vuelve a ejecutar PageSpeed Insights y GTmetrix. Compara scores. Haz screenshot.
Si fuiste de 4s a 1.5s, podrías haber duplicado tu tasa de conversión (mejor caso). Si fuiste de 2s a 1.5s, es más modesto pero aún +5-10% conversiones.
Configura monitoreo. Cloudflare lo hace. Uptrends lo hace. ¿Quieres algo ultra-simple? Google Analytics con Web Vitals personalizado.
Resultados esperados: por qué deberías absolutamente hacer esto
Hecho correctamente, pasas de 4 segundos a <1.5 segundos. Esto no es fantasía. Es mecánica:
- Comprimir imágenes = -60-70% tamaño
- Quitar scripts innecesarios = -30-50% JS
- Lazy loading = -40% carga inicial
- CDN + caché = -50% latencia de red
Suma todo y tu página carga en 1.5s en lugar de 4s.
Eso significa +25% conversiones mínimo, sin cambiar una palabra de copy.
Caso real: un SaaS B2B redujo tiempo de carga de 3.8s a 1.2s. Nada más cambió. Contenido idéntico. Design idéntico. ¿Conversiones? +31% el mes siguiente.
Es el fruto de bajo esfuerzo más poderoso que nadie explota. Todos obsesionan sobre copywriting, design, CTAs. Mientras tanto, la mitad de tus visitantes nunca ven la página porque carga como una película de 4K en YouTube.
Tu turno ahora
Tienes los pasos. Tienes 1 hora. Empieza por el paso 1 (mide), luego paso 2 (comprime imágenes).
Apuesto a que boostarás tu score 10-20 puntos inmediatamente.
Pero aquí viene lo importante: hay probablemente 6 otros errores en tu landing page matando conversiones. La velocidad es uno. También está el copywriting, estructura, social proof, un CTA que no vende nada... Consigue que tu página sea analizada gratis en RoastMySite y te diremos exactamente qué asusta a los visitantes y cómo arreglarlo. 30 segundos. Gratis. Cero obligación.
Ahora lo sabes. ¿Vas a seguir perdiendo 40% de tus visitantes, o vas a actuar?