Carregamento lento de imagens no navegador para a Web

O carregamento lento integrado finalmente chegou!

A Web agora oferece suporte ao carregamento lento de imagens no nível do navegador. Este vídeo mostra uma demonstração do recurso:

É possível usar o atributo loading para carregar imagens de maneira lenta sem precisar escrever um código personalizado ou usar uma biblioteca JavaScript separada. Vamos nos aprofundar nos detalhes.

Compatibilidade com navegadores

Os navegadores que não oferecem suporte ao atributo loading simplesmente o ignoram, sem efeitos colaterais.

Por que usar o carregamento lento no nível do navegador?

De acordo com o HTTP Archive, as imagens são o tipo de recurso mais solicitado para a maioria dos sites e geralmente ocupam mais largura de banda do que qualquer outro recurso. No 90o percentil, os sites enviam mais de 5 MB de imagens em computadores e dispositivos móveis. São muitas fotos de gatos.

Antes, havia duas maneiras de adiar o carregamento de imagens fora da tela:

• Como usar a API Intersection Observer
• Como usar manipuladores de eventos scroll, resize ou orientationchange

Qualquer uma das opções pode permitir que os desenvolvedores incluam uma funcionalidade de carregamento lento, e muitos desenvolvedores criaram bibliotecas de terceiros para fornecer abstrações ainda mais fáceis de usar. No entanto, com o carregamento lento compatível diretamente com o navegador, não é necessário ter uma biblioteca externa. O carregamento lento no nível do navegador também garante que o carregamento adiado de imagens ainda funcione mesmo que o JavaScript esteja desativado no cliente.

O atributo loading

O Chrome carrega imagens em prioridades diferentes, dependendo de onde elas estão localizadas em relação à janela de visualização do dispositivo. As imagens abaixo da janela de visualização são carregadas com uma prioridade mais baixa, mas ainda assim são buscadas conforme a página é carregada.

É possível usar o atributo loading para adiar completamente o carregamento de imagens fora da tela que são acessadas com a rolagem:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Veja os valores aceitos para o atributo loading:

• lazy: adia o carregamento do recurso até que ele atinja uma distância calculada da janela de visualização.
• eager: comportamento de carregamento padrão do navegador, que é o mesmo que não incluir o atributo e significa que a imagem é carregada independentemente de onde ela está localizada na página. Ainda que esse seja o padrão, pode ser útil definir isso explicitamente se as ferramentas adicionarem loading="lazy" automaticamente se não houver um valor explícito ou se o linter reclamar se ele não estiver definido explicitamente.

Relação entre o atributo loading e a prioridade de busca

O valor eager é simplesmente uma instrução para carregar a imagem normalmente, sem atrasar ainda mais o carregamento se ela estiver fora da tela. Isso não significa que a imagem é carregada mais rapidamente do que outra sem o atributo loading="eager".

Os navegadores priorizam recursos com base em várias heurísticas, e o atributo loading apenas declara quando o recurso de imagem está na fila, não como ele é priorizado nessa fila. eager implica apenas que os navegadores de filas antecipadas costumam usar por padrão.

Se você quiser aumentar a prioridade de busca de uma imagem importante (por exemplo, a imagem LCP), use Fetch Priority com fetchpriority="high".

Uma imagem com loading="lazy" e fetchpriority="high" ainda será atrasada enquanto estiver fora da tela e será buscada com alta prioridade quando estiver quase dentro da janela de visualização. Provavelmente, essa combinação seria buscada com alta prioridade nesse caso, portanto, essa combinação não deve ser necessária nem usada.

Limites de distância da janela de visualização

Todas as imagens que estão acima da dobra, ou seja, imediatamente visíveis sem rolagem, são carregadas normalmente. Aquelas que estão muito abaixo da janela de visualização do dispositivo só são buscadas quando o usuário rola perto delas.

A implementação do carregamento lento do Chromium tenta garantir que as imagens fora da tela sejam carregadas cedo o suficiente para que terminem de carregar quando o usuário rola para perto delas. Ao buscar imagens próximas bem antes de elas se tornarem visíveis na janela de visualização, maximizamos a chance de elas já estarem carregadas no momento em que se tornam visíveis.

Em comparação com as bibliotecas de carregamento lento do JavaScript, os limites para buscar imagens que ficam na tela podem ser considerados conservadores.

O limite de distância não é fixo e varia de acordo com vários fatores:

• O tipo de recurso de imagem que está sendo buscado
• O tipo de conexão efetiva

Encontre os valores padrão para os diferentes tipos de conexão efetivas na origem do Chromium. Esses números, e até mesmo a abordagem de buscar somente quando uma determinada distância da janela de visualização é alcançada, podem mudar no futuro, à medida que a equipe do Chrome melhorar a heurística para determinar quando começar a carregar.

