O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Práticas recomendadas para o uso de incorporações de terceiros

Visão geral das técnicas para carregar incorporações conhecidas de terceiros de maneira eficiente.

Addy Osmani

Katie Hempenius

Leena Sohoni

Muitos sites usam incorporações de terceiros para criar uma experiência do usuário envolvente, delegando algumas seções de uma página da Web a outro provedor de conteúdo. Os exemplos mais comuns de incorporações de conteúdo de terceiros são players de vídeo, feeds de redes sociais, mapas e anúncios.

O conteúdo de terceiros pode afetar a performance de uma página de várias maneiras. Ele pode bloquear a renderização, disputar outros recursos críticos de rede e largura de banda ou afetar as métricas das Core Web Vitals. As incorporações de terceiros também podem causar mudanças de layout à medida que são carregadas. Este artigo aborda as práticas recomendadas de performance que podem ser usadas ao carregar incorporações de terceiros, técnicas de carregamento eficientes e a ferramenta Layout Shift Terminator, que ajuda a reduzir as mudanças de layout para incorporações conhecidas.

O que é uma incorporação

Uma incorporação de terceiros é qualquer conteúdo exibido no seu site que seja:

Não criado por você
Veiculado por servidores de terceiros

Várias incorporações fora da tela são mostradas, o que pode ser carregado lentamente.

As incorporações são usadas com frequência em:

Sites relacionados a esportes, notícias, entretenimento e moda usam vídeos para aumentar o conteúdo textual.
Organizações com contas ativas do Twitter ou de redes sociais incorporam feeds dessas contas às páginas da Web para interagir e alcançar mais pessoas.
As páginas de restaurantes, parques e locais de eventos costumam incorporar mapas.

As incorporações de terceiros normalmente são carregadas em <iframe> elementos na página. Os provedores terceirizados oferecem snippets de HTML que geralmente consistem em um <iframe> que extrai uma página composta de marcação, scripts e folhas de estilo. Alguns provedores também usam um snippet de script que injeta dinamicamente um <iframe> para extrair outros conteúdos. Isso pode tornar as incorporações de terceiros pesadas e afetar a performance da página, atrasando o conteúdo próprio.

Impacto na performance de incorporações de terceiros

Muitas incorporações conhecidas incluem mais de 100 KB de JavaScript, às vezes até 2 MB. Elas levam mais tempo para carregar e mantêm a linha de execução principal ocupada durante a execução. Ferramentas de monitoramento de performance, como o Lighthouse e o Chrome DevTools, ajudam a medir o impacto das incorporações de terceiros na performance.

A auditoria do Lighthouse "Reduza o impacto do código de terceiros" mostra a lista de provedores terceirizados que uma página usa, com tamanho e tempo de bloqueio da linha de execução principal. A auditoria está disponível no Chrome DevTools na guia Lighthouse.

É uma boa prática auditar periodicamente o impacto na performance das suas incorporações e do código de terceiros, porque o código-fonte da incorporação pode mudar. Você pode aproveitar essa oportunidade para remover qualquer código redundante.

Auditoria do Lighthouse mostrando o impacto de cada parte do código de terceiros em uma página.

Práticas recomendadas de carregamento

As incorporações de terceiros podem afetar negativamente a performance, mas também oferecem funcionalidades importantes. Para usar incorporações de terceiros de maneira eficiente e reduzir o impacto na performance, siga estas diretrizes.

Ordenação de scripts

Em uma página bem projetada, o conteúdo próprio principal será o foco, enquanto as incorporações de terceiros ocuparão barras laterais ou aparecerão após o conteúdo próprio.

Para oferecer a melhor experiência do usuário, o conteúdo principal precisa ser carregado rapidamente e antes de qualquer outro conteúdo de suporte. Por exemplo, o texto de notícias em uma página de notícias precisa ser carregado antes das incorporações de um feed do Twitter ou de anúncios.

As solicitações de incorporações de terceiros podem atrapalhar o carregamento do conteúdo próprio. Portanto, a posição de uma tag script de terceiros é importante. Os scripts podem afetar a sequência de carregamento porque a construção do DOM é pausada enquanto os scripts são executados. Coloque tags de script de terceiros após as principais tags próprias e use async ou defer atributos para carregá-las de forma assíncrona.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

Carregamento lento

