O que é carregamento lazy?

O que é carregamento lazy?

O carregamento lazy é uma técnica para aguardar o carregamento de certas partes de uma página web — especialmente imagens — até que sejam necessárias. Em vez de carregar tudo de uma vez, conhecido como carregamento "eager", o navegador não solicita determinados recursos até que o usuário interaja de tal forma que os recursos sejam necessários. Quando implementado corretamente, o carregamento lento pode acelerar o tempo de carregamento da página.

Esse tipo de carregamento é chamado de "lazy" porque incentiva um navegador web a procrastinar. Ao exibir uma página de carregamento lazy, um navegador basicamente diz: "Vou esperar para carregar essas imagens até que eu realmente precise". Ao exibir uma página de carregamento eager, um navegador toma a atitude oposta: "Vou cuidar de tudo imediatamente!" Enquanto a procrastinação às vezes carrega conotações negativas no mundo real, neste caso é muitas vezes mais eficiente.

Por exemplo, uma postagem de blog pode ter uma imagem na parte superior da página e um diagrama na parte inferior. Alguém lendo a postagem do blog pode não chegar ao final do texto por vários minutos, então o navegador espera para carregar o diagrama até que o leitor role para essa seção. Dessa forma, a página carrega mais rapidamente no início, porque o navegador está carregando uma imagem em vez de duas.

Como funciona o carregamento lazy de imagens?

A navegação do usuário normalmente é o que aciona o carregamento lazy de imagens. Em particular, quando um usuário rola para baixo em uma página, isso informa ao navegador para carregar as imagens que aparecem lá.

Quando uma página web é carregada, a parte que o usuário vê é chamada de "acima da dobra", enquanto a parte que o usuário ainda não vê é chamada de "abaixo da dobra".* As imagens que estão acima da dobra precisam ser carregadas imediatamente, ou então a experiência do usuário será afetada. Mas o usuário não vê as imagens abaixo da dobra até rolar para baixo. Assim, as imagens abaixo da dobra podem usar carregamento lazy.

*O que significa "dobra"? "Acima da dobra" e "abaixo da dobra" originou-se dos layouts de jornais. Os jornais normalmente vêm dobrados na metade horizontal, e a metade da frente — a área acima da dobra — é o que o leitor vê primeiro. Quando o termo é aplicado a um layout da web, a "dobra" é a parte inferior da tela do usuário.

Como implementar o carregamento lazy de imagens

Uma maneira de implementar o carregamento lazy é usar o carregamento de atributo HTML em uma tag de imagem. Adicionar loading="lazy", como no exemplo abaixo, informa ao navegador para aguardar o carregamento da imagem até que o usuário role para perto dela:

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

Os desenvolvedores web também podem usar estruturas de programação para implementar carregamento lazy mais sofisticado. O Angular é comumente usado para esta finalidade. A biblioteca JavaScript React também suporta carregamento lazy.

O Mirage da Cloudflare é outra maneira de implementar o carregamento lazy. Além de redimensionar automaticamente as imagens, o Mirage atua como um carregador lazy, apenas carregando imagens sob demanda. O recurso Mirage da Cloudflare está disponível para clientes Cloudflare nos planos de autoatendimento Pro e Business, bem como para clientes Enterprise.

Que outros recursos de página podem usar o carregamento lazy?

• JavaScript: JavaScript é o que é conhecido como recurso de bloqueio de renderização — o que significa que um navegador não pode renderizar a página até que o código JavaScript seja carregado. O código JavaScript pode ser dividido em módulos menores que são carregados quando necessário, reduzindo o tempo de carregamento de páginas que precisam executar o JavaScrip (saiba mais).
• CSS: CSS também é um recurso de bloqueio de renderização. Dividir um arquivo CSS em vários arquivos que são carregados apenas quando necessário pode ajudar a reduzir o tempo que um navegador fica bloqueado para renderizar o restante da página. Arquivos CSS sem bloqueio devem ter seu próprio link com uma propriedade media adicionada para informar ao navegador quando carregá-los(saiba mais).
• iframes: iframes são usados para incorporar conteúdo de uma fonte externa em uma página web. As tags iframe podem incluir o mesmo atributo de carregamento de HTML descrito acima para imagens.

