Maneja intervenciones de anuncios pesados

Rowan Merewood
Rowan Merewood

Los anuncios que consumen una cantidad desproporcionada de recursos en un dispositivo tienen un impacto negativo en la experiencia del usuario; desde los efectos obvios de degradar el rendimiento hasta consecuencias menos visibles, como el vaciado de la batería o la ingesta de permisos de ancho de banda. Estos anuncios van desde contenido malicioso activamente, como mineros de criptomonedas, hasta contenido genuino con errores involuntarios o problemas de rendimiento.

Chrome establece límites sobre los recursos que un anuncio puede usar y descarga ese anuncio si se superan los límites. Puedes leer el anuncio en el blog de Chromium para obtener más detalles. El mecanismo que se usa para descargar anuncios es la intervención de anuncios pesados.

Criterios para los anuncios pesados

Se considera que un anuncio es pesado si el usuario no interactuó con él (por ejemplo, no lo presionó ni hizo clic en él) y cumple con alguno de los siguientes criterios:

  • Usa el subproceso principal durante más de 60 segundos en total.
  • Usa el subproceso principal durante más de 15 segundos en cualquier ventana de 30 segundos.
  • Usa más de 4 megabytes de ancho de banda de red.

Todos los recursos utilizados por cualquier iframe descendiente del marco del anuncio se tienen en cuenta para los límites de intervención en ese anuncio. Es importante tener en cuenta que los límites de tiempo del subproceso principal no son los mismos que el tiempo transcurrido desde que se cargó el anuncio. Los límites se basan en el tiempo que tarda la CPU en ejecutar el código del anuncio.

Prueba la intervención

La intervención se envió en Chrome 85, pero, de forma predeterminada, se agregan cierto ruido y variabilidad a los umbrales para proteger la privacidad del usuario.

Si estableces chrome://flags/#heavy-ad-privacy-mitigations como Inhabilitada, se quitarán esas protecciones, lo que significa que las restricciones se aplicarán de manera determinista, únicamente de acuerdo con los límites. Esto debería facilitar la depuración y las pruebas.

Cuando se active la intervención, deberías ver el contenido del iframe de un anuncio pesado reemplazado por el mensaje Se quitó el anuncio. Si sigues el vínculo Detalles incluido, verás un mensaje que explica: "Este anuncio usa demasiados recursos para tu dispositivo, por lo que Chrome lo quitó".

Puedes ver la intervención aplicada al contenido de muestra en high-ads.glitch.me. También puedes usar este sitio de prueba para cargar una URL arbitraria como una forma rápida de probar tu propio contenido.

Cuando pruebes, ten en cuenta que hay varios motivos que pueden evitar que se aplique una intervención.

  • Si vuelves a cargar el mismo anuncio en la misma página, esa combinación se eximirá de la intervención. En este caso, puedes borrar el historial de navegación y abrir la página en una etiqueta nueva.
  • Asegúrate de que la página permanezca enfocada: si la usas en segundo plano (cambia a otra ventana), se detendrán las listas de tareas en cola de la página y, por lo tanto, no se activará la intervención de la CPU.
  • Durante la prueba, asegúrate de no presionar ni hacer clic en el contenido del anuncio, ya que la intervención no se aplicará al contenido que recibe alguna interacción del usuario.

¿Qué debe hacer?

Muestra anuncios de un proveedor externo en su sitio.

No es necesario realizar ninguna acción, solo ten en cuenta que es posible que los usuarios vean anuncios que superen los límites quitados cuando estén en tu sitio.

Muestra anuncios propios en su sitio o proporciona anuncios para la publicidad gráfica de terceros.

Continúa leyendo para asegurarte de implementar la supervisión necesaria a través de la API de Reporting para las intervenciones de anuncios pesados.

Usted crea contenido del anuncio o mantiene una herramienta para crear contenido del anuncio.

Continúa leyendo para asegurarte de saber cómo probar tu contenido para detectar problemas de rendimiento y uso de recursos. También debes consultar la guía sobre las plataformas de anuncios que elijas, ya que pueden brindarte asesoramiento técnico o restricciones adicionales. Por ejemplo, consulta los Lineamientos para creatividades de Display de Google. Considera establecer umbrales configurables directamente en tus herramientas de creación para evitar que los anuncios con bajo rendimiento se escapen.

¿Qué sucede cuando se quita un anuncio?

Se informa una intervención en Chrome a través de la bien denominada API de Reporting con un tipo de informe intervention. Puedes usar la API de Reporting para recibir notificaciones sobre las intervenciones a través de una solicitud POST a un extremo de informes o dentro de tu JavaScript.

Estos informes se activan en el iframe raíz etiquetado con anuncios junto con todos sus descendientes, es decir, cada fotograma que descarga la intervención. Esto significa que, si un anuncio proviene de una fuente de terceros, es decir, un iframe entre sitios, depende de ese tercero (por ejemplo, el proveedor de anuncios) manejar el informe.

Si deseas configurar la página para informes HTTP, la respuesta debe incluir el encabezado Report-To:

Report-To: { "url": "https://example.com/reports", "max_age": 86400 }

La solicitud POST activada incluirá un informe como el siguiente:

POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report

[{
 "type": "intervention",
 "age": 60,
 "url": "https://example.com/url/of/ad.html",
 "body": {
   "sourceFile": null,
   "lineNumber": null,
   "columnNumber": null,
   "id": "HeavyAdIntervention",
   "message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
 }
}]

La API de JavaScript proporciona a ReportingObserver un método observe() que se puede usar para activar una devolución de llamada proporcionada en las intervenciones. Esto puede ser útil si deseas adjuntar información adicional al informe para ayudar en la depuración.

// callback that will handle intervention reports
function sendReports(reports) {
  for (let report of reports) {
    // Log the `report` json via your own reporting process
    navigator.sendBeacon('https://report.example/your-endpoint', report);
  }
}

// create the observer with the callback
const observer = new ReportingObserver(
  (reports, observer) => {
    sendReports(reports);
  },
  { buffered: true }
);

// start watching for interventions
observer.observe();

Sin embargo, debido a que la intervención literalmente quitará la página del iframe, debes agregar un sistema de seguridad ante fallas para asegurarte de que se capture el informe antes de que la página se borre por completo, por ejemplo, un anuncio dentro de un iframe. Para ello, puedes conectar la misma devolución de llamada al evento pagehide.

window.addEventListener('pagehide', (event) => {
  // pull all pending reports from the queue
  let reports = observer.takeRecords();
  sendReports(reports);
});

Recuerda que, para proteger la experiencia del usuario, el evento pagehide restringe la cantidad de trabajo que puede realizarse en él. Por ejemplo, si intentas enviar una solicitud fetch() con los informes, se cancelará esa solicitud. Debes usar navigator.sendBeacon() para enviar ese informe y, aun así, esto no representa el mejor esfuerzo del navegador.

El JSON resultante del JavaScript es similar al que se envía en la solicitud POST:

[
  {
    type: 'intervention',
    url: 'https://example.com/url/of/ad.html',
    body: {
      sourceFile: null,
      lineNumber: null,
      columnNumber: null,
      id: 'HeavyAdIntervention',
      message:
        'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
    },
  },
];

Diagnosticar la causa de una intervención

El contenido del anuncio es solo contenido web, así que usa herramientas como Lighthouse para auditar el rendimiento general del contenido. Las auditorías resultantes brindan orientación integrada sobre las mejoras. También puedes consultar la colección web.dev/fast.

Puede resultarte útil probar el anuncio en un contexto más aislado. Puedes usar la opción de URL personalizada en https://broad-ads.glitch.me para probarla con un iframe listo para usar y etiquetado con anuncios. Puedes usar las Herramientas para desarrolladores de Chrome para validar que el contenido se etiquetó como un anuncio. En el panel Renderización (al que puedes acceder mediante el menú de tres puntos y, luego, Más herramientas > Renderización), selecciona "Destacar marcos de anuncios". Si se prueba contenido en la ventana de nivel superior o en otro contexto en el que no está etiquetado como anuncio, la intervención no se activará, pero puedes verificar los umbrales de forma manual.

