Se usó la API de Cloud Translation para traducir esta página.

Prácticas recomendadas para usar incorporaciones de terceros

Una descripción general de las técnicas para cargar incorporaciones populares de terceros de manera eficiente.

Addy Osmani

Katie Hempenius

Leena Sohoni

Muchos sitios usan incorporaciones de terceros para crear una experiencia del usuario atractiva, ya que delegan algunas secciones de una página web a otro proveedor de contenido. Los ejemplos más comunes de incorporaciones de contenido de terceros son los reproductores de video, los feeds de redes sociales, los mapas y los anuncios.

El contenido de terceros puede influir en el rendimiento de una página de muchas formas. Puede ser un bloqueo de renderización, competir con otros recursos críticos de la red y el ancho de banda o afectar las métricas de Core Web Vitals. Las incorporaciones de terceros también pueden provocar cambios de diseño a medida que se cargan. En este artículo, se analizan las prácticas recomendadas de rendimiento que puedes usar cuando cargas incorporaciones de terceros, técnicas de carga eficientes y la herramienta Terminador de cambio de diseño, que ayuda a reducir los cambios de diseño en incorporaciones populares.

Qué es una incorporación

Una incorporación de terceros es todo contenido que se muestra en tu sitio y tiene las siguientes características:

No eres la autora de ti
Entregado por servidores de terceros

Se muestran varias incorporaciones fuera de pantalla, que podrían ser de carga diferida.

Las incorporaciones se usan con frecuencia en lo siguiente:

Los sitios web relacionados con deportes, noticias, entretenimiento y moda utilizan videos para aumentar el contenido textual.
Las organizaciones con cuentas activas de Twitter o redes sociales incorporan feeds de estas cuentas a sus páginas web para atraer a más personas y comunicarse con ellas.
Las páginas de restaurantes, parques y lugares de eventos suelen incorporar mapas.

Las incorporaciones de terceros suelen cargarse en elementos <iframe> de la página. Los proveedores de terceros ofrecen fragmentos HTML que, a menudo, consisten en un <iframe> que extrae una página compuesta por lenguaje de marcado, secuencias de comandos y hojas de estilo. Algunos proveedores también usan un fragmento de secuencia de comandos que inserta un <iframe> de forma dinámica para extraer otro contenido. Esto puede provocar que las incorporaciones de terceros sean pesadas y afectar el rendimiento de la página retrasando el contenido de origen.

Impacto en el rendimiento de las incorporaciones de terceros

Muchas incorporaciones populares incluyen más de 100 KB de JavaScript y, a veces, incluso hasta 2 MB. Demoran más en cargarse y mantienen el subproceso principal ocupado cuando se ejecutan. Las herramientas de supervisión del rendimiento como Lighthouse y las Herramientas para desarrolladores de Chrome ayudan a medir el impacto de las incorporaciones de terceros en el rendimiento.

Reduce el impacto del código de terceros La auditoría de Lighthouse muestra la lista de proveedores externos que usa una página, con su tamaño y el tiempo de bloqueo del subproceso principal. La auditoría está disponible a través de las Herramientas para desarrolladores de Chrome en la pestaña Lighthouse.

Una práctica recomendada es auditar periódicamente el impacto en el rendimiento de las incorporaciones y el código de terceros, ya que el código fuente de las incorporaciones puede cambiar. Puedes aprovechar esta oportunidad para quitar cualquier código redundante.

Reduce el impacto del código de terceros

Cargando prácticas recomendadas

Las incorporaciones de terceros pueden tener un impacto negativo en el rendimiento, pero también ofrecen funcionalidades importantes. Para usar las incorporaciones de terceros de forma eficiente y reducir su impacto en el rendimiento, sigue estos lineamientos.

Orden de las secuencias de comandos

En una página bien diseñada, el contenido principal de origen será el foco de la página, mientras que las incorporaciones de terceros ocuparán barras laterales o aparecerán después del contenido de origen.

Para brindar la mejor experiencia del usuario, el contenido principal debe cargarse rápidamente y antes que cualquier otro contenido complementario. Por ejemplo, el texto de noticias en una página de noticias debe cargarse antes de que se incorporen en un feed de Twitter o en anuncios.

Las solicitudes de incorporaciones de terceros pueden obstaculizar la carga de contenido de origen, por lo que la posición de una etiqueta de secuencia de comandos de terceros es importante. Las secuencias de comandos pueden afectar la secuencia de carga porque la construcción del DOM se detiene mientras se ejecutan las secuencias de comandos. Coloca las etiquetas de secuencia de comandos de terceros después de las etiquetas propias clave y usa los atributos async o defer para cargarlas de forma asíncrona.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

