Cómo Partytown elimina la sobrecarga del sitio web debido a scripts de terceros

1. El impuesto de JavaScript
2. Presentamos Partytown
   1. La arquitectura detrás de Partytown
   2. Cómo funciona Partytown
3. Configurando Partytown
4. Ciudad de fiesta en acción
5. Ven a divertirte con el constructor
   1. Recursos adicionales

Presentamos Partytown, una solución liviana de código abierto que reduce los retrasos en la ejecución debido a JavaScript de terceros al descargar scripts de terceros a los trabajadores web, que se ejecutan en subprocesos en segundo plano.

Una excelente experiencia de usuario comienza con una página que se carga instantáneamente. El usuario medio no pasa mucho tiempo esperando a que se cargue una página web o a interactuar con ella: según Google, si el tiempo de carga de una página aumenta de 1 segundo a 3 segundos, la probabilidad de que el usuario rebote aumenta en un 32%. % . Sin embargo, no siempre es fácil mantener un alto rendimiento en los sitios web. Y los sitios web lentos son, en cierto modo, discriminación: la mayoría de la población mundial no tiene acceso a Internet de alta velocidad ni a CPU rápidas. Incluso si su sitio web está diseñado teniendo en cuenta la usabilidad, estos factores impiden que los usuarios se beneficien plenamente de las funciones del sitio web.

Es por eso que el rendimiento es crucial al crear sitios web. El rendimiento debe integrarse comenzando en el nivel del código, y las métricas centradas en el usuario, como el tiempo de interacción (TTI), el tiempo total de bloqueo (TBT) y el retraso de la primera entrada (FID), lo ayudan a medir qué tan rápido es un sitio web. Pero las páginas web modernas son pesadas y de tamaño cada vez mayor (lo que se conoce cariñosamente como “inflación de sitios web”): una página web promedio tiene más de 2 megabytes de tamaño y recibe más de 200 solicitudes . Los sitios web grandes y difíciles de manejar, con varios scripts de terceros integrados, suelen ser la causa de una experiencia de usuario frustrante. Cuando necesita estos scripts de terceros en su sitio web para administrar su negocio, como lo hacen la mayoría de los sitios web, tiene un gran desafío en sus manos:

¿Cómo puede mejorar sus métricas clave de rendimiento y mantener contentos a sus usuarios sin comprometer capacidades importantes?

El impuesto de JavaScript

Es un hecho conocido que JavaScript es uno de los principales culpables de la hinchazón de los sitios web. Proporcionar experiencias ricas e interactivas en sitios web necesita activos adicionales que consuman los recursos de sus usuarios, desde CPU y GPU hasta memoria y red. Dejando a un lado las imágenes y vídeos de gran tamaño, los scripts de terceros como rastreadores de píxeles, pruebas A/B, anuncios, widgets, CDN, etc., suelen ser las piezas más importantes del rompecabezas del rendimiento. Los scripts de terceros, que son códigos integrados en su sitio y que no están directamente bajo el control de sus desarrolladores, compiten con el código propio de un sitio web por el hilo principal del navegador, lo que retrasa la representación del contenido y hace que los sitios web se sientan lentos.

También es importante recordar que los dispositivos móviles de su usuario final son mucho menos sofisticados que aquellos en los que se creó su sitio web: todo el JavaScript de su sitio web es la razón por la que una página web promedio tarda más de 14 segundos en cargarse y volverse interactiva en el móvil. Esto produce un efecto negativo en las puntuaciones de Lighthouse , Core Web Vitals y las clasificaciones de búsqueda y reduce la participación de los usuarios.

Según Google Web Fundamentals , los scripts de terceros pueden causar varios problemas, entre ellos:

• Demasiadas solicitudes de red a múltiples servidores;
• Enviar demasiado JavaScript ;
• Análisis y ejecución de scripts que requieren muchos recursos;
• Almacenamiento en caché HTTP insuficiente ;
• Falta de suficiente compresión de recursos del servidor ;
• Bloquear la visualización del contenido hasta que completen el procesamiento;
• Uso de API heredadas (por ejemplo, document.write() ) que se sabe que son perjudiciales para la experiencia del usuario;
• Elementos DOM excesivos o selectores CSS costosos.

Cuando tenga muchos scripts de terceros en su página web, bloquearán su propio JavaScript. Esto se vuelve especialmente crítico para los sitios de comercio electrónico y los mercados en línea que necesitan estos scripts de terceros para administrar sus negocios y donde el tiempo realmente es dinero.