Como o conteúdo de terceiros geralmente vem depois do conteúdo principal, ele pode não ficar visível na janela de visualização quando a página é carregada. Nesse caso, o download de recursos de terceiros pode ser adiado até que o usuário role para baixo até essa parte da página. Isso não apenas ajuda a otimizar o carregamento de página inicial, mas também reduz os custos de download para usuários com planos de dados fixos e conexões de rede lentas.

O atraso no carregamento do conteúdo até que ele seja realmente necessário é chamado de carregamento lento. Dependendo dos requisitos e do tipo de incorporação, você pode usar diferentes técnicas de carregamento lento.

Carregamento lento do navegador para `<iframe>`

Para incorporações de terceiros carregadas por elementos <iframe>, você pode usar o carregamento lento no nível do navegador para adiar o carregamento de iframes fora da tela até que os usuários rolem perto deles. O atributo de carregamento para <iframe> está disponível em todos os navegadores modernos.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

O atributo de carregamento aceita os seguintes valores:

lazy: indica que o navegador precisa adiar o carregamento do iframe. O navegador vai carregar o iframe quando ele estiver se aproximando da janela de visualização. Use se o iframe for um bom candidato para carregamento lento.
eager: carrega o iframe imediatamente. Use se o iframe não for um bom candidato para carregamento lento. Se o atributo loading não tiver sido especificado, esse será o comportamento padrão, exceto no modo Lite.
auto: o navegador determina se esse frame precisa ser carregado lentamente.

Os navegadores que não oferecem suporte ao atributo loading o ignoram. Portanto, você pode aplicar o carregamento lento no nível do navegador como um aprimoramento progressivo. Os navegadores que oferecem suporte ao atributo podem ter implementações diferentes para o limite de distância da janela de visualização (a distância em que o iframe começa a carregar).

Confira algumas maneiras de carregar iframes lentamente para diferentes tipos de incorporações.

Vídeos do YouTube: para carregar lentamente um iframe do player de vídeo do YouTube, inclua o atributo loading no código de incorporação fornecido pelo YouTube. O carregamento lento da incorporação do YouTube pode economizar aproximadamente 500 KB no carregamento inicial da página.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Google Maps: para carregar lentamente um iframe do Google Maps, inclua o loading atributo no código da incorporação do iframe gerado pela API Google Maps Embed. Confira um exemplo do código com um marcador de posição para a chave de API do Google Cloud.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

Biblioteca lazysizes

Como os navegadores usam a distância de uma incorporação da janela de visualização, além de indicadores como o tipo de conexão eficaz e o modo Lite, para decidir quando um iframe precisa ser carregado, o carregamento lento do navegador pode ser inconsistente. Se você precisar de mais controle sobre os limites de distância ou quiser oferecer uma experiência de carregamento lento consistente em todos os navegadores, use a biblioteca lazysizes.

lazysizes é um carregador lento rápido e otimizado para SEO para imagens e iframes. Depois de baixar o componente, ele pode ser usado com um iframe para uma incorporação do YouTube da seguinte maneira.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Da mesma forma, o lazysizes pode ser usado com iframes para outras incorporações de terceiros.

O lazysizes usa a API Intersection Observer para detectar quando um elemento se torna visível.

Como usar data-lazy no Facebook

O Facebook oferece diferentes tipos de plug-ins sociais que podem ser incorporados. Isso inclui posts, comentários, vídeos e o botão Curtir mais conhecido. Todos os plug-ins incluem uma configuração para data-lazy. Definir como true garante que o plug-in use o mecanismo de carregamento lento do navegador definindo o atributo de iframe loading="lazy".

Carregamento lento de feeds do Instagram

O Instagram oferece um bloco de marcação e um script como parte da incorporação. O script injeta um <iframe> na página. O carregamento lento desse <iframe> pode melhorar a performance, já que a incorporação pode ter mais de 100 KB de tamanho compactado. Muitos plug-ins do Instagram para sites do WordPress, como WPZoom e Elfsight, oferecem a opção de carregamento lento.

Substituir incorporações por fachadas

Embora as incorporações interativas agreguem valor à página, muitos usuários podem não interagir com elas. Por exemplo, nem todos os usuários que navegam em uma página de restaurante vão clicar, expandir, rolar e navegar na incorporação do mapa. Da mesma forma, nem todos os usuários de uma página de provedores de serviços de telecomunicações vão interagir com o chatbot. Nesses casos, você pode evitar o carregamento ou o carregamento lento da incorporação exibindo uma fachada no lugar dela.

