Addy Osmani

Los recursos de terceros (como incorporaciones y secuencias de comandos) se usan mucho en la Web en la actualidad. Proporcionan soluciones listas para usar para incorporar redes sociales, videos, estadísticas, chat en vivo, publicidad, pruebas A/B, personalización y mucho más. Las incorporaciones de terceros son una parte necesaria de los sitios web modernos que permiten a los propietarios de sitios enfocarse en sus competencias principales y, al mismo tiempo, transferir funciones estándar pero esenciales a proveedores externos.

Cuando los elementos propios y de terceros de una página web funcionan en armonía, es posible que una página ofrezca una excelente experiencia del usuario. Sin embargo, esto requiere un esfuerzo significativo de los equipos de ingeniería y de la empresa, y a menudo se pasa por alto, lo que genera páginas web con un rendimiento inferior y un impacto negativo en las métricas centradas en el usuario, como las Métricas web esenciales. Esto es perjudicial para ambas partes y genera oportunidades perdidas en las empresas. ¿Podemos hacer algo mejor?

Tenemos una visión futura de la Web en la que las secuencias de comandos y los recursos de terceros proporcionan el valor comercial previsto con una regresión mínima al rendimiento o la experiencia del usuario de los sitios web que los usan en el navegador. Esto permitiría que los usuarios experimenten cargas de páginas más rápidas.

Durante el último año, consideramos, analizamos y experimentamos con muchas posibilidades que podrían proteger la experiencia del usuario del impacto perjudicial de las secuencias de comandos de terceros sin reducir su valor comercial para los propietarios de sitios.

A través de esta publicación, queremos compartir información sobre algunos de nuestros experimentos. Esperamos que este sea el comienzo de un proceso que fomente la transparencia y la visibilidad entre los usuarios-agentes, las empresas y los proveedores externos, y que allane el camino hacia una Web más rápida.

Información más detallada sobre los terceros

Un tercero es un recurso que entrega un proveedor externo al sitio. No están directamente bajo el control de los propietarios del sitio, pero se presentan con su aprobación. Los recursos de terceros tienen las siguientes características:

• Se aloja en un origen compartido y público diferente al del sitio principal.
• No debe estar redactado por un propietario de sitio individual ni estar influenciado por él.
• Se usa ampliamente en una variedad de sitios.

Desde ayudar a generar ingresos (a través de anuncios) hasta proporcionar mejores oportunidades de marketing (integraciones de redes sociales), los terceros cumplen una amplia variedad de objetivos comerciales. Entre las categorías comunes de terceros, se incluyen las siguientes:

Fuente: Terceros por categoría.

Estas bibliotecas y secuencias de comandos de terceros permiten a los desarrolladores web aprovechar soluciones probadas para implementar funciones estándar en lugar de reinventar la rueda. Por lo tanto, los terceros reducen el tiempo de desarrollo y ayudan a las empresas a lanzar o actualizar sus productos más rápido. No es de extrañar, entonces, que más del 94% de todos los sitios web para computadoras y dispositivos móviles usen terceros.

¿Cómo afectan los terceros al rendimiento?

Idealmente, los desarrolladores externos son expertos en la materia de las funciones específicas que proporcionan. La mayoría de los proveedores externos populares pasaron por varias iteraciones, y se puede esperar que su código esté optimizado para sus propios objetivos comerciales, lo que puede incluir o no el rendimiento de las páginas que los usan. Sin embargo, sabemos que incluso los terceros más optimizados afectan el rendimiento. Estos son los motivos principales de este impacto:

