Cómo mejorar la velocidad de tu página web paso a paso

Ya sabes que la velocidad importa. Ya mediste tu web en PageSpeed Insights y el puntaje fue bajo. Ahora la pregunta es: ¿qué hago exactamente y en qué orden?

Este artículo es la respuesta práctica a esa pregunta. No hay teoría innecesaria aquí: solo las acciones concretas, ordenadas de mayor a menor impacto, para mejorar la velocidad de tu web.

Si quieres primero entender por qué la velocidad afecta tu SEO y tus conversiones antes de meterte en las soluciones, el artículo Velocidad web: por qué importa y cómo mejorarla cubre ese contexto completo.

¿Prefieres que alguien lo haga por ti? Nuestro servicio de optimización web incluye diagnóstico completo y mejoras implementadas directamente en tu sitio.

Antes de empezar: mide la línea base

Antes de cambiar cualquier cosa, documenta dónde estás. Esto te permite medir el impacto real de cada acción.

1. Ve a pagespeed.web.dev.
2. Ingresa la URL de tu página principal.
3. Anota el puntaje en móvil (el más importante) y en escritorio.
4. Captura pantalla del reporte completo, especialmente las secciones “LCP”, “CLS” e “INP”.

Ahora tienes tu línea base. Cada cambio que hagas se puede medir contra ese punto de partida.

Acción 1: Optimiza todas las imágenes

Impacto: muy alto. Dificultad: baja.

Las imágenes sin optimizar son la causa número uno de webs lentas. Una foto descargada del teléfono puede pesar 4-8 MB. La misma imagen bien optimizada para web debería pesar menos de 150 KB.

Pasos concretos:

Convierte a WebP. Es el formato de imagen moderno para web: hasta 30% más ligero que JPG con la misma calidad visual. Herramienta gratuita: squoosh.app. Sube la imagen, selecciona WebP como formato de salida, ajusta la calidad a 80-85% y descarga.

Redimensiona antes de subir. Si una imagen ocupa 800px de ancho en tu web, no la subas a 3000px. Redimensiónala a 800-1200px como máximo antes de convertirla.

Añade lazy loading a las imágenes que no están en la pantalla inicial. En tu código HTML, añade loading="lazy" a todas las imágenes excepto la primera (la imagen hero). Esto hace que solo se carguen cuando el usuario se acerca a ellas.

<!-- Imagen hero: NO lazy loading -->
<img src="hero.webp" alt="descripción" width="1200" height="600">

<!-- Resto de imágenes: SÍ lazy loading -->
<img src="foto.webp" alt="descripción" width="800" height="500" loading="lazy">

En WordPress: el plugin Imagify, ShortPixel o Smush comprimen y convierten automáticamente las imágenes al subirlas.

Acción 2: Mejora el tiempo de respuesta del servidor

Impacto: alto. Dificultad: media.

El tiempo que tarda el servidor en responder antes de empezar a enviar datos (TTFB: Time to First Byte) es el techo de todo lo demás. Si el servidor tarda 2 segundos en responder, la página no puede cargar en menos de 2 segundos, independientemente de cualquier otra optimización.

Qué hacer:

Implementa Cloudflare. Cloudflare es una red de distribución de contenido (CDN) gratuita. Al activarla, tu web se sirve desde el servidor de Cloudflare más cercano al visitante, reduciendo significativamente la latencia para audiencias en diferentes países. Ve a cloudflare.com y sigue el proceso de configuración, que generalmente toma menos de 30 minutos.

Activa el caché de página completa. Con Cloudflare activo, activa el caché de HTML en la configuración de “Caching Rules”. Para webs que no cambian constantemente, esto es una de las mejoras de rendimiento más grandes disponibles sin costo.

Si el TTFB sigue alto después de Cloudflare, el problema está en el servidor mismo y probablemente sea momento de cambiar de hosting. Un TTFB por encima de 600ms en el servidor de origen es una señal de que el hosting es el cuello de botella.

Acción 3: Activa el caché del navegador

Impacto: alto para visitas repetidas. Dificultad: baja-media.

El caché del navegador permite que los archivos de tu web (imágenes, CSS, JavaScript) se guarden localmente en el dispositivo del visitante. En visitas posteriores, el navegador carga esos archivos desde la caché local en lugar de descargarlos del servidor de nuevo.

En WordPress: instala WP Rocket (de pago, el más completo) o W3 Total Cache (gratuito). Activan el caché automáticamente con configuración por defecto.

En webs estáticas con Cloudflare: los headers de caché se configuran en las reglas de Cloudflare. Para archivos estáticos (imágenes, CSS, JS), configura Cache-Control: max-age=31536000 (un año).