Melhorias na economia de dados e nos limites de distância da janela de visualização

Em julho de 2020, o Chrome fez melhorias significativas para alinhar os limites de distância da janela de visualização do carregamento lento de imagens para atender melhor às expectativas dos desenvolvedores.

Em conexões rápidas (4G), reduzimos os limites de distância da janela de visualização do Chrome de 3000px para 1250px e, em conexões mais lentas (3G ou anteriores), mudamos o limite de 4000px para 2500px. Essa mudança tem dois efeitos:

• O <img loading=lazy> se comporta mais perto da experiência oferecida pelas bibliotecas de carregamento lento do JavaScript.
• Os novos limites de distância da janela de visualização ainda nos permitem garantir que as imagens provavelmente serão carregadas quando o usuário rolar a tela até elas.

Veja abaixo uma comparação entre os limites antigos e novos de distância da janela de visualização em uma das nossas demonstrações sobre conexão rápida (4G):

Limites antigos x novos limites:

e os novos limites em comparação com a LazySizes (uma conhecida biblioteca de carregamento lento de JS):

Temos o compromisso de trabalhar com a comunidade de padrões da Web para aprimorar o alinhamento na forma como os limites de distância da janela de visualização são abordados em diferentes navegadores.

As imagens precisam incluir atributos de dimensão

Enquanto o navegador carrega uma imagem, ele não sabe imediatamente as dimensões dela, a menos que elas sejam explicitamente especificadas. Para que o navegador reserve espaço suficiente para imagens em uma página, é recomendável que todas as tags <img> incluam os atributos width e height. Sem as dimensões especificadas, podem ocorrer mudanças de layout, que são mais perceptíveis em páginas que levam algum tempo para carregar.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Como alternativa, especifique os valores diretamente em um estilo in-line:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

A prática recomendada de definir dimensões se aplica às tags <img>, independente do carregamento lento delas. Com o carregamento lento, isso pode se tornar mais relevante. Definir width e height nas imagens de navegadores mais recentes também permite que eles deduzam o tamanho intrínseco delas.

Na maioria dos cenários, as imagens ainda são carregadas lentamente se as dimensões não são incluídas, mas há alguns casos extremos que você precisa conhecer. Sem width e height especificados, as dimensões da imagem são 0 × 0 pixels no início. Se você tem uma galeria dessas imagens, o navegador pode concluir que todas elas cabem na janela de visualização no início, já que cada uma ocupa praticamente nenhum espaço e nenhuma imagem é empurrada para fora da tela. Nesse caso, o navegador determina que todas elas estão visíveis para o usuário e decide carregar tudo.

Além disso, especificar dimensões da imagem diminui as chances de mudanças de layout. Se você não conseguir incluir dimensões para suas imagens, o carregamento lento delas pode ser uma troca entre economizar recursos de rede e ter um risco maior de mudança de layout.

Embora o carregamento lento no Chromium seja implementado de forma que as imagens provavelmente sejam carregadas quando visíveis, ainda há uma pequena chance de que elas ainda não tenham sido carregadas. Nesse caso, a ausência dos atributos width e height nessas imagens aumenta o impacto na Mudança de layout cumulativa.

As imagens definidas usando o elemento <picture> também podem ser carregadas lentamente:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Embora o navegador decida qual imagem carregar de qualquer um dos elementos <source>, o atributo loading só precisa ser incluído no elemento substituto <img>.

Evitar o carregamento lento de imagens que estão na primeira janela de visualização visível

Evite definir loading=lazy para todas as imagens que estão na primeira janela de visualização visível. Isso é particularmente relevante para imagens de LCP. Consulte o artigo Os efeitos do desempenho do carregamento lento demais para mais informações.

É recomendável adicionar loading=lazy apenas a imagens posicionadas abaixo da dobra, se possível. As imagens carregadas rapidamente podem ser buscadas imediatamente. Já as imagens com carregamento lento, no momento, o navegador precisa aguardar até saber onde a imagem está posicionada na página, o que depende da disponibilidade de IntersectionObserver.

Em geral, as imagens da janela de visualização devem ser carregadas prontamente usando os padrões do navegador. Não é necessário especificar loading=eager para que isso seja o caso de imagens na janela de visualização.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Degradação graciosa

Os navegadores que não forem compatíveis com o atributo loading ignorarão a presença dele. Esses navegadores não aproveitam os benefícios do carregamento lento, mas a inclusão do atributo não tem impacto negativo neles.

Perguntas frequentes

Há planos para o carregamento lento automático de imagens no Chrome?

