Os recursos de terceiros são usados com frequência para mostrar anúncios ou vídeos e se integrar às mídias sociais. A abordagem padrão é carregar recursos de terceiros assim que a página é carregada, mas isso pode diminuir a velocidade de carregamento desnecessariamente. Se o conteúdo de terceiros não for essencial, esse custo de performance poderá ser reduzido com o carregamento lento.
Essa auditoria destaca incorporações de terceiros que podem ser carregadas lentamente na interação. Nesse caso, uma fachada é usada no lugar do conteúdo de terceiros até que o usuário interaja com ele.
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ídeo (por exemplo, o player incorporado do YouTube).
Os dados sobre produtos adiáveis e fachadas disponíveis são mantidos em third-party-web.
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 que pareça semelhante ao conteúdo incorporado de terceiros. O padrão de interação vai ser semelhante a este:
- Ao carregar: adicione fachada à página.
- Ao passar o cursor: a fachada faz uma pré-conexão com recursos de terceiros.
- Ao clicar: a fachada é substituída 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 usar o padrão de fachada. Ao escolher uma fachada, considere o equilíbrio entre o tamanho e o conjunto de recursos.
A lista a seguir oferece nossas recomendações de interfaces de código aberto. Também é possível usar um carregador de iframe lento, como vb/lazyframe.
Player incorporado do YouTube
Player incorporado do Vimeo
Chat ao vivo (Intercom, Drift, Help Scout, Facebook Messenger)
Escrever 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 adiado de terceiros e incluir apenas código suficiente para imitar a aparência do produto.
Se quiser incluir sua solução na lista, confira o processo de envio.
Recursos
Código-fonte para a auditoria de carregamento lento de recursos de terceiros com fachadas.