Lazy loading para imagens em background

Recentemente, estava desenvolvendo um projeto com meu parceiro Anderson Santana para um cliente da UpCubo.

Um dos requisitos deste projeto seria uma seção com um carrossel de 8 imagens sendo alternadas a cada 5 segundos em background com um texto em destaque desta maneira:

A primeira vista, essa pode ser uma tarefa simples, mas existem alguns detalhes importantes a serem observados em relação à performance.

No mundo do desenvolvimento web, a performance é uma preocupação constante para garantir uma boa experiência do usuário. Recentemente, o Google anunciou o Core Web Vitals, um conjunto de métricas que avaliam a qualidade da experiência de um usuário ao acessar um site, e isso trouxe ainda mais importância ao tema.

Como resolver?

Lembrando que essa é apenas uma das muitas formas de implementar essa funcionalidade.

Durante minhas pesquisas, a maneira mais performática de fazer essa implementação seria utilizando o IntersectionObserver do JavaScript. Dessa forma, poderíamos disparar o início do carregamento das imagens apenas quando a seção estivesse prestes a ficar visível na tela do usuário.

Com isso, o carregamento inicial da página não seria prejudicado pelo tamanho dessas imagens.

O código ficou assim:

const images = [
 "/img/img-example-1.jpg",
 "/img/img-example-2.jpg",
 "/img/img-example-3.jpg",
 "/img/img-example-4.jpg",
 "/img/img-example-5.jpg",
 "/img/img-example-6.jpg",
 "/img/img-example-7.jpg",
 "/img/img-example-8.jpg",
];


const animationDuration = 5000; //milesseconds
let intervalId;


// aguarda a página carregar para executar a função initLazyLoadBackground
document.addEventListener("DOMContentLoaded", () => initLazyLoadBackground());


// Função que inicia o lazy load de imagens de fundo
function initLazyLoadBackground() {
  // Seleciona todos os elementos com a classe "lazy-background"
  const elementLazyBackground = document.querySelector(".lazy-background");

  // Verifica se o IntersectionObserver está disponível no navegador
  if ("IntersectionObserver" in window) {
    // Cria um novo IntersectionObserver e passa como callback a função lazyLoadIntersectionObserver
    const lazyBackgroundObserver = new IntersectionObserver(
      lazyLoadIntersectionObserver
    );

    // Observa o elemento com a classe "lazy-background"
    lazyBackgroundObserver.observe(elementLazyBackground);
  }
}

// Função que é executada quando um elemento com a classe "lazy-background" é observado
function lazyLoadIntersectionObserver(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Seleciona o elemento que será utilizado como fundo
      const elementToChangeBgImage = document.querySelector(".lazy-background");

      // Índice da imagem que será exibida
      let backgroundImageIndex = 0;

      // Função que altera o fundo do elemento selecionado a cada intervalo de tempo
      function changeBackgroundImage() {
        const newBackground = `url("${images[backgroundImageIndex]}")`;
        elementToChangeBgImage.style.backgroundImage = newBackground;

        // Incrementa o índice da imagem e reinicia caso chegue ao final do array
        backgroundImageIndex++;
        if (backgroundImageIndex >= images.length) backgroundImageIndex = 0;
      }

      // Inicia a animação e armazena o id do intervalo em uma variável
      intervalId = setInterval(changeBackgroundImage, animationDuration);

      // Remove o elemento observado do IntersectionObserver
      observer.unobserve(entry.target);
    } else if (intervalId) {
      // Encerra a animação caso o elemento deixe de ser observado
      clearInterval(intervalId);
      intervalId = null;
    }
  });
}

Deste modo, a primeira imagem do carrossel será carregada apenas (e se) o usuário fizer o scroll da página até chegar na seção.

Como essas imagens serão apenas para efeitos ilustrativos e não trazem nenhum tipo de conteúdo adicional para a informação, isso não afetará negativamente o SEO da página.

O tempo de carregamento de uma página é um dos fatores mais importantes na experiência do usuário. Páginas que carregam lentamente podem afetar a satisfação do usuário e até mesmo influenciar no ranqueamento e por consequência na taxa de conversão de um site.

Vale lembrar que o desempenho de uma página depende de vários outros fatores, e o uso de lazy loading para imagens de fundo pode ser apenas uma das estratégias para otimização de performance. Outras técnicas, como compressão de imagens, cache e otimização de código, também devem ser consideradas.

Imagens são essenciais para a web e vão sempre estar presentes, no entanto, podemos ser criativos para economizar valiosos kbps :)

Fique a vontade para me adicionar no Linkedin 🚀

Referências:
https://web.dev/lazy-loading-images/