Descargar scripts de terceros a trabajadores web que se ejecutan en subprocesos en segundo plano es una solución potencial que permite a los usuarios conservar sus scripts mientras mejoran el rendimiento. Los trabajadores web se ejecutan de forma sincrónica pero solo pueden comunicarse con el hilo principal de forma asincrónica. Los trabajadores web tampoco tienen acceso directo al DOM, solo el hilo principal lo tiene. Por lo tanto, los desafíos clave son proporcionar código JavaScript que se ejecute dentro del trabajador web con algún tipo de acceso al DOM y hacer que ese acceso sea sincrónico (aunque la comunicación con el hilo principal debe permanecer asíncrona).

Presentamos Partytown

Partytown es una solución ligera de código abierto que reduce los retrasos en la ejecución debido a JavaScript de terceros al descargar scripts de terceros a los trabajadores web, que se ejecutan en subprocesos en segundo plano. Esto libera el hilo principal del navegador para ejecutar su propio código. Lo mantiene Builder.io y actualmente se encuentra en versión beta.

Builder.io también alberga Qwik , un marco de aplicación web reanudable y de código abierto que prioriza HTML y que hace que los sitios interactivos se carguen rápidamente solo con HTML y CSS, y utiliza JavaScript solo cuando es necesario.

Si bien Partytown no aborda todos los obstáculos causados ​​por scripts de terceros (enumerados en la sección anterior), sí aborda los mayores desafíos para crear sitios web de alto rendimiento al:

• Liberar recursos del hilo principal para usarlos solo para la ejecución de la aplicación web principal;
• Hacer sandboxing de scripts de terceros y permitir o denegar su acceso a las API del hilo principal;
• Aislar tareas de larga duración dentro del hilo del trabajador web;
• Reducir la alteración del diseño proveniente de scripts de terceros al agrupar los configuradores/captadores de DOM en actualizaciones grupales;
• Limitar el acceso de scripts de terceros al hilo principal;
• Permitir que los scripts de terceros se ejecuten exactamente como están codificados y sin modificaciones;
• Leer y escribir operaciones DOM del subproceso principal de forma sincrónica desde un trabajador web, lo que permite que los scripts que se ejecutan desde el trabajador web se ejecuten como se esperaba.

La arquitectura detrás de Partytown

A pesar de las innovaciones que aceleran la forma en que entregamos JavaScript al navegador (minimización, compresión, distribución, división de código, asíncrono, aplazamiento), la ejecución del código una vez que está en el navegador está limitada por el hecho de que JavaScript es un lenguaje de un solo subproceso. sólo se puede ejecutar un script a la vez.Te recomendamos Mejores Opiniones y reviews

Partytown es una biblioteca de JavaScript con carga diferida que ayuda a redirigir scripts que consumen muchos recursos a un trabajador web. Para garantizar que las aplicaciones de todos los tamaños puedan continuar usando scripts de terceros sin problemas de rendimiento, Partytown descarga estos scripts de terceros en un trabajador web y le permite permitir o denegar su acceso a las API del hilo principal. En otras palabras, los scripts de terceros que no necesitan estar en la ruta de renderizado crítica se ejecutan en un subproceso en segundo plano. Esto libera el hilo principal del navegador para ejecutar JavaScript propio, que a menudo es responsable de manejar la entrada del usuario o pintar la pantalla.

Considere Google Analytics, que recopila y envía datos de seguimiento mediante navigator.sendBeacon(). Por un lado, es una tarea en segundo plano que puede ejecutarse de forma asincrónica. Por otro lado, Google Analytics todavía requiere acceso sincrónico a la API DOM al leer valores de documenty window. Partytown permite ejecutar scripts como Google Analytics en segundo plano mientras accede al DOM como si estuviera en el hilo principal.

Cómo funciona Partytown

El principal desafío con un trabajador web es que no tiene acceso directo a las API DOM accesibles desde el hilo principal, como window, document,o localStorage. Si bien se puede crear un sistema de mensajería entre los dos subprocesos para representar las operaciones DOM, la postMessageAPI utilizada para la comunicación entre el trabajador web y el subproceso principal es asíncrona. Esto significa que los scripts de terceros que dependen de operaciones DOM sincrónicas simplemente fallarán.

Partytown proporciona acceso sincrónico a la API DOM desde los trabajadores web utilizando proxies JavaScript, trabajadores de servicios y solicitudes XHR sincrónicas. El acceso a la API DOM dentro del trabajador web se realiza mediante proxy, lo que crea solicitudes XHR sincrónicas con los métodos y valores a los que se accede (por ejemplo, document.titleo window.screen.width).

Estas solicitudes son interceptadas por un trabajador de servicio, que utiliza postMessagepara transmitir la solicitud de API al hilo principal de forma asincrónica. Sin embargo, al asignar cada solicitud de API DOM a un XHR sincrónico, el trabajador web pausa la ejecución hasta que el trabajador del servicio responde. El resultado final es que, desde la perspectiva del script de terceros en el trabajador web, todo es sincrónico.

