Carregamento lento de recursos de terceiros com fachadas

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.

Termo importante:uma facade é um elemento estático que parece semelhante ao de terceiros incorporado, mas não é funcional e, portanto, gera menos cobranças no carregamento da página.

Carregando o player incorporado do YouTube com uma fachada.

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 de fachada de terceiros do Lighthouse.

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:

1. Ao carregar: adicionar fachada à página.

2. Ao passar o mouse: a fachada se pré-conecta a recursos de terceiros.

3. 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)

• justinribeiro/lite-youtube

• Daugilas/LazyYT

• ngx-lite-video (link em inglês)

Player incorporado do Vimeo

• luwes/lite-vimeo-embed

• 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)

Cuidado:há algumas desvantagens no carregamento lento de terceiros com fachadas, porque eles não têm toda a funcionalidade das incorporações reais. Por exemplo, o balão do Drift ao vivo tem um selo que indica o número de novas mensagens. Se o balão do chat ao vivo for adiado com uma fachada, ele vai aparecer quando o widget de chat for carregado depois que o navegador disparar requestIdleCallback. Para incorporações de vídeo, a reprodução automática pode não funcionar de forma consistente se for carregada lentamente.

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.