1. Tamaño y costos de ejecución de secuencias de comandos: A menudo, los terceros intentan proporcionar funcionalidades significativas "solo" con la incorporación de un elemento <script> o <iframe> en tu página. Luego, estos elementos extraen secuencias de comandos y recursos de gran tamaño que tardan más en descargarse y ejecutarse. Demasiado código JavaScript mantiene el subproceso principal ocupado por más tiempo, bloquea la renderización y retrasa las interacciones del usuario. Se sabe que algunos de los principales proveedores externos bloquean el subproceso principal de 42 ms a 1.6 s en más del 50% de los sitios analizados. Un subproceso principal bloqueado genera un tiempo de bloqueo total (TBT) alto, que es una de las métricas que afecta la puntuación de rendimiento del sitio. Además, también retrasa la respuesta a las interacciones del usuario y degrada la métrica Interaction to Next Paint (INP) que se usa para medir la capacidad de respuesta de los sitios web. Por lo tanto, los costos de ejecución de secuencias de comandos tienen un impacto significativo en el rendimiento.

2. Cantidad: En promedio, los sitios web usan alrededor de 21 terceros diferentes en dispositivos móviles y la Web. A menudo, las herramientas de administración de etiquetas agregan etiquetas de terceros que no están controladas directamente por los equipos técnicos o de desarrollo. Otros equipos pueden agregar etiquetas que no son obligatorias sin un proceso de revisión y nunca se quitan. Estos pueden afectar de manera significativa la experiencia del usuario, el peso de la página o el uso de la CPU. Establecer un proceso de gobernanza puede abordar esas situaciones y permitir que los desarrolladores auditen el impacto de cada proveedor. Sería útil que los desarrolladores tuvieran datos listos para todos los terceros que proporcionan una función específica con su impacto en el rendimiento, sus beneficios y sus compensaciones para compararlos. Otro desafío que enfrentan los equipos es que, en muchos sitios, sus etiquetas de terceros solo se ejecutan en producción, pero no en sus entornos de desarrollo, lo que dificulta que los desarrolladores las prueben.

3. Red: Dado que los terceros se alojan en diferentes orígenes, los navegadores deben establecer una mayor cantidad de conexiones para descargar contenido de ellos. Las diferentes conexiones no pueden coordinar la descarga en función de la prioridad, lo que genera una contención de red. Esto puede retrasar aún más la carga de la página si no se consideran las optimizaciones adecuadas.

4. Secuenciación: Los terceros pueden bloquear el subproceso principal y competir con el ancho de banda por recursos más críticos. Dicho esto, en algunos casos, los terceros son los recursos fundamentales necesarios para renderizar la página. La secuenciación óptima de los recursos propios y de terceros se vuelve necesaria cuando los sitios web usan varios terceros. Los desarrolladores web deben conocer las diferentes opciones disponibles para optimizar la secuenciación.

Como consecuencia de lo anterior, los terceros pueden afectar a uno o a todos los componentes de las métricas web esenciales. La mayoría de los terceros afectan negativamente el procesamiento de imagen con contenido más grande (LCP) y el retraso de primera entrada (FID). Las integraciones de YouTube bloquean el subproceso principal durante 4.5 segundos en el 10% de los sitios web para dispositivos móviles y, al menos, 1.6 segundos en el 50% de los sitios web analizados. Imagina la frustración de un usuario si se encuentra con una página con 20 secuencias de comandos de este tipo en una conexión lenta. En la siguiente visualización de thirdpartyweb.today, se muestran los terceros con el mayor impacto en el rendimiento en la actualidad.

"En los ~4 millones de sitios principales, ~2,700 orígenes representan ~57% de todo el tiempo de ejecución de la secuencia de comandos, y las 50 entidades principales ya representan ~47%". - third-party-web

Las páginas que se renderizan rápidamente y se vuelven interactivas en un plazo razonable son esenciales para brindar una buena experiencia del usuario, según lo miden las métricas web esenciales. Una buena UX suele traducirse en buenos negocios para los sitios web, lo que puede significar buenos negocios para los terceros que se utilizan. Trabajar juntos para reducir el impacto de los terceros puede ser una victoria para todos en la cadena.

