Como o próprio nome já indica, Lazy Loading (carregamento preguiçoso, em português) se trata de uma técnica que otimiza a performance de aplicações. Ao implementá-lo, é possível obter vantagens como a melhora da experiência do usuário, uma das características essenciais do projeto.
É isso mesmo, uma técnica de “carregamento preguiçoso” na verdade pode tornar a sua aplicação mais fácil de acessar, tornando o processo mais rápido. Achou confuso? Basta continuar a leitura para entender melhor!
O que é Lazy Loading?
O Lazy Loading se trata de uma estratégia de desenvolvimento web utilizada para identificar os recursos que não são necessários em um primeiro momento e deixar para carregá-los depois, reduzindo o tempo de carregamento da página. Ele pode ser aplicado em websites ou mesmo aplicações em Angular.
Por que utilizar o Lazy Loading?
Você já desistiu de acessar algum site que não carregou rapidamente? A maioria das pessoas abandonam as páginas que levam mais de 3 segundos para carregar. Além disso, lá em 2010 o Google já tinha avisado que o tempo de carregamento do site era um dos fatores que poderiam fazer o site ranquear melhor ou não.
Nós vivemos na era do imediatismo e, ao buscar por uma informação, 5 segundos podem parecer eternidade. Por isso, pensar na user experience (experiência do usuário) significa pensar na velocidade de carregamento das aplicações.
Como funciona o Lazy Loading?
Antigamente, o carregamento do conteúdo de uma página era carregado todo de uma vez. Enquanto todos os módulos não fossem carregados, o conteúdo não aparecia. Chamado Eager Loading (carregamento ansioso, em português), esse método demandava um tempo de resposta de acordo com o tamanho da aplicação.
Aquelas que continham muitos arquivos, resultavam em um tempo de espera longo para os usuários. Com a popularização do acesso feito a partir de dispositivos móveis e em locais com conexões mais lentas, a velocidade do carregamento passou a ser cada vez mais importante para as aplicações.
Com o Lazy Loading, o carregamento dos módulos acontece sob demanda, apenas quando são necessários. Por isso, ao acessar determinada página, o usuário consegue visualizar o conteúdo muito mais rapidamente, enquanto o restante será carregado apenas quando ele fizer alguma ação – como rolar a tela.
Benefícios de utilizar o Lazy Loading
Aplicar o Lazy Loading pode proporcionar diversos benefícios. Abaixo você confere uma lista com os principais.
- Melhora a experiência do usuário: a página é exibida mais rapidamente e consome apenas a quantidade de dados necessária;
- Possibilidade de inserir mais conteúdo sem prejudicar o carregamento: se antes a quantidade de conteúdo precisava ser considerada, por atrasar o carregamento, agora isso não é mais um problema. Podem ser inseridos mais recursos e deixar o conteúdo mais atrativo;
- Aumento de conversão: se menos pessoas abandonam o site, mais delas podem ser convertidas em leads ou mesmo em clientes. Sendo assim, indiretamente, a velocidade do carregamento pode ajudar na taxa de conversão;
- Otimização da estrutura: o uso do Lazy Loading pode tornar a estrutura modularizada mais organizada, deixando o código mais limpo e tornando a manutenção mais fácil;
- Economia de recursos: para quem fornece os dados, um dos benefícios é a economia dos recursos, que só serão utilizados conforme o usuário solicitar;
- Aumento de performance do SEO: o próprio Google recomenda adiar o carregamento não crítico ou não visível para melhorar o desempenho. A documentação oficial fala sobre a importância do conteúdo estar visível quando carregado na viewport, caso contrário, a indexação é prejudicada.
Inclusive, o Google implementou o Core Web Vitals para analisar o desempenho de sites e portais e mede o LCP (Largest Contentful Paint, ou exibição do maior conteúdo), FID (First Input Delay, ou latência de entrada) e CLS (Cumulative Layout Shift, ou mudança de layout cumulativa). Você pode conferir o desempenho de um site usando o Google Search Console.
Compatibilidade com navegadores
No Internet Explorer 11 já havia sido introduzido o conceito de Lazy Loading, porém, de uma maneira ainda pouco eficiente, que acabou não sendo implementada por nenhum browser da época. Em 2019 o Chrome voltou a abordar o recurso na sua versão 76.
Depois, ele passou a ser implementado também em navegadores como Edge, Firefox, Chrome, Opera e Android Browser. A versão do WordPress 5.5 fez a introdução do recurso de Lazy Loading no seu Core em 2020.
Como implementar o Lazy Loading?
A maneira de implementar o Lazy Loading vai depender de como e onde ele será aplicado. Para implementar no Angular, por exemplo, é preciso criar novos módulos que são carregados sob demanda.
Já se você utiliza o WordPress a partir da versão 5.5, não precisa fazer nada. Porém, se utiliza uma versão anterior, pode optar por outros métodos. Veja abaixo.
Divisão de códigos
É possível dividir as linguagens de programação CSS, HTML e JavaScript em pedaços menores e, com isso, enviar o código mínimo necessário para fornecer o valor antecipadamente. O restante é carregado sob demanda.
CSS
O navegador não renderiza o conteúdo até que o CSSOM seja construído, por isso, o CSS precisa ser leve e entregue com a maior velocidade possível. Além disso, os tipos de mídia e o uso das consultas são aconselhados para desbloquear a renderização. Para isso, podem ser realizadas algumas otimizações CSS.
<link href = “style.css” rel = “stylesheet” media = “all”>
<link href = “portrait.css” rel = “stylesheet” media = “orientação: retrato”>
<link href = “print.css” rel = “stylesheet” media = “print”>
Imagens e iframes
Imagens podem ser um dos motivos para a demora do carregamento de uma página. Por vezes, elas não estão na tela assim que o usuário abre o site e é preciso uma interação, como a rolagem da página, para que elas sejam visualizadas. Desse modo, instruir o navegador para que ele adie o carregamento de imagens e frames fora da tela é uma maneira de aumentar a velocidade de carregamento inicial.
<img src = “image.jpg” alt = “…” loading = “lazy”>
<iframe src = “video-player.html” title = “…” loading = “lazy”> </iframe>
Fontes
Por vezes, ocorrem atrasos na renderização do texto por causa do atraso da solicitação de fontes, que só acontece quando a árvore de renderização já está construída. Para mudar esse comportamento padrão, você pode pré-carregar os recursos de fonte da web por meio do <link rel = “preload”>, a propriedade CSS font-display e a API de carregamento de fonte.
Polyfill
O Polyfill é usado quando é preciso implementar recursos modernos de JavaScript em navegadores mais antigos. Existe um polyfill para implementar o Lazy Loading: loading-attribute-polyfill
API Intersection Observer
Essa API funciona como uma sentinela, avisando quando o elemento passa a ficar visível dentro da página. Com isso, é possível executar ações sem precisar ficar olhando o scroll da tela, ganhando performance, mas sem que o código fique complexo.
Mas, ao implementar o Lazy Loading, é importante realizar testes para assegurar que os elementos sejam exibidos no momento certo. Além disso, é importante que o conteúdo possa ser rastreado pelos bots que fazem a indexação do Google.
E, se você se interessa pelo tema, vai gostar de saber que assinando o Multi+ você tem acesso a dezenas de cursos, inclusive o bootcamp online de Desenvolvedor(a) Front-End que tem duração de 10 semanas e aborda, entre outros temas, noções de UI (User Interface) e UX (User eXperience), além de Angular, CSS, Vue e muito mais.
Com apenas uma assinatura você também pode acessar outros bootcamps como Desenvolvedor(a) NODE.JS e até Desenvolvedor Mobile.
