La velocidad de página afecta directamente la experiencia del usuario, las tasas de conversión y el posicionamiento en buscadores. Las investigaciones muestran que un retraso de 1 segundo en el tiempo de carga lleva a una caída del 7% en las conversiones. Aquí tienes 12 técnicas probadas para hacer tu sitio más rápido.

1. Optimizar Imágenes (Mayor Beneficio)

Las imágenes suelen ser los recursos más pesados de cualquier página web. Tres pasos:

Usa formatos modernos: Convierte JPEG/PNG a WebP o AVIF. WebP es un ~30% más pequeño que JPEG con la misma calidad. AVIF es un ~50% más pequeño.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Imagen hero" width="1200" height="600" />
</picture>

Implementa carga diferida: Usa loading="lazy" en imágenes por debajo del pliegue. Nunca apliques carga diferida a tu imagen LCP.

Establece dimensiones explícitas: Siempre especifica width y height para evitar desplazamientos de diseño.

2. Activar Compresión

Activa la compresión Gzip o Brotli en tu servidor. Brotli es más reciente y entre un 20-26% más eficiente que Gzip. Esto por sí solo puede reducir los tamaños de transferencia de HTML/CSS/JS entre un 60-80%.

3. Aprovechar el Caché del Navegador

Establece las cabeceras de caché apropiadas para los recursos estáticos. Duraciones de caché largas (1 año) para archivos versionados, cortas para HTML:

Cache-Control: public, max-age=31536000, immutable  # Recursos estáticos
Cache-Control: public, max-age=0, must-revalidate   # HTML

4. Usar una Red de Distribución de Contenido (CDN)

Un CDN sirve tus recursos desde servidores geográficamente cercanos a tus usuarios, reduciendo la latencia. Para la mayoría de los sitios, un CDN por sí solo puede mejorar el TTFB en 50-200ms. Opciones populares: Cloudflare, Fastly, AWS CloudFront.

5. Minimizar Recursos que Bloquean el Renderizado

Los scripts en <head> sin defer o async bloquean el análisis:

<!-- Bloquea el renderizado -->
<script src="analytics.js"></script>

<!-- No bloquea -->
<script src="analytics.js" defer></script>

<!-- Carga en paralelo, ejecuta cuando está listo -->
<script src="widget.js" async></script>

Para CSS: incluye CSS crítico en línea y carga el resto de forma asíncrona usando el truco de media="print".

6. Precargar Recursos Críticos

Informa al navegador sobre recursos críticos antes de que los descubra durante el análisis:

<!-- Precarga imagen hero LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- Precarga fuente crítica -->
<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin />

7. Reducir el Tamaño del Bundle de JavaScript

JavaScript es costoso — debe descargarse, analizarse, compilarse y ejecutarse.

Usa tree shaking para eliminar código no utilizado
Divide el código por ruta — no cargues todo desde el principio
Usa analizadores de bundle (webpack-bundle-analyzer) para encontrar dependencias grandes
Reemplaza librerías pesadas por alternativas más ligeras (p.ej., date-fns en lugar de moment.js)

8. Optimizar Fuentes

Las fuentes web a menudo se pasan por alto pero pueden impactar significativamente el rendimiento:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;    /* Muestra texto inmediatamente en fuente de respaldo */
  font-weight: 400 700;  /* Rango de fuente variable */
}

Subconjuntar fuentes (incluir solo los caracteres que usas realmente) puede reducir el tamaño del archivo de fuente más de un 80%.

9. Implementar CSS Crítico

Extrae e incluye en línea el CSS necesario para renderizar el contenido above-the-fold. Esto permite que el primer pintado ocurra sin esperar la descarga completa de la hoja de estilos.

Herramientas: paquete npm critical, Penthouse, o automáticamente vía PostCSS.

10. Reducir el Tiempo de Respuesta del Servidor (TTFB)

Objetivo: menos de 600ms. Mejoras:

Usa connection pooling para conexiones de base de datos
Cachea los resultados de consultas de base de datos (Redis, Memcached)
Activa HTTP/2 o HTTP/3 en tu servidor
Optimiza índices de base de datos para consultas lentas
Considera el edge rendering para contenido dinámico

11. Eliminar CSS No Utilizado

Los frameworks CSS como Bootstrap o Tailwind pueden resultar en archivos CSS grandes si no están bien configurados. Usa PurgeCSS o el purgado integrado de tu framework para eliminar estilos no utilizados.

Con Tailwind CSS, configura la opción content correctamente:

// tailwind.config.js
content: ["./src/**/*.{html,js,ts,tsx}"]

12. Usar Sugerencias de Recursos

Da al navegador pistas sobre futuras navegaciones:

<!-- Inicia conexión a dominio externo antes -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Obtiene recursos de la siguiente página cuando es probable navegar -->
<link rel="prefetch" href="/siguiente-pagina.html" />

<!-- Pre-renderiza la probable siguiente página (agresivo) -->
<link rel="prerender" href="/siguiente-pagina.html" />

Midiendo Tus Mejoras

Después de implementar estos cambios, mide con:

Krokanti Audit: Informe completo con comparación antes/después en la pestaña Historial (Pro)
PageSpeed Insights: Datos de campo de usuarios reales
Pestaña Red de Chrome DevTools: Visualización en cascada

Ejecuta una auditoría web gratuita para ver tu puntuación de rendimiento actual, identificar exactamente cuáles de estas 12 técnicas tendrán el mayor impacto en tu sitio, y obtener una lista de correcciones priorizada.