¿Por qué debería importarte la velocidad?
Antes pensaba que la velocidad del sitio era una de esas cosas que obsesionan a los desarrolladores pero que los usuarios realmente no notan. Estaba equivocado.
Esto es lo que me hizo cambiar de opinión: BBC descubrió que perdía el 10% de usuarios por cada segundo adicional que tardaban sus páginas en cargar. Walmart vio un aumento del 2% en conversiones por cada segundo de mejora en el tiempo de carga.
Eso es dinero real saliendo por la puerta.
Más allá de las conversiones, Google usa la velocidad del sitio como factor de posicionamiento. Un sitio lento significa que menos personas te encuentran en los resultados de búsqueda. ¿Y los que sí lo hacen? Se van antes de ver lo que ofreces.
También hay algo psicológico en juego. Un sitio rápido se siente profesional y confiable. Un sitio lento se siente roto, incluso si todo eventualmente carga.
Tienes un sitio, ahora hazlo rápido
Si seguiste mi guía sobre construir un sitio web desde cero con IA, probablemente ya tengas algo en línea. Pero la IA no siempre acierta con el rendimiento en el primer intento. He visto a Claude generar sitios hermosos que sacan 60 en Lighthouse.
Eso tiene arreglo. Veamos qué es lo que realmente hace la diferencia.
Empieza midiendo
Antes de tocar nada, ejecuta Google Lighthouse en tu sitio. Está integrado en Chrome DevTools (clic derecho, Inspeccionar, pestaña Lighthouse).
El informe te puntúa de 0 a 100 y te dice exactamente qué está ralentizando las cosas. Guarda una captura de pantalla para comparar después de hacer cambios.
Presta atención a los Core Web Vitals:
Largest Contentful Paint (LCP) mide qué tan rápido carga tu elemento visible más grande. Google quiere esto por debajo de 2.5 segundos.
First Input Delay (FID) mide qué tan rápido responde la página cuando los usuarios interactúan. Google quiere esto por debajo de 100 milisegundos.
Cumulative Layout Shift (CLS) mide si las cosas saltan mientras se carga. ¿Conoces eso de que estás a punto de tocar un enlace y un anuncio lo empuja hacia abajo? Eso es un mal CLS.
Las correcciones que realmente importan
Las imágenes suelen ser el mayor problema
El 80% de los sitios lentos que he visto tienen el mismo problema: imágenes enormes. Alguien subió una foto de 4000x3000 para una miniatura que se muestra a 400x300 píxeles.
Los navegadores son tontos con esto. Descargan el archivo completo aunque el CSS lo reduzca. El tamaño del archivo es lo que importa.
Usa un CDN con optimización automática. Cloudinary, Imgix o Netlify Image CDN pueden redimensionar y comprimir sobre la marcha. Subes una vez, ellos sirven el tamaño correcto para cada dispositivo.
Convierte a formatos modernos. WebP y AVIF son 25-50% más pequeños que JPEG con calidad similar. La mayoría de los CDNs manejan esto automáticamente.
Añade atributos de ancho y alto. Esto previene el salto de diseño mientras cargan las imágenes.
<img src="foto.jpg" width="800" height="600" alt="Descripción">
Carga diferida para imágenes debajo del pliegue. No hay razón para cargar imágenes a las que el usuario aún no ha llegado con el scroll.
<img src="foto.jpg" loading="lazy" alt="Descripción">
Extrae tu CSS crítico
Cuando un navegador carga tu página, descarga y analiza todo tu archivo CSS antes de renderizar nada. Si tu hoja de estilos pesa 100KB, el navegador espera por todo aunque solo se necesiten 10KB para lo que los usuarios ven inicialmente.
La solución: extrae el CSS necesario para el contenido visible inicialmente e insértalo en el <head> de tu HTML. El resto carga después, pero los usuarios ven una página con estilos casi inmediatamente.
Construí una herramienta para esto: Generador de CSS Crítico. Pega tu URL, extrae solo los estilos necesarios. La página incluye una guía de implementación.
Reduce las peticiones HTTP
Cada archivo que tu página necesita requiere un viaje de ida y vuelta al servidor. Incluso con HTTP/2, cada petición tiene sobrecarga: búsqueda DNS, conexión TCP, handshake SSL.
Mira tu informe de Lighthouse para ver qué peticiones tardan más. Culpables comunes:
- Múltiples archivos CSS que podrían combinarse
- Archivos de fuentes para pesos que no estás usando
- Scripts de terceros para funciones que nadie usa
- Demasiadas imágenes sin carga diferida
Ten cuidado con los scripts externos
Ese widget de chat, constructor de popups, suite de analítica, barra de compartir en redes sociales... cada uno añade tiempo de carga.
Esto es lo que hace problemáticos a los scripts externos: no los controlas. Si su CDN tiene un mal día, tu sitio se ralentiza.
Audita qué se está ejecutando en tus páginas. Abre DevTools, pestaña Network, filtra por "JS". Podrías encontrar scripts de campañas que terminaste hace meses.
Para los scripts que sí necesitas, usa defer o async para que no bloqueen el renderizado.
Minifica tu código
La minificación elimina espacios en blanco, comentarios y nombres largos de variables. Un archivo de 100KB podría convertirse en 60KB.
La mayoría de las herramientas de build (Vite, Webpack, Parcel) hacen esto automáticamente. Para sitios simples, los minificadores en línea funcionan bien.
Elige un buen hosting
Las optimizaciones más sofisticadas no ayudarán si tu servidor tarda 500ms en responder. Eso es medio segundo perdido antes de que empiece a cargar nada.
Busca hosting con tiempos de respuesta menores a 200ms y servidores cerca de tus usuarios. Para sitios estáticos, Cloudflare Pages, Netlify y Vercel funcionan bien y tienen planes gratuitos.
Mantenlo rápido con el tiempo
Los sitios se vuelven más lentos gradualmente mientras la gente añade funciones e imágenes sin pensar en el efecto acumulativo. He visto sitios pasar de 90 a 65 en Lighthouse en un año solo con actualizaciones normales.
Pon un recordatorio para ejecutar Lighthouse mensualmente. Toma dos minutos y detecta regresiones antes de que se acumulen.
Reflexiones finales
Empieza con las imágenes y el CSS crítico. Esos dos generalmente te dan las mayores mejoras con el menor esfuerzo. Luego revisa las recomendaciones de Lighthouse una por una.
Y si estás usando IA para construir sitios, pregúntale específicamente sobre rendimiento. Añade "optimizar para una puntuación de rendimiento en Lighthouse superior a 90" a tu CLAUDE.md y mira qué pasa.
Espero que esto te ayude.