Uma incorporação de mapa com um recurso de zoom.

Uma fachada é um elemento estático que parece semelhante ao terceiro incorporado real, mas não é funcional e, portanto, é muito menos exigente no carregamento de página. Confira algumas estratégias para carregar essas incorporações de maneira ideal, oferecendo algum valor ao usuário.

Usar imagens estáticas como fachadas

Imagens estáticas podem ser usadas em vez de incorporações de mapas em que talvez não seja necessário tornar o mapa interativo. Você pode aumentar o zoom na área de interesse no mapa, capturar uma imagem e usá-la em vez da incorporação do mapa interativo. Você também pode usar o recurso Capturar captura de tela do nó do DevTools para capturar uma captura de tela do elemento iframe incorporado.

A opção "capturar captura de tela do nó" destacada em um menu contextual em um editor HTML.

O DevTools captura a imagem como um png, mas você também pode convertê-la para o formato WebP para melhorar a performance.

Usar imagens dinâmicas como fachadas

Essa técnica permite gerar imagens correspondentes a uma incorporação interativa no ambiente de execução. Confira algumas das ferramentas que permitem gerar versões estáticas de incorporações nas suas páginas.

API Maps Static: o serviço da API Google Maps Static gera um mapa com base nos parâmetros de URL incluídos em uma solicitação HTTP padrão e retorna o mapa como uma imagem que pode ser exibida na sua página da Web. O URL precisa incluir a chave da API Google Maps e ser colocado na tag <img> na página como o atributo src.

A ferramenta Static map maker ajuda a configurar os parâmetros necessários para o URL e fornece o código do elemento de imagem em tempo real.

O snippet abaixo mostra o código de uma imagem com a origem definida como um URL da API Maps Static. Ele foi incluído em uma tag de link que garante que o mapa real possa ser acessado clicando na imagem. (Observação: o atributo de chave de API não está incluído no URL)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
Capturas de tela do Twitter: semelhante às capturas de tela do mapa, esse conceito permite incorporar dinamicamente uma captura de tela do Twitter em vez do feed publicado. Tweetpik é uma das ferramentas que podem ser usadas para fazer capturas de tela de tweets. A API Tweetpik aceita o URL do tweet e retorna uma imagem com o conteúdo dele. A API também aceita parâmetros para personalizar o plano de fundo, as cores, as bordas e as dimensões da imagem.

Usar o clique para carregar para melhorar as fachadas

O conceito de clique para carregar combina carregamento lento e fachadas. A página é carregada inicialmente com a fachada. Quando o usuário interage com o marcador de posição estático clicando nele, a incorporação de terceiros é carregada. Isso também é conhecido como o padrão de importação na interação e pode ser implementado seguindo estas etapas.

No carregamento de página: a fachada ou o elemento estático é incluído na página.
Ao passar o cursor do mouse: a fachada se conecta ao provedor de incorporação de terceiros.
Ao clicar: a fachada é substituída pelo produto de terceiros.

As fachadas podem ser usadas com incorporações de terceiros para players de vídeo, widgets de chat, serviços de autenticação e widgets de redes sociais. As incorporações de vídeo do YouTube que são apenas imagens com um botão de reprodução são fachadas que encontramos com frequência. O vídeo real é carregado apenas quando você clica na imagem.

Você pode criar uma fachada de clique para carregar personalizada usando o padrão importar na interação ou usar uma das seguintes fachadas de código aberto disponíveis para diferentes tipos de incorporações.

Fachada do YouTube

O lite-youtube-embed é uma fachada recomendada para o player do YouTube, que parece o player real, mas é 224 vezes mais rápido. Ele pode ser usado fazendo o download do script e da folha de estilo e usando a tag <lite-youtube> em HTML ou JavaScript. Os parâmetros personalizados do player com suporte do YouTube podem ser incluídos pelo atributo params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Confira uma comparação entre o lite-youtube-embed e a incorporação real.

Uma incorporação do lite-YouTube

Uma incorporação do YouTube

Outras fachadas semelhantes disponíveis para players do YouTube e do Vimeo são lite-youtube, lite-vimeo-embed e lite-vimeo.
Fachada do widget de chat