Carga diferida

Dado que el contenido de terceros suele aparecer después del contenido principal, es posible que no se vea en el viewport cuando se cargue la página. En ese caso, es posible que la descarga de recursos de terceros se aplace hasta que el usuario se desplace hacia abajo hasta esa parte de la página. Esto no solo ayuda a optimizar la carga inicial de la página, sino que también reduce los costos de descarga para los usuarios con planes de datos fijos y conexiones de red lentas.

Retrasar la carga de contenido hasta que sea necesario se denomina carga diferida. Según los requisitos y el tipo de incorporación, puedes usar diferentes técnicas de carga diferida.

Carga diferida del navegador para `<iframe>`

En el caso de las incorporaciones de terceros que se cargan a través de elementos <iframe>, puedes usar la carga diferida a nivel del navegador para diferir la carga de iframes fuera de pantalla hasta que los usuarios se desplacen cerca de ellos. El atributo de carga para <iframe> está disponible en todos los navegadores modernos.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

El atributo de carga admite los siguientes valores:

lazy: Indica que el navegador debe diferir la carga del iframe. El navegador cargará el iframe cuando se acerque al viewport. Úsalo si el iframe es un buen candidato para la carga diferida.
eager: Carga el iframe de inmediato. Úsalo si el iframe no es un buen candidato para la carga diferida. Si no se especificó el atributo loading, este es el comportamiento predeterminado, excepto en el modo lite.
auto: El navegador determina si este fotograma se carga de forma diferida.

Los navegadores que no admiten el atributo loading lo ignoran, por lo que puedes aplicar la carga diferida a nivel del navegador como una mejora progresiva. Los navegadores que admiten el atributo pueden tener diferentes implementaciones para el umbral de distancia desde el viewport (la distancia a la que el iframe comienza a cargarse).

A continuación, se describen algunas formas en las que puedes cargar iframes de forma diferida para diferentes tipos de incorporaciones.

Videos de YouTube: Para realizar una carga diferida en el iframe de un reproductor de video de YouTube, incluye el atributo loading en el código de incorporación proporcionado por YouTube. La carga diferida de la incorporación de YouTube puede ahorrar aproximadamente 500 KB en la carga inicial de la página.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Google Maps: Para realizar una carga diferida de un iframe de Google Maps, incluye el atributo loading en el código del iframe incorporado que genera la Google Maps Embed API. A continuación, se muestra un ejemplo del código con un marcador de posición para la clave de API de Google Cloud.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

biblioteca lazysizes

Debido a que los navegadores utilizan la distancia de una incorporación desde el viewport, además de indicadores como el tipo de conexión real y el modo básico, para decidir cuándo se debe cargar un iframe, la carga diferida del navegador puede ser inconsistente. Si necesitas un mejor control sobre los umbrales de distancia o deseas proporcionar una experiencia de carga diferida coherente en todos los navegadores, puedes usar la biblioteca lazysizes.

lazysizes es un cargador diferido rápido y compatible con SEO tanto para imágenes como para iframes. Una vez que hayas descargado el componente, se puede utilizar con un iframe para una incorporación de YouTube de la siguiente manera.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Del mismo modo, los tamaños diferidos se pueden usar con iframes para otras incorporaciones de terceros.

Ten en cuenta que lazysizes usa la API de Intersection Observer para detectar cuándo un elemento se vuelve visible.

Uso de data-lazy en Facebook

Facebook ofrece diferentes tipos de complementos sociales que se pueden incorporar. Esto incluye publicaciones, comentarios, videos y el botón Me gusta más popular. Todos los complementos incluyen una configuración para data-lazy. Establecerlo en true garantiza que el complemento usará el mecanismo de carga diferida del navegador mediante la configuración del atributo loading="lazy" de iframe.

Carga diferida de feeds de Instagram

Instagram proporciona un bloque de marcado y una secuencia de comandos como parte del proceso de incorporación. La secuencia de comandos inserta un <iframe> en la página. La carga diferida de este <iframe> puede mejorar el rendimiento, ya que el tamaño del incorporado puede superar los 100 KB comprimidos. Muchos complementos de Instagram para sitios de WordPress, como WPZoom y Elfsight, ofrecen la opción de carga diferida.

Reemplaza las incorporaciones con fachadas

Si bien las incorporaciones interactivas agregan valor a la página, es posible que muchos usuarios no interactúen con ellas. Por ejemplo, no todos los usuarios que naveguen en la página de un restaurante harán clic en el mapa incorporado, lo expandirán, se desplazarán y navegarán en él. Del mismo modo, no todos los usuarios de la página de un proveedor de servicios de telecomunicaciones interactuarán con el chatbot. En estos casos, puedes evitar cargar o cargar de forma diferida la incorporación por completo mostrando una fachada en su lugar.

