O que é lazy loading ‑ Conceitos e guia completo

O que é lazy load?

Lazy load, ou lazy loading, é a prática de impedir que imagens e outros ativos em sua página da web sejam carregados até que o usuário precise deles. Os recursos acima da dobra serão exibidos porque são importantes, mas as imagens mais abaixo não serão carregadas até que o usuário role para baixo até onde estão localizadas na página.

Para sites que não usam lazy load de imagens, o que normalmente acontece é que um usuário visitará sua página e o navegador baixará todos os ativos e recursos antes de criar a página para o usuário ver.

Se você já clicou em um link, teve que esperar muito tempo antes que as coisas fossem exibidas corretamente, é provável que essa página contenha muitos recursos que levam muito tempo para baixar e renderizar. Esse tipo de demora pode fazer com que alguém deixe uma página da web para trás, especialmente se isso ocorrer com todos os links na página em que clicar.

Mas quando você implementa o lazy load, em vez de o navegador carregar todos os recursos antecipadamente, ele usará uma imagem de espaço reservado para onde a imagem deve ir.

À medida que o usuário rola para baixo, ele pode até mesmo ver aquele espaço reservado antes que o navegador insira a imagem que deveria estar lá. Esse método de carregamento de imagens pode aumentar a velocidade de carregamento da página, melhorando a experiência do usuário. Isso é especialmente verdadeiro para sites que hospedam muitas imagens ou iframes. Embora seja importante saber o que significa lazy load de imagens, você também precisa entender que o lazy load não se aplica apenas às imagens. Vários ativos e recursos podem se beneficiar do lazy load, mas o carregamento de imagens continua sendo a principal função.

lazy loading versus eager loading

Então, agora que revisamos o que é lazy load, vamos discutir lazy loading versus eager loading.

Embora o lazy loading evite downloads desnecessários, o eager loading é o oposto. Com o eager loading, todas as imagens são carregadas imediatamente assim que alguém abre o site.

Quando os usuários se deparam com uma página que usa eager loading, eles podem ver alguns indicadores de carregamento ou ter que esperar enquanto todo o download e renderização ocorrem. Isso também significa que, mesmo que o usuário nunca se aventure mais na página, todas as imagens ainda serão baixadas, o que é o oposto de como funciona o lazy load.

O eager loading pode beneficiar alguns sites, como aqueles com pouquíssimas imagens ou imagens altamente otimizadas, mas para a maioria, esse método pode lentificar imensamente uma página da web.

Ainda assim, para sites com muitos textos e aqueles com ativos muito leves, o eager loading pode funcionar bem. Por exemplo, um site como a Wikipédia se beneficia muito do eager loading.

Benefícios do lazy load

Os benefícios do lazy load não são apenas o aumento nas velocidades de carregamento do site. O lazy load também traz benefícios adicionais, como:

Tempo de carregamento mais rápido do site

Sites pequenos e ativos de tamanhos pequenos de arquivos serão carregados rapidamente. O lazy load ajuda a reduzir o tamanho inicial de um site, o que o ajuda a carregar no navegador mais rapidamente.

Um site mais rápido traz muitos benefícios. Quando você carrega imagens com lazy loading no seu site, pode melhorar as conversões, aumentar e enriquecer a experiência do usuário e tornar o site muito mais fácil para SEO, que os mecanismos de pesquisa vão adorar.

Uso de largura de banda reduzido

Quando suas imagens são carregadas com lazy load, os usuários do site só receberão os ativos de que precisam. Isso significa que o navegador não precisará perder largura de banda baixando imagens que o usuário nunca verá. Isso pode criar uma boa redução no uso da largura de banda ao longo do tempo.

Se o seu site tem muitas imagens de tamanhos de arquivo maiores, essa conservação do uso da largura de banda pode fazer uma enorme diferença de saída. Essa conservação da largura de banda beneficia você e o usuário. Como você não está servindo esses ativos, também está mantendo o uso da largura de banda para seus servidores.

Experiência do usuário aprimorada

O lazy load melhora a experiência do usuário de várias maneiras.

Ninguém gosta de um site lento. Na verdade, sites lentos muitas vezes podem fazer com que um usuário sinta que há algo errado com o dispositivo no qual ele está visualizando o site. O carregamento mais rápido também pode melhorar a experiência do usuário de maneiras que não são tão perceptíveis. Por exemplo, seus navegadores não precisarão fazer todo o trabalho pesado de baixar tanto em segundo plano. Isso pode salvar os recursos do sistema e permitir que os dispositivos funcionem melhor enquanto estiverem no site.

Toda essa atividade do navegador também significa atividade da CPU, bateria e outros recursos do dispositivo. Essa é uma das principais práticas recomendadas de SEO móvel.

