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/
Top comments (0)