Un mapa incorporado — Incorporación de mapa con un componente de acercamiento y alejamiento

. Una fachada de mapa que es una imagen.

Una fachada es un elemento estático que se parece al tercero incorporado real, pero que no funciona y, por lo tanto, genera mucho menos impuestos sobre la carga de la página. A continuación, se muestran algunas estrategias para cargar esas incorporaciones de forma óptima sin dejar de proporcionar algún valor al usuario.

Usa imágenes estáticas como fachadas

Se pueden usar imágenes estáticas en lugar de incorporaciones de mapas en los casos en que tal vez no necesites hacer que el mapa sea interactivo. Puedes acercar el área de interés en el mapa, capturar una imagen y usarla en lugar del mapa interactivo incorporado. También puedes usar la función Captura de pantalla del nodo de Herramientas para desarrolladores para realizar una captura del elemento iframe incorporado.

Tomar captura de pantalla del nodo

Las Herramientas para desarrolladores capturan la imagen como una png, pero también puedes considerar convertirla al formato WebP para obtener un mejor rendimiento.

Usa imágenes dinámicas como fachadas

Esta técnica te permite generar imágenes correspondientes a una incorporación interactiva en el tiempo de ejecución. A continuación, se detallan algunas de las herramientas que te permiten generar versiones estáticas de incorporaciones en tus páginas.

API de Maps Static: El servicio de la API de Maps Static de Google genera un mapa en función de los parámetros de URL incluidos en una solicitud HTTP estándar y muestra el mapa como una imagen que puedes mostrar en tu página web. La URL debe incluir la clave de API de Google Maps y debe colocarse en la etiqueta <img> de la página como el atributo src.

La herramienta Creador de mapas estáticos ayuda a configurar los parámetros necesarios para la URL y te proporciona el código del elemento de imagen en tiempo real.

En el siguiente fragmento, se muestra el código de una imagen con el conjunto de orígenes en una URL de la API de Maps Static. Se incluyó en una etiqueta de vínculo que garantiza que se pueda acceder al mapa real haciendo clic en la imagen. (Nota: El atributo de clave de API no está incluido en la URL)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
Capturas de pantalla de Twitter: Al igual que las capturas de pantalla de mapa, este concepto te permite incorporar dinámicamente una captura de pantalla de Twitter en lugar del feed en vivo. Tweetpik es una de las herramientas que se pueden usar para tomar capturas de pantalla de tweets. La API de Tweetpik acepta la URL del tweet y muestra una imagen con su contenido. La API también acepta parámetros para personalizar el fondo, los colores, los bordes y las dimensiones de la imagen.

Cómo usar la carga con un clic para mejorar las fachadas

El concepto de carga con un clic combina la carga diferida y las fachadas. Inicialmente, la página se carga con la fachada. Cuando el usuario interactúa con el marcador de posición estático haciendo clic en él, se carga la incorporación de terceros. Esto también se conoce como patrón de importación en la interacción y se puede implementar mediante los siguientes pasos.

Cuando se carga la página: Se incluye una fachada o un elemento estático en la página.
Al desplazar el mouse sobre un anuncio: Facade se conecta previamente al proveedor de incorporación de terceros.
Al hacer clic: El producto de terceros reemplaza la fachada.

Las fachadas se pueden usar con incorporaciones de terceros para reproductores de video, widgets de chat, servicios de autenticación y widgets de redes sociales. Las incorporaciones de video de YouTube que son solo imágenes con un botón de reproducción son fachadas con las que nos encontramos frecuentemente. El video real se carga solo cuando haces clic en la imagen.

Puedes crear una fachada personalizada de carga con un clic con el patrón importar en la interacción o usar una de las siguientes fachadas de código abierto disponibles para diferentes tipos de incorporaciones.

Fachada de YouTube

Lite-youtube-embed es una fachada recomendada para el reproductor de YouTube, que parece el reproductor real, pero es 224 veces más rápido. Para ello, descarga la secuencia de comandos y la hoja de estilo, y, luego, usa la etiqueta <lite-youtube> en HTML o JavaScript. Los parámetros del reproductor personalizado compatibles con YouTube se pueden incluir mediante el atributo params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
A continuación, se muestra una comparación entre lite-youtube-embed y la incorporación real.

Una incorporación básica en YouTube
.

Una incorporación de YouTube
.

Otras fachadas similares disponibles para los reproductores de YouTube y Vimeo son lite-youtube, lite-vimeo-embed y lite-vimeo.
Fachada del widget de chat

