O suporte para upload de imagens e iframe preguiçosos embutidos chegou à Web!
A partir da versão 76 do Chrome, você pode usar o novo atributo de
loading para carregar recursos lentamente, sem precisar escrever código adicional para isso ou usar uma biblioteca JavaScript de terceiros. Vamos olhar para os detalhes.
Este vídeo demonstra
um exemplo desta função:
Por que carregamento preguiçoso embutido?
De acordo com o
HTTPArchive , as imagens são o tipo de recurso mais solicitado na maioria dos sites e geralmente consomem mais largura de banda do que qualquer outro. No percentil 90, os sites enviam cerca de 4,7 MB de imagens para desktops e dispositivos móveis.
Fotos suficientes
com gatos .
Os iframes incorporados também consomem muitos dados e podem prejudicar o desempenho da página. O download de imagens e iframes não críticos somente no momento em que o usuário pode vê-los melhora a velocidade de carregamento da página, minimiza a carga na largura de banda do canal do usuário e reduz o uso de memória.
Atualmente, existem duas maneiras de atrasar o carregamento de imagens e quadros localizados fora da tela:
Qualquer opção pode permitir que os desenvolvedores habilitem a funcionalidade de carregamento lento, e muitos criaram bibliotecas de terceiros para fornecer abstrações ainda mais fáceis de usar. Se você tiver suporte para carregamento lento diretamente no navegador, não haverá necessidade de uma biblioteca de terceiros. O carregamento lento embutido também garante que o carregamento atrasado de imagens e quadros continue funcionando mesmo se o JavaScript estiver desativado no lado do cliente.
Atributo de carregamento
Hoje, o Chrome já baixa imagens com prioridades diferentes, dependendo de onde elas estão localizadas em relação à área de visualização do dispositivo. As imagens abaixo da área de visualização são carregadas com prioridade mais baixa, mas ainda assim carregadas o mais rápido possível.
No Chrome 76, você pode usar o atributo
loading para atrasar permanentemente o carregamento de imagens e quadros fora da tela, o que pode ser alcançado rolando:
<img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>
loading valores de atributo suportados:
auto : configuração padrão do modo de carregamento lento no navegador. Igual ao atributo ausentelazy : adie o carregamento de um recurso até atingir a distância estimada da janela de visualizaçãoeager : carregar um recurso imediatamente, apesar da localização na página
Esse recurso continuará sendo atualizado até que seja lançado na versão estável (não antes do Chrome 76). Mas você pode tentar ativando os seguintes sinalizadores no Chrome:
- chrome: // flags / # enable-lazy-image-loading
- chrome: // flags / # enable-lazy-frame-loading
Limiar de distância de carregamento
Todas as imagens e quadros visíveis na página sem a necessidade de rolagem são carregados como padrão. Os que estão localizados abaixo da área de visualização do dispositivo são carregados apenas quando o usuário rola para eles.
A distância na qual o carregamento começa não é fixa e varia dependendo de vários fatores:
Você pode encontrar os valores padrão para os diferentes tipos de compostos efetivos na
fonte de cromo . Essas métricas e até a abordagem de carregamento ao atingir uma certa distância da área de visualização podem mudar em um futuro próximo, pois a equipe do Chrome aprimora a heurística para determinar quando iniciar o download.
No Chrome 77, você pode experimentar esses diferentes limites,
diminuindo a velocidade da conexão no DevTools. Durante isso, você precisará substituir o tipo de conexão efetivo no navegador usando o
chrome://flags/#force-effective-connection-type.Carregar Imagens
O atributo de carregamento afeta os quadros de maneira diferente das imagens, dependendo se o quadro está oculto (os quadros ocultos são frequentemente usados para tarefas de análise ou comunicação). O Chrome usa os seguintes critérios para determinar se um quadro está oculto:
- largura e altura do quadro 4px ou menos
display: none ou visibility: hidden são aplicadas propriedades visibility: hidden- o quadro está fora da tela usando o posicionamento X ou Y negativo
Se um quadro atender a alguma dessas condições, o Chrome considerará oculto e na maioria dos casos não será carregado no modo adiado. Os quadros que não estão ocultos serão carregados apenas quando estiverem dentro do
limite de carregamento . Para os quadros que ainda estão carregando no modo de carregamento diferido, um espaço reservado é exibido
Perguntas frequentes
Existem planos para expandir esse recurso?
Há planos de alterar o modo de carregamento retardado do navegador padrão para exibir automaticamente neste modo quaisquer imagens e quadros cujo carregamento possa ser atrasado se o
modo Lite estiver ativado no Chrome para Android.
É possível alterar a distância da imagem ou do quadro em que o carregamento atrasado começa?
Esses valores são codificados e não podem ser alterados por meio da API. No entanto, eles podem mudar no futuro, pois a equipe do Chrome está experimentando diferentes distâncias e variáveis de limite.
As imagens definidas através da propriedade CSS background obtêm o atributo loading?
Não, no momento, ele só pode ser usado com tags.
Como o atributo de carregamento funciona com imagens que estão no escopo, mas não são visíveis (como um carrossel)?
No modo adiado, somente as imagens são carregadas a uma
certa distância da parte inferior da área de visualização do dispositivo. Todas as imagens acima da área de visualização, independentemente de estarem visíveis no momento, são carregadas normalmente.
E se eu já usar uma biblioteca ou script de terceiros para adiar o carregamento de imagens ou quadros?
O atributo loading não deve afetar o código que carrega dados no modo adiado, mas é importante considerar alguns pontos importantes:
- Se o carregador de inicialização de terceiros no modo adiado tentar carregar imagens ou quadros antes que o Chrome os carregue no modo normal, ou seja, a uma distância maior que o limite da distância de download do navegador, eles ainda serão atrasados e carregados de acordo com as regras do comportamento normal do navegador
- Se o carregador de inicialização de terceiros usar uma distância menor para determinar quando carregar uma imagem ou quadro específico que o navegador, o comportamento corresponderá às configurações do carregador de inicialização
Um dos motivos importantes para continuar usando uma biblioteca de terceiros em paralelo com loading = “preguiçoso” é fornecer um polyfile para navegadores que não suportam esse atributo.
Outros navegadores suportam carregamento lento integrado?
O atributo
loading pode ser visto como uma melhoria progressiva. Os navegadores que o suportam podem fazer upload de imagens e quadros no modo adiado. Aqueles que não suportam - por enquanto, carregue imagens como de costume. Do ponto de vista do suporte entre navegadores, o atributo
loading é suportado no Chrome 76 e em qualquer navegador baseado no Chromium 76. Há também um
erro em aberto sobre a implementação dessa função no Firefox.
Uma API semelhante foi proposta e usada no IE e Edge, mas estava focada em diminuir as prioridades de download em vez de adiá-la completamente.
O que fazer com navegadores que ainda não suportam o download atrasado interno?
Crie um polyfile ou use uma biblioteca de terceiros para carregar imagens no site no modo adiado. A propriedade loading pode ser usada para determinar se a funcionalidade é suportada no navegador:
if ('loading' in HTMLImageElement.prototype) {
Por exemplo,
lazysizes é uma biblioteca JavaScript popular para carregamento lento. Você pode definir o suporte ao atributo
loading para carregar esta biblioteca apenas quando o
loading não
loading suportado. Funciona da seguinte maneira
<img src="hero.jpg" alt="…"> <img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload"> <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Demonstração de trabalho. Experimente em navegadores como Firefox ou Safari para ver o fallback em ação.
A biblioteca lazysizes também fornece
um plug-in de carregamento interno que usa carregamento retardado interno quando possível e usa a funcionalidade da biblioteca quando necessário.
Como o atraso no carregamento embutido afeta os anúncios em uma página?
Todos os anúncios apresentados na forma de imagens ou quadros também são carregados no modo adiado, como qualquer outra imagem ou quadro.
Como as imagens são processadas se uma página da web é impressa?
Embora não haja funcionalidade no Chrome 76, há
um problema em aberto que carrega imediatamente todas as imagens e quadros ao imprimir uma página.
Conclusão
O uso do suporte interno para carregamento lento de imagens e quadros pode melhorar significativamente o desempenho das páginas da web.
Se você perceber algum comportamento incomum ao ativar esse recurso no Chrome,
relate um erro .