Como hacer tu sitio móvil más rápido.

25-07-2011

En una encuesta realizada por la empresa Compuware se reveló que los usuarios de internet móvil esperan un tiempo de respuesta igual al de los sitios de escritorio, a pesar de que la capacidad de procesamiento de un teléfono, aunque han mejorado mucho, no es ni de cerca la de una computadora de escritorio promedio. Además que el ancho de banda deja a veces mucho que desear y la información no baja igual de rápido.

Esto no le importa al usuario promedio, ellos quieren sus sitios y los quieren ya, al grado que casi la mitad de ellos no regresaría a un sitio que les haya resultado lento. Y por lento ellos quieren decir que haya tardado más de cinco segundos en aparecer algo.

Algunos teléfonos no muestran sitios que resultan demasiado grandes.

Este es un cliente perdido. Foto de padday

De por sí la velocidad de carga del sitio ya era importante, ahora se vuelve todavía más. Con todos los dispositivos móviles que andan por ahí y con cada vez más gente usándolos para acceder al internet mientras andan por la calle haciendo sus cosas, el tener un buen sitio pensado para el usuario móvil puede ser de importancia vital.

Para hacer el sitio más rápido en cargar puedes seguir estas recomendaciones:

1. No abuses del javascript. Los scripts que vayas a usar de preferencia ponlos al final de manera que el navegador pueda cargar y mostrar el contenido primero.

2. Ten cuidado con la publicidad. A veces los servidores de publicidad se atoran y pueden dejar a tu usuario esperando en lo que responden, por supuesto el usuario no le va a echar la culpa a ellos, sino a tu sitio por ser lento.

3. Pon el contenido relevante antes. No me refiero a ponerlo arriba del “doblez” (the fold) que no existe, sino a ponerlo antes en el código, en vez del encabezado y todo eso que por lo general ponemos hasta arriba y al usuario no le interesa. En ningún lado está escrito que tengamos que escribir el código en orden de aparición, simplemente a eso estamos acostumbrados. Es mejor práctica escribir el código en orden de relevancia y después acomodar donde va todo con css.

4.Usa sprites. Cada vez que llamas a una imagen del servidor el navegador tiene que esperar a que ese servidor responda y a que mande la imagen. “Sprites” es cuando pones todas las imágenes (o las que tenga sentido poner juntas) en un solo archivo grandote y luego usas css para indicar que parte de esa imagen vas a usar, por ejemplo en un fondo o en un botón. De esa manera sólo llamamos a un archivo. Claro, tarda más en bajar, pero de todos modos ibas a bajar toda esa información repartida en archivitos.

5. Optimiza las imágenes. Ya que estamos hablando de las imágenes, puedes usar las diferentes hojas de estilo del sitio móvil para cargar imágenes de fondo y del diseño distintas a las del sitio de escritorio. Imágenes que pesen menos y se vean mejor en una pantalla pequeña. Tal vez suene obvio, pero es fácil de olvidar. También es buena idea usar javascript para decidir si se cargan ciertas imágenes ilustrativas o si sólo ponemos un vínculo hacia ellas.

Son mis pequeñas recomendaciones. Si tienes alguna otra o una observación, me lo puedes dejar en los comentarios.

Roberto Baca

Escribo cosas de vez en cuando