A menudo, se usan recursos de terceros para mostrar anuncios o videos y para integrarlos con las redes sociales. El enfoque predeterminado es cargar recursos de terceros en cuanto se carga la página, pero esto puede ralentizar la carga de la página de forma innecesaria. Si el contenido de terceros no es fundamental, se puede reducir este costo de rendimiento mediante la carga diferida.
Esta auditoría destaca las incorporaciones de terceros que se pueden cargar de forma diferida en la interacción. En ese caso, se usa una fachada en lugar del contenido de terceros hasta que el usuario interactúa con ella.
Cómo Lighthouse detecta incorporaciones de terceros diferidas
Lighthouse busca productos de terceros que se puedan postergar, como widgets de botones de redes sociales o incorporaciones de video (por ejemplo, un reproductor incorporado de YouTube).
Los datos sobre los productos diferibles y las fachadas disponibles se conservan en la Web de terceros.
La auditoría falla si la página carga recursos que pertenecen a una de estas incorporaciones de terceros.
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 que se vea 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 un anuncio: la fachada se conecta previamente a recursos de terceros.
- Cuando se hace clic: La fachada se reemplaza por el producto de terceros.
Fachadas recomendadas
En general, las incorporaciones de video, los widgets de botones 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 características.
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, Facebook Messenger)
Escribe tu propia fachada
Puedes optar por compilar una solución de fachada personalizada que emplee el patrón de interacción descrito antes. La fachada debe ser considerablemente más pequeña en comparación con el producto de terceros diferido y solo debe incluir suficiente código para imitar el aspecto del producto.
Si quieres que tu solución se incluya en la lista, consulta el proceso de envío.
Recursos
Código fuente de recursos de terceros de carga diferida con auditorías de fachadas.