Gli annunci che consumano una quantità sproporzionata di risorse su un dispositivo influiscono negativamente sull'esperienza dell'utente, dagli effetti evidenti del peggioramento delle prestazioni a conseguenze meno visibili come il consumo della batteria o l'utilizzo della larghezza di banda consentita. Questi annunci vanno da quelli attivamente dannosi, come i miner di criptovalute, a quelli con bug o problemi di prestazioni involontari.
Chrome imposta limiti alle risorse che un annuncio può utilizzare e lo scarica se i limiti vengono superati. Per maggiori dettagli, leggi l'annuncio sul blog di Chromium. Il meccanismo utilizzato per scaricare gli annunci è l'Heavy Ad Intervention.
Criteri per gli annunci intensivi
Un annuncio viene considerato pesante se l'utente non ha interagito con esso (ad esempio, non lo ha toccato o non ha 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 una finestra di 30 secondi
- Utilizza più di 4 megabyte di larghezza di banda di rete
Tutte le risorse utilizzate da eventuali iframe discendenti del frame dell'annuncio vengono conteggiate ai fini dei limiti di intervento sull'annuncio. È importante notare che i limiti di tempo del thread principale non sono gli stessi del tempo trascorso dal caricamento dell'annuncio. I limiti riguardano il tempo impiegato dalla CPU per eseguire il codice dell'annuncio.
Test dell'intervento
L'intervento è stato implementato in Chrome 85, ma per impostazione predefinita viene aggiunto un po' di rumore e variabilità alle soglie 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 limitazioni vengono applicate in modo deterministico, esclusivamente in base ai limiti. In questo modo, il debug e il test saranno più semplici.
Quando viene attivato l'intervento, dovresti vedere i contenuti nell'iframe per un annuncio pesante sostituito dal messaggio Annuncio rimosso. Se segui il link Dettagli incluso, vedrai un messaggio che spiega: "Questo annuncio usa troppe risorse per il tuo dispositivo, pertanto Chrome l'ha rimosso."
Puoi visualizzare 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 potrebbero impedire l'applicazione di un intervento.
- Il ricaricamento dello stesso annuncio all'interno della stessa pagina esenterà questa combinazione dall'intervento. In questo caso, può essere utile cancellare la cronologia di navigazione e aprire la pagina in un nuovo tag.
- Assicurati che la pagina rimanga in primo piano. Se la metti in background (passando a un'altra finestra), le code di attività per la pagina verranno sospese e non verrà attivato l'intervento della CPU.
- Assicurati di non toccare o fare clic sui contenuti degli annunci durante il test. L'intervento non verrà applicato ai contenuti che ricevono interazioni degli utenti.
Cosa occorre fare?
Sul tuo sito vengono pubblicati annunci di un fornitore terzo
Non è necessaria alcuna azione, tieni solo presente che gli utenti potrebbero vedere annunci che superano i limiti rimossi quando si trovano sul tuo sito.
Mostri 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 sugli annunci pesanti.
Crei contenuti dell'annuncio o gestisci uno strumento per la creazione di contenuti dell'annuncio
Continua a leggere per assicurarti di sapere come testare i tuoi contenuti per problemi di prestazioni e utilizzo delle risorse. Ti consigliamo di consultare anche le indicazioni delle piattaforme pubblicitarie di tua scelta, 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 integrare 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'API Reporting, il cui nome è appropriato, 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 JavaScript.
Questi report vengono attivati sull'iframe con tag annuncio principale e su tutti i relativi discendenti, ovvero ogni frame scaricato dall'intervento. Ciò significa che se un annuncio proviene da un'origine di terze parti, ad esempio un iframe cross-site, è responsabilità 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 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"
}
}]
L'API JavaScript fornisce a ReportingObserver un metodo observe()
che può essere utilizzato per attivare un callback fornito sugli interventi. Può essere
utile se vuoi allegare informazioni aggiuntive al report per facilitare il
debug.
// 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 un meccanismo di sicurezza per assicurarti che il report venga acquisito prima che la pagina scompaia 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 svolta al suo interno. Ad esempio, se provi a inviare una richiesta fetch() con i report, la richiesta verrà annullata.
Devi utilizzare navigator.sendBeacon() per inviare il report e anche in questo caso, si tratta solo di un tentativo del browser, non di una garanzia.
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',
},
},
];
Diagnostica della causa di un intervento
I contenuti degli annunci sono semplicemente contenuti web, quindi utilizza strumenti come Lighthouse per controllare il rendimento complessivo dei tuoi contenuti. I controlli risultanti forniscono indicazioni in linea sui miglioramenti. Puoi anche consultare la raccolta web.dev/fast.
Potrebbe essere utile testare l'annuncio in un contesto più isolato. Puoi utilizzare l'opzione URL personalizzato su https://heavy-ads.glitch.me per testare questa funzionalità con un iframe predefinito con tag annuncio. Puoi utilizzare Chrome DevTools per verificare che i contenuti siano stati taggati come annuncio. Nel riquadro Rendering (accessibile tramite il menu con tre punti ⋮, poi Altri strumenti > Rendering), seleziona "Evidenzia frame annuncio". Se testi contenuti nella finestra di primo livello o in un altro contesto in cui non sono taggati come annuncio, l'intervento non verrà attivato, ma puoi comunque controllare manualmente 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 di apertura <iframe>. Queste informazioni sono visibili anche nel
pannello Applicazione nella sezione Frame, dove i frame con tag annuncio
includeranno un attributo "Stato annuncio".
Utilizzo della rete
Visualizza il riquadro Rete in Chrome DevTools per vedere l'attività di rete complessiva dell'annuncio. Per ottenere risultati coerenti nei caricamenti ripetuti, assicurati che l'opzione "Disattiva cache" sia selezionata.
Il valore trasferito in fondo alla pagina mostra l'importo trasferito per l'intera pagina. Prendi in considerazione l'utilizzo dell'input Filtro in alto per limitare le richieste solo a quelle correlate all'annuncio.
Se trovi la richiesta iniziale dell'annuncio, ad esempio l'origine dell'iframe, puoi anche utilizzare la scheda Iniziatore all'interno della richiesta per visualizzare tutte le richieste che attiva.
Ordinare l'elenco complessivo delle richieste per dimensione è un buon modo per individuare 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 causare l'intervento, ma un numero elevato 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 la CPU il più possibile. Gli interventi per la CPU hanno molte più probabilità di attivarsi su dispositivi a bassa potenza rispetto a macchine di sviluppo di fascia alta.
Poi, fai clic sul pulsante Registra per iniziare a registrare l'attività. Ti consigliamo di sperimentare con la durata e il momento della registrazione, in quanto una traccia lunga può richiedere un po' di tempo per il caricamento. 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 scripting, rendering e disegno.
Esplora le schede Dal basso verso l'alto, Albero delle chiamate e Log eventi in basso. L'ordinamento di queste colonne per Tempo autonomo 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 pannello 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
Chrome contrassegna i contenuti come annuncio confrontando le richieste di risorse con un elenco di filtri. Se i contenuti non pubblicitari sono stati taggati, valuta la possibilità di modificare il codice per evitare di corrispondere alle regole di filtraggio. 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.