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.
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.
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:
Durante la carga: Agrega una fachada a la página.
Cuando se desplaza el mouse sobre el anuncio: La fachada se conecta previamente a recursos de terceros.
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
Reproductor incorporado de Vimeo
Chat en vivo (Intercomunicador, Drift, Help Scout, Facebook Messenger)
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