Melhor desempenho de SEO

Carregamento de página mais rápido é um aspecto crítico da otimização do mecanismo de busca (SEO). Os mecanismos de busca geralmente penalizam sites lentos, e um dos maiores culpados pelo carregamento lento de sites são as imagens. Se quiser aumentar o desempenho do site e as classificações do mecanismo de pesquisa, você precisa maximizar a velocidade de carregamento.

Desvantagens do lazy load

As implementações de lazy load podem vir em várias formas, e nem todos os métodos de lazy load são adequados para todos os sites.

Muitas vezes, a implementação de lazy load pode se tornar uma tarefa complexa, especialmente se você estiver usando um CMS que prefere um método de implementação em vez de outro.

Isso também significa que você pode ter problemas de compatibilidade ao tentar usar lazy load. Você pode até ter um CMS com lazy load incluído por padrão. Quando você tenta um tipo diferente de implementação, isso pode criar mais problemas de compatibilidade.

Algumas outras desvantagens podem depender de como o usuário rola sua página. Se eles rolarem muito rápido, o lazy load não consegue acompanhar. Isso pode se tornar prejudicial a certos tipos de sites. Por exemplo, o desenvolvimento de sites de e-commerce quer imagens que sempre permaneçam na página.

A rolagem rápida também pode criar problemas de buffer. Além disso, o lazy load cria mais chamadas de servidor que podem ser adicionadas se o usuário continuar.

Uma desvantagem potencial final são os benefícios reduzidos do armazenamento em cache. O cache geralmente só funciona quando os ativos são solicitados. Ou, as informações no cache podem ficar por um longo tempo e ficar desatualizadas ou obsoletas devido à raridade de seu uso devido ao cache lento.

Pode parecer que são muitas as desvantagens, mas para a maioria dos casos de uso, os benefícios do lazy load superam em muito as possíveis desvantagens.

Muitas das desvantagens também têm a ver com a implementação. O lazy load pode funcionar de várias maneiras, por isso é importante acertar. A implementação correta lhe dará os melhores resultados possíveis.

Como implementar o lazy load

Você pode implementar o lazy load de várias maneiras. Alguns métodos manuais que usam CSS podem funcionar para aqueles que sabem o que estão fazendo. Mas as soluções CMS que usam plug-ins ou complementos provavelmente terão um módulo de lazy load que você pode instalar.

Alguns plug-ins e complementos, principalmente da variedade de cache, tendem a ter também opções de lazy load. Você pode encontrar bibliotecas de código aberto com código JavaScript de lazy load que você pode adicionar.

Mas não importa como você implementa o lazy load, há algumas práticas recomendadas que podem permitir que você aproveite ao máximo. Entre elas:

• Apenas recursos de lazy load abaixo da dobra
• Não use lazy load para recursos essenciais necessários para a funcionalidade inicial do site ou aplicativo
• Preste atenção a quaisquer erros de carregamento de imagem e corrija-os imediatamente
• Definir parâmetros de lazy load muito rigorosos
• Cortar o código de lazy load para torná-lo mais eficiente
• Implementar soluções de fallback para navegadores que não suportam lazy load ou JavaScript

Além disso, como o lazy load não é apenas para imagens, você pode ter que descobrir diferentes práticas para diferentes conteúdos.

Tudo isso pode se tornar muito estressante. Por isso é melhor fazer a implementação e, em seguida, lidar com as coisas de forma singular à medida que você avança. Por exemplo, ao otimizar seu site para dispositivos móveis, veja as ferramentas de design de interface do usuário que ajudam a ajustar o lazy load.

Otimize a experiência do usuário com lazy load

O lazy load funciona como uma ferramenta que você pode usar para otimizar a experiência do usuário e obter todos os benefícios que acompanham isso. Você não precisa olhar para isso como uma coisa de UX versus UI, pois o lazy load pode melhorar ambos.

Além disso, você não precisa saber tudo em um nível técnico quando tiver as ferramentas que podem ajudá-lo a tornar seu site mais rápido sem precisar se aprofundar a nível de codificação.

Isso ainda ajuda você a entender alguns conceitos básicos, para que possa tomar decisões informadas sobre o que implementar ou quais serviços usar que podem ajudar seu site ou aplicativo a ter um desempenho mais rápido e melhor para seus usuários. O Mailchimp oferece um grande número de soluções que podem ajudar a acelerar seu site e melhorar a experiência do usuário.

Se você precisar de integrações, informações e outros recursos para ajudar a acelerar seu site ou aplicativo móvel, consulte todas as ferramentas que o MailChimp oferece.