¿Recuerdas WebP? Lo comentamos hace unas semana en el post WebP, tu aliado en performance web. Esta semana te traigo el complemento perfecto para mejorar aún más la performance de tu web minimizando la carga de contenido como imágenes y videos, reduciendo drásticamente el peso total de la web al cargarla.
Las contenidos son el "talón de Aquiles" de todas las webs, utilizamos banners, logotipos, imágenes de productos. Y es prácticamente imposible imaginar una web sin imágenes. Lamentablemente, las imágenes son el componente más pesado de las webs. Según los últimos datos de HTTP Archive, el peso medio por web en Desktop es de 1848 KB y las imágenes representan 930 KB de ese peso, aproximadamente el 50% del peso total de la web.
Por este motivo, hoy quiero mostrarte “lazy loading”, para ayudarte a mejorar el tiempo de carga y reducir el peso de la web, a la vez que mantendrás todas las imágenes sin perder calidad.
¿Qué es “lazy loading”?
La idea principal es aplazar la carga de cualquier contenido que no sea necesario en ese preciso momento. “Lazy loading” es una estrategia para mejora del rendimiento web, cargando el contenido cuando sea visible en la pantalla del usuario, es decir, cuando el usuario se desplaza por la web y la imagen sea prácticamente visible.
De este modo, la web realiza una carga diferida de las imágenes y si el usuario nunca se desplaza hasta llegar al contenido de las imágenes, nunca se llegarán a cargar, ahorrando de forma muy considerable los bytes totales de tu web. Ten en cuenta que si tu página principal tiene 100 imágenes, si no aplicas “lazy loading” descargará cada una de ellas, aunque el usuario no realice ningún scroll.
La estrategia general es dejar por defecto una imagen de muy baja calidad y después, cuando el usuario se desplaza, descargar la imagen original con la calidad adecuada al contenido. Más adelante te explicaré alguna estrategia más, veamos ahora cómo funciona.
¿Como funciona?
“Lazy Loading” depende principalmente de Javascript. El javascript principalmente se encargará de verificar el momento más oportuno para descargar la imagen original, de calidad, sustituyéndola por la de baja calidad. Al final del post te facilito una lista de las librerías más populares.
Te dejo con un sencillo ejemplo que cargará por defecto un fondo gris hasta llegar al contenido de las imágenes.
Si de la velocidad no aprecias el resultado, te dejo el siguiente vídeo ;)
Este resultado lo alcanzaras evitando que las etiquetas <img> tengan el parámetro “src”, con lo que por defecto, el navegador no descarga ningún contenido, hasta que la librería Javascript descargue el contenido que hemos indicado en “data-src”.
Estrategias
Con este objetivo, normalmente hay 2 tipos de estrategias: Pintar el espacio del contenido con el color principal del contenido y utilizar una imagen de baja calidad.
En el ejemplo anterior, utilizamos un color gris de fondo para todas las imágenes. Sin embargo, podemos hacerlo mejor, proporcionando una experiencia más agradable.
1. Pintar el espacio del contenido con el color principal del contenido
En lugar de usar un color fijo, podemos usar el color principal del contenido original, par utilizarlo para pintar el espacio del contenido. En Google y Pinterest utilizan esta estrategia en los resultados de búsqueda de imágenes.
Puede parecer complejo, pero simplemente deberás escalar una copia de la imagen original a un imagen de 1x1 pixel, para luego volver escalarla al peso original.
Puedes ver el ejemplo en video y el código a continuación:
2. Imagen de baja calidad, “Low Quality Image Placeholders” (LQIP)
En lugar de usar un solo color, utilizamos una versión de baja calidad del contenido, normalmente borrosa, de muy baja calidad comparado con el contenido original. Como resultado ofrece al usuario una idea del resultado de la imagen real mientras espera la carga del contenido de calidad y le proporciona también la percepción de que la carga del contenido está en progreso. Facebook y Medium.com utilizan esta estrategia en las imágenes.
Puedes ver el ejemplo en código y video a continuación:
Librerias Javascript populares “lazy loading”
Ya que en cada entorno y navegador necesitarás utilizar una implementación diferente (-webkit, -moz, -ms, -o) para aplicar “lazy loading”, te facilito una lista de librerías que te permitirá implementar-lo de forma eficaz:
- yall.js (Yet Another Lazy Loader): la utilizada en nuestros ejemplos. Utiliza Intersection Observer (Hace que sea realmente sencillo detectar cuándo un elemento se visualiza en la pantalla y responde ejecutando un evento). Admite imágenes y videos, excepto las imágenes en background con CSS. Funciona en IE11+.
- lazysizes: muy popular y extensa. Alto rendimiento incluso sin Intersection Observer.
- jQuery Lazy: librería sencilla basada en jquery.
- WeltPixel Lazy Loading Enhanced: extensión para Magento 2.
- WordPress A3 Lazy Load: plugin para WordPress.
Conclusión
Si se implementa correctamente mejorará significativamente el rendimiento de tu web, reduciendo el peso, mientras mantienes intacto el contenido y la calidad necesaria en tu web y los usuarios tendrán una gran experiencia con una carga más rápidas.
Recuerda no programar todos los contenidos con “lazy loading”, pues podrías aumentar el tiempo de carga de la web, ya que muchas de las imágenes se pueden encontrar en la parte superior de la web. Con esta mala práctica no cargaran las originales hasta que se ejecute la librería Javascript y descargarás contenido innecesario.
Ahora solo te queda volver a realizar la auditora de tu web con Lighthouse, la auditoría de Google ¿Está tu web técnicamente a la altura?
Fotografía: pixabay.com
Fuentes:
