Cuando hablamos de un sitio lento, la culpa suele repartirse entre el servidor y el código. Pero en mi experiencia, la mayoría de los problemas de velocidad nacen mucho antes, en el escritorio del diseñador. La velocidad es una decisión de diseño, y cuanto antes se toma, más barato sale.

El presupuesto de rendimiento

Igual que un presupuesto económico limita lo que puedes gastar, un presupuesto de rendimiento define cuánto puede pesar tu página. Por ejemplo: "la página de inicio no superará los 500 KB y cargará en menos de 2 segundos". Con ese número en mente, cada decisión — ¿esta imagen vale 300 KB?, ¿necesito esta librería? — se vuelve más fácil de responder.

Las imágenes: el peso más fácil de recortar

Las imágenes representan entre el 50% y el 70% del peso de una web típica. Por eso son el primer lugar donde mirar:

  • Formatos modernos: WebP y AVIF comprimen mucho más que JPG con calidad visual similar.
  • Tamaños correctos: servir una imagen de 2000px donde se muestra en 400px es desperdicio puro.
  • Carga diferida: las imágenes fuera de pantalla se cargan cuando están a punto de verse.
  • Recortes desde el diseño: decidir la composición en el mockup evita retrabajo de optimización.
Regla práctica

Si una imagen se puede recortar, comprimir o reemplazar por CSS sin perder impacto visual, hazlo antes de pensar en optimizar JavaScript.

Tipografías que no se sienten

Una fuente con varios pesos y estilos puede pesar más que todo tu CSS junto. Algunas prácticas que uso:

  • Cargar solo los pesos que el diseño realmente usa.
  • Usar subconjuntos (subsets) con las letras de los idiomas del sitio.
  • Indicar font-display: swap para no bloquear el texto.

Menos JavaScript, más estrategia

El JavaScript es el recurso más caro de la web moderna: no solo se descarga, también se parsea y se ejecuta. La solución no es escribir "mejor JavaScript", sino escribir menos y cargarlo solo donde hace falta. Técnicas como las islas de Astro, el code splitting y el lazy loading convierten esta idea en práctica.

El contenido que el usuario ve primero

La métrica LCP (Largest Contentful Paint) mide cuándo aparece el elemento más grande de la pantalla: normalmente un título, una imagen o un hero. Diseñar pensando en qué elemento debe verse primero y cómo cargar ese camino de forma prioritaria mejora la percepción de velocidad más que mil optimizaciones.

Cómo lo mido

No basta con "sentir" que el sitio es rápido. Uso herramientas que dan datos accionables:

  • Lighthouse y las Core Web Vitals para una primera lectura.
  • WebPageTest para ver cómo carga el sitio en celulares reales.
  • CrUX (datos de usuarios reales de Google) para validar la experiencia en producción.
"Cada kilobyte que no envías es un kilobyte que nadie tiene que esperar."

Conclusión

La velocidad se diseña, no se parchea. Cuando imágenes, tipografías y JavaScript se piensan con un presupuesto de rendimiento desde el inicio, el resultado es un sitio rápido por construcción, con mejores conversiones y mejor posicionamiento.