Carga diferida de recursos de terceros con fachadas

Published on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Los recursos de terceros se utilizan a menudo para mostrar anuncios o videos e integrarse con las redes sociales. El enfoque predeterminado es cargar los recursos de terceros tan pronto como se carga la página, pero esto puede ralentizar innecesariamente la carga de la misma. Si el contenido de terceros no es crítico, este costo de rendimiento se puede reducir al cargarlo de forma diferida.

Esta auditoría destaca las incrustaciones de terceros que se pueden cargar de forma diferida durante la interacción. En ese caso, se utiliza una fachada en lugar del contenido de terceros hasta que el usuario interactúe con él.

Término Clave

Una fachada es un elemento estático que luce similar al tercero incrustado real, pero no es funcional y, por lo tanto, es mucho menos exigente durante la carga de la página.

Un ejemplo de carga de un reproductor incrustado de YouTube con una fachada. La fachada pesa 3 KB y el reproductor que pesa 540 KB se carga durante la interacción.
Se está cargando el reproductor incrustado de YouTube con una fachada.

Cómo detecta Lighthouse las incrustaciones diferibles de terceros

Lighthouse busca los productos de terceros que se puedan diferir, como widgets de botones sociales o incrustaciones de video (por ejemplo, reproductor incrustado de YouTube).

Los datos sobre los productos diferibles y las fachadas disponibles se mantienen en third-party-web.

La auditoría falla si la página carga recursos que pertenecen a una de estas incrustaciones de terceros.

Auditoría Lighthouse de fachada de terceros que destaca el reproductor integrado de Vimeo y el chat en vivo de Drift.
Auditoría Lighthouse de fachada de terceros.

Cómo diferir terceros con una fachada

En lugar de agregar un incrustado de terceros directamente a su HTML, cargue la página con un elemento estático que se parezca al del tercero incrustado real. El patrón de interacción debería verse así:

  1. Al cargar: se agrega la fachada a la página.

  2. Al pasar el mouse por encima: la fachada se conecta previamente a los recursos de terceros.

  3. Al hacer clic: la fachada se reemplaza por el producto de terceros.

Fachadas recomendadas

En general, las incrustaciones de video, los widgets de botones sociales y los widgets de chat pueden emplear el patrón de fachada. La siguiente lista ofrece nuestras recomendaciones de fachadas de código abierto. Al elegir una fachada, tenga en cuenta el equilibrio entre el tamaño y el conjunto de características. También puede usar un cargador de iframe diferido como vb/lazyframe.

Reproductor incrustado de YouTube

Reproductor incrustado de Vimeo

Chat en vivo (Intercom, Drift, Help Scout, Facebook Messenger)

Precaución

Existen algunas compensaciones cuando se cargan terceros con fachadas de manera diferida, ya que no presentan la gama completa de funcionalidades de las incrustaciones reales. Por ejemplo, la burbuja de Drift Live Chat tiene una insignia que indica la cantidad de mensajes nuevos. Si la burbuja de chat en vivo se difiere con una fachada, la burbuja aparece cuando se carga el widget de chat real después de que el navegador muestre requestIdleCallback. En el caso de incrustaciones de video, es posible que la reproducción automática no funcione de manera uniforme si se carga de manera diferida.

Escriba su propia fachada

Puede optar por construir una solución de fachada personalizada que emplee el patrón de interacción descrito anteriormente. La fachada debe ser significativamente más pequeña en comparación con el producto de terceros diferido y solo debe incluir el código suficiente para imitar la apariencia del producto.

Si desea que su solución se incluya en la lista anterior, consulte el proceso de envío.

Recursos

Código fuente para recursos de terceros de carga diferida con auditoría de fachadas.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.