Del JavaScript de la página móvil mediana del Web Almanac 2024, 168 kilobytes eran propios y 375 kilobytes eran de terceros.1 Más de la mitad del script de una página común, por peso, lo había escrito alguien distinto del dueño del sitio. El capítulo del Almanac sobre los terceros los encontró en el 92% de las páginas, y el script era el tipo más común de solicitud de terceros.2 El script de una red publicitaria, el que agrega un editor para mostrar sus anuncios, es una de esas solicitudes. Lo que ese script le cuesta a la página en el momento de la carga depende menos de lo que hace que de cómo está escrito el elemento que lo carga.
El navegador se detiene ante un elemento script que no lleva ningún atributo
Según el HTML Living Standard, un navegador tiene tres formas de tratar un script externo, y solo se diferencian por un atributo en el elemento.3 La primera, sin ninguno de los dos atributos, es la predeterminada: el script "se obtiene y se evalúa inmediatamente, bloqueando el análisis hasta que ambas cosas se completan". La segunda, defer, obtiene el archivo en paralelo con el análisis y lo evalúa "cuando la página ha terminado de analizarse". Con la tercera, async, el archivo también se obtiene en paralelo, pero se evalúa "en cuanto está disponible (posiblemente antes de que termine el análisis)". Solo el primer modo detiene el analizador mientras el archivo atraviesa la red, y nada de lo que hay después del elemento se dibuja hasta que llega el archivo.
La auditoría Lighthouse de Google convierte la distinción en una prueba que un editor puede ejecutar en su propia página. Señala cualquier elemento script en el head del documento que no lleve ni defer ni async.4 El informe "enumera todas las URL que bloquean la primera representación de su página". El tamaño no forma parte de esa definición, ni tampoco la finalidad. Un script de analítica, un script de anuncios y un cargador de fuentes se tratan igual si están en el head sin atributo.
El script de terceros es el caso para el que se escribió la guía de carga
La guía de web.dev es directa sobre los scripts que vienen de fuera del sitio. Los scripts síncronos, dice, "retrasan la construcción del DOM y la representación", siendo el DOM el modelo de trabajo del documento que usa el navegador.5 La regla que se deriva es "cargar siempre los scripts de terceros de forma asíncrona, a menos que el script tenga que ejecutarse antes de que la página pueda representarse". Async es adecuado para un script que debe ejecutarse al principio del proceso de carga; defer es adecuado para "los recursos menos críticos", y su ejemplo es un reproductor de video situado debajo de la parte visible. Un script de anuncios que trabaja después de que el texto está en pantalla entra, según esa prueba, en la categoría de menos crítico.
La práctica se ha extendido, aunque no a todas las páginas. El Web Almanac 2024 halló async en el 87% de las páginas, frente al 76% de 2022, y defer en el 47%, frente al 42%.1 Esas cifras describen las páginas en su conjunto. Una página cuyos propios scripts están diferidos puede seguir llevando un elemento bloqueante que aportó un tercero. Un fragmento de instalación, a menos que el editor lo modifique, se carga tal como lo escribió la red.
Un script que espera al DOM no tiene ninguna primera representación que bloquear
El navegador marca con un evento el momento en que el analizador termina de construir el DOM. Según MDN, DOMContentLoaded "se dispara cuando el documento HTML se ha analizado por completo y todos los scripts diferidos" se han descargado y ejecutado.6 El evento no espera a las imágenes, los submarcos ni los scripts async. Por lo tanto, un script que empieza su trabajo en ese momento comienza después de que existe el texto, sin esperar a la última imagen.
El script incrustado de AdBubbles, adbubbles.js, se carga cuando el DOM de la página está listo. Es un único archivo estático, servido a través de la caché de Cloudflare y escrito en JavaScript simple sin dependencias. Los datos por sitio que lee también son un archivo estático, que se regenera cuando cambia una campaña y se almacena en caché en el borde de la red. Por eso, una visita a la página no le cuesta nada al servidor de anuncios, y la única solicitud dinámica es una pequeña baliza. El script incrustado examina solo el alcance que configuró el editor, y omite los encabezados, los enlaces, el código, el texto preformateado, los controles de formulario, la navegación, el encabezado, el pie de página y todo lo que esté marcado con data-noads. Las notas de instalación describen el ajuste del alcance.
Abrir una cuenta de editor no cuesta nada, y agregar el script incrustado a un sitio tampoco. Un editor que agrega un sitio puede solicitar un rastreo que muestra cuáles de sus palabras se pueden vender en este momento. El alcance, el máximo de burbujas por página y las categorías de anunciantes excluidas se eligen desde la misma cuenta.
La baliza que se envía cuando un lector se va es la otra mitad del costo
El momento en que un lector se va es la otra oportunidad de un script para hacerlo más lento. El código de analítica que informaba al descargarse la página se basaba antes en técnicas como "una llamada XMLHttpRequest síncrona y bloqueante".7 MDN registra que todos esos métodos "bloquean la descarga del documento, lo que hace más lenta la navegación a la página siguiente". El método sendBeacon los sustituye. Envía una pequeña solicitud HTTP POST de forma asíncrona. El navegador transmite los datos "cuando el agente de usuario tiene la oportunidad de hacerlo, sin retrasar la descarga ni la navegación siguiente".
El script incrustado informa con sendBeacon, y envía tres tipos de baliza. Se envía una de visualización por carga de página. Se envía una de apertura cuando una burbuja ha estado visible durante un segundo, y una de clic cuando un lector sigue el enlace dentro de una burbuja. Nada más sale de la página.
AdBubbles no coloca cookies, no guarda identificadores y no recopila datos personales de los lectores. El país del lector se lee de un encabezado de solicitud de Cloudflare y no de una dirección IP guardada. Hacer coincidir las palabras de las páginas de un editor con el anunciante que las compró es todo lo que hace AdBubbles. AdBubbles no tiene ninguna influencia sobre qué personas ven una burbuja, nunca sigue a un lector de una página o un sitio al siguiente y no promete ningún resultado. La postura sobre privacidad está publicada en su totalidad.
Los navegadores ya cuentan lo que cuesta un anuncio y actúan según el total
La Heavy Ad Intervention de Chrome muestra lo que un fabricante de navegadores considera excesivo. Un anuncio se considera pesado solo "si el usuario no ha interactuado con él (por ejemplo, no lo ha tocado ni ha hecho clic en él)".8 Más allá de eso, basta con cualquiera de tres umbrales. El primero es más de 4 megabytes de ancho de banda de red. El segundo es más de 15 segundos de tiempo del hilo principal en cualquier intervalo de 30 segundos, y el tercero es más de 60 segundos en total.
Cuando se activa la intervención, el contenido del marco del anuncio "se sustituye por un mensaje de anuncio eliminado", y el mecanismo actúa sobre los iframes etiquetados como anuncios.8 La medida son los bytes y el tiempo del hilo principal; el contenido del anuncio no influye. Una burbuja se muestra dentro de un Shadow DOM en el propio documento del editor y no en un iframe, así que este mecanismo apunta a otro tipo de anuncio. Lo que el script incrustado añade a una página determinada, en bytes y en tiempo del hilo principal, es algo que mostrarán las propias mediciones de esa página.
La comprobación que un editor puede hacer en su propia página no necesita nada más que un navegador. El código fuente de la página enumera cada elemento script del head, y cada uno lleva async o defer o no lleva ninguno. La sección Oportunidades de Lighthouse enumera los que no llevan ninguno como URL que bloquean la primera representación.4 Un fragmento de una red que figura en esa lista está bloqueando la página según la definición del estándar, diga lo que diga la documentación de la red sobre su peso. Si un script de anuncios entra en esa lista lo decide el atributo de su elemento, y el atributo está escrito en el fragmento antes de que ningún editor lo pegue.