El cargador de chat en vivo de reacción carga un botón que parece una incorporación de chat en lugar de la incorporación en sí. Se puede utilizar con varias plataformas de proveedores de chat, como Intercom, Help Scout, Messenger. El widget similar es mucho más ligero que el widget de chat y se carga más rápido. Se puede reemplazar por el widget de chat real cuando el usuario coloca el cursor sobre el botón o hace clic en él, o si la página ha estado inactiva durante mucho tiempo. En el caso de éxito de Postmark, se explica cómo implementaron react-live-chat-loader y las mejoras de rendimiento que lograron.

Eliminar o reemplazar incorporaciones con vínculos

Si descubres que algunas incorporaciones externas provocan un mal rendimiento de carga y no es posible usar alguna de las técnicas descritas anteriormente, lo más sencillo que puedes hacer es eliminar la incorporación por completo. Si aún quieres que tus usuarios puedan acceder al contenido de la incorporación, puedes proporcionar un vínculo al archivo con target="_blank" para que el usuario pueda hacer clic y verlo en otra pestaña.

Estabilidad del diseño

Si bien la carga dinámica de contenido incorporado puede mejorar el rendimiento de carga de una página, a veces puede causar movimientos inesperados del contenido de la página. Esto se conoce como cambio de diseño.

Dado que la estabilidad visual es importante para una experiencia del usuario fluida, el Cambio de diseño acumulado (CLS) mide la frecuencia con la que ocurren esos cambios y qué tan disruptivos son.

Se pueden evitar los cambios de diseño si se reserva espacio durante la carga de la página para los elementos que se cargarán de forma dinámica más tarde. El navegador puede determinar el espacio que se reservará si conoce el ancho y la altura de los elementos. A fin de garantizar esto, especifica los atributos width y height de los iframes o establece un tamaño fijo para los elementos estáticos en los que se cargará la incorporación de terceros. Por ejemplo, un iframe para una incorporación de YouTube debe tener el ancho y la altura especificados de la siguiente manera.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Las incorporaciones populares como YouTube, Google Maps y Facebook proporcionan el código de incorporación con los atributos de tamaño especificados. Sin embargo, es posible que haya proveedores que no incluyan esta opción. Por ejemplo, este fragmento de código no indica las dimensiones de la incorporación resultante.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Puedes usar las Herramientas para desarrolladores para inspeccionar el iframe insertado después de que se renderice esta página. Como se ve en el siguiente fragmento, la altura del iframe insertado es fija, mientras que el ancho se especifica en porcentaje.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

Esta información se puede usar para establecer el tamaño del elemento contenedor y garantizar que el contenedor no se expanda cuando se cargue el feed y que no se produzca un cambio de diseño. Se puede usar el siguiente fragmento para corregir el tamaño de la incorporación incluida anteriormente.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Terminador de cambio de diseño

Dado que las incorporaciones de terceros suelen omitir las dimensiones (ancho y alto) del contenido final que renderizan, pueden provocar cambios significativos de diseño en una página. Este problema puede ser difícil de solucionar sin inspeccionar manualmente los tamaños finales usando Herramientas para desarrolladores en una variedad de tamaños de viewport diferentes.

Ahora hay una herramienta automatizada, el Terminador de cambio de diseño, que puede ayudarte a reducir los cambios de diseño de incorporaciones populares, como Twitter, Facebook y otros proveedores.

Terminador de cambio de diseño:

Carga el lado del cliente incorporado en un iframe.
Cambia el tamaño del iframe a varios tamaños de viewport populares.
Para cada viewport popular, captura las dimensiones de la incorporación para luego generar consultas de medios y de contenedores.
Ajusta el tamaño de un wrapper de altura mínima alrededor del lenguaje de marcado de incorporación mediante consultas de medios (y consultas de contenedor) hasta que se inicializa la incorporación (después de lo cual se quitan los estilos de altura mínima).
Genera un fragmento optimizado de inserción que puede copiarse y pegarse donde, de otro modo, se incluiría la inserción en tu página.

Prueba el Terminador de cambio de diseño y siéntete libre de dejar comentarios en GitHub. La herramienta se encuentra en estado beta y tiene como objetivo mejorar con el tiempo con más mejoras.

Conclusión

Las incorporaciones de terceros pueden proporcionar mucho valor a los usuarios, pero, a medida que aumenta la cantidad y el tamaño de las incorporaciones en una página, el rendimiento puede verse afectado. Por ello, es necesario medir, juzgar y usar las estrategias de carga adecuadas para las incorporaciones según su posición, relevancia y la capacidad necesidades empresariales.