Mientras lees esta frase, tu sitio web acaba de perder otro cliente. El 53% de los usuarios abandonan un sitio que tarda más de 3 segundos en cargar, y cada segundo adicional reduce tus conversiones un 7%. No es opinión: es la conclusión de Google tras analizar millones de sesiones.
Pero la velocidad ya no es solo una cuestión de experiencia de usuario. Desde 2021, Google usa las Core Web Vitals como factor de ranking. Un sitio lento no solo pierde visitantes: pierde posiciones en Google, lo que significa menos tráfico orgánico, menos leads y menos ventas.
En esta guía te explicamos qué son las Core Web Vitals, cómo medir el rendimiento real de tu sitio y las técnicas concretas para acelerarlo sin sacrificar funcionalidades.
¿Qué son las Core Web Vitals y Por Qué Google las Exige?
Las Core Web Vitals son tres métricas que Google usa para evaluar la experiencia del usuario en tu sitio web. Desde 2021 son un factor de ranking directo, y en 2025 Google actualizó la métrica de interactividad para ser aún más exigente.
LCP (Largest Contentful Paint)
Mide cuánto tarda en aparecer el elemento más grande visible de la página (generalmente la imagen principal o un bloque de texto grande). Es la percepción del usuario de "ya cargó".
- Bueno: menos de 2.5 segundos
- Necesita mejora: entre 2.5 y 4 segundos
- Malo: más de 4 segundos
INP (Interaction to Next Paint)
Reemplazó a FID en marzo de 2024. Mide la latencia de todas las interacciones del usuario durante toda la visita, no solo la primera. Si un botón tarda en responder, INP lo captura.
- Bueno: menos de 200 milisegundos
- Necesita mejora: entre 200 y 500 milisegundos
- Malo: más de 500 milisegundos
CLS (Cumulative Layout Shift)
Mide cuánto se mueven los elementos visuales mientras la página carga. ¿Alguna vez intentaste hacer clic en un botón y la página se movió, haciendo que cliquearas otra cosa? Eso es un layout shift.
- Bueno: menos de 0.1
- Necesita mejora: entre 0.1 y 0.25
- Malo: más de 0.25
El Costo Real de un Sitio Web Lento
Las cifras no mienten:
| Tiempo de carga | Tasa de rebote | Impacto en conversiones |
|---|---|---|
| 1-3 segundos | 32% de rebote | Óptimo |
| 1-5 segundos | 90% más rebote | -14% conversiones |
| 1-6 segundos | 106% más rebote | -21% conversiones |
| 1-10 segundos | 123% más rebote | -35% conversiones |
Traducido a dinero: si tu e-commerce genera $10,000 al mes con un tiempo de carga de 5 segundos, optimizarlo a 2 segundos podría significar $1,400 adicionales mensuales solo por reducir el abandono. En un año, eso son $16,800 que estás dejando sobre la mesa.
Amazon calculó que cada 100 milisegundos de latencia adicional les costaba un 1% de ventas. Para una empresa de su escala, eso son miles de millones. Para tu negocio, las proporciones son iguales.
Cómo Medir la Velocidad Real de tu Sitio
No basta con abrir tu web y sentir que "carga rápido". Necesitas datos reales de usuarios reales:
Herramientas gratuitas de Google
- PageSpeed Insights: Analiza cualquier URL y te da un puntaje de 0-100 con datos de laboratorio y de campo (usuarios reales). Un puntaje menor a 50 es crítico
- Google Search Console: Reporte de Core Web Vitals con datos reales de tus visitantes. Muestra qué URLs pasan o fallan cada métrica
- Lighthouse (Chrome DevTools): Auditoría técnica completa directamente desde tu navegador. Presiona F12, ve a la pestaña Lighthouse y ejecuta
Herramientas avanzadas
- WebPageTest.org: Análisis detallado con cascada de recursos, filmstrip visual y comparativas entre conexiones. Permite probar desde diferentes ubicaciones y velocidades de red
- GTmetrix: Combina PageSpeed y Core Web Vitals con recomendaciones accionables y monitoreo histórico
- CrUX Dashboard: Datos reales del Chrome User Experience Report. Te muestra cómo tu sitio rinde para usuarios reales a lo largo del tiempo
Consejo clave: Siempre prioriza los datos de campo (usuarios reales) sobre los datos de laboratorio. Tu sitio puede tener un puntaje de 95 en Lighthouse pero rendir mal para usuarios con conexiones lentas o dispositivos de gama baja.
10 Técnicas para Acelerar tu Sitio Web
1. Optimiza imágenes (impacto: alto)
Las imágenes son responsables del 50-70% del peso total de una página. Convierte todas las imágenes a formato WebP o AVIF, usa dimensiones exactas (no cargues una imagen de 4000px para mostrarla a 800px) e implementa lazy loading para imágenes fuera del viewport.
2. Implementa un CDN (impacto: alto)
Un Content Delivery Network sirve tus archivos desde el servidor más cercano al usuario. Si tu servidor está en Estados Unidos y tu cliente está en Caracas, un CDN puede reducir el tiempo de respuesta de 200ms a 30ms. Cloudflare ofrece un plan gratuito excelente.
3. Minimiza JavaScript (impacto: alto)
JavaScript es el recurso más costoso de procesar. Cada KB de JS requiere descarga, parsing y ejecución. Elimina dependencias innecesarias, usa code splitting para cargar solo el JS necesario por página y aplica tree shaking para eliminar código muerto.
4. Usa Server-Side Rendering (SSR) o Static Generation
Frameworks como Next.js permiten pre-renderizar páginas en el servidor, enviando HTML listo al navegador en lugar de una página en blanco que espera a que JavaScript construya el contenido. Esto mejora drásticamente el LCP y la indexación en Google.
5. Comprime recursos con Brotli
La compresión Brotli reduce el tamaño de HTML, CSS y JS un 20-30% más que Gzip. La mayoría de los servidores modernos lo soportan, y los CDNs como Cloudflare y Vercel lo aplican automáticamente.
6. Precarga recursos críticos
Usa <link rel="preload"> para indicar al navegador qué recursos necesita inmediatamente: la fuente principal, la imagen hero y el CSS crítico. Esto elimina el tiempo de descubrimiento y adelanta la carga de recursos esenciales.
7. Elimina render-blocking resources
CSS y JS que bloquean el renderizado retrasan todo lo que el usuario ve. Carga CSS no crítico de forma asíncrona, usa defer o async en scripts no esenciales y genera CSS inline para el contenido above the fold.
8. Optimiza fuentes web
Las fuentes personalizadas son una de las causas más comunes de CLS y LCP lento. Usa font-display: swap para mostrar texto inmediatamente, precarga las variantes que usas y limita el número de fuentes a máximo 2 familias.
9. Implementa caché agresivo
Configura headers de caché apropiados: archivos estáticos (imágenes, CSS, JS con hash) pueden cachearse por un año. HTML debe tener caché corto o revalidación. Un usuario que regresa a tu sitio debería cargar un 80% de los recursos desde su caché local.
10. Reserva espacio para contenido dinámico
Para evitar CLS, define dimensiones explícitas para imágenes, videos, iframes y anuncios. Usa aspect-ratio en CSS o los atributos width y height en imágenes. Los slots de publicidad son los mayores causantes de layout shift.
Velocidad Web en Móvil: El Desafío Real
El 60-70% de tu tráfico probablemente viene de dispositivos móviles, y la experiencia móvil es significativamente peor que la de escritorio:
- Las conexiones móviles tienen mayor latencia que las de escritorio
- Los procesadores de smartphones de gama media son 3-5x más lentos que los de laptop
- Los usuarios móviles son más impacientes: esperan carga instantánea
Google evalúa tu sitio con mobile-first indexing, lo que significa que la versión móvil de tu sitio es la que determina tu ranking. Si tu web es rápida en escritorio pero lenta en móvil, estás perdiendo posiciones.
Estrategias específicas para móvil:
- Imágenes responsive: Usa
srcsetpara servir imágenes de menor resolución en pantallas pequeñas - Touch targets grandes: Botones de al menos 44x44px para evitar toques accidentales
- Reduce la cantidad de fuentes: Cada variante de fuente son 20-100KB adicionales de descarga
- Prioriza el contenido above the fold: Lo que el usuario ve primero debe cargar primero
Core Web Vitals y SEO: La Conexión Directa
Google ha dejado claro que las Core Web Vitals son un factor de ranking confirmado. Esto significa:
- Dos páginas con contenido similar: la más rápida rankea más alto
- Las páginas que pasan Core Web Vitals tienen 24% menos probabilidad de que el usuario abandone antes de que cargue
- Google Search Console marca las páginas que fallan Core Web Vitals con advertencias y puede reducir su visibilidad
- Las páginas rápidas obtienen más crawl budget: Google las rastrea más frecuentemente y descubre contenido nuevo más rápido
En mercados competitivos, la velocidad puede ser el diferenciador que te posicione por encima de competidores con contenido similar pero sitios más lentos.
Caso Real: Optimización que Duplicó las Conversiones
Un e-commerce de moda con 15,000 visitas mensuales nos contactó con estos problemas:
- LCP: 6.2 segundos (malo)
- CLS: 0.35 (malo)
- PageSpeed móvil: 28/100
- Tasa de conversión: 0.8%
Las optimizaciones que implementamos:
- Migración de imágenes PNG a WebP con lazy loading: -65% de peso
- Implementación de CDN con Cloudflare: -150ms de latencia
- Code splitting y tree shaking de JavaScript: -45% de JS
- Reserva de espacio para imágenes de producto: CLS a 0.02
- Precarga de fuentes y CSS crítico: LCP a 1.8 segundos
Resultados después de 60 días:
- PageSpeed móvil: 28 → 92
- LCP: 6.2s → 1.8s
- Tasa de conversión: 0.8% → 1.7% (más del doble)
- Posiciones en Google: subió de página 2 a top 5 en sus keywords principales
- Ingresos mensuales: +$4,200 sin cambiar nada más
Tu Sitio Necesita una Auditoría de Velocidad
En AvilaDev optimizamos sitios web para que pasen Core Web Vitals y conviertan más:
- Auditoría completa: Analizamos cada métrica con herramientas profesionales y datos de usuarios reales
- Plan de acción priorizado: Te decimos exactamente qué optimizar primero para el mayor impacto
- Implementación técnica: Ejecutamos las optimizaciones con nuestro equipo de desarrollo
- Monitoreo continuo: Seguimos las métricas post-optimización para garantizar resultados sostenidos
¿Quieres saber cuánto dinero está perdiendo tu sitio por ser lento? Solicita una auditoría de velocidad gratuita y te enviamos un reporte con tu puntaje actual, las oportunidades de mejora y el impacto estimado en tus conversiones.
