Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Presentación del proyecto

19/28
Recursos

Aportes 15

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Es importante mencionar que hoy en día el navegador ya tiene implementada una api nativa en HTML de Lazy Loading:
.
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
.
Sin embargo, aún no es compatible con todos los navegadores:
.
https://www.caniuse.com/?search=lazy%20loading
.
El motivo de usar Lazy Loading es la optimización de la página, es decir, es mejor que de inicio un usuario cargue pocos recursos de la página, de esta forma se acelera la carga de la misma, porque no tiene que cargar 100 imagenes de golpe, sino que de poquito a poquito va cargando las imágenes y se hace todo más ameno 😄

Yo sabía que es posible hacer esto con HTML puro, es decir ya sin JavaScript y esa API de Intersection Observer

El taller consiste en agregar una nueva API llamada intersection observer y todo lo aprendido anteriormente. El sitio se llamará Lazy loading para agregar imágenes y limpiarlas. En la cónsola podremos ver cuantas imágenes se solicitan y cuantas se han cargada (Solo cuando son visibles en el navegador). Esto es una técnica muy optimizada y avanzada de optimización WEB.

El lazy loading es super útil tanto para apps como páginas web, permitirá que la carga de la página sea mucho más rápida mejorando así la experiencia del usuario.

Lazy Loading vs Eager Loading

Para que nuestro proyecto cargue más rápido teniendo en cuenta todo tipo de usuarios (Con una débil señal de internet o con un dispositivo de gama baja) podemos utilizar diferentes técnicas de loading:

  • Lazy Loading: Es cuando retrasamos la carga de algunos elementos para reducir el tiempo de descarga inicial, y los vamos descargando a medida que el usuario avanza en nuestra página.
  • Eager Loading: Descarga todo a la vez.

Técnicas de lazy loading:

  • Nativo: En el caso de las imágenes podemos asignar el atributo loading="lazy"
  • Intersection Observer: Utilizando esta API podemos detectar cuando uno o varios elementos están cerca o dentro del área visible del viewport.
  • Scroll listener: Escuchando el evento de scroll, obtener la altura de un o varios elementos y detectar cuando vayan a entrar a la pantalla.

Esto me recordó a un término similar, el LAZY COMPILING, que se da en navegadores modernos, lo cual es que el contenido de las funciones no son compiladas al inicio de la ejecución del codigo Javascript, sino hasta que son llamadas(invocadas) así es mucho más rápido la carga al no compilar funciones que se tardarán en llamar (como la ejecución de lineas de código cuando se presione un botón) o incluso quizás nunca son disparados estos eventos(ni funciones)

Aqui se explica con el uso ya directo de un atributo HTML:

https://www.youtube.com/watch?v=Vko5cC4SMSc

😮 No sabia sobre esto

La carga diferida (también conocida como carga asincrónica) es un patrón de diseño que se usa comúnmente en la programación de computadoras y principalmente en el diseño y desarrollo web para diferir la inicialización de un objeto hasta el punto en el que se necesita. Puede contribuir a la eficiencia en el funcionamiento del programa si se utiliza de forma adecuada y apropiada. Esto lo hace ideal en casos de uso donde se accede al contenido de la red y los tiempos de inicialización deben mantenerse al mínimo, como en el caso de las páginas web. Por ejemplo, aplazar la carga de imágenes en una página web hasta que sean necesarias puede acelerar la visualización inicial de la página web. Lo opuesto a la carga diferida es la carga ansiosa.

No pude clonar el proyecto final 😦

Vamoos !

que cool una herramienta para mejorar el performance de nuestros sitios

Genial

Go for Lazy Loading!! 🏎💨