Esta página foi traduzida pela API Cloud Translation.

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

Uma visão geral das técnicas para carregar incorporações conhecidas de terceiros de forma eficiente.

Addy Osmani

Katie Hempenius

Leena Sohoni

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

O conteúdo de terceiros pode afetar o desempenho de uma página de várias maneiras. Ele pode bloquear a renderização, enfrentar outros recursos críticos de rede e largura de banda ou afetar as métricas das Core Web Vitals. Incorporações de terceiros também podem causar mudanças de layout à medida que são carregadas. Este artigo discute as práticas recomendadas de desempenho que você pode usar 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 populares.

O que é uma incorporação

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

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

Várias incorporações fora da tela estão sendo exibidas e podem ser carregadas lentamente

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

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

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

Impacto no desempenho de incorporações de terceiros

Muitos embeddings populares incluem mais de 100 KB de JavaScript, chegando a até 2 MB. Eles levam mais tempo para carregar e mantêm a linha de execução principal ocupada durante a execução. Ferramentas de monitoramento de desempenho, como o Lighthouse e o Chrome DevTools, ajudam a medir o impacto de incorporações de terceiros no desempenho.

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

É uma prática recomendada auditar periodicamente o impacto no desempenho das incorporações e do código de terceiros porque o código-fonte das incorporações pode mudar. Use essa oportunidade para remover códigos redundantes.

Reduza o impacto de códigos de terceiros

Práticas recomendadas de carregamento

Incorporações de terceiros podem afetar negativamente a performance, mas também oferecem funcionalidades importantes. Para usar incorporações de terceiros com eficiência e reduzir o impacto na performance, siga estas diretrizes.

Ordenação do script

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

Para 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 deve ser carregado antes da incorporação em um feed ou anúncios do Twitter.

As solicitações de incorporações de terceiros podem atrapalhar o carregamento do conteúdo próprio. Por isso, a posição de uma tag de 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 as tags de script de terceiros após as principais tags próprias e use os atributos async ou defer 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, talvez ele não apareça na janela de visualização quando a página for 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 só ajuda a otimizar o carregamento inicial da página, mas também reduz os custos de download para usuários em planos de dados fixos e conexões de rede lentas.

Atrasar o carregamento de conteúdo até que ele seja realmente necessário é chamado de carregamento lento. Dependendo dos requisitos e do tipo de incorporação, é possível usar diferentes técnicas de carregamento lento.

Carregamento lento do navegador para `<iframe>`

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

<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 carregará o iframe quando 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 esse campo 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 o carregamento lento desse frame será feito.

Navegadores que não são compatíveis com o atributo loading o ignoram. Portanto, você pode aplicar o carregamento lento no nível do navegador como um aprimoramento progressivo. Navegadores compatíveis com o atributo podem ter implementações diferentes para o limite distance-from-viewport (a distância em que o iframe começa a carregar).

Confira abaixo algumas maneiras de fazer o carregamento lento de iframes para diferentes tipos de incorporações.

Vídeos do YouTube: para fazer o carregamento lento de um iframe de 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 fazer o carregamento lento de um iframe do Google Maps, inclua o atributo loading no código de incorporação do iframe gerado pela API Google Maps Embed. Veja a seguir 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 sinais como o tipo de conexão efetiva e o modo Lite, para decidir quando um iframe deve ser carregado, o carregamento lento do navegador pode ser inconsistente. Se você precisar de um melhor controle dos limites de distância ou quiser fornecer uma experiência de carregamento lento consistente em todos os navegadores, use a biblioteca Lazysizes.

O Lazysizes é um carregador lento rápido e compatível com SEO para imagens e iframes. Depois de fazer o download do componente, ele pode ser usado com um iframe para uma incorporação do YouTube, como mostrado a seguir.

<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, Slowsizes podem ser usados com iframes para outras incorporações de terceiros.

O Lazysize usa a API Intersection Observer para detectar quando um elemento fica visível.

Usar a lentidão de dados no Facebook

O Facebook oferece diferentes tipos de plug-ins sociais que podem ser incorporados. Isso inclui postagens, comentários, vídeos e o botão Gostei mais popular. Todos os plug-ins incluem uma configuração para data-lazy. A definição dele como true garante que o plug-in use o mecanismo de carregamento lento do navegador definindo o atributo 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 o desempenho, já que a incorporação pode ter mais de 100 KB de tamanho compactado com gzip. Muitos plug-ins do Instagram para sites WordPress, como WPZoom e Elfsight (links em inglês), 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 todo usuário que estiver navegando em uma página de restaurante clicará, expandirá, rolará e navegará pelo mapa incorporado. 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, é possível evitar o carregamento ou carregamento lento da incorporação exibindo uma fachada no lugar dela.