Reconocemos que Google vende varias secuencias de comandos de terceros de uso general, como Google Tag Manager, incorporaciones de YouTube y reCAPTCHA, entre otras. Reconocemos que algunas de nuestras secuencias de comandos podrían tener un impacto menor en el rendimiento de las Métricas web esenciales y nos comprometemos a explorar formas de mejorar este impacto siempre que sea posible.

¿Cómo puede ayudarte Chrome?

Los recursos de terceros que tienen un rendimiento bajo suelen ser un desafío para los desarrolladores, lo que requiere un cambio radical en las dinámicas subyacentes del ecosistema. Chrome quiere explorar este espacio para lograr los siguientes resultados:

1. Encuentra mejores formas de cargar recursos de terceros en la Web sin retroceder en la experiencia del usuario ni en los resultados comerciales.

   Sabemos que no podemos avanzar mucho en este esfuerzo si no colaboramos con socios, empresas, terceros y desarrolladores. Queremos crear un campo abierto para analizar las posibilidades y compartir ideas a través de explicaciones y especificaciones públicas. Los desarrolladores tendrán tiempo para enviar comentarios y probar el impacto de muchas de estas propuestas.

2. Permite que los usuarios de secuencias de comandos de terceros tengan una mejor atribución de sus costos en herramientas y en el campo, rutas claras y bien definidas para su uso y mejores incentivos durante el tiempo de autoría para garantizar que sean óptimas de forma predeterminada.

   Queremos mejorar todas las capas, como los usuarios-agentes, los frameworks y las secuencias de comandos de terceros para reducir el impacto en el rendimiento de los terceros. También queremos proporcionar estadísticas suficientes para ayudar a los propietarios de sitios a aplicar prácticas recomendadas en cada secuencia de comandos incorporada, incluidas alternativas más rápidas cuando corresponda.

Enfoque propuesto

Proponemos un enfoque de tres frentes para lograr estos resultados:

1. **Proporciona a los desarrolladores una atribución más detallada del impacto de cada tercero a través de RUM y en las herramientas para desarrolladores de Chrome.**

   La RUM hace referencia a los datos de métricas de usuarios reales (también conocidos como datos de campo) disponibles a través de las APIs de supervisión de rendimiento web. Las herramientas para desarrolladores de Chrome incluyen Lighthouse, las Herramientas para desarrolladores de Chrome y el Informe sobre la experiencia del usuario en Chrome. Proponemos mejorar las APIs y herramientas disponibles para que los desarrolladores de sitios comprendan el impacto de cada tercero que utilizaron en cada página. Las herramientas también les brindarán información sobre las medidas que pueden tomar para mitigar el impacto (por ejemplo, diferirlos o usar fachadas) y explorar otras posibles soluciones (otros terceros o bricolaje) con compensaciones. En el caso de las APIs de supervisión del rendimiento web, estamos explorando formas en las que podamos expandir su cobertura de recursos de varios orígenes sin comprometer la privacidad y seguridad de nuestros usuarios.

2. **Proporciona a las empresas una ruta bien iluminada para cargar recursos de terceros de manera eficiente.**

   Nos gustaría proponer nuevos estándares que fomenten que los navegadores realicen compensaciones de forma más inteligente entre la forma en que se cargan los recursos propios y de terceros en aras de brindar una mejor experiencia de carga para los usuarios. Más adelante, destacaremos algunas de estas propuestas, como la carga diferida de incorporaciones de terceros de forma predeterminada o la aplicación de diferentes prioridades de recursos a recursos de terceros que pueden no ser tan importantes para el contenido inicial que más les interesa a los usuarios. Estas son solo algunas de las ideas que estamos evaluando en este espacio y nos encantaría colaborar con expertos en rendimiento web y con la comunidad en general para definir este trabajo.

   Del mismo modo, nos gustaría abordar estos problemas en los frameworks de JavaScript y los sistemas de administración de contenido (CMS) cuando sea más apropiado. Proyectos como Aurora y el equipo de rendimiento de WordPress nos enseñaron la importancia de los valores predeterminados integrados que resuelven problemas de carga conocidos. Los valores predeterminados integrados en los frameworks y los CMS guían a las empresas por un camino bien iluminado. También pueden ser útiles para el usuario-agente (por ejemplo, Chrome) como sugerencias que le permiten aplicar heurísticas para optimizar la carga de la página y el CWV. Estas sugerencias pueden ayudar al usuario-agente a decidir cuándo y cómo se deben cargar terceros específicos en el ciclo de vida de la página. (por ejemplo, el componente de secuencia de comandos de Next.js tiene un valor predeterminado integrado para cargar secuencias de comandos de terceros después de que la página se vuelve interactiva).

