Utilizando Lazy Loading… – Blog – Devdata Sistemas

O lazy loading é uma técnica de otimização de desempenho usada em desenvolvimento web para atrasar o carregamento de recursos, como imagens, vídeos e scripts, até que eles se tornem visíveis na tela do usuário. O objetivo principal do lazy loading é melhorar o tempo de carregamento inicial de uma página, reduzir a quantidade de dados transferidos e economizar recursos do usuário, como largura de banda e energia, ao carregar apenas o conteúdo essencial inicialmente. Isso é especialmente útil em páginas com muito conteúdo multimídia ou extensas.

Como funciona o lazy loading:

Identificação de recursos: O desenvolvedor identifica os recursos que podem se beneficiar do carregamento tardio. Isso geralmente inclui imagens, vídeos, iframes (como incorporações de mídia) e, em alguns casos, scripts.
Adição de atributos: Para as imagens, por exemplo, o desenvolvedor substitui o atributo “src” pelo atributo “data-src”. O atributo “data-src” contém o URL da imagem a ser carregada. O atributo “src” geralmente é preenchido com um marcador de espaço vazio, um ícone de carregamento ou uma imagem de carregamento.
Monitoramento da visibilidade: O lazy loading utiliza recursos como a API “Intersection Observer” para observar quando os elementos entram no campo de visão do usuário. Quando um elemento fica visível (entra na janela de visualização do navegador), o carregamento do recurso é iniciado.
Carregamento sob demanda: Quando o elemento se torna visível, o atributo “src” é atualizado com o valor do atributo “data-src”, desencadeando o carregamento real do recurso.

Benefícios do lazy loading:

Melhora o tempo de carregamento: Reduz a quantidade de recursos carregados inicialmente, tornando o carregamento da página mais rápido, especialmente em conexões mais lentas.
Economia de largura de banda: Recursos não carregados não consomem largura de banda, o que é valioso para usuários com limitações de dados.
Economia de recursos: Dispositivos móveis e laptops economizam energia, pois menos recursos são carregados imediatamente.

Configurações de desempenho:

Priorização: Comece pelo conteúdo “acima da dobra” (conteúdo visível inicialmente) e, em seguida, aplique lazy loading para os recursos abaixo da dobra.
Progressive Enhancement: Garanta que seu site funcione sem JavaScript. Isso significa que o conteúdo crítico deve ser acessível mesmo para usuários que não têm JavaScript ativado.
Seleção adequada de elementos: Não é necessário aplicar lazy loading a todos os elementos da página. Use-o em recursos grandes que podem atrasar o carregamento inicial.
Teste: Monitore o desempenho do site com e sem lazy loading ativado para avaliar o impacto real.
Compatibilidade: Certifique-se de que a técnica de lazy loading que você está usando seja compatível com os navegadores que você deseja suportar.
Indicadores de carregamento: Considere adicionar indicadores de carregamento para melhorar a experiência do usuário, como um spinner ou uma imagem de carregamento. Isso ajuda a evitar confusão quando os elementos estão sendo carregados sob demanda.

Lembre-se de que o lazy loading é uma técnica poderosa, mas deve ser usada com sabedoria para oferecer a melhor experiência possível ao usuário.

Vou fornecer exemplos de código para implantação do lazy loading em imagens usando a API “Intersection Observer”. Neste exemplo, utilizarei HTML, CSS e JavaScript para demonstrar como configurar o lazy loading em imagens.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Lazy Loading Example</h1>
    <p>Scroll down to see lazy-loaded images.</p>
    <img data-src="image1.jpg" alt="Image 1">
    <img data-src="image2.jpg" alt="Image 2">
    <img data-src="image3.jpg" alt="Image 3">
    <img data-src="image4.jpg" alt="Image 4">
    <script src="lazyload.js"></script>
</body>
</html>

CSS (styles.css):

/* Add some basic styles to make the page visually appealing */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border: 1px solid #ccc;
}

JavaScript (lazyload.js):

// Create an Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // When the image becomes visible, load the image by setting the "src" attribute
      entry.target.src = entry.target.getAttribute("data-src");
      // Unobserve the image after it's loaded
      observer.unobserve(entry.target);
    }
  });
}, {
  root: null, // Use the viewport as the root
  rootMargin: '0px', // No margin
  threshold: 0.1 // 10% of the image is visible
});

// Select all images with the "data-src" attribute
const lazyImages = document.querySelectorAll('img[data-src]');

// Observe each image
lazyImages.forEach(image => {
  observer.observe(image);
});

Neste exemplo, temos um documento HTML que inclui quatro imagens com o atributo “data-src”, que contém o URL das imagens que desejamos carregar preguiçosamente. Também incluímos um script que usa a API “Intersection Observer” para observar quando as imagens se tornam visíveis na tela. Quando uma imagem se torna visível, o atributo “src” é atualizado com o valor do atributo “data-src”, carregando a imagem real.

Certifique-se de que as imagens “image1.jpg”, “image2.jpg”, “image3.jpg” e “image4.jpg” estejam localizadas no mesmo diretório que o seu arquivo HTML.

Este é um exemplo básico que demonstra a funcionalidade do lazy loading usando a API “Intersection Observer”. Em um ambiente de produção real, você pode aplicar essa técnica a páginas com muitos recursos de mídia para melhorar significativamente o desempenho e a velocidade de carregamento, especialmente em dispositivos com conexões mais lentas.

Perceba que:

No contexto do lazy loading, quando você usa a técnica de carregamento tardio (lazy loading), o atributo “src” das tags de imagem é deixado vazio ou preenchido com um espaço reservado, e o URL real da imagem é armazenado no atributo “data-src”. Dessa forma, o navegador não tenta carregar todas as imagens imediatamente, reduzindo o tempo de carregamento inicial. A imagem será carregada somente quando for detectado que ela está visível na tela do usuário.

Aqui está um lembrete da estrutura das tags de imagem com os atributos “data-src” e “src” que você pode usar ao implementar o lazy loading:

<img data-src="caminho_da_imagem.jpg" alt="Descrição da imagem" src="">

<!-- Ou usando um espaço reservado (opcional) -->
<img data-src="caminho_da_imagem.jpg" alt="Descrição da imagem" src="placeholder.jpg">

No JavaScript, conforme mostrado nos exemplos anteriores, quando a imagem se torna visível, o atributo “src” é atualizado com o valor do atributo “data-src”, e o navegador inicia o carregamento real da imagem.

Lembre-se de que a combinação dos atributos “data-src” e “src” como mostrado acima é uma prática comum na implementação do lazy loading, mas pode variar ligeiramente dependendo da biblioteca ou técnica específica que você está usando. Certifique-se de seguir as diretrizes da biblioteca ou abordagem que escolher para implementar o lazy loading em sua aplicação.

Related Posts