El beneficio de este enfoque es que no es necesario reescribir o refactorizar los scripts de terceros para que funcionen dentro de los trabajadores web. Se ejecutan exactamente como están codificados; simplemente funcionan desde el hilo de fondo.

Además, al representar todo el acceso a las API DOM, Partytown puede registrar cada lectura y escritura e incluso restringir el acceso a ciertas API DOM.

Configurando Partytown

Partytown no mueve automáticamente todos los scripts de terceros a un trabajador web. Para comenzar, los desarrolladores deben “optar por participar”, es decir, deben elegir qué scripts se cargan y ejecutan a través de Partytown. Úselo npmen la línea de comando para instalar Partytown.

npm install @builder.io/partytown

A continuación, agregue el type="text/partytown"atributo a cada script de terceros que desee ejecutar desde un trabajador web.

- script.../script+ script type="text/partytown".../script

Partytown solo está habilitado para scripts específicos cuando tienen el type="text/partytown"atributo. Esto hace dos cosas:

1. Evita que el hilo principal ejecute el script;
2. Proporciona un selector para que Partytown lo consulte, como document.querySelectorAll('script[type="text/partytown"]').

El siguiente paso es insertar el fragmento de Partytown en el archivo head. Si está utilizando React, le recomendamos utilizar el Partytown/ Reactcomponente.

El siguiente es un ejemplo de cómo incluir el Partytown/componente en una página Next.js.

import Head from "next/head";import { Partytown } from "@builder.io/partytown/react";const Home = () = { return ( Head titleMy App/title script type="text/partytown" src="https://example.com/analytics.js"/script Partytown / /Head main.../main / );};export default Home;

En casos especiales, es posible que se requiera una pequeña cantidad de configuración. Partytown funciona con cualquier página HTML y no requiere un marco específico, pero hay algunas integraciones (complementos/envoltorios) disponibles, incluidas Next.js, Nuxt.js, React y Shopify Hydrogen. Partytown también proporciona documentación y tutoriales para algunos servicios de terceros como Facebook Pixel, Adobe Launch y Google Tag Manager.

Al configurar Partytown, es importante probarlo primero en algunas páginas y medir las mejoras utilizando Google PageSpeed ​​Insights. Una vez que confirme que todos sus scripts están funcionando, puede activarlos para todas las páginas del sitio.

Ciudad de fiesta en acción

El sitio web Builder.io logró reducir el 99% de su JavaScript utilizando una combinación de Partytown y Qwik. Esto mejoró drásticamente el rendimiento, con una puntuación ^{de 100} ⁄ ₁₀₀ en Google Lighthouse en PageSpeed ​​Insights incluso en dispositivos móviles. También hubo una gran disminución en el tiempo total de bloqueo (TBT) y el tiempo de interacción (TTI), métricas que miden cuánto tiempo los scripts de terceros retrasan la ejecución de JavaScript propio.

Atoms , la tienda de calzado en línea, actualmente utiliza Partytown en sus páginas de marketing (específicamente en Why Atoms , Acerca de , Prensa y Tarjetas de regalo ). Actualmente están trabajando para habilitar Partytown en todo el sitio.

Ven a divertirte con el constructor

Partytown todavía está en versión beta, por lo que no todos los scripts funcionan . Builder.io invita activamente a las personas a probar Partytown y compartir sus opiniones con el equipo. Los usuarios pueden informar problemas, solicitar integraciones y tutoriales, o contribuir con código en GitHub de Partytown . Partytown también tiene una animada comunidad de Discord , donde puedes ayudarnos a probar Partytown y unirte a la conversación.

Builder.io tiene como objetivo hacer que el alto rendimiento sea el valor predeterminado para los sitios web. Un sitio web rápido con el mejor rendimiento debería ser posible sin ninguna configuración. Builder ha dado el primer paso hacia este ideal con sus soluciones de código abierto, Partytown y Qwik, que son fundamentales para hacer que los sitios web con JavaScript casi nulo sean accesibles para cualquiera.

Recursos adicionales

• Partytown por Builder.io
• Repositorio GitHub de Partytown
• Comunidad de Discord de Partytown
• Repositorio GitHub de Qwik
• “ Presentamos Partytown : Ejecute scripts de terceros desde un trabajador web ”, serie de dos partes de Adam Bradley sobre Partytown

(vf, yk, il)Explora más en

• Actuación
• javascript
• Aplicaciones

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo Partytown elimina la sobrecarga del sitio web debido a scripts de terceros

El impuesto de JavaScriptPresentamos PartytownConfigurando PartytownCiudad de fiesta en acciónVen a divertirte con el constructorTaller de diseño conductual,

programar

es

2025-01-08

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente