Espero que você goste desse artigo. Se você quer que nosso time faça o seu marketing, clique aqui.

Entenda o que é Lazy Load

Tempo de leitura estimado: 3 minutos

Última atualização em 22/06/2022

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

Entenda o que é Lazy Load

À 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

Módulo de tipo de script Qualquer tag de script com type="module"é tratada como um módulo JavaScript e é adiada por padrão.

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">

Relacionado:  O que é a satisfação do cliente e por que é importante?

É possível realizar algumas otimizações de CSS para conseguir isso.

Fontes

Lazy Load

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>

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
Avalie este artigo post

Deixe uma resposta

error: Conteúdo protegido