Essa técnica melhora o desempenho da página web, carregando imagens apenas quando elas estão visíveis ou próximas à tela do usuário.

No mundo digital acelerado de hoje, ter um site de alto desempenho é essencial. Um aspecto crítico disso é garantir que suas imagens sejam carregadas com eficiência. Os usuários esperam uma experiência de navegação tranquila e rápida, e este artigo mostrará como conseguir isso.

Você explorará o conceito de carregamento lento de imagens e aprenderá como implementá-lo usando HTML e JavaScript com a API Intersection Observer.

O que é carregamento lento?

O carregamento lento atrasa o carregamento de elementos, como imagens, até que seja necessário. Em vez de carregar todas as imagens quando uma página é carregada, o carregamento lento carrega apenas as imagens que estão visíveis no momento ou próximas à área de visualização do usuário. Essa melhoria no desempenho do site diminui o tempo de carregamento inicial e conserva a largura de banda.

Por que usar o carregamento lento?

instagram viewer

Existem vários motivos convincentes para usar o carregamento lento de imagens em seu site, como:

  • Carregamento de página inicial mais rápido: o carregamento lento impede que todas as imagens sejam carregadas de uma vez, reduzindo o tempo de carregamento inicial da página. Os usuários podem começar a interagir com seu site mais cedo, proporcionando uma melhor experiência do usuário.
  • Melhor capacidade de resposta da página: ao carregar imagens conforme os usuários rolam, o site permanece responsivo e fluido, garantindo rolagem e navegação suaves, sem a necessidade de esperar o carregamento de todo o conteúdo.
  • Economia de largura de banda: o carregamento lento conserva a largura de banda, tornando-o ideal para usuários móveis e aqueles com conexões lentas de Internet. Isso pode reduza o consumo de dados do seu site, beneficiando os usuários.
  • Benefícios de SEO: Mecanismos de busca como o Google considere a velocidade da página como um fator de classificação. O carregamento lento pode impactar positivamente o desempenho de SEO do seu site melhorando o tempo de carregamento.

Agora que você entende por que o carregamento lento é benéfico, vamos explorar como implementá-lo.

Implementando o carregamento lento: a marcação HTML

Para começar, você precisará modificar seu código HTML para incluir o carregando = "preguiçoso" atributo em seu Tag.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

O carregando O atributo é usado em HTML para controlar o comportamento de carregamento de elementos em uma página da web. Quando você define carregando = "preguiçoso" com um tag, ela informa ao navegador para adiar o carregamento do recurso até que seja necessário.

No momento, a página está assim:

Implementando o carregamento lento: a implementação do JavaScript

Para levar seu carregamento lento para o próximo nível, use a API Intersection Observer. Esta API permite observar quando um elemento entra ou sai da janela de visualização.

A lógica por trás do emprego do Intersection Observer para imagens de carregamento lento é simples: quando a página carrega, ela busca uma imagem de qualidade inferior.

Então, à medida que esta imagem se torna visível na janela de visualização, o JavaScript a troca pela versão de qualidade superior. Para colocar isso em prática, modifique seu HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Aqui, a fonte primária da imagem é a versão de baixa qualidade e a imagem de alta qualidade é a fonte secundária. A página então fica assim:

Em seguida, selecione todas as imagens que deseja carregar lentamente:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Depois disso, crie um InterseçãoObservador objeto.

const observer = new IntersectionObserver();

Em seguida, passe as entradas (uma matriz de IntersectionObserverEntry objetos, representando os elementos que estão sendo observados e sua intersecção com a janela de visualização) e observador (o InterseçãoObservador própria instância).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Em seguida, verifique as interseções e troque a imagem de baixa qualidade pela de alta qualidade sempre que esse elemento fizer interseção.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Finalmente, inicialize a observação para cada elemento.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

E com isso, você implementou o carregamento lento com JavaScript.

Considerações sobre carregamento lento

Ao integrar o carregamento lento, torna-se vital considerar os seguintes aspectos:

  • Acessibilidade: para garantir a acessibilidade, forneça texto alternativo para imagens com o alternativo atributo. Essas informações servem como ponto de confiança para leitores de tela.
  • Compatibilidade do navegador: Antes de implementar o carregamento lento, confirme sua compatibilidade com diferentes navegadores. Nem todos os navegadores oferecem suporte para esse recurso. Em certos casos, a inclusão de um polyfill pode tornar-se imperativa, especialmente para navegadores mais antigos. Uma ferramenta como Eu posso usar é um recurso valioso para avaliar a compatibilidade do navegador.
  • Teste: O teste abrangente da implementação do carregamento lento em um espectro de dispositivos e dimensões de tela assume extrema importância.

Melhorando a velocidade do site e a experiência do usuário

Ao incorporar o carregamento lento de imagens em seu site, você pode acelerá-lo e melhorar a experiência do usuário. Tempo de carregamento mais rápido e experiências de navegação mais suaves são o que os usuários desejam, e essa técnica oferece o mesmo.

Além disso, você desfrutará de um SEO melhor e economizará no uso de largura de banda. Então, por que esperar? Comece a otimizar seu site hoje mesmo com este método simples, mas poderoso.