O autor do material, cuja tradução estamos publicando hoje, Eddie Osmani, do Google, diz que já no
Chrome 75 o suporte ao novo atributo dos elementos de
carregamento <img> e
<iframe> pode aparecer. Isso significa que esses elementos suportarão recursos padrão para o chamado "carregamento lento" de dados.
Se você deseja saber como é o uso do novo atributo no código, dê uma olhada neste exemplo:
<img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>
Agora, falaremos sobre como o atributo
loading funcionará.
Informações preliminares
As páginas da Web geralmente incluem muitas imagens, o que afeta o tamanho das páginas, leva a
um aumento excessivo e afeta a velocidade de carregamento das páginas. Muitas das imagens exibidas nas páginas estão fora de sua área visível. Para ver essas imagens, o usuário precisa rolar a página.
Historicamente, para limitar o impacto no tempo de carregamento de páginas de imagens localizadas fora da área visível das páginas, os programadores precisavam usar bibliotecas JavaScript (como
LazySizes ). Essas bibliotecas permitem atrasar o carregamento dessas imagens até o momento em que o usuário, percorrendo a página, não se aproxima o suficiente delas.
Página carregando 211 imagens. Uma versão da página que não é usada para criar o carregamento lento de imagens carrega imediatamente 10 MB de dados gráficos. A mesma página usando carregamento lento (usando LazySizes) pré-carrega apenas 250 Kb de informações gráficas. Todo o resto é carregado à medida que o usuário se move na página. Detalhes deste experimento podem ser encontrados em webpagetest.org .E se o navegador pudesse ajudar o programador a evitar o carregamento de imagens que estão fora da área visível das páginas? Isso teria um efeito benéfico na velocidade de carregamento de dados na área visível da página, reduziria, em dispositivos de baixa potência, a quantidade total de dados transmitidos pela rede, reduziria o consumo de memória. Em breve tudo isso será possível graças ao novo atributo dos elementos de
loading <img> e
<iframe> .
Atributo de carregamento
O atributo
loading permite que o navegador atrase o carregamento do conteúdo dos elementos
<img> e
<iframe> que estão fora da área visível da página até que o usuário role a página perto o suficiente desses elementos. Este atributo suporta três valores:
lazy : aponta para materiais que são bons candidatos para carregamento lento.eager : Os materiais nos elementos com este valor de atributo devem ser carregados imediatamente.auto : o navegador decidirá se o carregamento lento será aplicado a materiais com esse valor de atributo.
Se você não especificar o valor do atributo de
loading , isso será equivalente à configuração
auto .
Atualmente, o atributo de carregamento para os elementos <img> e <iframe> está sob o padrão HTMLExemplos
O atributo
loading trabalha com os elementos
<img> (incluindo o atributo
srcset e dentro do elemento
<picture> ), bem como com os elementos
<iframe> .
<img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <img align="center" src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy"> <iframe src="video-player.html" loading="lazy"></iframe>
Deve-se notar que usamos formulações aqui como as seguintes: “quando o usuário rola a página para que sua área visível fique próxima ao elemento”. O navegador determina o momento exato em que a imagem começa a carregar. Em geral, podemos esperar que o navegador comece a baixar materiais cujo download foi atrasado, algum tempo antes que a área da página que os contém esteja visível para o usuário. Isso aumentará as chances de o download e a saída de materiais relevantes serem concluídos quando o usuário os visualizar.
Observe que eu
sugeri que o atributo em questão fosse chamado de
loading , pois essa abordagem para nomeá-lo corresponde àquela usada na escolha de um nome para o atributo de
decodificação . Frases anteriores, como
lazyload , não funcionaram, pois era necessário que esse atributo
lazyload vários valores (
lazy ,
eager e
auto ).
Verifique o suporte do navegador para carregar o atributo
Levamos em conta a importância da possibilidade de usar bibliotecas JavaScript para organizar o carregamento lento de materiais (para suporte entre navegadores para esse recurso). Você pode verificar se o navegador suporta o atributo de
loading :
<script> if ('loading' in HTMLImageElement.prototype) {
Observe que o atributo
loading pode ser usado para expandir progressivamente os recursos da página. Os navegadores que suportam esse atributo poderão organizar o carregamento lento de materiais usando
loading=lazy , e os navegadores que não suportam esse recurso simplesmente fazem o download desses materiais como antes.
Carregamento preguiçoso de imagem no navegador
Se o suporte entre navegadores para o carregamento lento de imagens for importante, não basta determinar se o navegador suporta esse recurso e, se não for, use a biblioteca apropriada se você usar um design como
<img align="center" src=unicorn.jpg loading=lazy /> para descrever a imagem na marcação
<img align="center" src=unicorn.jpg loading=lazy /> .
Na marcação, você precisa usar algo como
<img data-src=unicorn.jpg /> (em vez de
src ,
srcset ou
<source> ) para evitar o carregamento normal da imagem por navegadores que não suportam o novo atributo. Para alterar esses atributos para aqueles que precisam ser usados com o suporte do atributo de
loading do navegador ou para baixar a biblioteca correspondente, se esse atributo não for suportado, você pode usar JavaScript.
Aqui está um exemplo de como isso pode parecer:
<img align="center" src="hero.jpg" alt=".."/> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => { if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Considere alguns dos recursos deste código:
- As imagens visíveis ao usuário imediatamente após o carregamento da página são descritas usando tags regulares
<img> . O uso do atributo data-src sem src fará com que as imagens não sejam exibidas imediatamente após o carregamento da página; portanto, configurando as imagens que devem estar visíveis imediatamente após o carregamento da página, é necessário especificar o atributo src . - Ao descrever imagens que não são imediatamente visíveis para o usuário após o carregamento da página, usamos o atributo
data-src . Isso é feito para impedir que eles sejam carregados normalmente em navegadores que não suportam o atributo de loading . Se o navegador suportar esse atributo, alteramos data-src para src . - Se o atributo
loading não for suportado, carregamos a biblioteca auxiliar (lazySizes) e a inicializamos. Aqui usamos class=lazyload para apontar a biblioteca LazySizes para as imagens com as quais queremos trabalhar usando a técnica de carregamento lento.
Demo
Aqui você pode ver um exemplo de página na qual é realizado o carregamento lento de 100 imagens de gatos. Mas, se estiver interessado, o vídeo é baixado desta página.
Recursos de implementação para carregar o suporte a atributos no Chrome
É altamente recomendável que, antes de usar o atributo
loading na produção, aguarde o suporte aparecer na versão estável do Chrome. Se você está ansioso para tentar esta oportunidade, talvez esteja interessado no que falaremos.
Carregando teste de atributo
Para experimentar o novo atributo no momento, vá para a página de configurações de sinalizadores do Chrome (
chrome://flags ), ative os
chrome://flags Enable lazy frame loading e
Enable lazy image loading e reinicie o navegador.
Configurações do navegador
A implementação do método de carregamento lento de materiais no Chrome se baseia não apenas na proximidade da área visível da página com esses materiais, mas também na velocidade da conexão. Os limites para acionar o carregamento lento de materiais para diferentes velocidades de conexão são codificados no código, mas esses valores podem ser substituídos usando a linha de comando. Aqui está um exemplo de configurações de substituição de imagens:
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy'
O comando acima corresponde às configurações padrão atuais. Para começar a carregar imagens se a posição de rolagem da página estiver a 400 pixels da imagem, todos os valores neste comando devem ser alterados para 400. A seguir, é apresentado um exemplo de uma variação de 1 pixel desse comando (essa configuração é usada no vídeo acima )
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy'
É muito provável que a configuração padrão do carregamento lento no Chrome mude à medida que a implementação desse recurso se estabilizar nas próximas semanas.
Ferramentas do desenvolvedor
Os recursos da implementação do suporte ao atributo de
loading no Chrome são que o navegador, ao carregar a página, solicita os primeiros 2 KB de imagens do servidor se ele suportar a tecnologia de solicitação de intervalo. As primeiras imagens de 2 KB provavelmente contêm informações sobre seus tamanhos. Isso permite que o navegador gere espaços reservados com tamanhos correspondentes aos tamanhos das imagens. Além disso, nesses 2K, se estamos falando de imagens pequenas, como ícones, é muito provável que toda a imagem seja incluída.
Carregando fragmentos de arquivos gráficosO Chrome baixa os dados restantes da imagem no momento em que o usuário está próximo de vê-los. Ao trabalhar com ferramentas de desenvolvedor, isso pode levar ao fato de que as informações sobre dois downloads de imagens podem "aparecer" no painel Rede e as informações sobre duas solicitações executadas para fazer o download de cada imagem serão exibidas no painel Tempo de Recurso.
Servidor de suporte ao navegador que define o atributo de carregamento
Se vivêssemos em um mundo perfeito, para descobrir se é necessário usar a biblioteca auxiliar para a saída correta da página em um determinado navegador, não seria necessário confiar na análise do navegador usando JavaScript do lado do cliente. Com essa abordagem, o servidor, sabendo antecipadamente se uma biblioteca é ou não necessária, a incluiria (ou não) na página enviada ao navegador. Essa verificação pode ser possível usando a tecnologia
HTTP Client Hint , graças à qual o cliente é capaz de transmitir "dicas" sobre seus recursos ao servidor.
A "dica" correspondente em relação ao suporte ao atributo
loading está agora em um estágio inicial de
consideração .
Sumário
O autor deste material convida todos os interessados em usar o atributo
loading ao trabalhar com os elementos
<img> e
<iframe> para experimentá-lo e compartilhar
suas impressões com
ele . Ele está especialmente interessado em aprender como é, do ponto de vista dos desenvolvedores, os mecanismos de suporte entre navegadores propostos aqui para carregamento lento de dados, e se ele perdeu alguns casos limítrofes ao falar sobre tais mecanismos.
Caros leitores! Você planeja usar o atributo
loading em seus projetos?