Anteriormente, o Chromium carregava de forma automática todas as imagens adequadas para o adiamento se o Modo Lite estivesse ativado no Chrome para Android e o atributo loading não fosse fornecido ou definido como loading="auto". No entanto, o modo Lite foi descontinuado (assim como o loading="auto" não padrão) e, no momento, não há planos para fornecer automaticamente carregamento lento de imagens no Chrome.

Posso mudar a distância que uma imagem precisa estar antes que um carregamento seja acionado?

Esses valores estão fixados no código e não podem ser alterados pela API. No entanto, eles podem mudar no futuro, à medida que os navegadores usarem diferentes distâncias e variáveis de limites.

As imagens de plano de fundo CSS podem usar o atributo loading?

Não, ele só pode ser usado com tags <img> no momento.

Existe uma desvantagem do carregamento lento de imagens na janela de visualização do dispositivo?

É mais seguro evitar colocar loading=lazy em imagens acima da dobra, já que o Chrome não vai pré-carregar imagens loading=lazy no verificador de pré-carregamento e também vai atrasar a busca dessas imagens até que todo o layout esteja concluído. Consulte Evitar o carregamento lento de imagens que estão na primeira janela de visualização visível para mais informações.

Como o atributo loading funciona com imagens que estão na janela de visualização, mas não imediatamente visíveis (por exemplo: atrás de um carrossel ou ocultas pelo CSS para determinados tamanhos de tela)?

O uso de loading="lazy" pode impedir que eles sejam carregados quando não estiverem visíveis, mas dentro da distância calculada. Por exemplo, Chrome, Safari e Firefox não carregam imagens com o estilo display: none;, seja no elemento de imagem ou em um elemento pai. No entanto, outras técnicas para ocultar imagens, como o uso do estilo opacity:0, ainda resultarão no carregamento delas. Sempre teste sua implementação completamente para garantir que ela está funcionando conforme o esperado.

E se eu já estiver usando uma biblioteca de terceiros ou um script para carregar imagens lentamente?

Como o carregamento lento nativo agora está disponível em navegadores mais recentes, considere reconsiderar se você ainda precisa de uma biblioteca ou script de terceiros para o carregamento lento de imagens.

Um motivo para continuar usando uma biblioteca de terceiros com o loading="lazy" é fornecer um polyfill para navegadores que não oferecem suporte ao atributo ou ter mais controle sobre quando o carregamento lento é acionado.

Como lidar com navegadores que não são compatíveis com o carregamento lento?

Crie um polyfill ou use uma biblioteca de terceiros para carregar imagens lentamente no site. A propriedade loading pode ser usada para detectar se o recurso tem suporte no navegador:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Por exemplo, Lazysizes é uma biblioteca conhecida de carregamento lento de JavaScript. Só é possível detectar o suporte ao atributo loading para carregar Slowsizes como biblioteca substituta quando loading não é compatível. Isso funciona da seguinte maneira:

• Substitua <img src> por <img data-src> para evitar o carregamento antecipado em navegadores incompatíveis. Se o atributo loading tiver suporte, troque data-src por src.
• Se loading não for compatível, carregue um substituto (lentamente) e inicie-o. De acordo com os documentos da API Lazysizes, use a classe lazyload como uma maneira de indicar que imagens são carregadas lentamente.

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<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 {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Confira uma demonstração desse padrão. Experimente em um navegador mais antigo para ver o substituto em ação.

O carregamento lento de iframes também é compatível com navegadores?

O <iframe loading=lazy> também foi padronizado e já está implementado no Chromium e no Safari. Isso permite o carregamento lento de iframes usando o atributo loading. Consulte este artigo dedicado sobre carregamento lento de iframe para ver mais informações.

Como o carregamento lento no navegador afeta os anúncios em uma página da Web?

Todos os anúncios exibidos ao usuário na forma de imagem ou iframe de carregamento lento, assim como qualquer outra imagem ou iframe.

Como as imagens são tratadas quando uma página da Web é impressa?

Todas as imagens e iframes serão carregados imediatamente se a página for impressa. Consulte o problema 875403 para saber mais detalhes.

O Lighthouse reconhece o carregamento lento no nível do navegador?

O Lighthouse 6.0 e versões mais recentes consideram as abordagens de carregamento lento de imagens fora da tela que podem usar limites diferentes, permitindo que elas sejam aprovadas na auditoria Adiar imagens fora da tela.

Conclusão

A compatibilidade com o carregamento lento de imagens pode facilitar bastante a melhoria do desempenho das suas páginas da Web.

Você percebeu algum comportamento incomum com esse recurso ativado no Chrome? Registre um bug.