Última atualização em 09/07/2023
O Lazy Load é uma estratégia para identificar recursos como não bloqueantes (não críticos) e carregá-los somente quando necessário. É uma maneira de diminuir o comprimento do caminho crítico de renderização, o que se traduz em tempos de carregamento de página reduzidos.
O lazy load pode ocorrer em diferentes momentos no aplicativo, mas normalmente acontece em algumas interações do usuário, como rolagem e navegação.
Visão geral
À medida que a web evoluiu, vimos grandes aumentos no número e no tamanho dos ativos enviados aos usuários. Entre 2011 e 2019, o peso médio dos recursos aumentou de ~ 100 KB para ~ 400 KB para desktop e ~ 50 KB para ~ 350 KB para celular. Enquanto o tamanho da imagem aumentou de ~ 250 KB para ~ 900 KB no desktop e ~ 100 KB para ~ 850 KB no celular.
Um dos métodos que podemos usar para resolver esse problema é encurtar o comprimento do Caminho Crítico de Renderização por meio do lazy load de recursos que não são críticos para a primeira renderização. Um exemplo prático seria quando você acessa a página inicial de um site de comércio eletrônico que possui um link para uma página/seção de carrinho e todos os seus recursos (JS, CSS, imagens…) são baixados somente quando o usuário navega para essa página do carrinho.
Estratégias
O lazy load pode ser aplicado a vários recursos e por meio de várias estratégias.
Veja também: O Que é WHM (Web Host Manager)
Em geral
Divisão de código JavaScript, CSS e HTML podem ser divididos em partes menores. Isso permite enviar o código mínimo necessário para fornecer valor antecipadamente, melhorando os tempos de carregamento da página. O resto pode ser carregado sob demanda.
- Divisão de ponto de entrada: separa o código por ponto(s) de entrada no aplicativo
- Divisão dinâmica: separa o código onde as instruções de importação dinâmica () são usadas
JavaScript
CSS
Por padrão, o CSS é tratado como um recurso de bloqueio de renderização, portanto, o navegador não renderizará nenhum conteúdo processado até que o CSSOM seja construído. CSS deve ser fino, entregue o mais rápido possível, e os tipos de mídia de uso e consultas são aconselhados a desbloquear a renderização.
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)">
<link href="print.css" rel="stylesheet" media="print">
É possível realizar algumas otimizações de CSS para conseguir isso.
Fontes
Por padrão, as solicitações de fonte são atrasadas até que a árvore de renderização seja construída, o que pode resultar em renderização de texto atrasada.
É possível substituir o comportamento padrão e pré-carregar recursos de fonte da Web usando <link rel="preload">, a propriedade CSS font-display e a API de carregamento de fontes.
Veja também: Corrigir Erro WordPress “Houve um Erro Crítico no Seu Site”
Imagens e iframes
Muitas vezes, as páginas da Web contêm muitas imagens que contribuem para o uso de dados e a rapidez com que uma página pode ser carregada. A maioria dessas imagens está fora da tela (não crítica), exigindo interação do usuário (um exemplo de rolagem) para visualizá-las.
Atributo de carregamento O loadingatributo em um <img>elemento (ou o loadingatributo em um <iframe>) pode ser usado para instruir o navegador a adiar o carregamento de imagens/iframes que estão fora da tela até que o usuário role até perto deles.
<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
O loadevento é acionado quando todo o conteúdo carregado avidamente é carregado; nesse momento, é inteiramente possível (ou mesmo provável) que possa haver imagens carregadas lentamente que estejam dentro da janela de visualização visual que ainda não foram carregadas.
Você pode determinar se uma determinada imagem terminou de carregar examinando o valor de sua completepropriedade booleana.
Polyfill Inclua este polyfill para fornecer suporte para navegadores mais antigos e atualmente incompatíveis: loading-attribute-polyfill
Intersection Observer API Os Observadores de Interseção permitem que o usuário saiba quando um elemento observado entra ou sai da janela de visualização do navegador.
Manipuladores de eventos Quando a compatibilidade do navegador é crucial, existem algumas opções:
- observador de interseção polyfill
- fallback para rolar, redimensionar ou alterar a orientação dos manipuladores de eventos para determinar se um elemento específico está na viewport