Recursos de terceiros são frequentemente usados para exibir anúncios ou vídeos e fazer integração com mídias sociais. A abordagem padrão é carregar recursos de terceiros assim que a página for carregada, mas isso pode deixar o carregamento da página mais lento. Se o conteúdo de terceiros não for crítico, esse custo de desempenho poderá ser reduzido com o carregamento lento.
Essa auditoria destaca incorporações de terceiros que podem ser carregadas lentamente com a interação. Nesse caso, uma façanha é usada no lugar do conteúdo de terceiros até que o usuário interaja com ele.
Como o Lighthouse detecta incorporações de terceiros que podem ser adiadas
O Lighthouse procura produtos de terceiros que possam ser adiados, como widgets de botões de redes sociais ou incorporações de vídeos (por exemplo, o player incorporado do YouTube).
Os dados sobre produtos adiáveis e fachadas disponíveis são mantidos na Web de terceiros.
A auditoria falha se a página carregar recursos pertencentes a uma dessas incorporações de terceiros.
Adiar o carregamento de 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 semelhante à incorporação de terceiros real. O padrão de interação vai ficar assim:
- No carregamento: adicione a fachada à página.
- Ao passar o cursor: a fachada faz a conexão prévia com 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ões de redes sociais e widgets de chat podem empregar o padrão de fachada. Ao escolher uma fachada, considere o equilíbrio entre o tamanho e o conjunto de atributos.
A lista a seguir oferece nossas recomendações de fachadas de código aberto. Você também pode usar um carregador lento de iframe, como vb/Lazyframe (link em inglês).
Player incorporado do YouTube
Player incorporado do Vimeo
slightlyoff/lite-vimeo (link em inglês)
Chat ao vivo (Intercom, Drift, Help Scout, Facebook Messenger)
Criar sua própria fachada
Você pode criar uma solução de fachada personalizada que emprega o padrão de interação descrito anteriormente. A fachada precisa ser significativamente menor em comparação com o produto de terceiros adiado 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, confira o processo de envio.
Recursos
Código-fonte para Carregamento lento de recursos de terceiros com auditoria de fachadas.