Recursos de terceiros geralmente são usados para exibir anúncios ou vídeos e fazer a integração com mídias sociais. A abordagem padrão é carregar recursos de terceiros assim que a página é carregada, mas isso pode desacelerar desnecessariamente o carregamento. Se o conteúdo de terceiros não for crítico, esse custo de desempenho pode ser reduzido com o carregamento lento.
Esta auditoria destaca as incorporações de terceiros que podem ser carregadas lentamente em interação. Nesse caso, uma facade é usada no lugar do conteúdo de terceiros até que o usuário interaja com ela.
![Exemplo de carregamento do player incorporado do YouTube com fachada. A fachada pesa 3 KB e o jogador com 540 KB é carregado durante a interação.](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/an-example-loading-youtu-d7a9b6d1365a5.jpg?authuser=7&hl=pt-br)
Como o Lighthouse detecta incorporações adiáveis de terceiros
O Lighthouse procura produtos de terceiros que podem ser adiados, como widgets de botões de redes sociais ou incorporações de vídeos (por exemplo, player incorporado do YouTube).
Os dados sobre produtos adiáveis e fachadas disponíveis são mantidos na Web de terceiros.
A auditoria falhará se a página carregar recursos que pertencem a uma dessas incorporações de terceiros.
![Auditoria da fachada de terceiros do Lighthouse destacando o player incorporado do Vimeo e o chat ao vivo do Drift.](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/lighthouse-third-party-fa-fd03a1923af91.jpg?authuser=7&hl=pt-br)
Como adiar terceiros com uma fachada
Em vez de adicionar uma incorporação de terceiros diretamente ao HTML, carregue a página com um elemento estático que seja semelhante ao incorporado de terceiros. O padrão de interação vai ser semelhante a este:
Ao carregar: adicionar fachada à página.
Ao passar o mouse: a fachada se pré-conecta a recursos de terceiros.
Ao clicar: a fachada se substitui pelo produto de terceiros.
Fachadas recomendadas
Em geral, incorporações de vídeo, widgets de botão de redes sociais e widgets de chat podem empregar o padrão de fachada. A lista abaixo oferece nossas recomendações de fachadas de código aberto. Ao escolher uma fachada, considere o equilíbrio entre o tamanho e o conjunto de atributos. Você também pode usar um carregador de iframe lento, como vb/lazyframe.
Player incorporado do YouTube
paulirish/lite-youtube-embed (link em inglês)
ngx-lite-video (link em inglês)
Player incorporado do Vimeo
slightlyoff/lite-vimeo (link em inglês)
ngx-lite-video (link em inglês)
Chat ao vivo (Intercom, Drift, Help Scout, Facebook Messenger)
- calibreapp/react-live-chat-loader (postagem do blog, em inglês)
Como escrever sua própria fachada
Você pode optar por criar uma solução de fachada personalizada que use o padrão de interação descrito acima. A fachada deve ser significativamente menor em comparação com o produto de terceiros diferido e incluir apenas código suficiente para imitar a aparência do produto.
Se você quiser que sua solução seja incluída na lista acima, confira o processo de envio.
Recursos
Código-fonte de Recursos de terceiros de carregamento lento com auditoria de fachadas.