Los cuatro pasos para la optimizacion de aplicaciones para moviles

Crear aplicaciones web para dispositivos móviles requiere algo más de detalle a tener en cuenta que para navegadores de escritorio, ya que estos dispositivos son más pequeños, su pantalla por lo tanto también lo es y sus requisitos de rendimiento también son menores. Es por lo tanto necesario y vital realizar unas buenas prácticas sobre optimización de sitios web para móviles en tan sólo cuatro pasos:

1. Declara el tamaño del viewport
2. Utiliza CSS Sprites
3. Usa IDs fragmentados
4. Activa las cabeceras HTTP de caché

1.- Declara el tamaño del viewport

Algunos navegadores realizan efectos de zoom para redimensionar las páginas para adaptarlas al tamaño de la pantalla, esto puede tener un efecto adverso en páginas que ya han sido diseñadas para pantallas pequeñas. Simplemente hay que poner un meta-dato en la cabecera del documento de esta forma:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


2.- Utiliza CSS Sprites

Las aplicaciones web contienen un número diverso de imágenes estáticas, repetidas y separadas se sirven con distintas peticiones http. La técnica consiste en unirlas y servirlas bajo demanda mediante el uso de CSS tal y como se explica en otro post "CSS Sprites, optimizando la web"

3.- Usa IDs Fragmentados

Las páginas grandes en las aplicaciones web pueden mostrar y ocultar contenido, pero puede darse ciertas ocasiones en las que la navegación se vea perjudicada, ya que el botón retroceso del navegador no funcionará adecuadamente. En este caso la técnica a usar pasa por añadir un identificador único al final de la URI.

http://myapp.example.org/myapp#view




4.- Activa las cabeceras HTTP de control de caché

Los recursos dinámicos que cambiar ocasionalmente pueden ser también cacheados a través de una URI que contenga un hash del contenido del recurso. Usando esta técnica el navegador no tendrá que consultar constantemente las cabeceras de control de la caché, por ejemplo:


<img src="http://www.example.com/userimages/joeblogs-67f90da089da">


Para realizarlo primero hay que poner la política de caché a "Never expires" en la cabecera http "Expires" y después añadir el hash a las URIs.

Otra posible función de esta técnica es "cachear" el contenido AJAX para móviles al igual que se hace con el contenido primario, reduciendo de esta manera la cantidad de peticiones necesarias al servidor, esto se puede hacer normalmente con las configuraciones de las cabeceras "Expires" y "Cache-control".