# Lazyload

### **O que é e porque usar?**

O lazy loading, ou carregamento adiado, é uma técnica que adia o carregamento de recursos não críticos no carregamento inicial da página. Recursos não críticos são aqueles que estão além da primeira dobra do site, ou seja, aquilo que visualizado logo que a página e carregada e sem realizar o scroll.

Essa técnica pode ser aplica em qualquer elemento de um site, mas é amplamente utilizada em imagens e vídeos. Ela reduz o tempo de carregamento inicial da página, o peso dela e o uso dos recursos computacionais, gerando impactos positivos no desempenho, além de permitir a interação do usuário muito mais rápida.

### Como implementar?

Existem duas maneiras de implementar o Lazy Loading atualmente: através de scripts terceiros ou através de atributo HTML, cada um com suas vantagens e desvantagens.

#### Atributo HTML

O atributo `loading="lazy"` em tags HTML de imagens, video e iframe para indicar que o carregamento desse ver adiado até ser visualizado pelo usuário. Veja o exemplo abaixo para o carregamento de uma imagem.

{% code title="Exemplo" %}

```html
<img src="image.png" loading="lazy" alt="Image alt text" width="200" height="200">
```

{% endcode %}

Apesar dessa técnica não necessitar de nenhum script adicional, ela se baseia muito no suporte dos navegadores a técnica. Atualmente o suporte dela não é uniforme entre todos os navegadores disponíveis e pode resultar em divergências de experiencias pelos usuários.

O site [Can I Use](https://caniuse.com) permite verificar se esse e dezenas de outros recursos estão disponíveis nos navegadores modernos. &#x20;

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FKxL1pOg00NKLymP8MIx3%2Fimage.png?alt=media\&token=6e7996e5-861b-429d-83fe-b0b38db92f3f)

Repare que para [esse caso](https://caniuse.com/?search=lazy) do atributo `loading="lazy"` a porcentagem de usuários atingidos sem maiores problemas ainda gira entorno de 71%,  o que consideramos uma margem muito baixa para adotar essa técnica como padrão. Um bom limiar é a partir de 90%, pois indica que todos os grandes navegadores já suportam a funcionalidade.

#### Scripts terceiros

Scripts e bibliotecas de terceiros permitem implementar a técnica de lazy loading sem depender do suporte pelo navegador. Na maioria poucos ajustes no código são necessários para começar usar essa técnica.

Dessa maneira, é possível abranger um leque maior de usuários, gerando uma experiência unificada entre todos, agradando mais os visitantes.

Lembre-se que scripts de terceiros agregam carregamentos adicionais a página, então é necessário medir o impacto que eles terão e o se o benefício vale a pena. Em vias de regra, a implementação da técnica de lazy loading **sempre** é benéfica.