Melhores maneiras de personalizar seu próprio carregamento lento para sites
Publicados: 2019-07-29Lazy Loading é usado para adiar o carregamento de algumas imagens ou elementos de página da web para mais tarde, quando um usuário visita uma página da web. Isso geralmente é feito para imagens e elementos do site abaixo da dobra. A ideia é que, em vez de carregar a página inteira de uma só vez, você carrega algumas partes da página enquanto o usuário continua rolando para baixo.
O principal benefício do uso do lazy loading é que ele diminui o tempo de carregamento do site como um todo. O Lazy Loading melhora o desempenho do site e oferece uma melhor experiência ao usuário, carregando primeiro a parte superior, que os visitantes podem começar a assistir ou ler imediatamente. Quando os visitantes chegam à sua página da web e têm que esperar muito, eles perdem o interesse e podem ir embora. No entanto, se você der a eles algo para assistir ou ler instantaneamente enquanto carrega o restante da página da Web, poderá mantê-los conectados ao seu site. A segunda vantagem do carregamento lento é a redução de custos. As imagens são baixadas apenas se o visitante do site visitar essa seção específica do site. Assim, se o visitante não rolar para baixo, menos dados são baixados em seu dispositivo, economizando dinheiro.
Devido a essas vantagens, o carregamento lento é uma excelente maneira de melhorar a experiência e a eficiência do usuário do seu site.
Você pode personalizar o carregamento lento para o seu site de duas maneiras – usando a propriedade background CSS ou usando a tag <img>. No entanto, o método de tag <img> é o mais comum dos dois, pois essa técnica é fácil de usar.
propriedade da tag <img>:
Quando a tag <img> é usada, o navegador usa o atributo src para acionar o carregamento da imagem. Não importa se é a 1ª imagem ou a 100ª imagem do seu código. Se o navegador receber o atributo src, ele acionará o carregamento da imagem. Portanto, para carregar lentamente essas imagens, adicione a URL da imagem a um atributo diferente de src. Por exemplo, se você colocar a URL da imagem no atributo data-src, o navegador não acionará o carregamento da imagem, pois o atributo src está vazio.
Agora que o carregamento inicial parou, precisamos informar ao navegador quando a imagem deve ser carregada. Queremos acionar o carregamento da imagem assim que ela entrar na viewport. Há duas maneiras de verificar o tempo de entrada de uma imagem na janela de visualização:
1. Usando eventos JavaScript:
Nesta técnica, os ouvintes de eventos são usados em eventos de redimensionamento, mudança de orientação e rolagem no navegador. O evento de rolagem é o mais óbvio. É usado para verificar quando o usuário rola a página da web. Os eventos 'orientationChange' e 'resize' são igualmente essenciais para o carregamento lento. O evento resize é acionado quando há alterações no tamanho da janela do navegador. O evento 'orientationChange' ocorre quando o dispositivo é girado do modo retrato para o modo paisagem ou vice-versa. Nesses casos, o número de imagens visíveis na tela será alterado e, portanto, precisaremos acionar o carregamento da imagem.
Quando um desses eventos ocorre, procuramos todas as imagens presentes na página que ainda não foram carregadas. Ao verificar todas as imagens descarregadas presentes na página da Web que agora está na viewport, descobrimos as que precisam ser carregadas instantaneamente. Isso é feito usando a parte superior da rolagem do documento atual, a altura da janela e o deslocamento superior da imagem.
Se uma imagem entrou na viewport, pegamos a URL da imagem do atributo data-src e a colocamos no atributo src que aciona o carregamento da imagem. Em seguida, temos que remover a classe lazy da imagem, pois essa classe faz com que as imagens sejam carregadas lentamente. Quando todas as imagens são carregadas, os ouvintes de eventos são removidos.
No caso de rolagem, o evento de rolagem é acionado continuamente. Portanto, para aumentar o desempenho, podemos adicionar um pequeno tempo limite que limitará a execução do carregamento lento.
2. Usando a API do observador de interseção:
A API Intersection Observer é uma API comparativamente nova em navegadores. Essa técnica torna muito simples detectar o tempo de entrada de um elemento na viewport. Esta técnica oferece excelente desempenho sem usar matemática complexa em comparação com o método anterior.
Primeiro, temos que anexar o observador a todas as imagens que requerem carregamento lento. Quando a API detecta que uma imagem entrou na janela de visualização, ela seleciona a URL do data-src e a coloca no atributo src usando o método 'isIntersecting' para acionar o carregamento da imagem. Depois disso, a classe lazy é removida junto com a remoção do observador.
A API Intersection Observer funciona rapidamente sem fazer o site parecer lento na rolagem em comparação com o uso de eventos JavaScript. Com a técnica do ouvinte de eventos, tivemos que adicionar um tempo limite que adiciona um pequeno atraso. No entanto, a API Intersection Observer não é compatível com todos os navegadores. Assim, o ouvinte de eventos tornou-se uma escolha popular para os usuários.
Propriedade de fundo CSS:
Para carregar imagens de fundo CSS, o navegador precisa construir CSS Object Model (CSSOM) junto com Document Object Model (DOM) para decidir se o estilo CSS será aplicado a um DOM presente no documento existente. Se a regra CSS não se aplicar ao elemento, o navegador não carregará a imagem de fundo.
Com esta técnica, aplicamos a propriedade CSS background-image quando um elemento chega à viewport. Existe um elemento com ID bg-image (imagem de fundo) em CSS. Uma vez que a classe lazy é adicionada à imagem, na técnica CSS, sobrescrevemos a propriedade bg-image e a tornamos none.
Adicionar a classe .lazy ao #bg-image é preferível em CSS do que usar #bg-image sozinho. Inicialmente, o navegador aplica background-image: none ao elemento. Uma vez que percorremos a página da web, os ouvintes de eventos ou o Observador de Interseção detecta a imagem presente na viewport e exclui a classe .lazy. Isso não é aplicável na técnica CSS, pois a propriedade bg-image é aplicada ao elemento que aciona o carregamento da imagem de fundo.
Então, aqui estão as duas maneiras de personalizar seu próprio site de carregamento lento. Ambas as técnicas oferecem resultados excepcionais. No entanto, se você deseja uma técnica direta, deve usar a tag <img>. Existem muitos plugins disponíveis para os usuários do WordPress personalizarem imagens de carregamento lento em seus sites WordPress também. A otimização de imagens para o seu site WordPress usando esses plugins, juntamente com o carregamento lento, melhorará o desempenho do seu site, proporcionará uma ótima experiência e ajudará no SEO também.