Addy Osmani

Actualmente, los recursos de terceros (como incorporaciones y secuencias de comandos) se usan en gran medida en toda la Web. 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 centrarse en sus competencias básicas, al tiempo que delegan funciones estándares pero fundamentales a proveedores externos.

Cuando tanto los propios terceros como los terceros en una página web trabajan en armonía, es posible que una página brinde una excelente experiencia del usuario. Sin embargo, esto requiere un esfuerzo significativo por parte de los equipos de ingeniería y comerciales y, a menudo, se pasa por alto, lo que da como resultado páginas web que no tienen un buen rendimiento 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 desaprovechadas en las empresas. ¿Podríamos hacerlo mejor aquí?

Tenemos una visión de futuro de la Web en la que las secuencias de comandos y los recursos de terceros proporcionan el valor empresarial deseado con una regresión mínima al rendimiento o a la experiencia del usuario de los sitios web que los usan en el navegador. Idealmente, los usuarios podrían experimentar cargas de páginas más rápidas.

Durante el último año, hemos considerado, discutido y experimentado 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 los sitios.

En 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 preparen el camino para una Web más rápida.

Un análisis más detallado de 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 aparecen con su aprobación. Los recursos de terceros tienen las siguientes características:

• Se aloja en un origen compartido y público diferente del origen del sitio principal.
• No tiene el autor ni el propietario individual del sitio.
• Muy utilizado por una variedad de sitios.

Los terceros cumplen una amplia variedad de objetivos comerciales, desde ayudar a generar ingresos (mediante anuncios) hasta proporcionar mejores oportunidades de marketing (incorporaciones en redes sociales). Las categorías comunes de terceros incluyen las siguientes:

Fuente: Terceros por categoría.

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

¿Qué impacto tienen los terceros en el rendimiento?

Idealmente, los desarrolladores de terceros son expertos en la materia para las funciones específicas que ofrecen. Los terceros más populares han pasado por varias iteraciones, y es de esperarse que su código se optimice según sus propios objetivos comerciales, que pueden o no incluir el rendimiento de las páginas que los utilizan. Sin embargo, sabemos que incluso los terceros más bien optimizados afectan el rendimiento. A continuación, se indican los principales motivos de este impacto:

1. Tamaño y costos de ejecución de la secuencia de comandos: A menudo, el objetivo de los terceros es proporcionar una funcionalidad significativa con solo colocar un elemento <script> o <iframe> en tu página. Luego, estos elementos extraen secuencias de comandos y recursos que son de gran tamaño y tardan más en descargarse y ejecutarse. El exceso de 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 terceros 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 de los usuarios y degrada la métrica Interacción a la siguiente pintura (INP), que se utiliza 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. Número: En promedio, los sitios web utilizan alrededor de 21 terceros diferentes en dispositivos móviles y la Web. A menudo, las etiquetas de terceros se agregan mediante herramientas de administración de etiquetas que los equipos técnicos o de desarrollo no controlan directamente. Otros equipos pueden agregar las etiquetas que no son necesarias sin un proceso de revisión y nunca se quitarán. que pueden tener un impacto significativo en la experiencia del usuario, el peso de la página o la utilización de la CPU. Establecer un proceso de administración 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 proporcionaran una función específica con su impacto en el rendimiento, sus beneficios y compensaciones para compararlos. Otro desafío que enfrentan los equipos de desarrollo es que, en muchos sitios, las etiquetas de terceros solo se ejecutan en producción, pero no en los entornos de desarrollo, lo que dificulta que los desarrolladores las prueben.

3. Red: Dado que los terceros se alojan en orígenes diferentes, 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 lidiar con el ancho de banda para obtener recursos más críticos. Dicho esto, en algunos casos, terceros son los recursos críticos necesarios para procesar la página. Cuando los sitios web utilizan varios terceros, es necesaria una secuencia óptima de los recursos propios y de terceros. Los desarrolladores web deben conocer las diferentes opciones disponibles para optimizar la secuencia.

Como consecuencia de lo anterior, los terceros pueden afectar a cualquiera o a todos los componentes de las Métricas web esenciales. La mayoría de los terceros afectan de forma negativa al Largest Contentful Paint (LCP) y el Retraso de primera entrada (FID). Las incorporaciones de YouTube bloquean el subproceso principal durante 4.5 segundos para el 10% de los sitios web en dispositivos móviles y al menos 1.6 segundos para el 50% de los sitios web estudiados. Imagina la frustración de un usuario si se encuentra con una página con 20 de esas secuencias de comandos con una conexión lenta. La siguiente visualización de thirdpartyweb.today muestra los terceros con el mayor impacto en el rendimiento actualmente.

"En los 4 millones de sitios principales, unos 2,700 orígenes representan aproximadamente el 57% del tiempo de ejecución de las secuencias de comandos, y las 50 entidades principales ya representan aproximadamente el 47%". - terceros-web

