Cuando un usuario accede a tu página web corporativa desde su ordenador o su smartphone, o bien cuando se descarga tu app, la velocidad importa. Si para echar un ojo a los productos que ofreces ha de esperar unos segundos para que se cargue la información y las imágenes, lo más probable es que acabe marchándose y consultando otra página.
Además, por lo general, tampoco va a detenerse a explorar todos los ítems que recoge tu página o tu aplicación: en un primer momento, le interesará ver solo los productos que están en los primeros puestos y, si tiene más interés, continuará desplazando el pulgar o el cursor hacia abajo o pulsará el botón correspondiente para descubrir nuevos objetos.
Por ello, es importante que detrás de las bambalinas de nuestra web o nuestra app incluyamos funciones para que esté lo más optimizada posible, y usar imágenes de pequeño tamaño no basta para conseguirlo. Lógicamente, esa optimización será especialmente importante cuando nuestra web haga uso de grandes galerías de imágenes.
Por defecto, el sistema de carga de una web baja todas las imágenes al abrirse, lo que puede conllevar una espera para el usuario tan molesta como innecesaria, ya que no desea ver todas las imágenes en un primer momento. Además, si al abrir la web o la app se descarga toda una galería completa de imágenes en la caché, se gastarán recursos, como memoria y ancho de banda. Por eso, es mucho mejor que la carga de elementos tenga lugar a medida que el usuario se desplaza en la página y solicita ver otros con esa acción.
En desarrollo web se utiliza para ello una técnica conocida como lazy loading (algo así como carga diferida), un patrón de diseño que consiste en retrasar la carga de un objeto hasta el mismo momento en que se utiliza, es decir, hasta el instante en el que un usuario lleva a cabo una acción que requiere esa información (por ejemplo, desplazarse hacia abajo en la página).
A medida que hace scroll, las imágenes de marcador de posición (por ejemplo, la clásica ilustración de carga que muestra un círculo coloreándose progresivamente) serán reemplazadas con el recurso que el usuario necesite ver gracias a la carga de un nuevo módulo o elemento.
De esta forma, las imágenes que en principio no aparezcan en pantalla solo serán visibles cuando el usuario llegue hasta ellas. Si abandona la página antes, las imágenes situadas en la parte inferior de la página no se habrán descargado.
Así, se logra que el usuario tenga toda la información de un vistazo en la pantalla, en poco tiempo, sin consumir demasiados datos y sin emplear mucho memoria para descargarse imágenes que en realidad nunca aparecerán. Lógicamente, no hay una forma única de implementar el lazy loading. Por ejemplo, aquí puedes encontrar cinco técnicas para usar esta estrategia con JavaScript en tu web.
Uno de los usos más habituales del lazy loading es su implementación en las ListView de las aplicaciones Android. Como sabrás, una ListView es un grupo de elementos organizados de forma vertical que hace uso del scrolling para simplificar la visualización y que podamos explorarlos.
Los elementos de la lista se insertan automáticamente con un Adapter que toma contenido de una fuente (una matriz o una base de datos) y lo transforma en un elemento de la lista en la interfaz de usuario. Habitualmente, la ListView de cualquier aplicación permite mostrar una lista con elementos de texto y, opcionalmente, con una imagen que identifique el elemento. Por ejemplo, si la aplicación es turística, pueden aparecer diferentes ciudades, cada una con una instantánea descriptiva y un breve texto.
Generalmente, estas ListView se respaldan con un caché de mapa de bits para ofrecer un acceso rápido a esas imágenes y que no tengamos que cargarlas posteriormente. Sin embargo, las imágenes pueden llegar a ocupar demasiado. Hay que tener en cuenta que, si almacenamos muchas, se sobrepasará la memoria asignada a la aplicación y la herramienta podría fallar, independientemente de que esas imágenes se descarguen de forma síncrona o asíncrona.
Por eso, es necesario un equilibrio para lograr que el cacheado de imágenes no acabe ralentizando la aplicación. Para ello, los desarrolladores de Android disponen, por ejemplo, de la clase LruCache, adecuada para almacenar en caché los mapas de bits y que además recicla las imágenes más antiguas que se hayan utilizado antes de exceder la memoria asignada.
Aquí puedes ver un ejemplo de cómo gestionar adecuadamente la memoria en una ListView de Android equilibrando con código el almacenamiento en el servidor, en el disco duro del móvil y en la memoria que se almacena en el heap. Además, se ha optimizado la aplicación usando la técnica del lazy loading.
En GitHub podemos encontrar bibliotecas open source que podemos usar para que las ListViews de nuestra aplicación estén optimizadas gracias al lazy loading y al correcto cacheado de las imágenes. Universal Image Loader, LazyList, Picasso y Glide son algunas de ellas. Además, en este hilo de StackOverflow, algunos programadores han compartido líneas de código que recogen otras alternativas que bien podrían adaptarse a las necesidades específicas de tu aplicación.
En este tutorial de Google también enseñan cómo aplicar la técnica del lazy loading a aplicaciones creadas con Polymer, una biblioteca JavaScript de código abierto para la creación de apps a partir de elementos reutilizables.
Así que, como habrás podido comprobar, hay diferentes alternativas para optimizar tu página o tu aplicación para que los usuarios puedan desplazarse a través de una galería de imágenes sin problemas. En lugar de ofrecerles todo el contenido al instante, lo mejor es que los elementos se vayan cargando poco a poco para que el internauta pueda disfrutar de todos los contenidos sin ningún obstáculo, y sin ni siquiera darse cuenta de que el lazy loading está haciendo su trabajo entre bambalinas.
Implantación de sistemas informáticos, desarrollo de software, soluciones Salesforce... NTS es una apuesta segura
Contacte con nosotros, le informaremos.