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 ao delegar 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 mídias sociais, mapas e anúncios.

O conteúdo de terceiros pode afetar o desempenho de uma página de várias maneiras. Isso pode bloquear a renderização, lidar com outros recursos essenciais 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 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 é uma incorporação

Uma incorporação de terceiros é qualquer conteúdo exibido no seu site que: * Não foi criado por você * 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 para: * Sites relacionados a esportes, notícias, entretenimento e moda usam vídeos para melhorar o conteúdo textual. * As organizações com contas ativas no Twitter ou em redes sociais incorporam feeds dessas contas às suas 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. Os provedores de terceiros oferecem snippets HTML, que geralmente consistem em um <iframe> que extrai uma página composta por 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 deixar as incorporações pesadas e afetar a performance da página, atrasando o conteúdo próprio.

Impacto de terceiros na performance

Muitas incorporações conhecidas incluem mais de 100 KB de JavaScript, e à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 desempenho, como o Lighthouse e o Chrome DevTools, ajudam a medir o impacto das incorporações de terceiros no desempenho.

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

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

Reduzir o impacto do código 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 as diretrizes abaixo.

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 ocupam as barras laterais ou aparecerão após o conteúdo próprio.

Para que o usuário tenha a melhor experiência possível, o conteúdo principal precisa ser carregado rapidamente e antes de qualquer outro conteúdo de suporte. Por exemplo, o texto de uma página de notícias deve ser carregado antes da incorporação de anúncios ou de um feed do Twitter.

As solicitações de incorporações de terceiros podem atrapalhar o carregamento de 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 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 ajuda a otimizar o carregamento da página inicial e também reduz os custos de download para usuários com planos de dados fixos e conexões de rede lentas.

Atrasar o download 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 explicadas abaixo.

Carregamento lento nativo 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 para perto deles. O atributo de carregamento para <iframe> está disponível no Chrome 77 e versões mais recentes e também foi introduzido em outros navegadores baseados no Chromium.

<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 próximo 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 o carregamento lento desse frame será feito.

Os navegadores que não oferecem suporte ao atributo loading o ignoram. Portanto, você pode aplicar o carregamento lento nativo como um aprimoramento progressivo. Os navegadores compatíveis com o atributo podem ter implementações diferentes para o limite distance-from-viewport, ou seja, a distância em que o iframe começa a carregar.

Veja a seguir algumas maneiras de fazer o carregamento lento de iframes 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 atributo loading no código da incorporação de iframe gerada pela API Google Maps Embed. Confira a seguir um exemplo de código com um marcador 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 da janela de visualização de uma incorporação, além de sinais como o tipo de conexão eficaz e o modo Lite, para decidir quando um iframe precisa ser carregado, o carregamento lento nativo pode ser inconsistente. Caso você precise de um controle melhor dos limites de distância ou queira oferecer uma experiência de carregamento lento consistente em vários navegadores, use a biblioteca Lazysizes.

Lazysizes é um loader rápido e compatível com SEO para imagens e iframes. Após 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 incorporas de terceiros.

A Slowsizes usa a API Intersection Observer (em inglês) para detectar quando um elemento fica visível.

Uso da 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. Se esse parâmetro for definido como true, o plug-in vai usar o mecanismo de carregamento lento do navegador, definindo o atributo iframe loading="lazy".

Feeds do Instagram com carregamento lento

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 o tamanho da incorporação pode ser maior que 100 KB. Muitos plug-ins do Instagram para sites do WordPress, como o WPZoom e o Elfsight, oferecem a opção de carregamento lento.

Substituir incorporações por fachadas

Embora as incorporações interativas agreguem valor à página, é possível que muitos usuários não interajam com elas. Por exemplo, nem todo usuário que navega na página de um restaurante vai clicar, expandir, rolar e navegar pelo mapa incorporado. Da mesma forma, nem todo usuário de uma página de provedores de serviços de telecomunicações interage com o chatbot. Nesses casos, é possível evitar o carregamento ou o carregamento lento completo da incorporação exibindo uma fachada em seu lugar.

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

Uma facha é um elemento estático semelhante ao de terceiros incorporado real, mas que não é funcional e, portanto, exige menos esforço no carregamento da página. Confira a seguir algumas estratégias para carregar essas incorporações da melhor forma possível e, ao mesmo tempo, fornecer algum valor ao usuário.

Usar imagens estáticas como fachadas

