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 com eficiência.

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çã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, competir com outros recursos essenciais para rede e largura de banda ou afetar as métricas das Principais métricas da Web. As incorporações de terceiros também podem causar mudanças de layout durante o carregamento. Este artigo discute as práticas recomendadas de desempenho 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 em incorporações conhecidas.

O que é um embedding?

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

Não é de sua autoria
Veiculado de 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 nestes locais:

Sites relacionados a esportes, notícias, entretenimento e moda usam vídeos para complementar o conteúdo textual.
As organizações com contas ativas do Twitter ou de mídias sociais incorporam feeds dessas contas às páginas da Web para engajar e alcançar mais pessoas.
As 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 a performance 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 foco é o conteúdo principal próprio, enquanto as incorporações de terceiros ocupam as barras laterais ou aparecem depois do 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 apoio. Por exemplo, o texto das notícias em uma página de notícias deve ser carregado antes da incorporação em um feed ou em 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 após o 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 a página até essa parte. Isso não apenas ajuda a otimizar o carregamento inicial da página, 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, é 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 vai carregar esse frame de forma lenta.

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

Vídeos do YouTube: para carregar um iframe do player de vídeo do YouTube de forma lazy, 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. Confira abaixo um exemplo de código com um marcador de posição para a chave da API 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 Slowsizes

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 sobre os limites de distância ou quiser oferecer 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, Lazysizes pode ser usado com iframes para outras incorporações de terceiros.

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

Como usar o data-lazy 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 fornece 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 compactados. 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 todo usuário de uma página de provedor de serviços de telecomunicações interage com o chatbot. Nesses casos, é possível evitar o carregamento ou carregamento lento da incorporação mostrando uma fachada no lugar dela.

Uma incorporação de mapa com um recurso de 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

As imagens estáticas podem ser usadas no lugar de incorporações do mapa quando não é necessário tornar o mapa interativo. Você pode ampliar a área de interesse no mapa, capturar uma imagem e usar essa imagem 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 png, mas você também pode convertê-la para o formato WebP para melhorar o desempenho.

Usar imagens dinâmicas como fachadas

Essa técnica permite gerar imagens correspondentes a uma incorporação interativa no momento da 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: o serviço da 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 o retorna como uma imagem que pode ser exibida na 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 Criador de mapas estáticos ajuda a configurar os parâmetros necessários para o URL e fornece o código para o 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 de mapas, esse conceito permite incorporar dinamicamente uma captura de tela do Twitter em vez do feed ao vivo. O 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. A API também aceita parâmetros para personalizar o plano de fundo, as cores, as bordas e as dimensões da imagem.

Use o recurso "Clique para carregar" para melhorar as 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 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 as etapas abaixo.

No carregamento da página: fachada ou elemento estático é incluído na página.
Ao passar o cursor: a fachada faz a conexão preliminar com o 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 mídias sociais. 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. Para usar, faça o download do script e da folha de estilo e use a tag <lite-youtube> em HTML ou JavaScript. Os parâmetros personalizados do player compatíveis com o YouTube podem ser incluídos pelo 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.

A incorporação do YouTube Lite

A incorporação do YouTube

Outras fachadas semelhantes disponíveis para os 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 ao 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 semelhante é muito mais leve do que o widget 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ê perceber que algumas incorporações de terceiros resultam em uma performance de carregamento ruim e usar qualquer uma das técnicas descritas anteriormente não é uma opção, a maneira mais simples de resolver o problema é 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, às vezes ele pode causar movimentos inesperados no conteúdo da página. Isso é conhecido como deslocamento 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, 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 que contém para garantir que o contêiner não se expanda ao carregar o feed e que 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 difícil de resolver sem inspecionar manualmente os tamanhos finais usando o DevTools em vários tamanhos de janela de visualização.

Agora há uma ferramenta automatizada, o Layout Shift Terminator, que pode ajudar a reduzir as mudanças de layout de incorporações conhecidas, como do Twitter, Facebook e 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 de janela de visualização comuns.
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 dos usuários em potencial.