Uma incorporação de mapa — Um mapa incorporado com um recurso de aumentar e diminuir o zoom.

Uma fachada é um elemento estático semelhante ao verdadeiro terceiro incorporado, mas não é funcional e, portanto, exige muito menos carregamento de página. Confira a seguir algumas estratégias para carregar essas incorporações de forma ideal, oferecendo ainda mais valor ao usuário.

Usar imagens estáticas como fachadas

Imagens estáticas podem ser usadas no lugar de incorporações do mapa quando não é necessário tornar o mapa interativo. Você pode aumentar o zoom na área de interesse no mapa, capturar uma imagem e usar isso em vez da incorporação do mapa interativo. Você também pode usar o recurso Capture node screenshot do DevTools para fazer uma captura de tela do elemento iframe incorporado.

Fazer uma captura de tela do nó

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. Veja a seguir algumas das ferramentas que permitem gerar versões estáticas de incorporações nas suas páginas.

API Maps Static: a API Maps Static do Google 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 Modelador de mapa estático 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 a seguir 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 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 ao vivo. O Tweetpik é uma das ferramentas que pode ser usada para fazer capturas de tela de tweets. A API Tweetpik aceita o URL do tweet e retorna uma imagem com o conteúdo. 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 recurso "clicar para carregar" para aprimorar fachadas

O conceito de clicar para carregar combina carregamento lento e fachadas. Inicialmente, a página é carregada 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 padrão de importação na interação e pode ser implementado seguindo as etapas a seguir.

No carregamento da página: fachada ou elemento estático é incluído na página.
Ao passar o cursor: a fachada pré-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 em players de vídeo, widgets de chat, serviços de autenticação e widgets de mídia social. Incorporações de vídeos 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 somente quando você clica na imagem.

Você pode construir uma fachada personalizada click-to-load 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

Lite-youtube-embed é uma fachada recomendada para o player do YouTube, que tem a aparência do player real, mas é 224 vezes mais rápido. Ela pode ser usada fazendo o download do script e da folha de estilo e usando a tag <lite-youtube> em HTML ou JavaScript. Os parâmetros do player personalizado compatíveis com o YouTube podem ser incluídos por meio do atributo params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Veja a seguir uma comparação entre o lite-youtube-embed e a incorporação real.

Uma incorporação 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

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

Remover ou substituir incorporações por links

Se você achar que algumas incorporações de terceiros resultam em baixo desempenho de carregamento 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 seus usuários acessem o conteúdo na incorporação, forneça um link para ele com target="_blank". Assim, eles poderão clicar e conferir o conteúdo em outra guia.

Estabilidade do layout

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

Como a estabilidade visual é importante para uma boa experiência do usuário, a Cumulative Layout Shift (CLS) mede a frequência e o nível de interrupção dessas mudanças.

Para evitar mudanças de layout, reserve 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 isso, especifique os atributos width e height dos 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 deve 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, esse 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 iframeinjetado depois que essa página for renderizada. Como mostrado no snippet a seguir, 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 o contêiner não se expanda ao carregar o feed e não haja mudança de layout. O snippet a seguir pode ser usado para corrigir o tamanho da incorporação já incluída.

<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>

Terminador da troca de layout

Como as incorporações de terceiros geralmente omitem as dimensões (largura e altura) do conteúdo final renderizado, elas podem causar mudanças significativas no layout da página. Esse problema pode ser complicado de resolver sem inspecionar manualmente os tamanhos finais usando o DevTools em uma variedade de tamanhos de janela de visualização diferentes.

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

Terminador de troca de layout:

Carrega a incorporação do lado do cliente em um iframe.
Redimensiona o iframe para vários tamanhos comuns da janela de visualização.
Para cada janela de visualização popular, captura as dimensões da incorporação para gerar consultas de mídia e de contêiner posteriormente.
Dimensiona um wrapper de altura mínima em torno da marcação de incorporação usando consultas de mídia (e consultas de contêiner) até que a incorporação seja inicializada (depois disso, os estilos de altura mínima são removidos).
Gera um snippet de incorporação otimizado que pode ser copiado e colado onde você incluiria a incorporação em sua página.

Teste o Layout Shift Terminator e deixe seu feedback no GitHub. A ferramenta está na versão Beta e tem como objetivo ser aprimorada com o passar do tempo.

Conclusão

Incorporações de terceiros podem agregar muito valor aos usuários, mas, à medida que o número e o tamanho das incorporações da página aumentam, o desempenho pode ser afetado. 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.