Gli annunci che consumano una quantità sproporzionata di risorse su un dispositivo influiscono negativamente sull'esperienza dell'utente, dagli effetti evidenti del calo delle prestazioni alle conseguenze meno visibili come lo scaricamento della batteria o l'utilizzo delle quote di larghezza di banda. Questi annunci vanno da quelli con intenti dannosi, come i miner di criptovaluta, a contenuti genuini con bug involontari o problemi di prestazioni.
Chrome imposta limiti alle risorse che un annuncio può utilizzare e lo scarica se i limiti vengono superati. Per maggiori dettagli, puoi leggere l'annuncio sul blog di Chromium. Il meccanismo utilizzato per il non caricamento degli annunci è l'Heavy Ad Intervention.
Criteri degli annunci intensivi
Un annuncio viene considerato pesante se l'utente non ha interagito con l'annuncio (ad es. non lo ha toccato o fatto clic) e soddisfa uno dei seguenti criteri:
- Utilizza il thread principale per più di 60 secondi in totale
- Utilizza il thread principale per più di 15 secondi in qualsiasi finestra di 30 secondi
- Utilizza più di 4 megabyte di larghezza di banda di rete
Tutte le risorse utilizzate dagli iframe discendenti del frame dell'annuncio vengono conteggiate ai fini dei limiti per intervenire sull'annuncio. È importante notare che i limiti di tempo del thread principale non corrispondono al tempo trascorso dal caricamento dell'annuncio. I limiti si riferiscono al tempo necessario alla CPU per eseguire il codice dell'annuncio.
Test dell'intervento
L'intervento è stato implementato in Chrome 85, ma per impostazione predefinita alle soglie viene aggiunto un po' di rumore e variabilità per proteggere la privacy degli utenti.
Se imposti chrome://flags/#heavy-ad-privacy-mitigations su Disattivato, queste protezioni vengono rimosse, il che significa che le restrizioni vengono applicate in modo deterministico, in base ai limiti. In questo modo, il debug e i test dovrebbero essere più semplici.
Quando viene attivato l'intervento, dovresti vedere i contenuti nell'iframe di un annuncio pesante sostituiti da un messaggio Annuncio rimosso. Se segui il link Dettagli incluso, vedrai un messaggio che spiega: "Questo annuncio utilizza troppe risorse per il tuo dispositivo, pertanto è stato rimosso da Chrome".
Puoi vedere l'intervento applicato ai contenuti di esempio su heavy-ads.glitch.me. Puoi anche utilizzare questo sito di test per caricare un URL arbitrario come modo rapido per testare i tuoi contenuti.
Tieni presente che durante il test esistono diversi motivi che possono impedire l'applicazione di un intervento.
- Il ricaricamento dello stesso annuncio nella stessa pagina esenta la combinazione dall'intervento. In questo caso, può essere utile svuotare la cronologia di navigazione e aprire la pagina in un nuovo browser.
- Assicurati che la pagina rimanga attiva: se la metti in background (passando a un'altra finestra), le code di attività per la pagina verranno messe in pausa e quindi non attiveranno l'intervento della CPU.
- Assicurati di non toccare o fare clic sui contenuti dell'annuncio durante il test: l'intervento non verrà applicato ai contenuti che ricevono interazioni utente.
Cosa occorre fare?
Pubblichi annunci di un fornitore di terze parti sul tuo sito
Non è richiesta alcuna azione, ma tieni presente che gli utenti potrebbero vedere annunci che superano i limiti rimossi quando visitano il tuo sito.
Pubblichi annunci proprietari sul tuo sito o fornisci annunci per la visualizzazione di terze parti
Continua a leggere per assicurarti di implementare il monitoraggio necessario tramite l'API Reporting per gli interventi relativi agli annunci pesanti.
Creazione di contenuti dell'annuncio o gestione di uno strumento per la creazione di contenuti dell'annuncio
Continua a leggere per assicurarti di conoscere le modalità di test dei tuoi contenuti per rilevare eventuali problemi di prestazioni e di utilizzo delle risorse. Ti consigliamo inoltre di consultare le indicazioni sulle piattaforme pubblicitarie che hai scelto, in quanto potrebbero fornire ulteriori consigli tecnici o limitazioni. Ad esempio, consulta le linee guida per le creatività display di Google. Valuta la possibilità di creare soglie configurabili direttamente negli strumenti di creazione per impedire che gli annunci con scarso rendimento vengano pubblicati.
Che cosa succede quando un annuncio viene rimosso?
Un intervento in Chrome viene segnalato tramite l'apposita API Reporting con un tipo di report intervention. Puoi utilizzare l'API di reporting per ricevere notifiche sugli interventi tramite una richiesta POST a un endpoint di reporting o all'interno del tuo codice JavaScript.
Questi report vengono attivati nell'iframe con tagging degli annunci principale e in tutti i suoi decedenti, ovvero in ogni frame scaricato dall'intervento. Ciò significa che se un annuncio proviene da un'origine di terze parti, ad esempio un iframe cross-site, è compito di questa terza parte (ad esempio il fornitore di annunci) gestire la segnalazione.
Per configurare la pagina per i report HTTP, la risposta deve includere l'intestazione Report-To:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
La richiesta POST attivata includerà un report come il seguente:
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"
}
}]
L'API JavaScript fornisce a ReportingObserver 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 debugging.
// 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();
Tuttavia, poiché l'intervento rimuoverà letteralmente la pagina dall'iframe, devi aggiungere una protezione non riuscita per garantire che il report venga acquisito definitivamente prima che la pagina venga eliminata completamente, ad esempio un annuncio all'interno di un iframe. A questo scopo, puoi collegare lo stesso callback all'evento pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Ricorda che, per proteggere l'esperienza utente, l'evento pagehide limita la quantità di lavoro che può essere eseguita al suo interno. Ad esempio, se provi a inviare una richiestafetch() con i report, questa verrà annullata.
Devi utilizzare navigator.sendBeacon() per inviare la segnalazione e, anche in questo caso, questo
è solo il miglior tentativo del browser, e non è garantito.
Il JSON risultante dal codice 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',
},
},
];
Diagnostica della causa di un intervento
I contenuti degli annunci sono solo contenuti web, quindi utilizza strumenti come Lighthouse per verificare il rendimento complessivo dei tuoi contenuti. Le verifiche risultanti forniscono indicazioni in linea sui miglioramenti. Puoi anche consultare la raccolta web.dev/fast.
Potresti trovare utile testare l'annuncio in un contesto più isolato. Puoi utilizzare l'opzione URL personalizzato su https://heavy-ads.glitch.me per testarlo con un iframe pronto all'uso con tag annuncio. Puoi usare Chrome DevTools per verificare che i contenuti siano stati taggati come annunci. Nel riquadro Rendering (accessibile tramite il menu con tre puntini ⋮, quindi Altri strumenti > Rendering), seleziona "Inserisci frame annunci". Se testi i contenuti nella finestra di primo livello o in un altro contesto in cui non sono contrassegnati come annunci, l'intervento non verrà attivato, ma puoi comunque eseguire un controllo manuale rispetto alle soglie.
Lo stato dell'annuncio di un frame viene visualizzato anche nel riquadro Elementi, dove viene aggiunta un'annotazione ad
dopo il tag <iframe> di apertura. Questo valore è visibile anche nel riquadro Applicazione nella sezione Frame, dove i frame con tag annuncio includeranno un attributo "Stato annuncio".
Utilizzo della rete
Apri il riquadro Rete in Chrome DevTools per visualizzare l'attività di rete complessiva per l'annuncio. Assicurati che l'opzione "Disattiva cache" sia selezionata per ottenere risultati coerenti dopo carichi ripetuti.
Il valore trasferito in fondo alla pagina mostra l'importo trasferito per l'intera pagina. Valuta la possibilità di utilizzare l'input Filtra in alto per limitare le richieste solo a quelle correlate all'annuncio.
Se trovi la richiesta iniziale per l'annuncio, ad esempio l'origine dell'iframe, puoi anche utilizzare la scheda Initiator 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. Le cause più comuni sono immagini e video che non sono stati ottimizzati.
Inoltre, l'ordinamento per nome può essere un buon modo per individuare le richieste ripetute. L'intervento potrebbe non essere attivato da una singola risorsa di grandi dimensioni, ma da un gran numero di richieste ripetute che superano gradualmente il limite.
Utilizzo CPU
Il riquadro Prestazioni in DevTools ti aiuterà a diagnosticare i problemi di utilizzo della CPU. Il primo passaggio consiste nell'aprire il menu Impostazioni di acquisizione. Utilizza il menu a discesa CPU per rallentare il più possibile la CPU. È molto più probabile che gli interventi per la CPU vengano attivati su dispositivi con potenza inferiore rispetto a macchine di sviluppo di fascia alta.
Poi, fai clic sul pulsante Registra per iniziare a registrare l'attività. Ti consigliamo di sperimentare su quando e per quanto tempo registrare, poiché il caricamento di una traccia lunga può richiedere un po' di 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 solido che rappresentano scripting, rendering e pittura.
Esplora le schede In basso, Struttura ad albero chiamate e Log eventi in basso. Ordinare queste colonne in base a Tempo auto e Tempo totale può contribuire a identificare i colli di bottiglia nel codice.
Anche il file di origine associato è collegato, quindi puoi seguire il link fino al riquadro Origini per esaminare il costo di ogni riga.
I problemi comuni da cercare qui sono animazioni poco ottimizzate che attivano il layout e la pittura continui o operazioni dispendiose nascoste all'interno di una libreria inclusa.
Come segnalare interventi errati
Chrome contrassegna i contenuti come annunci abbinando le richieste di risorse a un elenco di filtri. Se sono stati taggati contenuti non correlati agli annunci, ti consigliamo di modificare il codice per evitare la corrispondenza alle regole di filtro. Se sospetti che un intervento sia stato applicato in modo errato, puoi segnalare un problema tramite questo modello. Assicurati di aver acquisito un esempio del report sull'intervento e di avere un URL di esempio per riprodurre il problema.