Lazy Loading - Hagamos las webs más rápidas y menos pesadas

Revisando la web de un cliente tenía algunos problemas de carga en los navegadores y vimos que teníamos varias posibilidades de trabajar en la optimización. Por un lado, se podían revisar las queries a la base de datos para reducir el número y aumentar eficiencia. Y por otro trabajar con el renderizado de la web en los navegadores. En este artículo nos centraremos en esta segunda parte.

Se trata de una web con una gran cantidad de recursos multimedia, miles de fotos (galerías, sliders) y videos. Nuestro objetivo era reducir los tiempos de carga sin modificar el contenido.

Realizamos un primer análisis de la web utilizando nuestra herramienta Page Size Check. [1]

Con los resultados obtenidos pudimos confirmar que los retrasos en la carga del DOM y el renderizado de las páginas era debido al elevado número de recursos multimedia. En APSL hace años que utilizamos thumbor para renderizar las imágenes en las webs. Thumbor es una herramienta para la generación de thumbnails y redimensionamiento de imágenes con multitud de opciones. Entre otras cosas, Thumbor reduce el peso de las imágenes optimizándolas para la web. Era una primera ganancia pero aún así no era suficiente.

Una vez localizado el problema, se trataba de buscar una solución que se ajustará al requisito de no modificar el contenido: ahí fue cuando entró en juego la técnica del Lazy Loading de imágenes.

Lazy Loading es una técnica que consiste en no cargar los recursos multimedia de la web hasta que no aparezcan en la pantalla. De esta forma, al llamar a un número menor de recursos en la carga inicial de la página, se reducen los tiempos de carga del DOM y por tanto del tiempo de carga inicial de la página.

Ya que implementar una nueva técnica aumenta la complejidad, buscamos una herramienta que sea simple de aplicar. Encontramos dos alternativas:

• LazyLoad
• Native Lazy Load

Aunque las dos opciones cumplen nuestros requisitos, nos decantamos por LazyLoad porque Native Lazy Load aún no está soportado por la mayoría de los navegadores. Tal como se indica en CSS tricks y Can I Use (Ago’19)

LazyLoad es un script rápido, ligero y flexible, independiente del framework javascript que utilicemos, que acelera las aplicaciones web al cargar el contenido multimedia cuando aparece en la ventana gráfica. El script está escrito en JavaScript "vainilla", funciona con imágenes ‘responsive’ y admite la carga diferida nativa.

Ventajas:

• Al estar escrito en Javascript puro, se puede utilizar con cualquier framework como Angular, React o Vue, sin la necesidad de incluir jQuery.
• Aprovecha la API IntersectionObserver en lugar de los eventos de ‘scroll’ o ‘resize’, haciendo un uso más óptimo de la CPU
• Soporta imágenes ‘responsive’
• No esconde las imágenes a los motores de búsqueda al utilizar el IntersectionObserver, por lo que se trata de una herramienta ‘SEO-friendly’. Esto es debido a que los motores detectan la url que aparece en el tag imagen.

Su utilización es muy simple:

• Añadimos la librería a nuestro código
• Instanciamos el script indicando el selector (preferiblemente una clase) que se añadirá a las imágenes para que apliquen el lazy loading, tal como se muestra en la siguiente imagen:
• Al declarar el tag de la imágen, añadirle el selector indicado y en lugar de añadir el atributo ‘src’ añadirlo como ‘data-src’:

El script también permite aplicar la técnica a imágenes que estén como fondo de algún elemento:

Una vez implementada la técnica del LazyLoad y desplegado en producción, se volvió a realizar el análisis de la web utilizando Page Size Check. Los resultados obtenidos fueron incluso mejor de lo esperado!

A continuación presentamos los datos más significativos de la comparación de los dos análisis antes y después de la incorporación del LazyLoad:

• El tiempo medio de carga del DOM se redujo en casi 5 segundos.
• El tamaño total de la carga inicial de las páginas de la web se redujo en aproximadamente 500MB.
• El tiempo medio de la carga inicial de las páginas de la web se redujo en algo más de 4 segundos.

En conclusión, utilizar una técnica de Lazy Loading en las webs se debería convertir en un “must” dado los beneficios que se obtienen en la carga. Actualmente el script LazyLoad es la opción más puntera mientras esperamos que los navegadores soporten la declaración nativa en html. A fecha de Agosto de 2019, solo Chrome tiene planes de soportarlo a partir de la versión 76

[1] A partir de un sitemap Page Size Check recorre las páginas de una web analizando los tiempos de carga y los tamaños de los recursos de cada una de las páginas en su carga inicial. El análisis de estos datos se realiza a partir del parseo del fichero HAR, que se obtiene al abrir las páginas en un navegador utilizando Selenium y un proxy Browsermob-proxy.