Acción 4: Reduce y difiere el JavaScript

Impacto: alto, especialmente en móvil. Dificultad: media-alta.

El JavaScript bloquea la renderización de la página mientras se ejecuta. Cada script que carga antes de que el contenido sea visible añade tiempo de espera para el usuario.

Qué hacer:

Audita qué scripts tienes activos. Abre tu web en Chrome, ve a DevTools (F12) → pestaña “Network” → filtra por “JS”. Verás todos los scripts que carga tu web y cuánto pesan. Scripts de chat, de redes sociales, de analytics y de marketing suelen ser los más pesados.

Elimina lo que no uses activamente. Cada script que eliminas es tiempo de carga que recuperas.

Añade defer o async a los scripts no críticos. Esto hace que el navegador cargue el script en paralelo sin bloquear la renderización:

<!-- Sin defer: bloquea la carga -->
<script src="analytics.js"></script>

<!-- Con defer: no bloquea, ejecuta al final -->
<script src="analytics.js" defer></script>

En WordPress: WP Rocket tiene opciones para diferir JavaScript automáticamente. Activa “Load JavaScript Deferred” y prueba que no rompa funcionalidades.

Acción 5: Optimiza el CSS

Impacto: moderado. Dificultad: media.

El CSS también puede bloquear la renderización si se carga incorrectamente. Además, en webs con muchos plugins o temas complejos, hay estilos CSS cargando para funcionalidades que ni siquiera se usan en esa página.

Qué hacer:

Minimiza el CSS. Elimina espacios, comentarios y caracteres innecesarios del código CSS. Herramienta gratuita: cssminifier.com. En WordPress, WP Rocket y Autoptimize lo hacen automáticamente.

Elimina CSS no utilizado. Chrome DevTools → pestaña “Coverage” muestra qué porcentaje del CSS se usa realmente en esa página. En webs con muchos plugins, puede haber 80% de CSS que nunca se usa.

Acción 6: Optimiza las fuentes tipográficas

Impacto: moderado. Dificultad: baja.

Las fuentes de Google Fonts o Adobe Fonts son archivos externos que el navegador tiene que descargar. Si no están configuradas correctamente, pueden bloquear la carga del texto visible.

Qué hacer:

Precarga las fuentes principales. En el <head> de tu web, añade:

<link rel="preload" href="tu-fuente.woff2" as="font" type="font/woff2" crossorigin>

Usa font-display: swap. Esto hace que el navegador muestre el texto con la fuente del sistema mientras carga la fuente personalizada, en lugar de mostrar texto invisible:

@font-face {
  font-family: 'TuFuente';
  src: url('tu-fuente.woff2') format('woff2');
  font-display: swap;
}

Limita el número de fuentes y variantes. Cada peso y estilo de fuente (regular, bold, italic) es un archivo adicional. Usa solo los que realmente necesitas.

Acción 7: Corrige el CLS (saltos de diseño)

Impacto: directo en Core Web Vitals. Dificultad: media.

Si tu web tiene un CLS alto (el diseño salta mientras carga), estos son los culpables más frecuentes y sus soluciones:

Imágenes sin dimensiones definidas:

<!-- Mal: el navegador no sabe cuánto espacio reservar -->
<img src="foto.webp" alt="descripción">

<!-- Bien: el navegador reserva el espacio exacto -->
<img src="foto.webp" alt="descripción" width="800" height="500">

Anuncios o banners dinámicos: reserva el espacio exacto que ocupará el anuncio en el CSS antes de que cargue, con un placeholder del mismo tamaño.

Fuentes que cambian el layout: usar font-display: swap correctamente y precargar las fuentes reduce el “flash” de cambio tipográfico que causa CLS.

Cómo priorizar si no puedes hacer todo

Si tienes tiempo limitado, este es el orden de mayor a menor impacto:

1. Optimizar imágenes — mayor impacto, menor esfuerzo técnico.
2. Activar Cloudflare CDN — reducción de latencia para América Latina.
3. Activar caché — mejora inmediata para visitas repetidas.
4. Eliminar scripts de terceros innecesarios — recupera tiempo de carga bloqueado.
5. Diferir JavaScript no crítico — mejora la percepción de velocidad inicial.

Hacer solo los tres primeros puntos puede llevar un sitio de 40 a 75 en PageSpeed en muchos casos.

Si después de aplicar estas acciones sigues con puntajes bajos o necesitas ayuda para identificar exactamente qué está frenando tu web, nuestro servicio de optimización web incluye auditoría completa y todas las mejoras implementadas directamente. También puedes revisar el artículo sobre Core Web Vitals para entender qué métricas específicas está midiendo Google y cómo cada acción impacta en ellas.