Visão geral das técnicas para carregar incorporações conhecidas de terceiros de maneira eficiente.
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
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.
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 atributoloadingnã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
loadingno 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
loadingatributo 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 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.
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 atributosrc.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.