Carregue recursos de terceiros de forma lazy com fachadas
Published on
Recursos de terceiros costumam ser usados para exibir anúncios ou vídeos e integrar-se a mídias socias. A abordagem default é carregar recursos de terceiros assim que a página for carregada, mas isto pode retardar desnecessariamente o carregamento da página. Se o conteúdo de terceiros não for crítico, esse custo de desempenho pode ser reduzido usando carregamento lazy.
Esta auditoria destaca incorporações de terceiros que podem ser carregadas de forma lazy durante a interação. Nesse caso, uma fachada é usada no lugar do conteúdo de terceiros até que o usuário interaja com ele.
Uma fachada é um elemento estático que parece com o componente de terceiros que é incorporado, mas não é funcional e, portanto, muito menos oneroso no carregamento da página.
Como o Lighthouse detecta incorporações de terceiros que podem ter o carregamento adiado
O Lighthouse procura produtos de terceiros que podem ser adiados, como widgets de botão social ou embeds de vídeo (por exemplo, um player incorporado do YouTube).
Os dados sobre produtos que podem ser adiados e fachadas disponíveis são mantidos em uma web de terceiros.
A auditoria falhará se a página carregar recursos pertencentes a uma dessas incorporações de terceiros.
Como adiar componentes de terceiros com uma fachada
Em vez de incluir uma incorporação de componente de terceiros diretamente ao seu HTML, carregue a página com um elemento estático que se pareça com o embed de terceiros. O padrão de interação deve ser algo da seguinte forma:
No carregamento: adicione a fachada à página.
Ao passar o mouse: a fachada conecta-se previamente a recursos de terceiros.
Ao clicar: a fachada é substituida pelo produto de terceiros.
Fachadas recomendadas
Em geral, incorporações de vídeo, widgets de botão social e widgets de bate-papo podem empregar o padrão fachada (facade). A lista abaixo oferece nossas recomendações de fachadas de código aberto. Ao escolher uma fachada, leve em consideração o equilíbrio entre o tamanho e o conjunto de recursos. Você também pode usar um carregador lazy de iframes como vb/lazyframe.
YouTube player incorporado
Vimeo player incorporado
Bate-papo ao vivo (Intercom, Drift, Help Scout, Facebook Messenger)
Existem algumas desvantagens ao carregar componentes de terceiros com fachadas de forma lazy, pois elas não têm toda a gama de funcionalidades dos embeds originais. Por exemplo, a bolha do Drift Live Chat tem um ícone que indica o número de novas mensagens. Se o Live Chat for adiado com uma fachada, a bolha aparecerá quando o widget de bate-papo real for carregado depois que o navegador disparar requestIdleCallback. Para incorporações de vídeo, a reprodução automática (autoplay) poderá não funcionar de forma consistente se for carregada de forma lazy.
Escrevendo sua própria fachada
Você pode preferir construir uma solução de fachada personalizada que emprega o padrão de interação descrito acima. A fachada deve ser significativamente menor em comparação com o produto adiado de terceiros e incluir apenas o código mínimo necessário para imitar a aparência do produto.
Se você deseja que sua solução seja incluída na lista acima, dê uma olhada no processo de submissão.
Recursos
Código-fonte para a auditoria Carregue recursos de terceiros de forma lazy com fachadas.
Published on • Improve article