Las páginas que se renderizan rápidamente y se vuelven interactivas en un plazo razonable son esenciales para ofrecer una buena experiencia del usuario, según la medición de las Métricas web esenciales. Una buena UX a menudo se traduce en un buen negocio para sitios web, lo que puede significar un buen negocio para terceros. Trabajar en conjunto para reducir el impacto de terceros puede ser beneficioso para todos los miembros de la cadena.

Reconocemos que Google ofrece una serie de secuencias de comandos de terceros de uso general, como Google Tag Manager, incorporaciones de YouTube y ReCaptcha, entre otras. Sabemos que varias de nuestras secuencias de comandos podrían tener un menor impacto 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 ayudar Chrome?

Los recursos de terceros que son deficientes en términos de rendimiento suelen ser un desafío para los desarrolladores, ya que requieren de un paso intermedio en la dinámica del ecosistema subyacente. Chrome desea explorar este espacio para lograr los siguientes resultados:

1. Encuentra mejores formas de cargar recursos de terceros en la Web sin perjudicar la experiencia del usuario ni 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 debatir las posibilidades y, además, intercambiar ideas a través de explicaciones y especificaciones públicas. Los desarrolladores tendrán tiempo para proporcionar comentarios y probar el impacto de muchas de estas propuestas.

2. Permite que los usuarios de secuencias de comandos de terceros atribuyan mejor sus costos de herramientas y de campo, rutas claras y bien pavimentadas para su uso, y también mejores incentivos durante el tiempo de creación para garantizar que sean óptimos de forma predeterminada.

   Queremos mejorar todas las capas, como usuarios-agentes, frameworks y secuencias de comandos de terceros, para reducir el impacto en el rendimiento de los terceros. También tenemos la intención de ofrecer estadísticas suficientes para ayudar a los propietarios de los sitios a implementar las prácticas recomendadas en torno a cada secuencia de comandos incorporada, lo que incluye alternativas más rápidas cuando corresponda.

Enfoque propuesto

Proponemos un enfoque de tres puntos para lograr estos resultados...

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

   RUM se refiere a los datos de métricas del usuario reales (también conocidos como datos de campo) disponibles a través de las APIs de Web Performance Monitoring. Las herramientas para desarrolladores de Chrome incluyen Lighthouse, las Herramientas para desarrolladores de Chrome y el Informe sobre la experiencia del usuario de Chrome. Proponemos mejorar las APIs y herramientas disponibles para que los desarrolladores de sitios comprendan el impacto de cada tercero que usaron en todas las páginas. Las herramientas también les brindarán información sobre las acciones que pueden realizar para mitigar el impacto (por ejemplo, postergarlas o usar facades) y explorar otras posibles soluciones (de terceros o DIY) con compensaciones. En el caso de las APIs de supervisión del rendimiento web, estamos explorando formas de expandir su cobertura de recursos de origen cruzado sin comprometer la privacidad ni la seguridad de nuestros usuarios.

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

   Nos gustaría proponer nuevos estándares que alienten a los navegadores a hacer concesiones más inteligentes entre la forma en que se cargan los recursos propios y de terceros en nombre de 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 fundamentales 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. Nos encantaría colaborar con expertos en rendimiento web y la comunidad en general para dar forma a este trabajo.

   De manera similar, nos gustaría abordar estos problemas en los frameworks de JavaScript y en los sistemas de administración de contenido (CMS) cuando sea más adecuado. Proyectos como Aurora y WordPress Performance Team nos enseñaron la importancia de los valores predeterminados integrados que resuelven problemas de carga conocidos. Los valores predeterminados integrados en los frameworks y el CMS guían a las empresas por rutas bien iluminadas. También pueden ser útiles para el usuario-agente (por ejemplo, Chrome) como sugerencias que le permiten aplicar heurística para optimizar la carga de la página y las Métricas web esenciales. Estas sugerencias pueden ayudar al usuario-agente a decidir cuándo y cómo deben cargarse terceros específicos en el ciclo de vida de la página. Por ejemplo, el componente de secuencia de comandos de Next.js tiene una configuración predeterminada integrada para cargar secuencias de comandos de terceros después de que la página se vuelve interactiva.

3. **Proporcionar incentivos a terceros para que reduzcan su impacto en el rendimiento a través de mejores iniciativas de transparencia**

   Los desarrolladores externos actualmente carecen de la visibilidad necesaria para comprender el impacto de sus secuencias de comandos en los sitios en general. Planeamos abordar este problema y equipar a estos proveedores con herramientas para analizar su impacto y compararlo con otros productos en el mercado que ofrezcan el mismo valor. También queremos ayudarlos a usar los datos para diagnosticar la causa del impacto y así mitigarlo en sentido ascendente. Para tener éxito, tendremos que mencionar a todos los terceros, incluidos los de Google.