3. **Proporciona incentivos a los terceros para que reduzcan su impacto en el rendimiento mediante mejores iniciativas de transparencia.**

   Actualmente, los desarrolladores externos no tienen la visibilidad necesaria para comprender el impacto de sus secuencias de comandos en los sitios en general. Planeamos abordar este problema y proporcionarles a estos proveedores herramientas para analizar su impacto y compararlo con otros productos del mercado que ofrecen el mismo valor. También queremos ayudarlos a usar los datos para diagnosticar qué causa el impacto, de modo que puedan mitigarlo en la fuente. Para que esto funcione, tendremos que llamar a todos los terceros, incluidos los de Google.

Desafíos

Un esfuerzo de esta magnitud no está exento de desafíos. Estos son algunos de los desafíos clave que debemos tener en cuenta:

• Los terceros son un problema transversal que abarca anuncios, estadísticas, administración de etiquetas, utilidades y muchos otros. Cada área requiere la consideración de un conjunto único de requisitos y compensaciones. Por ejemplo:
  • La decisión de optimizar la carga de anuncios depende de un equilibrio entre los ingresos y la experiencia del usuario. Si se muestran demasiado pronto, bloquean contenido valioso; si se muestran demasiado tarde, el usuario no los verá.
  • Las secuencias de comandos de Analytics aumentan el peso de la página, pero proporcionan datos valiosos sobre las acciones de los usuarios a la empresa.

Esperamos asociarnos con varias categorías de terceros, comprender los matices involucrados, resolver las compensaciones y desarrollar incentivos que funcionen para todos. Nos damos cuenta de que tenemos que trabajar por separado con las entidades de cada área para que nuestra estrategia sea eficaz. Esto incluye a nuestros socios internos, como Google Tag Manager, Google Ads y YouTube.

1. Queremos proporcionar una atribución más detallada a los desarrolladores de sitios y a los desarrolladores externos. Esto requiere un esfuerzo consciente en el que identifiquemos qué datos son más relevantes para medir el impacto, atribuyéndolos con precisión y detalle, y proporcionemos la ruta correcta para el futuro. En última instancia, el cálculo del rendimiento de un tercero en relación con su competencia debe ser transparente para todos.

2. Proponemos mejorar Chrome para que pueda aplicar optimizaciones que ayuden a encontrar el equilibrio adecuado para priorizar la carga de recursos propios en lugar de recursos de terceros. Un cambio valioso se vuelve disponible como estándar en todos los navegadores, pero lleva tiempo. Por ejemplo, el atributo loading para los elementos <img> y <iframe> estuvo disponible en Chrome y Edge desde 2019, pero solo en Safari en 2022. Hasta que se estandarice una función, los usuarios de recursos de terceros deberán asegurarse de que también se hayan optimizado para otros navegadores. Te ayudaremos destacando esta información en nuestra guía cuando corresponda.

3. Para ejecutar este proyecto, tendremos que interactuar con socios y desarrolladores para que no solo nos ayuden a comprender los requisitos específicos, sino también a probar soluciones experimentales a gran escala, proporcionar comentarios, iterar e improvisar cuando sea necesario. Los cambios deberán planificarse, lo que permitirá un plazo razonable para las pruebas y la evaluación.

