Recursos de terceros de carga diferida con fachadas

A menudo, se usan recursos de terceros para mostrar anuncios o videos, además de integrarlos a redes sociales. El enfoque predeterminado consiste en cargar los recursos de terceros en cuanto se carga la página, pero esto puede ralentizar innecesariamente la carga de la página. Si el contenido de terceros no es crítico, este costo de rendimiento se puede reducir con la carga diferida.

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

Término clave: Una fachada es un elemento estático similar al tercero incorporado real, pero no funciona y, por lo tanto, resulta mucho menos agotador en la carga de la página.

Cargando el reproductor incorporado de YouTube con una fachada.

Cómo Lighthouse detecta incorporaciones de terceros diferibles

Lighthouse busca productos de terceros que se puedan diferir, como widgets de botones de redes sociales o incorporaciones de video (por ejemplo, el reproductor incorporado de YouTube).

Los datos sobre los productos diferibles y las fachadas disponibles se mantienen en la Web de terceros.

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

Auditoría de fachada de terceros de Lighthouse.

Cómo diferir terceros con una fachada

En lugar de agregar una incorporación de terceros directamente a tu código HTML, carga la página con un elemento estático similar al tercero incorporado real. El patrón de interacción debería verse de la siguiente manera:

1. Durante la carga: Agrega una fachada a la página.

2. Cuando se desplaza el mouse sobre el anuncio: La fachada se conecta previamente a recursos de terceros.

3. Cuando se hace clic en ella, la fachada se reemplaza a sí misma por el producto de terceros.

Fachadas recomendadas

En general, las incorporaciones de video, los widgets de botones de redes sociales y el chat pueden emplear el patrón de fachada. La siguiente lista ofrece nuestras recomendaciones de fachadas de código abierto. Cuando elijas una fachada, ten en cuenta el equilibrio entre el tamaño y el conjunto de elementos. También puedes usar un cargador diferido de iframe, como vb/lazyframe.

Reproductor incorporado de YouTube

• paulirish/lite-youtube-embed

• justinribeiro/lite-youtube

• Daugilas/lazyYT

• video-ngx-lite

Reproductor incorporado de Vimeo

• luwes/lite-vimeo-embed

• slightlyoff/lite-vimeo

• video-ngx-lite

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

• calibreapp/react-live-chat-loader (entrada de blog)

Precaución: Existen algunas desventajas cuando se cargan de forma diferida terceros con fachadas, ya que no tienen el rango completo de funcionalidad de las incorporaciones reales. Por ejemplo, la burbuja del chat en vivo de deriva tiene una insignia que indica la cantidad de mensajes nuevos. Si la burbuja del chat en vivo se aplaza con una fachada, aparecerá cuando el widget de chat real se cargue después de que el navegador active requestIdleCallback. En el caso de las incorporaciones de video, es posible que la reproducción automática no funcione de manera coherente si se carga de forma diferida.

Cómo escribir tu propia fachada

Puedes optar por crear 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 diferido de terceros y solo debe incluir suficiente código para imitar la apariencia del producto.

Si deseas que tu solución se incluya en la lista anterior, consulta el proceso de envío.

Recursos

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