Quais são as vantagens do carregamento lazy?

Carregamento de página mais rápido: tudo o mais sendo igual, páginas web com tamanhos de arquivo menores carregam mais rapidamente. Com o carregamento lazy, uma página web começa menor que seu tamanho total e, portanto, carrega mais rapidamente. A performance rápida na web tem vários benefícios, incluindo melhor SEO, taxas de conversão mais altas e uma experiência do usuário aprimorada.

Sem conteúdo desnecessário: suponha que uma página carregue várias imagens abaixo da dobra, mas o usuário saia da página antes de rolar para baixo. Nesse caso, a largura de banda usada para fornecer as imagens e o tempo gasto pelo navegador solicitando e renderizando as imagens foram essencialmente desperdiçados. Por outro lado, o carregamento lazy garante que essas imagens sejam carregadas apenas quando necessário. Isso economiza tempo e poder de processamento e pode economizar dinheiro para o proprietário do site porque usa menos largura de banda.

Quais são as desvantagens do carregamento lazy?

Os usuários podem solicitar recursos mais rapidamente do que o esperado: por exemplo, se um usuário rolar rapidamente para baixo em uma página, ele pode ter que esperar o carregamento das imagens. Isso pode afetar negativamente a experiência do usuário.

Comunicação adicional com o servidor: em vez de solicitar todo o conteúdo da página de uma só vez, o navegador pode ter que enviar várias solicitações aos servidores do site para obter conteúdo à medida que o usuário interage com a página. O uso de uma rede de distribuição de conteúdo (CDN) minimiza essa potencial desvantagem, porque as imagens são armazenadas em cache pela CDN e o navegador não precisa enviar uma solicitação até o servidor de origem para buscá-las.

Código adicional para o navegador processar: se um desenvolvedor adicionar várias linhas de JavaScript a uma página web para informar ao navegador como fazer o carregamento lazy dos recursos da página, isso aumentará a quantidade de código que o navegador precisa carregar e processar. Se feito de forma ineficiente, esse pequeno tempo adicional de carregamento e processamento pode superar o tempo economizado pelo carregamento lazy.

O que é carregamento eager?

O carregamento eager é carregar todos os recursos da página web ao mesmo tempo ou o mais rápido possível. Alguns aplicativos que usam carregamento eager podem exibir uma tela "Carregando". Aplicativos web complexos e com muitos códigos, como jogos on-line, podem preferir usar o carregamento eager.

De que outra forma os desenvolvedores podem acelerar uma página web?

Vários fatores afetam a performance na web, mas essas três etapas são um bom ponto de partida para tornar um site mais rápido:

1. Usar uma CDN: quando o conteúdo da web é armazenado em cache em uma CDN, a comunicação com o servidor de origem é mantida no mínimo, independentemente do carregamento lazy ser usado ou não. As CDNs também entregam conteúdo aos usuários mais rapidamente porque geralmente estão mais próximas do usuário do que do servidor de origem.
2. Otimizar imagens: imagens muito grandes afetarão a performance, mesmo se o carregamento lazy for usado. Reduzir o tamanho do arquivo de imagem sempre que possível ajuda a garantir que as imagens sejam carregadas rapidamente.
3. Minificar o código: Minificação é o processo de remover todos os caracteres desnecessários dos códigos CSS e JavaScript sem alterar sua funcionalidade. Isso inclui a remoção de espaços em branco, comentários e ponto e vírgula. A minificação reduz o tamanho do arquivo de código, aumentando a velocidade de carregamento.

Veja mais maneiras de melhorar a performance da página web: Dicas para melhorar a velocidade do site