5 errores de maquetación que ralentizan tu web
Hasta la web más bonita puede ir lenta si la maquetación está mal hecha. Muchos desarrolladores, sobre todo al principio, se centran en el aspecto y se olvidan del rendimiento. El resultado es una web que tarda 10 segundos en cargar, «salta» mientras se carga o va a tirones en el móvil.
Veamos los 5 errores de maquetación más habituales que perjudican la velocidad y la experiencia de usuario de una web.
1. Imágenes sin optimizar
La mayoría de webs van lentas precisamente por culpa de imágenes pesadas:
- Se usan archivos de 1–3 MB en lugar de versiones optimizadas en WebP.
- No hay srcset ni sizes: el navegador carga una única imagen grande incluso en pantallas de móvil.
- No hay carga diferida (loading="lazy"): todas las imágenes se cargan a la vez, incluso las que quedan fuera de la primera pantalla.
📌 Solución:
- Usa WebP o AVIF siempre que puedas.
- Comprime las imágenes con TinyPNG, Squoosh o ImageMagick.
- Añade loading="lazy" y srcset para que sean adaptables.
2. Mal uso de CSS y de las clases
- Archivos CSS enormes llenos de código que no se usa.
- Repetir los mismos estilos en lugar de crear clases reutilizables.
- Usar estilos en línea sin necesidad, lo que impide el almacenamiento en caché.
También van lentas las webs hechas con frameworks sin eliminar el CSS «muerto» (por ejemplo, Tailwind sin PurgeCSS o sin una limpieza basada en el contenido).
📌 Solución:
- Usa PostCSS, PurgeCSS o las optimizaciones integradas de Vite/Webpack.
- Minifica tu CSS.
- Usa sistemas de componentes (por ejemplo, Tailwind + un UI kit) para mantener la coherencia.
3. Abusar de JavaScript
A veces, tareas sencillas de la interfaz se resuelven con librerías JS pesadas:
- Un slider que arrastra 300 KB de jQuery más un plugin, cuando bastaría con CSS.
- Los scripts se ejecutan de forma síncrona y bloquean el renderizado.
- El JS añade o cambia estilos al cargar → la web «salta».
📌 Solución:
- Aplaza la carga de los scripts (defer, async).
- Usa solo lo que necesitas (por ejemplo, Swiper en lugar de sliders pesados).
- Minifica y empaqueta tus scripts.
4. Sin diseño adaptable ni media queries
- En el móvil, el contenido se sale de la pantalla.
- Las imágenes y los bloques no se escalan e ignoran el viewport.
- Se usan valores fijos en px en lugar de rem o %.
Una web así no solo es incómoda: Google además la posiciona peor por su mala optimización para móviles.
📌 Solución:
- Usa @media queries y un enfoque mobile-first.
- Trabaja con unidades relativas (rem, %, vw).
- Prueba en DevTools con distintas resoluciones.
5. Cumulative Layout Shift (CLS): «saltos» durante la carga
Es cuando el contenido salta porque las fuentes, las imágenes o los bloques de anuncios cargan tarde y sin dimensiones declaradas. Empeora la percepción de la web y tus métricas de Core Web Vitals.
📌 Solución:
- Indica width y height en las imágenes.
- Carga las fuentes de forma asíncrona y usa font-display: swap.
- Reserva de antemano el espacio para los bloques dinámicos (por ejemplo, 300px para un banner).
Conclusión
La maquetación no va solo de clavar cada píxel: también va de rendimiento. Una web rápida significa mejor experiencia de usuario, mejores posiciones en los buscadores y más conversiones. Revisa tu código, haz pruebas en Lighthouse y no olvides que la velocidad también es parte del diseño.