Carregamento lento de imagens e elementos <iframe>

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 atributo loading.
• "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

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.