Los recursos de terceros se suelen usar para mostrar anuncios o videos, y para 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 página. Si el contenido de terceros no es fundamental, este costo de rendimiento se puede reducir con la carga diferida.
En esta auditoría, se destacan las incorporaciones de terceros que se pueden cargar de forma diferida durante la interacción. En ese caso, se usa una fachada en lugar del contenido de terceros hasta que el usuario interactúa con él.
Cómo Lighthouse detecta las inserciones de terceros aplazables
Lighthouse busca productos de terceros que se pueden aplazar, como widgets de botones de redes sociales o videos incorporados (por ejemplo, el reproductor incorporado de YouTube).
Los datos sobre los productos aplazables y las fachadas disponibles se mantienen en third-party-web.
La auditoría falla si la página carga recursos que pertenecen a uno de estos elementos incorporados de terceros.
Difiere terceros con una fachada
En lugar de agregar una incorporación de terceros directamente a tu HTML, carga la página con un elemento estático que se parezca al tercero incorporado real. El patrón de interacción debería ser similar al siguiente:
- En la carga: Agrega la fachada a la página.
- Al colocar el cursor sobre el elemento: La fachada realiza una conexión previa a los recursos de terceros.
- Al hacer clic: La fachada se reemplaza por el producto de terceros.
Fachadas recomendadas
En general, las incorporaciones de video, los widgets de botones de redes sociales y los widgets de chat pueden emplear el patrón de fachada. Cuando elijas una fachada, ten en cuenta el equilibrio entre el tamaño y el conjunto de funciones.
En la siguiente lista, se ofrecen nuestras recomendaciones de fachadas de código abierto. También puedes usar un cargador de iframe diferido, como vb/lazyframe.
Reproductor incorporado de YouTube
Reproductor incorporado de Vimeo
Chat en vivo (Intercom, Drift, Help Scout y Facebook Messenger)
Escribe tu propia fachada
Puedes crear una solución de fachada personalizada que emplee el patrón de interacción que se describió 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 quieres que tu solución se incluya en la lista, consulta el proceso de envío.
Recursos
Código fuente de la auditoría de recursos de terceros de carga diferida con fachadas.