Carregamento lento de imagens e elementos <iframe>

Imagens e elementos <iframe> geralmente consomem mais largura de banda do que outros tipos de recursos. No caso de elementos <iframe>, o carregamento e a renderização das páginas neles podem levar um tempo de processamento extra.

No caso de carregamento lento de imagens, o adiamento de imagens que estão fora da janela de visualização inicial pode ser útil para reduzir a contenção de largura de banda de recursos mais críticos na janela de visualização inicial. Isso pode melhorar a Maior exibição de conteúdo (LCP) de uma página em alguns casos em que as conexões de rede são ruins e a largura de banda realocada pode ajudar os candidatos a LCP a carregar e a exibir mais rapidamente.

No que diz respeito aos elementos <iframe>, a Interação com a próxima exibição (INP, na sigla em inglês) de uma página pode ser melhorada durante a inicialização com o carregamento lento deles. Isso ocorre porque um <iframe> é um documento HTML completamente separado com os próprios sub-recursos. Embora elementos <iframe> possam ser executados em um processo separado, não é incomum que eles compartilhem um processo com outras linhas de execução, o que pode criar condições em que as páginas se tornam menos responsivas à entrada do usuário.

Assim, adiar o carregamento de imagens fora da tela e elementos <iframe> é uma técnica que vale a pena seguir e requer um esforço razoavelmente baixo para um retorno razoavelmente bom em termos de desempenho. Este módulo aborda o carregamento lento desses dois tipos de elementos para oferecer uma experiência do usuário mais rápida e melhor durante o período crítico de inicialização da página.

Imagens de carregamento lento com o atributo loading

O atributo loading pode ser adicionado a elementos <img> para informar aos navegadores como eles precisam ser carregados:

• "eager" informa ao navegador que a imagem precisa ser carregada imediatamente, mesmo que esteja fora da janela de visualização inicial. Esse também é o valor padrão para o atributo loading.
• "lazy" adia o carregamento de uma imagem até que ela esteja a uma distância definida da janela de visualização visível. Essa distância varia de acordo com o navegador, mas geralmente é definida como grande o suficiente para que a imagem seja carregada no momento em que o usuário rola até ela.

Também é importante notar que, se você estiver usando o elemento <picture>, o atributo loading ainda precisa ser aplicado ao elemento filho <img>, não ao próprio elemento <picture>. Isso ocorre porque o elemento <picture> é um contêiner com outros elementos <source> que apontam para diferentes candidatas de imagem, e a candidata escolhida pelo navegador é aplicada diretamente ao elemento filho <img>.

Não faça o carregamento lento de imagens que estão na janela de visualização inicial

Adicione o atributo loading="lazy" somente aos elementos <img> que estão posicionados fora da janela de visualização inicial. No entanto, pode ser complexo saber a posição precisa de um elemento em relação à janela de visualização antes que a página seja renderizada. Diferentes tamanhos de janela de visualização, proporções e dispositivos precisam ser considerados.

Por exemplo, uma janela de visualização para computadores pode ser muito diferente da de um smartphone, já que renderiza mais espaço vertical que pode encaixar imagens na janela de visualização inicial que não apareceriam na janela de visualização inicial de um dispositivo fisicamente menor. Os tablets usados na orientação retrato também mostram uma quantidade considerável de espaço vertical, talvez até mais do que alguns dispositivos desktop.

No entanto, em alguns casos, é bastante claro que você precisa evitar a aplicação de loading="lazy". Por exemplo, você precisa omitir o atributo loading="lazy" dos elementos <img> em casos de imagens principais ou em outros casos de uso de imagem em que é provável que elementos <img> apareçam acima da dobra ou perto da parte de cima do layout em qualquer dispositivo. Isso é ainda mais importante para imagens que provavelmente são candidatas à LCP.

Imagens com carregamento lento precisam aguardar o navegador concluir o layout para saber se a posição final está dentro da janela de visualização. Isso significa que, se um elemento <img> na janela de visualização visível tiver um atributo loading="lazy", ele só será solicitado depois de todo o CSS ser transferido por download, analisado e aplicado à página, e não assim que ele for descoberto pelo verificador de pré-carregamento na marcação bruta.

Como o atributo loading no elemento <img> tem suporte em todos os principais navegadores, não é necessário usar o JavaScript para fazer o carregamento lento de imagens, já que adicionar um JavaScript extra a uma página para oferecer os recursos que o navegador já oferece afeta outros aspectos do desempenho da página, como INP.

Demonstração de carregamento lento de imagens

Elementos <iframe> com carregamento lento

O carregamento lento de elementos <iframe> até que eles fiquem visíveis na janela de visualização pode economizar dados significativos e melhorar o carregamento de recursos essenciais que são necessários para o carregamento da página de nível superior. Além disso, como elementos <iframe> são documentos HTML inteiros carregados em um documento de nível superior, eles podem incluir um número significativo de sub-recursos, principalmente JavaScript. Isso pode afetar consideravelmente o INP de uma página se as tarefas nesses frames exigirem um tempo de processamento significativo.

Incorporações de terceiros são um caso de uso comum para elementos <iframe>. Por exemplo, players de vídeo incorporados ou postagens de mídia social geralmente usam elementos <iframe> e exigem um número significativo de sub-recursos. Isso também pode resultar em contenção de largura de banda para os recursos da página de nível superior. Por exemplo, o carregamento lento da incorporação de um vídeo do YouTube economiza mais de 500 KiB durante o carregamento da página inicial. Já o carregamento lento do plug-in do botão "Gostei" do Facebook economiza mais de 200 KiB, sendo a maioria JavaScript.

