Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:14

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Curso de Optimización Web

Clase 18 de 38

Clase 18 / 38

Recursos

¿Qué es el lazy loading en imágenes?

El lazy loading es una técnica avanzada que optimiza la carga de imágenes en páginas web. Se divide principalmente en dos tipos: el lazy loading de carga y el lazy loading de progresión en la imagen. Esta técnica mejora el rendimiento de la página web al cargar únicamente aquellas imágenes que se necesitan ver, reduciendo el uso de banda y acelerando así la experiencia del usuario. Al usar esta técnica, no sólo ahorras recursos a los usuarios, sino que también garantizas que la página cargue más rápido, mejorando su UX.

¿Cómo funciona el lazy loading por progresión?

Un ejemplo claro de lazy loading por progresión es el sitio web Medium. Al implementar esta técnica, las imágenes se cargan inicialmente en una calidad baja y se van mejorando progresivamente conforme el usuario dispone de más espacio para visualizar la imagen completa. De esta manera, el navegador reemplaza dichas imágenes pixeladas y desenfocadas por versiones de mayor resolución paulatinamente.

¿Y el lazy loading por carga?

Por otro lado, el lazy loading por carga se encarga de cargar únicamente aquellas imágenes que se encuentran dentro de los primeros quinientos píxeles que el usuario ve al acceder a la página. Las imágenes que están más abajo, o que no son necesarias en ese momento, permanecen sin cargar hasta que el usuario hace scroll y las necesita visualizar. Esto es particularmente útil para mejorar considerablemente el tiempo de carga y reducir el uso innecesario de datos.

¿Cuál es la mejor manera de implementar lazy loading por carga?

Existen tres principales métodos para implementar el lazy loading por carga. A continuación, te los explico en orden de efectividad:

Método Nativo: Ahora los navegadores permiten usar el atributo loading dentro de las etiquetas de imágenes, estableciendo el valor como lazy. Es una opción conveniente porque no requiere dependencias adicionales, ya que el navegador decide cuándo cargar la imagen. Sin embargo, el reto es su compatibilidad limitada con navegadores, como Internet Explorer, Safari y Opera.
```
<img src="imagen.jpg" alt="Descripción" loading="lazy">
```
Intersection Observer: Esta API observa cuándo un elemento está visible en el viewport, permitiendo cargar imágenes justo en el momento que son necesarias. Aunque es relativamente fácil de usar y tiene buen soporte, la última versión, con características avanzadas, aún tiene compatibilidad limitada.
Scroll Listener: Este método implica asignar un evento al scroll para determinar la posición de los elementos y decidir cuándo cargar la imagen. Sin embargo, genera muchos eventos por segundo, lo que puede impactar negativamente en el rendimiento.

¿Cómo aplicar lazy loading en un proyecto?

Veamos un ejemplo práctico. Asumamos que tienes un proyecto con un carrusel de imágenes. Para implementar el lazy loading usando el método nativo, simplemente debes agregar el atributo loading="lazy" en cada etiqueta de imagen:

// Código en el archivo CarruselItem.js
const imagen = (
  <img 
    src={source} 
    alt="Descripción"
    className="mi-clase"
    loading="lazy"
  />
);

Tras guardar los cambios y recargar la página, al desplazarte, observarás cómo el navegador trae las imágenes solo cuando son necesarias.

¿Qué otras alternativas podemos usar?

Como ejercicio, puedes buscar implementar otras soluciones de lazy loading. Utiliza la API IntersectionObserver si deseas explorar nuevas técnicas. O desafíate con el scroll listener para entender cómo medir eficazmente la posición de un elemento.

¿Prefieres soluciones preexistentes? Existen librerías como lozad.js, que deciden automáticamente si usar el lazy loading nativo o el scroll listening basado en el navegador.

Continúa explorando y perfeccionando tus habilidades con estas técnicas, pronto avanzaremos a temas más complejos como el responsive loading. ¡Sigue adelante, el aprendizaje no se detiene!

Hector Vasquez

Hace 6 años

Implementado https://www.npmjs.com/package/vanilla-lazyload:

Instalar con el comando: npm i vanilla-lazyload

CarouselItem.js:

import h from 'hyperscript'
import moment from 'moment'

const relativeDate = dateStr => moment(dateStr, 'YYYY-MM-DD').fromNow()

const Controls = ({ slug, youtubeVideoId }) =>
  h(
    'div',
    h(
      'a',
      {
        href: `https://www.youtube.com/watch?v=${youtubeVideoId}`,
        title: 'Watch trailer',
        target: '_blank',
        rel: 'noreferrer',
      },
      h('img.carousel-item__details--img', {
        src: 'assets/play-icon.png',
        alt: 'Play',
      })
    ),
    h(
      'a',
      {
        href: `https://kitsu.io/explore/anime/${slug}`,
        title: 'See more',
        target: '_blank',
        rel: 'noreferrer',
      },
      h('img.carousel-item__details--img', {
        src: 'assets/plus-icon.png',
        alt: 'More info',
      })
    )
  )

const CarouselItem = ({
  imageUrl,
  title,
  subtitle,
  slug,
  youtubeVideoId,
  startDate,
}) =>
  h(
    'div.carousel-item',
    h('img.carousel-item__img.lazy', { 'data-src': imageUrl, alt: '' }),
    h(
      'div.carousel-item__details',
      Controls({ slug, youtubeVideoId }),
      h('p.carousel-item__details--title', title),
      h('p.carousel-item__details--subtitle', subtitle),
      h(
        'p.carousel-item__details--date',
        `Released: ${relativeDate(startDate)}`
      )
    )
  )

export default CarouselItem

index.js:

import h from 'hyperscript'
import { fetchPopular, fetchHighestRated, fetchTrending } from './api'
import CarouselItem from './CarouselItem'
import LazyLoad from 'vanilla-lazyload'

var lazyLoadInstance = new LazyLoad({
  // Your custom settings go here
})

const SectionTitle = title => h('h3.carousel__title', title)

const Carousel = ({ itemsList = [] }) =>
  h(
    'section.carousel',
    h(
      'div.carousel__container',
      itemsList.map(
        ({
          attributes: { titles, posterImage, slug, youtubeVideoId, startDate },
        }) =>
          CarouselItem({
            imageUrl: posterImage.medium,
            title: titles.en,
            subtitle: titles.ja_jp,
            slug,
            youtubeVideoId,
            startDate,
          })
      )
    )
  )

!(async function(document) {
  const mountReference = document.querySelector('.main').lastElementChild

  if (!mountReference) {
    return 0
  }

  const trending = await fetchTrending()
  const popular = await fetchPopular()
  const highestRated = await fetchHighestRated()

  mountReference
    .insertAdjacentElement('afterend', SectionTitle('Trending Anime'))
    .insertAdjacentElement(
      'afterend',
      Carousel({
        itemsList: trending,
      })
    )
    .insertAdjacentElement('afterend', SectionTitle('Highest Rated Anime'))
    .insertAdjacentElement(
      'afterend',
      Carousel({
        itemsList: highestRated,
      })
    )
    .insertAdjacentElement('afterend', SectionTitle('Most Popular Anime'))
    .insertAdjacentElement(
      'afterend',
      Carousel({
        itemsList: popular,
      })
    )

  lazyLoadInstance.update()
})(document, window)

Jonathan 🦑 Alvarez

Profesor

Hace 6 años

Oh súper bien Hector! Ese paquete se ve mucho mejor :)

Comentarios (20)20 comentarios

Fernando Quinteros Gutierrez

Israel Yance

Luis Alejandro Vera Hernandez

Hace 5 años

Rodrigo Martinez

Marcelo Arias

Ciro Villafraz

Ignacio Basilio

Vicente López Robles

Kevin Daniel Hincapie Lumbaque

Hace 3 años

Cristopher Sahagún

Sebastián Buitrago

Derek Samuel Paúl Peña

Johnatan Andrés Arango Rodríguez

Sergio Maximiliano Salvatierra

Sebastián Ariel Cóceres

Hace 4 años

Luis Felipe Medina Rodriguez

Kenneth Angulo L

Hace un mes

Rafael Hernando Alarcón Bautista

Jose Ever Muñoz Muñoz

Maided Guadalupe Hernández Ponce

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas