Los anuncios que consumen una cantidad desproporcionada de recursos en un dispositivo afectan de manera negativa la experiencia del usuario, desde los efectos obvios de la degradación del rendimiento hasta consecuencias menos visibles, como agotar la batería o consumir los permisos de ancho de banda. Estos anuncios van desde los que son activamente maliciosos, como los mineros de criptomonedas, hasta el contenido genuino con errores o problemas de rendimiento imprevistos.
Chrome establece límites en los recursos que puede usar un anuncio y lo descarga 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 de anuncios pesados
Un anuncio se considera 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 que usan los iframes descendientes del marco de anuncio se consideran en los límites para intervenir 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 carga el anuncio. Los límites se aplican al tiempo que tarda la CPU en ejecutar el código del anuncio.
Prueba de la intervención
La intervención se envió en Chrome 85, pero de forma predeterminada, se agregan algunos ruidos y variabilidad a los umbrales para proteger la privacidad del usuario.
Si estableces chrome://flags/#heavy-ad-privacy-mitigations en Disabled, se quitan
esas protecciones, lo que significa que las restricciones se aplican de forma determinista,
solo según 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 un mensaje que indique que se quitó el anuncio. Si sigues el vínculo Detalles incluido, verás un mensaje que explica lo siguiente: "Chrome quitó este anuncio porque usa demasiados recursos en tu dispositivo."
Puedes ver la intervención aplicada al contenido de muestra en heavy-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.
Ten en cuenta que, durante las pruebas, existen varios motivos que pueden impedir que se aplique una intervención.
- Si vuelves a cargar el mismo anuncio en la misma página, esa combinación estará exenta de la intervención. Borrar el historial de navegación y abrir la página en una pestaña nueva puede ser útil.
- Asegúrate de que la página permanezca en primer plano. Si la pasas a segundo plano (cambias 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.
- Asegúrate de no presionar ni hacer clic en el contenido del anuncio durante la prueba, ya que la intervención no se aplicará al contenido que reciba interacción del usuario.
¿Qué debes hacer?
Muestras anuncios de un proveedor externo en tu sitio
No es necesario realizar ninguna acción. Solo ten en cuenta que es posible que los usuarios vean anuncios que superan los límites que se quitaron cuando están en tu sitio.
Muestra anuncios propios en su sitio o proporciona anuncios para publicidad gráfica de terceros.
Continúa leyendo para asegurarte de implementar la supervisión necesaria a través de la API de informes para las intervenciones de anuncios excesivos.
Creas contenido del anuncio o administras una herramienta para crearlo
Sigue leyendo para asegurarte de saber cómo probar tu contenido en busca de problemas de rendimiento y uso de recursos. También debes consultar la guía de las plataformas de anuncios que elijas, ya que pueden proporcionar restricciones o asesoramiento técnico adicionales. Por ejemplo, consulta los Lineamientos para creatividades de anuncios gráficos de Google. Considera crear umbrales configurables directamente en tus herramientas de creación para evitar que los anuncios de bajo rendimiento se salgan a la luz.
¿Qué sucede cuando se quita un anuncio?
Una intervención en Chrome se informa a través de la API de Reporting con un tipo de informe intervention. Puedes usar la API de informes para recibir notificaciones sobre las intervenciones, ya sea mediante una solicitud POST a un extremo de informes o dentro de tu código 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) controlar el informe.
Para 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 facilitar 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, como la intervención quitará literalmente la página del iframe, debes agregar un resguardo para asegurarte de que el informe se capture definitivamente antes de que la página desaparezca por completo, por ejemplo, un anuncio dentro de un iframe. Para ello, puedes conectar la misma devolución de llamada en el 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 se puede realizar en él. Por ejemplo, si intentas enviar una solicitud fetch() con los informes, esta se cancelará.
Debes usar navigator.sendBeacon() para enviar ese informe y, aun así, esto solo es el mejor esfuerzo del navegador, no una garantía.
El JSON resultante del código 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',
},
},
];
Cómo diagnosticar la causa de una intervención
El contenido de los anuncios es solo contenido web, por lo que debes usar herramientas como Lighthouse para auditar el rendimiento general de tu contenido. Las auditorías resultantes proporcionan orientación intercalada sobre las mejoras. También puedes consultar la colección web.dev/fast.
Probar el anuncio en un contexto más aislado podría resultarle útil. Puedes usar la opción de URL personalizada en https://high-ads.glitch.me para probar esto con un iframe listo para usar y etiquetado con anuncios. Puedes usar las Herramientas para desarrolladores de Chrome para validar si el contenido se etiquetó como un anuncio. En el panel Rendering (al que se puede acceder a través del menú de tres puntos ⋮ y, luego, More Tools > Rendering), selecciona "Highlight Ad Frames". Si pruebas el contenido en la ventana de nivel superior o en otro contexto en el que no se etiqueta como un anuncio, no se activará la intervención, pero puedes verificarla manualmente en función de los umbrales.
El estado del anuncio de un marco también se muestra en el panel Elementos, en el que se agrega una anotación ad después de la etiqueta <iframe> de apertura. Esto 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 Network en Chrome DevTools para ver la actividad general de la red del anuncio. Asegúrate de que la opción "Disable cache" esté marcada para obtener resultados coherentes en cargas repetidas.
El valor transferido en la parte inferior de la página te mostrará el importe transferido para toda la página. Considera usar la entrada de Filtro en la parte superior para restringir las solicitudes solo a aquellas 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 dentro de la solicitud para ver todas las solicitudes que activa.
Ordenar la lista general de solicitudes por tamaño es una buena manera de detectar recursos demasiado grandes. Entre los factores habituales, se incluyen las imágenes y los videos que no se optimizaron.
Además, ordenar por nombre puede ser una buena manera de detectar solicitudes repetidas. Es posible que no sea un solo recurso grande que active la intervención, sino una gran cantidad de solicitudes repetidas que superen el límite de manera incremental.
Uso de CPU
El panel Rendimiento de DevTools te ayudará a diagnosticar problemas de uso de la CPU. El primer paso es abrir el menú Capture Settings. Usa el menú desplegable CPU para ralentizar la CPU tanto como sea posible. Es mucho más probable que las intervenciones de la CPU se activen en dispositivos con menos potencia que en máquinas de desarrollo de alta gama.
A continuación, haz clic en el botón Record para comenzar a grabar la actividad. Te recomendamos que experimentes con cuándo y durante cuánto tiempo grabas, ya que un registro largo puede tardar 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 en amarillo, púrpura o verde continuos que representan la escritura de secuencias de comandos, la renderización y la pintura.
Explora las pestañas Bottom-Up, Call Tree y Event Log en la parte inferior. Ordenar esas columnas por Tiempo propio y Tiempo total puede ayudar a identificar cuellos de botella en el código.
El archivo fuente asociado también está vinculado allí, por lo que puedes seguirlo hasta el panel Fuentes para examinar el costo de cada línea.
Los problemas habituales que debes buscar aquí son animaciones poco optimizadas que activan el 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 del anuncio, considera cambiar ese código para evitar que coincida con las reglas de filtrado. Si sospechas que se aplicó una intervención de forma incorrecta, puedes informar un problema con 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.