El estado del anuncio de un marco también se muestra en el panel Elements, donde se agrega una anotación ad después de la etiqueta <iframe> de apertura. También se puede ver en el panel Application en la sección Frames, donde los marcos etiquetados con anuncios incluirán un atributo "Ad Status".

Uso de red

Abre el panel Red en las Herramientas para desarrolladores de Chrome para ver la actividad general de red del anuncio. Asegúrate de que la opción "Inhabilitar caché" esté marcada para obtener resultados coherentes en cargas repetidas.

Panel Network en Herramientas para desarrolladores.
Panel Network en Herramientas para desarrolladores.

El valor transferido en la parte inferior de la página te mostrará el importe transferido de toda la página. Considera utilizar la entrada Filtro de la parte superior para restringir las solicitudes solo a las relacionadas con el anuncio.

Si encuentras la solicitud inicial del anuncio (por ejemplo, la fuente del iframe), también puedes usar la pestaña Initiator de la solicitud para ver todas las solicitudes que activa.

Pestaña Iniciador para una solicitud.
Pestaña Iniciador para una solicitud.

Ordenar la lista general de solicitudes por tamaño es una buena manera de detectar recursos demasiado grandes. Entre las causas más comunes, se incluyen las imágenes y los videos que no se optimizaron.

Ordena las solicitudes por tamaño de respuesta.
Ordena las solicitudes por tamaño de respuesta.

Además, ordenar por nombre puede ser una buena manera de detectar solicitudes repetidas. Puede que no sea un único recurso grande que active la intervención, sino una gran cantidad de solicitudes repetidas que superen el límite de forma incremental.

Uso de CPU

El panel Performance de Herramientas para desarrolladores te ayudará a diagnosticar problemas de uso de CPU. El primer paso es abrir el menú Configuración de captura. Usa el menú desplegable CPU para reducir la velocidad de la CPU tanto como sea posible. Es más probable que las intervenciones para CPU se activen en dispositivos de menor potencia que en máquinas de desarrollo de alta gama.

Habilita la limitación de la red y la CPU en el panel de rendimiento.
Habilita la limitación de la red y la CPU en el panel de rendimiento.

A continuación, haz clic en el botón Record para comenzar a grabar la actividad. Te recomendamos que experimentes con cuándo y por cuánto tiempo grabarás, ya que un registro largo puede demorar bastante en cargarse. Una vez que se cargue la grabación, puedes usar el cronograma superior para seleccionar una parte de la grabación. Enfócate en las áreas del gráfico de color amarillo, púrpura o verde que representan la secuencia de comandos, la renderización y la pintura.

Resumen de un seguimiento en el panel Rendimiento.
Resumen de un seguimiento en el panel Rendimiento

Explora las pestañas Bottom-Up, Call Tree y Event Log en la parte inferior. Ordenar esas columnas por Self Time y Total Time puede ayudar a identificar cuellos de botella en el código.

Ordena por Autotiempo en la pestaña Bottom-Up.
Ordena por Autotime en la pestaña Bottom-Up.

El archivo fuente asociado también está vinculado allí, por lo que puedes seguirlo hasta el panel Sources para examinar el costo de cada línea.

Tiempo de ejecución que se muestra en el panel Sources.
Tiempo de ejecución que se muestra en el panel Sources.

Los problemas habituales que se deben buscar son las animaciones mal optimizadas que activan un diseño y la pintura continuos, o bien operaciones costosas que se ocultan en una biblioteca incluida.

Cómo denunciar intervenciones incorrectas

Chrome etiqueta el contenido como un anuncio haciendo coincidir las solicitudes de recursos con una lista de filtros. Si se etiquetó contenido que no es de anuncios, considera cambiar ese código para evitar que coincidan las reglas de filtrado. Si sospechas que una intervención se aplicó de forma incorrecta, puedes generar un problema a través de esta plantilla. Asegúrate de haber capturado un ejemplo del informe de intervención y de tener una URL de muestra para reproducir el problema.