WDD 131: Fundamentos da Web Dinâmica

S04 – Atividade de Aprendizagem: Imagens com Lazy Loading

Visão Geral

Em termos de desempenho do site e otimização de mecanismos de busca, seu objetivo é ter a página da web carregada e pronta para ação em poucos segundos após uma solicitação do usuário. No entanto, as páginas da Web geralmente têm muitas solicitações e cargas úteis, incluindo imagens, o que faz o tempo de carregamento ultrapassar o tempo ideal. O objetivo desta atividade é aliviar um pouco o tempo de carregamento, esperando até que os ativos da página sejam realmente necessários para o usuário durante a rolagem. Você conhecerá ao padrão de design de carregamento progressivo ou "carregamento lento" (lazy loading) de imagens.

Objetivos de Aprendizagem do Curso

  1. Desenvolva páginas web responsivas que sigam as melhores práticas e usem HTML e CSS válidos.

Primeira Pintura Significativa "É importante entregar algo significativo ao usuário o mais rápido possível — quanto mais ele esperar a página carregar, maior a chance de ele sair antes de esperar tudo aparecer. Deveríamos ser capazes de mostrar ao usuário pelo menos a visão básica da página que ele quer ver, com marcadores de posição nos locais onde mais conteúdo será carregado. Isso poderia ser alcançado por meio de carregamento progressivo ─ também conhecido como carregamento lento (lazy loading). O objetivo é adiar o carregamento do máximo de recursos possível (HTML, CSS, JavaScript) e carregar imediatamente apenas aqueles que são realmente necessários para a experiência inicial." ─ MDN

Preparação

Seu objetivo é carregar as páginas mais rapidamente, e uma maneira de fazer isso é fornecer apenas o conteúdo essencial ao cliente/usuário, à medida que o conteúdo é solicitado por meio de eventos como rolar para baixo em uma página ou por meio de navegação. O carregamento lento nativo ou no nível do navegador evoluiu para ser um atributo integrado que pode ser aplicado a elementos selecionados, incluindo imagens.

<img src="imagens/qualquerfoto.jpg" alt="Uma boa descrição da imagem não decorativa" loading="lazy" width="300" height="500">

O atributo loading tem apenas dois estados: eager (imediato) e lazy (lento). O valor padrão eager instrui o navegador a renderizar o recurso imediatamente. O atributo lazy adia o carregamento de elementos, como <img> ou <iframe>, até que eles sejam chamados à exibição por alguma ação do usuário, como rolagem.

"O carregamento lento é uma estratégia para identificar recursos como não bloqueadores (não críticos) e carregá-los somente quando necessário. É uma maneira de encurtar o comprimento do caminho crítico de renderização, o que se traduz em tempos de carregamento de página reduzidos. O carregamento lento pode ocorrer em diferentes momentos da aplicação, mas normalmente acontece em algumas interações do usuário, como rolagem e navegação." – MDN

Instruções da Atividade

Crie uma pequena página da web com várias imagens empilhadas verticalmente em uma única página. Ao testar a página em um navegador, as imagens serão carregadas somente quando forem visualizadas pelo usuário durante a rolagem. Esse efeito é sutil, então role cuidadosamente e visualize as informações de carregamento na aba Rede (Network) do Devtools para observar o comportamento.

Demonstração em Vídeo: ▶️ Carregamento Lento de Imagens (Lazy Loading)

  1. No VS Code, vá para o repositório do seu curso wdd131 e crie uma nova página HTML chamada "carregamentolento.html" em uma subpasta "semana04" de wdd131.
  2. Dê suporte a esta nova página com um arquivo CSS e um arquivo JavaScript externos, cada um armazenado em subpastas apropriadamente nomeadas dentro da pasta.
  3. A página carregamentolento.html deve ter um <head> e um <body> padrão e o corpo deve ter um elemento <main>.
  4. O elemento <main> contém um título de página em um elemento <h1>.
  5. O elemento <main> contém 6 (seis) elementos filhos <img>
  6. O rodapé pode conter o que você achar apropriado, juntamente com a data em que o documento foi modificado pela última vez usando JavaScript.
  7. As dimensões das imagens devem ser 400 px de largura por +600 px de altura (layouts retrato).Use suas próprias imagens ou espaços reservados externos como Picsum Photos (conteúdo em inglês).
  8. Exiba os elementos <img> em uma coluna no centro da página, independentemente do tamanho da tela. (DICA: Exibição CSS:block)
  9. Aplique corretamente o carregamento lento nativo às imagens para que elas sejam carregadas somente quando o usuário rolar a página para baixo.
  10. Adicione uma animação de esmaecimento do preto a cada imagem usando animação CSS e opacidade.