Desafíos

Un esfuerzo de esta magnitud no está exento de desafíos. Algunos de los desafíos clave que tenemos que considerar son.

• Los terceros son un problema transversal que involucra anuncios, estadísticas, administración de etiquetas, utilidades y muchos más. 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 del equilibrio entre los ingresos y la experiencia del usuario. Demasiado pronto, bloquean el contenido valioso. Demasiado tarde, el usuario perdería verlo.
  • Las secuencias de comandos de Analytics aumentan el peso de la página, pero proporcionan datos valiosos sobre las acciones de los usuarios para la empresa.

Esperamos asociarnos con varias categorías de terceros, comprender los matices que implica, resolver las compensaciones y desarrollar incentivos que funcionen para todos. Sabemos 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 ofrecer una atribución más profunda tanto a los desarrolladores de sitios como a los de terceros. Esto requiere un esfuerzo consciente: identificamos los datos que son más relevantes para medir el impacto, los atribuimos de forma precisa y detallada y le brindamos la ruta correcta a seguir. En última instancia, el cálculo del rendimiento de un tercero determinado frente a su competencia debe ser transparente para todos.

2. Proponemos mejorar Chrome para que pueda aplicar optimizaciones que ayuden a lograr el equilibrio adecuado para priorizar la carga de recursos propios en comparación con recursos de terceros. Un cambio valioso está disponible como estándar en todos los navegadores, pero lleva tiempo. Por ejemplo, el atributo loading para los elementos <img> y <iframe> está disponible en Chrome/Edge desde 2019, pero solo en Safari en 2022. Hasta que una función se estandarice, los usuarios de recursos de terceros deberán asegurarse de que también están optimizadas para otros navegadores. Para ayudarte, lo destacaremos en nuestra guía cuando corresponda.

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

Propuestas estándares iniciales

Realizamos algunos experimentos iniciales para desarrollar funciones que pueden habilitarse para optimizar el proceso de carga de terceros. Estamos satisfechos con los resultados observados y, por el momento, podemos analizar dos de estas características.

LazyEmbeds

Anteriormente, Chrome cargaba de forma diferida los elementos <img> y <iframe> fuera de la pantalla para nuestros usuarios del modo lite. Esta función se puede extender a todos los usuarios para diferir 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 con LazyEmbeds para cargar de forma diferida videos de YouTube en una página. Por lo general, una incorporación de video de YouTube agrega entre 500 y 600 KB de JavaScript a la página. Con LazyEmbeds, se intentó optimizar una entrada de blog con 14 incorporaciones de este tipo de video. 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 nuestra conversación de intent a experimento y la extensión de experimento de explicación y blink-dev.

Regulación de terceros orientada

A menudo, varios equipos agregan secuencias de comandos de terceros sin procesos de supervisión integral. El equipo de ingeniería de The Telegraph articuló que "todo el mundo quiere 'esa etiqueta' en una página que gane dinero a la organización". Esto puede aumentar continuamente la carga de administrar el impacto en el rendimiento.

La regulación de la secuencia de comandos de terceros orientada propone limitar tipos muy específicos de terceros para mitigar su impacto. Esto permitiría a los navegadores cargar el contenido clave y los terceros críticos de manera anticipada, mientras que los que son seguros para cargar más tarde están limitados.

Mejora las APIs de RUM

También estamos considerando mejorar las APIs de RUM para incluir información que sea 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 la generación de informes de varios fotogramas. 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 que está incorporado en la página.

2. Atribución de tarea larga: La API de Long Tasks en RUM ayuda a los propietarios de sitios a identificar tareas largas que unen el subproceso principal durante un tiempo prolongado y retrasan la interacción.

Más actualizaciones

Aún estamos experimentando con muchas de esas ideas y esperamos publicar explicaciones y borradores de especificaciones de GitHub para los cambios a medida que avancemos. Los terceros y propietarios de sitios que deseen asociarse con nosotros o dejar comentarios pueden contribuir en los debates a través de estas. Los terceros también pueden comenzar a centrarse en la optimización de las Métricas web esenciales y las métricas INP para garantizar que no se atribuyan datos deficientes de Métricas web esenciales/INP. Por ahora, quienes buscan activamente actualizaciones pueden consultar las publicaciones en el grupo blink-dev.

Esperamos poder explorar más este espacio problemático e interactuar con la comunidad para conocer nuestros aprendizajes.

Agradecimientos especiales a Leena Sohoni-Kasture, Jeremy Wagner, til Cocchi, Kenji Baheux, Kouhei Ueno, Kentaro Hara y Alex N. José, Melissa Mitchell, Yoav Weiss, Shunya Shishido y Minoru Chikamune por sus comentarios y contribuciones.