O carregador de chat ao vivo do React carrega um botão que parece uma incorporação de chat em vez da incorporação em si. Ele pode ser usado com várias plataformas de provedores de chat, como Intercom, Help Scout e Messenger. O widget semelhante é muito mais leve que o widget de chat e carrega mais rápido. Ele pode ser substituído pelo widget de chat real quando o usuário passa o cursor ou clica no botão ou se a página estiver inativa por muito tempo. O estudo de caso do Postmark explica como eles implementaram react-live-chat-loader e as melhorias de performance que alcançaram.

Remover ou substituir incorporações por links

Se você descobrir que algumas incorporações de terceiros resultam em uma performance de carregamento ruim e o uso de qualquer uma das técnicas descritas anteriormente não é uma opção, a coisa mais simples que você pode fazer é remover a incorporação completamente. Se você ainda quiser que os usuários possam acessar o conteúdo na incorporação, forneça um link para ele com target="_blank" para que o usuário possa clicar e visualizar em outra guia.

Estabilidade do layout

Embora o carregamento dinâmico de conteúdo incorporado possa melhorar a performance de carregamento de uma página, às vezes ele pode causar movimentos inesperados do conteúdo da página. Isso é conhecido como mudança de layout.

Como a estabilidade visual é importante para uma experiência do usuário tranquila, o Cumulative Layout Shift (CLS) mede a frequência e o impacto dessas mudanças.

As mudanças de layout podem ser evitadas reservando espaço durante o carregamento da página para elementos que serão carregados dinamicamente mais tarde. O navegador pode determinar o espaço a ser reservado se souber a largura e a altura dos elementos. Para garantir isso, especifique os atributos width e height de iframes ou defina um tamanho fixo para elementos estáticos em que a incorporação de terceiros será carregada. Por exemplo, um iframe para uma incorporação do YouTube precisa ter largura e altura especificadas da seguinte maneira.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Incorporações conhecidas, como YouTube, Google Maps e Facebook, fornecem o código de incorporação com atributos de tamanho especificados. No entanto, pode haver provedores que não incluem isso. Por exemplo, este snippet de código não indica as dimensões da incorporação resultante.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Você pode usar o DevTools para inspecionar o iframe injetado depois que a página for renderizada. Como mostrado no snippet abaixo, a altura do iframe injetado é fixa, enquanto a largura é especificada em porcentagem.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

Essas informações podem ser usadas para definir o tamanho do elemento contêiner e garantir que ele não seja expandido ao carregar o feed e que não haja mudança de layout. O snippet abaixo pode ser usado para corrigir o tamanho da incorporação incluída anteriormente.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Layout Shift Terminator

Como as incorporações de terceiros geralmente omitem as dimensões (largura, altura) do conteúdo final que renderizam, elas podem causar mudanças de layout significativas em uma página. Esse problema pode ser difícil de resolver sem inspecionar manualmente os tamanhos finais usando o DevTools em vários tamanhos de janela de visualização diferentes.

Agora há uma ferramenta automatizada, Layout Shift Terminator, que pode ajudar a reduzir as mudanças de layout de incorporações conhecidas, como do Twitter, Facebook e outros provedores.

Layout Shift Terminator:

Carrega a incorporação no lado do cliente em um iframe.
Redimensiona o iframe para vários tamanhos de janela de visualização conhecidos.
Para cada janela de visualização conhecida, captura as dimensões da incorporação para gerar consultas de mídia e consultas de contêiner mais tarde.
Dimensiona um wrapper de altura mínima ao redor da marcação de incorporação usando consultas de mídia (e consultas de contêiner) até que a incorporação seja inicializada (após a remoção dos estilos de altura mínima).
Gera um snippet de incorporação otimizado que pode ser copiado e colado onde você incluiria a incorporação na sua página.

Teste o Layout Shift Terminator e deixe seu feedback no projeto do GitHub do Layout Shift Terminator. A ferramenta está em versão Beta e tem como objetivo melhorar ao longo do tempo com mais refinamentos.

Conclusão

As incorporações de terceiros podem oferecer muito valor aos usuários, mas, à medida que o número e o tamanho das incorporações em uma página aumentam, a performance pode ser afetada. Por isso, é necessário medir, avaliar e usar estratégias de carregamento adequadas para incorporações com base na posição, relevância e necessidades dos usuários em potencial.