> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/desempenho/lazyload.md).

# 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;

![](/files/WLAV08w0a9tjiLlkKHDd)

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.