De qualquer forma, sempre que você tiver um <iframe> abaixo da dobra em uma página, considere o carregamento lento se não for essencial carregá-lo antecipadamente, porque isso pode melhorar significativamente a experiência do usuário.

O atributo loading para elementos <iframe>

O atributo loading nos elementos <iframe> também tem suporte em todos os principais navegadores. Os valores do atributo loading e os comportamentos deles são os mesmos dos elementos <img> que usam o atributo loading:

• "eager" é o valor padrão. Ela informa o navegador para carregar o HTML e os sub-recursos do elemento <iframe> imediatamente.
• "lazy" adia o carregamento do HTML do elemento <iframe> e dos sub-recursos dele até que ele esteja dentro de uma distância predefinida da janela de visualização.

Demonstração de iframes com carregamento lento

Fachadas

Em vez de carregar uma incorporação imediatamente durante o carregamento da página, é possível carregá-la sob demanda em resposta a uma interação do usuário. Isso pode ser feito mostrando uma imagem ou outro elemento HTML adequado até que o usuário interaja com ela. Quando o usuário interage com o elemento, é possível substituí-lo pela incorporação de terceiros. Essa técnica é conhecida como fachada.

Um caso de uso comum para fachadas é o de embeddings de vídeos de serviços de terceiros, em que a incorporação pode envolver o carregamento de muitos sub-recursos adicionais e potencialmente caros, como JavaScript, além do próprio conteúdo de vídeo. Nesse caso, a menos que haja uma necessidade legítima de um vídeo ser reproduzido automaticamente, as incorporações exigem que o usuário interaja com elas antes da reprodução clicando no botão "Assistir".

Essa é uma excelente oportunidade para mostrar uma imagem estática visualmente semelhante à incorporação de vídeo e economizar uma largura de banda significativa no processo. Quando o usuário clica na imagem, ela é substituída pela incorporação <iframe>, que aciona o HTML do elemento <iframe> de terceiros e os sub-recursos dele para começar o download.

Além de melhorar o carregamento inicial da página, outra vantagem importante é que, se o usuário nunca abrir o vídeo, os recursos necessários para enviá-lo nunca serão transferidos por download. Esse é um bom padrão, porque garante que o usuário faça o download apenas do que ele realmente quer, sem fazer suposições possivelmente erradas sobre as necessidades do usuário.

Widgets de chat são outro excelente caso de uso para a técnica de fachada. A maioria dos widgets de chat faz o download de quantidades significativas de JavaScript, que podem afetar negativamente o carregamento da página e a capacidade de resposta à entrada do usuário. Assim como o carregamento antecipado, o custo é gerado no tempo de carregamento, mas no caso de um widget de chat, nem todo usuário pretende interagir com ele.

Por outro lado, com uma fachada, é possível substituir o botão de terceiros "Iniciar chat" por um botão falso. Depois que o usuário interage de forma significativa com ele, como segurar um ponteiro sobre ele por um período razoável ou com um clique, o widget de chat funcional e real é posicionado quando o usuário precisa.

Embora certamente seja possível criar suas próprias fachadas, há opções de código aberto disponíveis para terceiros mais conhecidos, como lite-youtube-embed para vídeos do YouTube, lite-vimeo-embed para vídeos do Vimeo e reacteração de carregador de chat ao vivo para widgets de chat.

Bibliotecas de carregamento lento do JavaScript

Se você precisar de carregamento lento de elementos <video>, imagens poster de elementos <video>, imagens carregadas pela propriedade CSS background-image ou outros elementos sem suporte, faça isso usando uma solução de carregamento lento baseada em JavaScript, como Slowsizes ou yall.js, já que o carregamento lento desses tipos de recursos não é um recurso no nível do navegador.

Em especial, a reprodução automática e a repetição de elementos <video> sem faixa de áudio são uma alternativa muito mais eficiente do que usar GIFs animados, que podem ser muitas vezes maiores do que um recurso de vídeo de qualidade visual equivalente. Mesmo assim, esses vídeos ainda podem ser significativos em termos de largura de banda, então, o carregamento lento deles é uma otimização adicional que pode reduzir muito o desperdício de largura de banda.

A maioria dessas bibliotecas funciona usando a API Intersection Observer e, além disso, a API Muutation Observer (links em inglês) se o HTML de uma página mudar após o carregamento inicial, para reconhecer quando um elemento entra na janela de visualização do usuário. Se a imagem estiver visível ou se aproximando da janela de visualização, a biblioteca JavaScript vai substituir o atributo não padrão (geralmente data-src ou um atributo semelhante) pelo atributo correto, como src.

Imagine que você tem um vídeo que substitui um GIF animado, mas quer fazer o carregamento lento com uma solução JavaScript. Isso é possível com o yall.js com o seguinte padrão de marcação:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Por padrão, o yall.js observa todos os elementos HTML de qualificação com uma classe de "lazy". Depois que yall.js é carregado e executado na página, o vídeo não é carregado até que o usuário o role até a janela de visualização. Nesse momento, os atributos data-src nos elementos filhos <source> do elemento <video> são substituídos por atributos src, que enviam uma solicitação para fazer o download do vídeo e começar a reproduzi-lo automaticamente.

teste seus conhecimentos

A seguir: pré-busca e pré-renderização

Agora que você sabe o carregamento lento de imagens e elementos <iframe>, está em uma boa posição para garantir que as páginas sejam carregadas mais rapidamente, respeitando as necessidades dos usuários. No entanto, há casos em que o carregamento especulativo de recursos pode ser desejável. No próximo módulo, aprenda sobre a pré-busca e a pré-renderização e como essas técnicas, quando usadas com cuidado, podem acelerar significativamente as navegações para as páginas subsequentes ao carregá-las com antecedência.