Como carregar imagens lentamente usando HTML e JavaScript
No atual mundo digital de ritmo acelerado, é essencial ter um sítio Web de elevado desempenho. Um aspeto crítico é garantir que as suas imagens são carregadas de forma eficiente. Os utilizadores esperam uma experiência de navegação suave e rápida, e este artigo mostra-lhe como conseguir isso.
Aprofunde-se na noção de carregamento eficiente de imagens, conhecido como carregamento preguiçoso, e descubra a sua implementação utilizando HTML e JavaScript em conjunto com a API Intersection Observer.
O que é carregamento lento?
O carregamento preguiçoso é uma técnica de otimização que adia o carregamento de componentes visuais, especificamente imagens, até que sejam necessários para a apresentação. Ao contrário do pré-carregamento de todas as imagens à chegada de uma página Web, esta metodologia vai buscar seletivamente as imagens que estão atualmente nas imediações ou no campo de visão do espetador. Ao aumentar a eficiência do sítio Web, diminui o tempo necessário para a inicialização e poupa a capacidade de transferência de dados da rede.
Porquê usar o Lazy Loading?
De facto, existem várias razões persuasivas para incorporar o carregamento lento de conteúdos visuais numa plataforma Web, incluindo, mas não se limitando a:
A implementação de técnicas de carregamento preguiçoso pode melhorar significativamente o desempenho das páginas da Web, adiando o carregamento de imagens até que elas sejam necessárias para a visualização. Esta abordagem não só reduz o tempo de carregamento inicial da página, como também permite que os utilizadores iniciem a sua interação com o sítio Web mais rapidamente, resultando, em última análise, numa melhor experiência global do utilizador.
O sítio Web mantém um elevado nível de capacidade de resposta, carregando dinamicamente as imagens à medida que o utilizador se desloca, eliminando assim qualquer atraso ou atraso na deslocação e na navegação que possa resultar da espera de que todo o conteúdo seja carregado previamente. Esta abordagem permite uma interação perfeita com o conteúdo do sítio, preservando simultaneamente o seu desempenho geral.
O carregamento lento é uma técnica de web design que envolve o adiamento do carregamento de conteúdo não essencial até que seja necessário, reduzindo assim o tempo de carregamento inicial de uma página web. Ao conservar a largura de banda através deste método, os sítios Web são mais bem optimizados para dispositivos móveis e indivíduos com ligações à Internet mais lentas. Como resultado, o carregamento lento pode diminuir significativamente o consumo geral de dados de um sítio, proporcionando, em última análise, uma experiência mais fácil de utilizar para os visitantes.
A otimização para a classificação nos motores de busca é crucial no panorama digital atual, e um aspeto fundamental que desempenha um papel importante neste contexto é o desempenho do sítio Web. Especificamente, os motores de busca como o Google têm em conta factores como a velocidade da página quando determinam quais os sítios Web que devem ser apresentados de forma proeminente nas suas páginas de resultados.Neste contexto, o lazy loading demonstrou ter um efeito positivo no desempenho de SEO devido à sua capacidade de melhorar os tempos de carregamento, conduzindo, em última análise, a uma melhor experiência do utilizador e a uma melhor classificação geral nos motores de busca.
Tendo em conta as vantagens acima mencionadas, permita-me elucidar o processo de implementação do carregamento lento na sua aplicação Web.
Implementando o carregamento lento: A marcação HTML
Para iniciar o processo, é necessário alterar a marcação HTML, incorporando o atributo “loading=‘lazy’” na etiqueta de uma imagem.
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
O atributo loading, utilizado no contexto da marcação HTML, serve para regular o comportamento de carregamento de vários elementos apresentados numa página Web. Ao especificar “loading=‘lazy’” numa etiqueta img, o programa de navegação é instruído a atrasar a aquisição do recurso associado até ao momento em que este se torne necessário para renderização ou processamento posterior.
Atualmente, a página Web tem a seguinte disposição
Implementando Lazy Loading: A implementação do JavaScript
Para melhorar a funcionalidade da sua técnica de carregamento lento, considere a utilização da API Intersection Observer. Essa poderosa ferramenta permite o monitoramento de elementos à medida que eles entram ou saem da janela de visualização do usuário, fornecendo uma abordagem mais precisa e eficiente para o carregamento de conteúdo.
A lógica subjacente à utilização do Intersection Observer em conexão com o carregamento lento de imagens é relativamente simples. Quando a página web é carregada inicialmente, recupera uma versão de resolução reduzida de uma imagem em vez de todas as imagens de alta definição que não são imediatamente visíveis para o utilizador.
Quando a miniatura de baixa resolução aparece na área de visualização do browser, o JavaScript substitui-a por uma versão mais detalhada e de alta definição. Para implementar esta funcionalidade, terá de efetuar alguns ajustes no seu código HTML.
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
O elemento visual principal desta página Web é uma representação de baixa resolução, enquanto a representação de qualidade superior serve como recurso auxiliar. Consequentemente, o sítio apresenta-se de forma a incorporar simultaneamente as imagens de baixa e de alta fidelidade.
Para começar, escolha os elementos visuais que serão carregados lentamente para uma experiência de utilizador mais eficiente:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Depois disso, crie um objectoIntersectionObserver.
const observer = new IntersectionObserver();
Com efeito, forneceremos uma matriz composta por uma coleção de objectos IntersectionObserverEntry , que contêm informações sobre os elementos monitorizados, bem como as suas intersecções com a região visual, juntamente com a instância IntersectionObserver que serve de ferramenta de observação.
const observer = new IntersectionObserver((lazyImages, observer) => { });
Em seguida, vamos verificar se existem intersecções e substituir a imagem de menor qualidade pela de maior qualidade quando o respetivo elemento entra em contacto.
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, inicializar a observação para cada elemento.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
De facto, ao utilizar o JavaScript, executou com sucesso uma estratégia de lazy loading.
O seu browser não suporta a etiqueta de vídeo.
Considerações sobre o carregamento lento
Para implementar efetivamente o carregamento lento em um aplicativo Web, é essencial levar em conta vários fatores críticos. Isso inclui considerar como e quando carregar dados, bem como determinar quais componentes devem ser carregados lentamente. Além disso, é necessário considerar cuidadosamente o impacto do carregamento lento no desempenho e na experiência do utilizador, especialmente no que diz respeito à latência da rede e à largura de banda disponível. É também importante garantir que o conteúdo carregado lentamente possa funcionar de forma independente depois de carregado, sem depender de outros recursos que ainda não tenham sido obtidos. Por último, devem ser criados mecanismos adequados de tratamento de erros para lidar com eventuais problemas que possam surgir durante o processo de carregamento lento.
Para melhorar a acessibilidade, é essencial incluir uma descrição alternativa das imagens através da utilização do atributo “alt”. Conhecido como uma referência fiável para os utilizadores de leitores de ecrã, este texto adicional garante que as pessoas com deficiências visuais também podem obter significado do conteúdo apresentado na imagem.
⭐ Compatibilidade do browser: Antes da implementação do carregamento lento, confirme a sua compatibilidade com diferentes browsers. Nem todos os browsers oferecem suporte para esta funcionalidade. Em certos casos, a inclusão de um polyfill pode se tornar imperativa, especialmente para navegadores mais antigos. Uma ferramenta como CanIUse é um recurso valioso para avaliar a compatibilidade do navegador.
A importância de realizar uma avaliação abrangente do mecanismo de carregamento lento, abrangendo diversos dispositivos e tamanhos de ecrã, não pode ser exagerada.
Melhorar a velocidade do sítio Web e a experiência do utilizador
A incorporação do carregamento lento para imagens num sítio Web é um meio eficaz de melhorar o seu desempenho e proporcionar uma melhor experiência do utilizador.Ao reduzir os tempos de carregamento e facilitar a navegação, esta abordagem está em conformidade com as expectativas do público exigente de hoje, que dá prioridade à rapidez e à interação sem falhas.
De facto, a utilização desta abordagem não só melhora a otimização dos motores de busca, como também poupa o consumo de largura de banda. Assim, de que está à espera? Comece a simplificar o seu site imediatamente, empregando esta tática fácil de usar, mas potente.