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 atributoloading
."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
Qual é o valor padrão do atributo loading
para os elementos <img>
e <iframe>
?
"eager"
"lazy"
Quando as soluções de carregamento lento baseadas em JavaScript são vantajosas para o uso?
loading
,
como no caso de vídeos de reprodução automática destinados a substituir
imagens animadas ou ao carregamento lento da imagem do pôster de um elemento
<video>
.
Quando a fachada é uma técnica útil?
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.