Cómo aumentar el rendimiento de los sitios webs en móviles

Cada vez es más importante que los sitios que desarrollemos se vean bien en los dispositivos móviles, ya sean webs de escritorio o adaptados a esos terminales. Y tanto cómo que se vean bien es que los sitios se carguen rápido en los smartphones, ya que los usuarios de móviles se enfrentan a problemas que a veces no contemplamos.

Los problemas más comunes que tiene los usuarios móviles

  • Redes más lentas. Razón por lo que es importante la reducción de solicitudes y la carga de ellas. Las pruebas que hacemos suelen estar pensadas cuando estemos por WiFI, pero es importante testear en situaciones más limites con 3G o incluso con conexiones GPRS.

  • Navegadores móviles menos potentes al analizar HTML y ejecutar Javascript. En los terminales móviles existe un abanico de modelos muy distintos entre sí. Desde los Android o iPhone más avanzados hasta los terminales básicos. Por lo que no hay que dejar a ninguno fuera, o al menos llevar a un consenso de dónde está el corte.

  • Las cachés de los navegadores móviles son mucho más pequeñas que los navegadores de escritorio. No podemos esperar a que la caché nos solucione la vida pensando que la carga más lenta será la primera y que del resto ya se ocupará ella. Hay que tener muy en cuenta el peso de cada carga en caché y lo que nos admite cada navegador.


Tres estrategias principales para mejorar el rendimiento

  • Reducir el número de peticiones HTTP necesarias para obtener los recursos de cada página. Entre las medidas a tomar están las de eliminar las redirecciones, comprimir y minimizar los datos o aplazar la presentación de HTML

  • Reducir el tamaño de la carga útil necesaria para cumplir con cada solicitud. Aquí nos podemos ajustar la carga de script, aligerar las imágenes al menos en la primera carga, apoyarnos en protocolos como SPDY que puede mejorar el rendimiento entre 27% y 60% y sobre todo usar la precarga inteligente que se adapte al tipo de conexión.

  • Optimizar el lado del cliente y la eficiencia de procesamiento de prioridades de ejecución del script. Evitando la carga inicial de script pesados, usar ajax para recuperar datos de forma progresiva, simplificar el HTML usando un buen marcaje HTML5 más ligero y semántico.

Portada de Genbeta