Propuestas iniciales de estándares

Realizamos algunos experimentos iniciales para desarrollar funciones que se puedan habilitar para optimizar el proceso de carga de terceros. Estamos conformes con los resultados observados y, en este momento, podemos hablar sobre dos de estas funciones.

LazyEmbeds

Anteriormente, Chrome cargaba de forma diferida elementos <img> y <iframe> fuera de la pantalla para los usuarios del Modo Lite. Esta función se podría extender a todos los usuarios para aplazar la carga de elementos <iframe> que se determinen como incorporaciones de terceros hasta que el usuario se desplace cerca de ellos. Esto podría acelerar la carga de otras partes de la página, mejorar las Métricas web esenciales, reducir el uso de memoria y ahorrar datos.

Esta es una demostración en la que se usan LazyEmbeds para cargar de forma diferida videos de YouTube en una página. Por lo general, una sola incorporación de video de YouTube agrega entre 500 y 600 KB de JavaScript a la página. Intentamos optimizar una entrada de blog con 14 incorporaciones de video de este tipo con LazyEmbeds. Los resultados fueron prometedores en cuanto al tiempo de carga de la página y el ahorro de datos.

Para obtener más información sobre este trabajo, consulta nuestro video explicativo y el subproceso de intención de experimento y la extensión de experimento de blink-dev.

Limitación de terceros segmentada

A menudo, varios equipos agregan secuencias de comandos de terceros sin procesos de supervisión integrales. El equipo de ingeniería de The Telegraph afirmó que “todos quieren ‘esa etiqueta’ en una página que le genere dinero a la organización”. Esto puede aumentar de forma continua la carga de administrar el impacto en el rendimiento.

La limitación de secuencias de comandos de terceros segmentadas propone limitar tipos muy específicos de terceros para mitigar su impacto. Esto permitiría que los navegadores carguen contenido clave y terceros críticos con anticipación, mientras que los que se pueden cargar más tarde se regulan.

Mejoras en las APIs de RUM

También estamos considerando mejorar las APIs de RUM para incluir información que sería relevante en la evaluación del rendimiento de terceros. Entre las mejoras, se incluyen las siguientes:

1. Informes de <iframe>: Estamos trabajando en soluciones que puedan aprovechar la API de Performance Timeline para los informes entre marcos. Esto permitiría a los autores de la página de nivel superior inspeccionar los datos de rendimiento de un iframe de terceros que coopera y está incorporado en la página.

2. Atribución de tareas largas: La API de Long Tasks en RUM ayudará a los propietarios de sitios a identificar tareas largas que ocupan el subproceso principal durante mucho tiempo y retrasan la interacción.

Más novedades

Aún estamos experimentando con muchas de esas ideas y esperamos publicar explicaciones de GitHub y borradores de especificaciones para realizar cambios a medida que avanzamos. Los terceros y los propietarios de sitios que deseen asociarse con nosotros o dejar comentarios pueden contribuir a las conversaciones a través de estos. Los terceros también pueden comenzar a enfocarse en optimizar las métricas de INP y Métricas web esenciales para asegurarse de que no se les atribuyan datos de INP o Métricas web esenciales deficientes. Por ahora, quienes busquen actualizaciones de forma activa pueden consultar las publicaciones del grupo blink-dev.

Esperamos explorar este espacio de problemas en más detalle y compartir nuestros aprendizajes con la comunidad.

Agradecemos especialmente a Leena Sohoni-Kasture, Jeremy Wagner, Gilberto Cocchi, Kenji Baheux, Kouhei Ueno, Kentaro Hara y Alex N. Jose, Melissa Mitchell, Yoav Weiss, Shunya Shishido y Minoru Chikamune por sus comentarios y contribuciones.