Carga diferida de recursos de terceros con fachadas
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.
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.
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í:
Al cargar: se agrega la fachada a la página.
Al pasar el mouse por encima: la fachada se conecta previamente a los recursos de terceros.
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) #
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.