Cómo evitar que tu web se sienta lenta en móviles de gama baja: 4 cuellos de botella del frontend y cómo medirlos
Publicado el 09 de octubre de 2026 · Lectura: 7 minutos · Por Violetta
¿Sabes esa sensación de abrir una web en el móvil de tu primo, ese que compró por 80 euros en un mercadillo, y ver cómo la pantalla se queda en blanco durante tres segundos eternos? Pues eso no es culpa de su móvil. Es culpa tuya. Y mía. Y de todos los que alguna vez hemos dicho "bueno, en mi iPhone va fino".
Hoy te traigo un caso real, con nombres cambiados y vergüenzas intactas, de cómo un equipo rescató una web que se arrastraba como caracol en dispositivos modestos. Y de paso, te cuento los cuatro cuellos de botella que casi siempre son los culpables, y cómo medirlos sin volverte loco.
Abróchate, que empezamos.
El caso: "La web que solo funcionaba en el despacho"
Imagina una tienda online pequeña, de esas que venden cosas hechas a mano. Bonita, moderna, con animaciones suaves y tipografías preciosas. En el portátil del diseñador volaba. En el móvil de gama alta del jefe, volaba. En los móviles del 60% de sus clientes reales... se moría.
El síntoma era siempre el mismo: el usuario entraba, veía el logo, y luego un vacío blanco. A veces cinco segundos. A veces diez. Y cuando por fin aparecía el contenido, el scroll iba a tirones, como si la página tuviera hipo.
El equipo había hecho lo típico: contratar más ancho de banda, meter una CDN, rezar un poco. Nada funcionó. Porque el problema no estaba en el servidor. Estaba en el frontend. Y nadie lo estaba midiendo donde dolía.
Paso 1: Dejar de medir en el móvil equivocado
Lo primero que hicieron fue abrir las herramientas de desarrollo en el navegador del portátil, activar el modo responsive, y decir "ah, pues va bien". Error clásico.
El modo responsive simula el tamaño de pantalla, pero no la potencia. No simula un procesador de gama baja, ni poca memoria, ni una red 3G que va y viene.
La solución fue simple y brutal: activar el throttling de CPU. En las herramientas del navegador puedes simular que tu ordenador es cuatro o seis veces más lento. Y ahí, de repente, la web bonita se convirtió en un desastre. Las animaciones se atascaban. El scroll temblaba. Los formularios tardaban en responder.
Moraleja: si no pruebas con la CPU frenada, no estás probando móviles de gama baja. Estás probando tu portátil disfrazado.
Cuello de botella 1: El JavaScript que no para de hablar
El primer culpable apareció rápido. La web cargaba un montón de scripts de terceros: analítica, chat, mapas, un carrusel, un sistema de notificaciones... Cada uno pidiendo su turno en el hilo principal del navegador.
En un móvil potente, eso se gestiona. En uno modesto, es como meter cinco conversaciones a la vez en una habitación pequeña. Nadie se entiende.
¿Cómo medirlo? Abre las herramientas del navegador, ve a la pestaña de rendimiento, y graba lo que pasa cuando carga la página. Vas a ver barras largas de color amarillo o morado. Eso es JavaScript bloqueando. Si esas barras ocupan más de la mitad del tiempo de carga, tienes un problema.
La solución del equipo fue radical: cargar solo lo esencial al principio, y el resto bajo demanda. El chat no aparece hasta que el usuario hace scroll. Los mapas, solo si los pide. El carrusel, solo si está visible en pantalla.
Resultado: el tiempo hasta que la página era usable bajó a la mitad.
Cuello de botella 2: Imágenes que pesan como ladrillos
El segundo culpable era más viejo que el hilo negro: imágenes enormes. Fotos de productos de 4000 píxeles de ancho, en formato pesado, servidas tal cual a un móvil con pantalla de 5 pulgadas.
Es como enviar un camión para llevar una carta.
¿Cómo medirlo? Mira el tamaño total de la página en la pestaña de red. Si las imágenes suman más de un megabyte, estás enviando camiones. También puedes mirar cuánto tarda en pintarse el elemento más grande visible (eso que los de métricas llaman LCP, pero no te agobies con siglas).
La solución: imágenes en formatos modernos, con tamaños adaptados a la pantalla, y carga diferida para las que están fuera de vista. El equipo redujo el peso de las imágenes un 70%. La web empezó a respirar.
Cuello de botella 3: Fuentes y estilos que llegan tarde
El tercer problema era más sutil. La web usaba tipografías personalizadas. Bonitas, sí. Pero el navegador no podía pintar el texto hasta que llegaran. Y mientras tanto, o mostraba texto invisible, o mostraba una fuente fea y luego cambiaba de golpe. Ese salto se llama "flash" y es feo de narices.
En un móvil lento, ese momento duraba segundos.
¿Cómo medirlo? Graba la carga y mira cuándo aparece el texto. Si hay un hueco visible entre que carga la estructura y aparece el contenido legible, ahí está el problema.
La solución: cargar solo los pesos de fuente necesarios, avisar al navegador de que use una fuente de respaldo mientras llega la buena, y evitar bloquear el renderizado por una tipografía. Suena técnico, pero es como decirle al navegador: "no esperes al fontanero para abrir el grifo, usa el que tienes mientras llega".
Cuello de botella 4: Animaciones que se creen protagonistas
El cuarto culpable era el más doloroso, porque era el más bonito. La web tenía animaciones por todas partes: al hacer scroll, al pasar el ratón, al cargar cada sección. En un portátil, precioso. En un móvil modesto, una tortura.
Cada animación que toca propiedades como el tamaño o la posición obliga al navegador a recalcular toda la página. Eso, multiplicado por veinte elementos, es muerte por mil cortes.
¿Cómo medirlo? Graba la página mientras haces scroll. Si ves que los fotogramas se saltan, que el scroll va a tirones, ahí está. También puedes mirar cuánto tiempo pasa el navegador pintando en lugar de calculando.
La solución: animar solo propiedades baratas (como la opacidad o las transformaciones), limitar las animaciones a lo que realmente aporta, y desactivarlas en dispositivos que se declaran lentos.
El equipo dejó solo tres animaciones. La web seguía siendo bonita. Pero ahora también era usable.
El resultado: de tortuga a liebre (sin cambiar de móvil)
Después de atacar los cuatro frentes, la web cargaba en menos de tres segundos en un móvil de gama baja con red lenta. El scroll iba suave. Los formularios respondían. Los usuarios dejaron de irse antes de ver el primer producto.
Y lo más importante: no cambiaron de servidor, ni de framework, ni de hosting. Solo dejaron de ignorar a los móviles que no salen en los anuncios.
Lo que aprendí (y lo que deberías llevarte tú)
La lección no es "optimiza tu web". Eso ya lo sabes. La lección es que medir en el sitio equivocado es peor que no medir.
Puedes tener las métricas más bonitas del mundo en tu portátil, pero si tu usuario real está en un móvil de 80 euros con 3G, tus métricas no valen nada.
Los cuatro cuellos de botella que vimos hoy no son exóticos. Son los de siempre:
- JavaScript que bloquea
- Imágenes que pesan
- Fuentes que llegan tarde
- Animaciones que se pasan de listas
Y todos se detectan con las herramientas que ya tienes en el navegador.
No necesitas un laboratorio. Necesitas frenar la CPU, mirar la pestaña de red, y grabarte haciendo scroll.
Comentarios
Deja un comentario