Data di pubblicazione: 22 settembre 2025, ultimo aggiornamento: 7 gennaio 2026
Per gli utenti, poche cose sono più frustranti di una pagina web che improvvisamente rallenta, scarica la batteria o consuma la quantità di dati mensile. A volte, il problema non riguarda i contenuti che volevano vedere, ma un annuncio in esecuzione in background.
Per proteggere l'esperienza utente, Chrome impone limiti alle risorse che un annuncio può utilizzare. Quando un annuncio supera questi limiti, diventando un annuncio eccessivo, Chrome lo scarica per liberare le risorse del dispositivo.
Questa documentazione spiega come funziona questo intervento, le soglie specifiche coinvolte e alcune best practice che puoi utilizzare per garantire il corretto funzionamento degli annunci.
Che cos'è l'intervento sugli annunci pesanti?
L'intervento per annunci pesanti è un meccanismo di Chrome che monitora l'utilizzo delle risorse dei frame degli annunci. Se un annuncio consuma una quantità sproporzionata di larghezza di banda o potenza di elaborazione della CPU, Chrome scaricherà il frame dell'annuncio specifico.
Al posto dell'annuncio, l'utente vedrà una casella grigia con il messaggio Annuncio rimosso, di solito accompagnato da un link Dettagli che spiega che l'annuncio utilizzava troppe risorse.
Quando un annuncio viene considerato pesante?
Chrome determina che un annuncio è eccessivo in base a tre soglie specifiche. Se un utente non ha interagito con un annuncio e quest'ultimo soddisfa uno dei seguenti criteri, l'annuncio verrà scaricato:
- Utilizzo della rete:l'annuncio utilizza più di quattro megabyte di larghezza di banda di rete.
- Utilizzo massimo della CPU:l'annuncio utilizza il thread principale per più di 15 secondi in un intervallo di 30 secondi.
- Utilizzo totale della CPU:l'annuncio utilizza il thread principale per più di 60 secondi totali. Tutte le risorse utilizzate da qualsiasi iframe discendente del frame dell'annuncio vengono conteggiate ai fini dei limiti per l'intervento su quell'annuncio.
Quali sono alcuni fattori scatenanti comuni per questo intervento?
Alcuni tipi di comportamenti degli annunci hanno maggiori probabilità di attivare questi interventi rispetto ad altri. Tra le cause più comuni figurano:
- Contenuti multimediali non compressi:caricamento di immagini estremamente grandi e compresse in modo scadente.
- JavaScript pesante:esecuzione di operazioni estese, come la decodifica di file video utilizzando JavaScript.
- Calcoli pesanti:esecuzione di calcoli complessi in background.
- Contenuti video senza gesti:caricamento di file video di grandi dimensioni prima che un utente interagisca con un annuncio.
Che cosa succede quando un annuncio viene rimosso?
Quando Chrome rileva che un annuncio ha superato le soglie per gli annunci pesanti, interviene immediatamente per proteggere le risorse del dispositivo dell'utente.
L'esperienza utente
Dal punto di vista dell'utente, l'annuncio viene immediatamente scaricato. Al suo posto, Chrome mostra una casella grigia con il messaggio Annuncio rimosso. Se l'utente fa clic su Dettagli all'interno del contenitore, visualizzerà una spiegazione specifica.
Esperienza di sviluppo
Chrome genera anche un report sull'intervento con l'API Reporting per comunicarti esattamente cosa è successo. In precedenza, questi report venivano inviati solo al frame dell'annuncio stesso e ai relativi frame discendenti. Tuttavia, spesso i publisher non avevano modo di sapere che gli annunci sulle loro pagine venivano rimossi. Per risolvere questo problema, Chrome ha ampliato il meccanismo di segnalazione. I report sull'intervento vengono ora inviati al frame di incorporamento (il frame principale del frame dell'annuncio principale) oltre al frame dell'annuncio stesso. I report inviati al frame di incorporamento includono l'ID del frame secondario e l'URL del frame dell'annuncio.
Per configurare la pagina per i report HTTP, la risposta deve includere l'intestazione Report-To:
Reporting-Endpoints: default="https://example.com/reports"
La richiesta POST attivata includerà un report come questo:
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?utm_source=devtools"
}
}]
Il frame di incorporamento riceverà un report simile, indirizzato all'URL del frame di incorporamento, ma il messaggio conterrà anche l'ID del frame secondario e l'URL specifico del frame secondario:
...
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools (id=123;url=http://example2.com/pre-redirect-ad-url.html)"
...
L'API JavaScript fornisce ReportingObserver con un metodo observe() che può essere utilizzato per attivare un callback fornito sugli interventi. Questa opzione può essere utile se vuoi allegare ulteriori informazioni al report per facilitare il debug.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json using 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();
Poiché l'intervento scarica la pagina iframe (ad esempio, un annuncio), utilizza l'evento pagehide per assicurarti che il callback di reporting acquisisca il report sull'intervento prima che la pagina scompaia.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Il JSON risultante da JavaScript è simile a quello inviato nella richiesta 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',
},
},
];
Best practice per gli sviluppatori
Per evitare che i tuoi annunci rientrino nella categoria degli annunci banner pesanti, considera le seguenti best practice:
- Richiedi l'interazione dell'utente per i contenuti pesanti:i criteri di intervento si applicano agli annunci con cui l'utente non ha interagito. Se un utente fa clic o tocca il tuo annuncio, i limiti delle risorse non vengono più applicati. Per le esperienze video o rich media, attendi un gesto dell'utente (ad esempio "fai clic per riprodurre") prima di caricare asset pesanti.
- Ottimizza immagini e video: assicurati che le immagini siano compresse e i video ottimizzati per il web. Evita di caricare automaticamente file video di grandi dimensioni. Utilizza invece segnaposto leggeri finché l'utente non interagisce.
- Controlla l'utilizzo della CPU:animazioni complesse o operazioni JavaScript che attivano layout e rendering continui possono aumentare l'utilizzo della CPU. Utilizza gli strumenti per identificare i colli di bottiglia nel codice che potrebbero tenere occupato il thread principale per lunghi periodi.
- Monitora i frame discendenti:ricorda che il conteggio delle risorse include tutto ciò che si trova all'interno dell'iframe dell'annuncio. Se l'annuncio carica pixel di monitoraggio o iframe di terze parti, il loro utilizzo delle risorse viene conteggiato ai fini del limite.
- Isola i contenuti non pubblicitari:separa i frame dei contenuti non pubblicitari in domini diversi o in pattern riconoscibili che è improbabile che vengano considerati domini pubblicitari ai sensi delle norme del fornitore di elenchi di filtri.
Come eseguire il debug e diagnosticare la causa di un intervento?
Per risolvere i problemi relativi agli interventi sugli annunci pesanti in modo efficace, devi prima capire come la logica di rilevamento di Chrome identifica i contenuti come annunci e poi utilizzare gli strumenti per sviluppatori integrati per controllare i trigger di risorse specifici che hanno portato alla rimozione.
In che modo Chrome rileva la presenza di un annuncio?
Chrome tagga i contenuti come annuncio confrontando le richieste di risorse con un elenco di filtri. La logica di rilevamento si applica ai contenuti all'interno degli iframe. Il frame della pagina principale non è mai considerato correlato agli annunci, anche se contiene script di annunci. Tieni presente che un iframe caricato da una risorsa corrispondente all'elenco dei filtri verrà considerato un annuncio anche se da questo frame vengono caricati anche altri contenuti non pubblicitari. Un esempio è un video player caricato in un iframe taggato come annuncio che potrebbe caricare anche contenuti non pubblicitari.
Come verificare il rilevamento degli annunci?
In qualità di sviluppatore, puoi verificare visivamente se Chrome ha rilevato correttamente i tuoi contenuti come annuncio utilizzando Chrome DevTools.
- Evidenziazione dei frame degli annunci:nel riquadro Rendering, seleziona Evidenzia frame annuncio, che codifica a colori i frame annuncio rilevati in rosso sullo schermo.
- Annotazione elemento:nel riquadro Elementi, gli iframe degli annunci rilevati mostreranno un'annotazione dell'annuncio accanto al tag
<iframe>di apertura. - Attività di rete:nel riquadro Rete, filtra le richieste in base a un valore booleano
Is ad-related. - Stato annuncio:nel riquadro dell'applicazione, nella sezione Frame, i frame con tag annuncio includeranno un attributo
Ad Status.
Come diagnosticare la causa di un intervento?
Chrome fornisce strumenti per controllare e migliorare la qualità e le prestazioni delle pagine web. Esegui Lighthouse in Chrome DevTools per ottenere report sulle prestazioni della tua pagina. Puoi anche consultare la raccolta web.dev/fast ed esplorare ulteriori informazioni sui Segnali web essenziali.
Utilizzo della rete
Visualizza il riquadro Rete in Chrome DevTools per vedere l'attività di rete complessiva dell'annuncio. Seleziona l'opzione Disattiva cache per ottenere risultati coerenti in caso di caricamenti ripetuti.
Il valore trasferito in fondo alla pagina mostra l'importo trasferito per l'intera pagina. Per limitare le richieste solo a quelle relative all'annuncio, utilizza il campo di input Filtro in alto.
Se trovi la richiesta iniziale dell'annuncio, ad esempio l'origine dell'iframe, utilizza la scheda Initiator (Iniziatore) all'interno della richiesta per visualizzare tutte le richieste che attiva.
Ordinare l'elenco complessivo delle richieste in base alle dimensioni è un buon modo per individuare le risorse eccessivamente grandi. Tra i colpevoli più comuni ci sono immagini e video che non sono stati ottimizzati.
Inoltre, l'ordinamento per nome può essere un buon modo per individuare le richieste ripetute. Potrebbe non essere una singola risorsa di grandi dimensioni a attivare l'intervento, ma un numero elevato di richieste ripetute che superano gradualmente il limite.
Utilizzo CPU
Il pannello Prestazioni in DevTools ti aiuterà a diagnosticare i problemi di utilizzo della CPU. Apri il menu Impostazioni di acquisizione. Utilizza il menu a discesa CPU per rallentare la CPU il più possibile. Gli interventi per la CPU hanno molte più probabilità di essere attivati su dispositivi meno potenti rispetto a macchine di sviluppo di fascia alta.
Poi, fai clic sul pulsante Registra per iniziare a registrare l'attività. Ti consigliamo di sperimentare la durata e la frequenza delle registrazioni, in quanto il caricamento di una traccia lunga può richiedere molto tempo. Una volta caricata la registrazione, puoi utilizzare la sequenza temporale in alto per selezionare una parte della registrazione. Concentrati sulle aree del grafico in giallo, viola o verde continuo che rappresentano lo scripting, il rendering e il disegno.
Esplora le schede Dal basso verso l'alto, Struttura delle chiamate e Log eventi in basso. L'ordinamento di queste colonne in base a Tempo proprio e Tempo totale può aiutare a identificare i colli di bottiglia nel codice.
È collegato anche il file sorgente associato, in modo da poterlo seguire fino al riquadro Origini per esaminare il costo di ogni riga.
I problemi comuni da cercare qui sono animazioni scarsamente ottimizzate che attivano layout e rendering continui o operazioni costose nascoste all'interno di una libreria inclusa.
Come segnalare interventi errati?
Se i contenuti non pubblicitari sono stati taggati come tali, valuta la possibilità di modificare il codice per evitare di corrispondere alle regole di filtraggio oppure contatta direttamente i manutentori di EasyList per modificare le regole di filtraggio. Ricorda che l'intervento sugli annunci pesanti non influisce sui frame con il gesto dell'utente, quindi il video può essere escluso richiedendo di fare clic su un pulsante di riproduzione prima di caricare i contenuti. Se EasyList non corrisponde ai tuoi contenuti e Chrome ha classificato erroneamente i contenuti come correlati agli annunci, puoi segnalare un problema a Chrome utilizzando questo modello. Quando segnali un problema, includi un esempio acquisito del report sull'intervento e un URL di esempio per riprodurre il problema.