# 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
```
{% 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.
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/desempenho/lazyload.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.