Imagens estáticas podem ser usadas em vez de incorporações do mapa, onde não é necessário tornar o mapa interativo. Você pode aumentar o zoom na área de interesse no mapa, capturar uma imagem e usar essa opção em vez da incorporação do mapa interativo. Você também pode usar a funcionalidade Capturar tela do nó do DevTools para fazer uma captura do elemento iframe incorporado, conforme mostrado abaixo.

Fazer uma captura de tela do nó

O DevTools captura a imagem como um png, mas você também pode convertê-la em WebP format for better performance.

Usar imagens dinâmicas como fachadas

Essa técnica permite gerar imagens correspondentes a uma incorporação interativa no tempo 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: 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 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> da página como o atributo src.

A ferramenta Google 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 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 da 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 seu 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 de clique para carregar para aprimorar fachadas

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

No carregamento da página: a fachada ou o elemento estático é incluído na página.
Com o mouseover: a fachada faz a pré-conexão com o provedor de incorporação terceirizado.
Com um clique: 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ídia social. As incorporações de vídeos do YouTube que são apenas imagens com um botão de reprodução são fachadas que encontramos frequentemente. O vídeo é carregado somente quando você clica na imagem.

É possível criar uma fachada de clique para carregar personalizada usando o padrão de importação 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 se parece com o player real, mas é 224 vezes mais rápido. Ela pode ser usada fazendo o download do script e da folha de estilo e, em seguida, usando a tag <lite-youtube> em HTML ou JavaScript. Os parâmetros de players personalizados aceitos pelo YouTube podem ser incluídos por meio do atributo params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Confira abaixo uma comparação entre o lite-youtube-embed e o embedding real.

Uma incorporação do YouTube Lite

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

React-live-chat-loader carrega um botão que parece uma incorporação de chat, em vez da própria incorporação. Ele pode ser usado com várias plataformas de provedores de chat, como Intercom, Help Scout, Messenger, entre outros. O widget parecido é muito mais leve que o widget de chat e carrega mais rápido. Ele pode ser substituído pelo widget de chat quando o usuário passar o cursor sobre o botão ou clicar no botão, ou se a página ficar inativa por muito tempo. O estudo de caso da Postmark explica como a empresa implementou o carregador de conversa ao vivo e as melhorias de desempenho 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 que o uso de qualquer uma das técnicas acima não é uma opção, a coisa mais simples a fazer é remover a incorporação completamente. Se você ainda quiser que seus usuários tenham acesso ao conteúdo incorporado, forneça um link a ele com target="_blank". Assim, o usuário poderá clicar e visualizar 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 do conteúdo. Isso é conhecido como mudança de layout.

Como a estabilidade visual é importante para garantir uma experiência do usuário tranquila, a Mudança de layout cumulativa (CLS, na sigla em inglês) mede a frequência com que essas mudanças acontecem e o quanto elas são disruptivas.

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. É possível garantir isso especificando os atributos width e height dos iframes ou definindo 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 populares, como YouTube, Google Maps e Facebook, fornecem o código de incorporação com atributos de tamanho especificados. No entanto, alguns provedores podem não incluir essas informações. 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>

É possível usar o DevTools para inspecionar o iframe injetado depois que a 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>

Essa informação pode ser usada para definir o tamanho do elemento que o contém. Isso garante 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 incluído 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>

Terminador de troca de layout

Como 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 de uma página. Esse problema pode ser complicado de resolver sem inspecionar manualmente os tamanhos finais usando o DevTools em vários tamanhos diferentes de janela de visualização.

Agora há uma ferramenta automatizada, o Layout Shift Terminator, que pode ajudar a reduzir as mudanças de layout em incorporações conhecidas, como 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 comuns de janela de visualização.
Para cada janela de visualização comum, captura as dimensões da incorporação para gerar, posteriormente, consultas de mídia e de contêiner.
Dimensiona um wrapper min-height em torno da marcação incorporada usando consultas de mídia (e consultas de contêiner) até que a incorporação seja inicializada (depois que os estilos de altura mínima forem removidos).
Gera um snippet de incorporação otimizado que pode ser copiado/colado onde você incluiria a incorporação em sua página.

Teste o Layout Shift Terminator e fique à vontade para deixar feedback no GitHub. A ferramenta está na versão Beta e pretende melhorar ao longo do tempo com mais refinamentos.

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 prejudicado. Por isso, é necessário medir, julgar e usar estratégias de carregamento adequadas para incorporações com base na posição, relevância e necessidades dos usuários em potencial.