Imagens e elementos <iframe>
geralmente consomem mais largura de banda do que outros tipos de
do Google Cloud. No caso de elementos <iframe>
, uma quantidade razoável de processamento extra
pode estar envolvido no carregamento e na renderização das páginas dentro delas.
No caso de imagens de carregamento lento, adiar o carregamento fora da janela de visualização inicial pode ser útil para reduzir a contenção da largura de banda para recursos mais críticos na janela de visualização inicial. Isso pode melhorar Maior exibição de conteúdo (LCP) da 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 a pintar mais rápido.
No caso dos elementos <iframe>
, a Interação com a Next Paint de uma página
(INP) pode ser aprimorado durante a inicialização com o carregamento lento. Isso ocorre porque um
<iframe>
é um documento HTML completamente separado com os próprios sub-recursos.
Embora os elementos <iframe>
possam ser executados em um processo separado, isso não é incomum.
compartilhar 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.
Portanto, adiar o carregamento de imagens fora da tela e elementos <iframe>
é uma
vale a pena buscar e exige pouco esforço para um bom funcionamento
em termos de desempenho. Este módulo explica como usar o carregamento lento
dois tipos de elementos para uma experiência do usuário melhor e mais rápida durante o
período crítico de inicialização.
Imagens de carregamento lento com o atributo loading
O atributo loading
pode ser adicionado a elementos <img>
para informar aos navegadores como
eles devem ser carregados:
"eager"
informa ao navegador que a imagem precisa ser carregada imediatamente. mesmo que ela 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 determinada distância do 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 carregue no momento em que o usuário rolar até ela.
Também é importante notar que, se você estiver usando o elemento <picture>
, os
O atributo loading
ainda precisa ser aplicado ao elemento <img>
filho, não
o próprio elemento <picture>
. Isso ocorre porque o elemento <picture>
é um
contêiner que contém outros elementos <source>
que apontam para diferentes
candidatas a 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 forem
posicionado fora da janela de visualização inicial. No entanto, pode ser complexo conhecer os
a posição exata de um elemento em relação à janela de visualização antes que a página seja
renderizado. É preciso que diferentes tamanhos, proporções e dispositivos de janela de visualização
considerado.
Por exemplo, uma janela de visualização para computadores pode ser bem diferente de uma janela de celular, porque ela renderiza mais espaço vertical que pode encaixar imagens na janela de visualização inicial que não apareceria na janela de visualização inicial de um 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 desktops dispositivos.
No entanto, há alguns casos em que fica bem claro que você deve evitar
aplicando loading="lazy"
. Por exemplo, você deve definitivamente omitir
o atributo loading="lazy"
dos elementos <img>
em casos de imagens principais;
ou outros casos de uso de imagem em que é provável que elementos <img>
apareçam acima do
dobrável ou próximo ao topo do layout em qualquer dispositivo. Isso é ainda mais importante
para imagens que provavelmente são candidatas à LCP.
As imagens com carregamento lento precisam aguardar até que o navegador termine o layout.
para saber se a posição final da imagem está dentro da janela de visualização. Isso significa que
se um elemento <img>
na janela de visualização visível tiver um loading="lazy"
.
ele só é solicitado depois de todo o CSS ser baixado, analisado e
aplicada à página, em vez de serem buscados assim que é descobertos
o leitor de pré-carregamento na marcação bruta.
Como o atributo loading
no elemento <img>
é compatível com todas as principais
navegadores, não é necessário usar JavaScript para o carregamento lento de imagens, já que a adição
JavaScript adicional em uma página para oferecer os recursos que o navegador já oferece
afeta outros aspectos do desempenho da página, como o INP.
Demonstração de carregamento lento de imagem
Elementos <iframe>
de carregamento lento
É possível salvar elementos <iframe>
com carregamento lento até que eles fiquem visíveis na janela de visualização.
dados significativos e melhoram o carregamento de recursos críticos
para carregar a página de nível superior. Além disso, como os 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, especialmente JavaScript, que podem
afetará o INP de uma página consideravelmente se as tarefas nesses frames exigirem
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 muitas vezes exigem um número significativo de sub-recursos que também
resultar em contenção de largura de banda para os recursos da página de nível superior. Como
exemplo, o carregamento lento da incorporação de um vídeo do YouTube economiza mais de 500 KiB durante
o carregamento inicial da página e o carregamento lento do plug-in do botão "Curtir" do Facebook;
economiza mais de 200 KiB, principalmente JavaScript.
De qualquer forma, sempre que você tiver um <iframe>
abaixo da dobra em uma página,
use o carregamento lento caso não seja essencial fazer isso no início, já que
isso pode melhorar significativamente
a experiência do usuário.
O atributo loading
para elementos <iframe>
O atributo loading
nos elementos <iframe>
também é compatível com as principais
navegadores da Web. Os valores do atributo loading
e os comportamentos deles são os
o mesmo que acontece com elementos <img>
que usam o atributo loading
:
"eager"
é o valor padrão. Ela informa ao navegador para carregar o<iframe>
. imediatamente o HTML e os sub-recursos dele."lazy"
adia o carregamento do HTML e dos sub-recursos do elemento<iframe>
até que 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, você pode carregá-la em demanda em resposta a uma interação do usuário. Isso pode ser feito mostrando uma imagem ou outro elemento HTML apropriado até que o usuário interaja com ele. Quando o usuário interagir 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 são as incorporações de vídeos de serviços de terceiros em que a incorporação pode envolver o carregamento de vários recursos sub-recursos, como JavaScript, além do conteúdo de vídeo em si. Dessa forma, um caso, a menos que haja uma necessidade legítima de um vídeo ser reproduzido automaticamente, o vídeo incorpora exigem que o usuário interaja com eles antes da reprodução clicando no botão .
Esta é uma excelente oportunidade para mostrar uma imagem estática visualmente semelhante à
a incorporação do vídeo e economizar largura de banda significativa no processo. Quando o usuário
clicar na imagem, ela será substituída pela incorporação <iframe>
real, que
aciona o HTML e os sub-recursos do elemento <iframe>
de terceiro para começar
o download.
Além de melhorar o carregamento da página inicial, outra vantagem importante é que, se o usuário nunca reproduz o vídeo, os recursos necessários para exibi-lo nunca são baixado. Esse é um bom padrão, pois garante que o usuário faça o download apenas do que que eles realmente querem, sem fazer suposições possivelmente incorretas sobre o às necessidades do usuário.
Os widgets de chat são outro caso de uso excelente para a técnica de fachada. Mais frequentes os widgets de chat fazem o download de uma quantidade significativa de JavaScript que pode prejudicar afetar o carregamento da página e a capacidade de resposta à entrada do usuário. Assim como ao carregar qualquer coisa o custo é gerado no tempo de carregamento, mas no caso de um widget de bate-papo, não nem todo usuário pretende interagir com ela.
Por outro lado, com uma fachada, é possível substituir o diretório "Start Chat" com um botão falso. Quando o usuário interage significativamente por exemplo, segurando um ponteiro sobre ele por um período razoável ou o widget de bate-papo real e funcional é encaixado no lugar quando o que o usuário precisa.
Embora certamente seja possível construir suas próprias fachadas, existem soluções
opções disponíveis para terceiros mais conhecidos, como o lite-youtube-embed
para vídeos do YouTube, lite-vimeo-embed
para vídeos do Vimeo e reações no chat ao vivo
Carregador para widgets de chat.
Bibliotecas de carregamento lento do JavaScript
Se você precisar fazer o carregamento lento de elementos <video>
, imagens poster
do elemento <video>
,
imagens carregadas pela propriedade background-image
do CSS ou outros
é possível fazer isso com uma solução de carregamento lento baseada em JavaScript, como
Lazysizes ou yall.js, já que o carregamento lento desses tipos de recursos não é
no nível do navegador.
Especificamente, a reprodução automática e o loop de elementos <video>
sem uma faixa de áudio
são uma alternativa muito mais eficiente do que usar GIFs animados, que podem
ser muitas vezes maior do que um recurso de vídeo de recursos visuais equivalentes,
de qualidade. Mesmo assim, esses vídeos ainda podem ser importantes em termos de largura de banda,
Portanto, o carregamento lento deles é uma otimização adicional que pode ajudar muito
reduzindo o desperdício de largura de banda.
A maioria dessas bibliotecas funciona com a API Intersection Observer.
além da API Mutation Observer 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 o
estiver visível ou se aproximando da janela de visualização, então a biblioteca JavaScript
substitui o atributo não padrão (geralmente data-src
ou um atributo semelhante)
com o atributo correto, como src
.
Digamos que um vídeo substitua um GIF animado, mas você queira 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, yall.js observa todos os elementos HTML qualificados com uma classe de
"lazy"
: Assim que yall.js é carregado e executado na página, o vídeo
carregar até que o usuário role até a janela de visualização. Nesse ponto, o data-src
os atributos nos elementos filhos <source>
do elemento <video>
são trocados
aos atributos src
, que envia uma solicitação para fazer o download do vídeo e
comece a reproduzi-lo automaticamente.
Teste seus conhecimentos
Qual é o valor padrão do atributo loading
para
os elementos <img>
e <iframe>
?
"lazy"
"eager"
Quando é recomendável usar as soluções de carregamento lento baseadas em JavaScript?
loading
não está
suportado, como no caso da reprodução automática de vídeos destinados a substituir
imagens animadas ou o carregamento lento de um elemento <video>
imagem do pôster.
Quando a fachada é uma técnica útil?
A seguir: pré-busca e pré-renderização
Agora que você sabe gerenciar o carregamento lento de imagens e elementos <iframe>
,
você está em uma boa posição para garantir que as páginas carreguem mais rapidamente enquanto
respeite as necessidades dos usuários. No entanto, há casos em que
o carregamento especulativo de recursos. No próximo módulo,
aprender sobre pré-busca e pré-renderização, e como essas técnicas, quando usadas
com cuidado, pode acelerar substancialmente a navegação para as páginas subsequentes ao carregar
com antecedência.