Rendimiento Web Móvil: Optimización y Mejores Prácticas

Por qué el rendimiento móvil es diferente

Los dispositivos móviles tienen menor capacidad de CPU y memoria. El tiempo de parse y compile de JavaScript es mayor.

Condiciones de red: 3G/4G/5G, WiFi. Ancho de banda y latencia variables. Los usuarios móviles pueden estar en conexiones más lentas.

Batería: El JavaScript pesado y las animaciones consumen batería. Rendimiento = duración de la batería.

Tamaño de pantalla: Imágenes y layout optimizados para pantallas pequeñas. Mobile-first en lugar de desktop-first.

Diseño Mobile-First

CSS mobile-first: Estilos móviles primero, luego override con media query para desktop. @media (min-width: 768px) para pantallas grandes.

Meta tag viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Escalado correcto en móvil.

Touch targets: Botones y enlaces de al menos 48x48px. Fácilmente tocables con el dedo. 8px de espacio entre elementos cercanos.

Tamaño de fuente: Mínimo 16px. iOS hace zoom en inputs menores de 16px. Esto rompe la UX.

Navegación: Menú hamburguesa, navegación inferior, barra de pestañas. Navegación accesible en móvil.

Optimización de Imágenes

Imágenes responsivas: Tamaño correcto con srcset y sizes. No cargue imágenes grandes en móvil.

Compresión de imágenes: Formato WebP/AVIF. Quality 75-80 suficiente para móvil. Comprima con TinyPNG, Squoosh.

Lazy loading: Cargue de forma lazy las imágenes debajo del fold. Atributo loading="lazy".

Placeholder: Placeholder blur-up o skeleton. Muestre placeholder mientras la imagen carga.

CDN: Nodo CDN más cercano para usuarios móviles. CDN globales como Cloudflare, Fastly.

Optimización de JavaScript

Tamaño de bundle: Bundle más pequeño en móvil. Cargue solo el código necesario con code splitting.

Tree shaking: Elimine el código no utilizado. Use ES modules.

Lazy loading: Cargue de forma lazy los módulos pesados (chart, editor, map). Con dynamic import().

Polyfill: Elimine los polyfills innecesarios. Use APIs nativas en lugar de core-js (los navegadores modernos las soportan).

Web Workers: Separe los cálculos pesados del hilo principal. No bloquee el hilo de UI en móvil.

Optimización de Red

HTTP/2 o HTTP/3: Procesamiento paralelo de múltiples solicitudes. Reduce la latencia en móvil.

Compresión: Comprima los recursos basados en texto con Gzip/Brotli. Ahorro del 60-80%.

Caching: Cache offline con Service Worker. Carga rápida en visitas repetidas con estrategia cache-first.

Prefetch/Preconnect: Precargue los recursos críticos. Establezca la conexión DNS y TCP por adelantado.

Resource hints: Precargue CSS y fuentes críticas con <link rel="preload">.

Pruebas y Monitoreo

Pruebas en dispositivo real: Pruebe en dispositivos móviles reales. La emulación de dispositivo de Chrome DevTools no es suficiente.

Lighthouse mobile: Auditoría de rendimiento móvil. Pruebe con throttling (CPU 4x slowdown, slow 4G).

WebPageTest: Pruebe con dispositivo móvil y perfil de conexión. Análisis de filmstrip y waterfall.

RUM: Datos de usuarios móviles reales. Segmentación por tipo de dispositivo, velocidad de conexión.

Core Web Vitals: Métricas separadas para móvil y escritorio. Informe móvil en Google Search Console.