Gli annunci che consumano una quantità sproporzionata di risorse su un dispositivo influiscono negativamente sull'esperienza dell'utente, dagli evidenti effetti del deterioramento del rendimento alle conseguenze meno visibili, come l'esaurimento della batteria o l'ingente quantità di larghezza di banda. Questi annunci spaziano da quelli attivamente dannosi, come i miner di criptovalute, a contenuti originali con bug involontari o problemi di prestazioni.
Chrome imposta dei limiti sulle risorse che un annuncio può utilizzare e annulla il caricamento dell'annuncio se questi limiti vengono superati. Per ulteriori dettagli, puoi leggere l'annuncio sul blog di Chromium. Il meccanismo utilizzato per l'unload degli annunci è l'intervento sugli annunci intensivi.
Criteri relativi agli annunci intensivi
Un annuncio è considerato pesante se l'utente non ha interagito con esso (ad esempio, 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 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 nei limiti per intervenire sull'annuncio. È importante notare che i limiti del tempo del thread principale non corrispondono al tempo trascorso dal caricamento dell'annuncio. I limiti riguardano il tempo impiegato dalla CPU per eseguire il codice dell'annuncio.
Testare l'intervento
L'intervento è stato fornito in Chrome 85, ma per impostazione predefinita vengono aggiunti rumore e variabilità alle soglie per proteggere la privacy dell'utente.
Se il criterio chrome://flags/#heavy-ad-privacy-mitigations viene impostato su Disabled, queste protezioni vengono rimosse, il che significa che le limitazioni vengono applicate in modo deterministico, puramente in base ai limiti. Ciò dovrebbe semplificare il debug e i test.
Quando viene attivato l'intervento, dovresti vedere i contenuti nell'iframe di un annuncio pesante sostituito con un messaggio Annuncio rimosso. Se segui il link Dettagli incluso, viene visualizzato il messaggio che spiega: "Questo annuncio utilizza troppe risorse per il tuo dispositivo, pertanto Chrome lo ha rimosso.".
Puoi vedere l'intervento applicato a contenuti di esempio su heavy-ads.glitch.me. Puoi anche utilizzare questo sito di test per caricare un URL arbitrario al fine di testare rapidamente i tuoi contenuti.
Durante il test, tieni presente che ci sono una serie di motivi che possono impedire l'applicazione di un intervento.
- Se ricarichi lo stesso annuncio nella stessa pagina, la combinazione verrà esclusa dall'intervento. Cancellare la cronologia di navigazione e aprire la pagina in un nuovo tag può essere d'aiuto.
- Assicurati che la pagina rimanga attiva: il background della pagina (passando a un'altra finestra) mette in pausa le code di attività per la pagina e quindi non attiva l'intervento della CPU.
- Assicurati di non toccare o fare clic sul contenuto dell'annuncio durante il test; l'intervento non verrà applicato ai contenuti che ricevono interazioni da parte dell'utente.
Cosa occorre fare?
Pubblichi annunci di un fornitore di terze parti sul tuo sito
Non è necessario alcun intervento, 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 display di terze parti
Continua a leggere per assicurarti di implementare il monitoraggio necessario tramite l'API di reporting per gli interventi relativi agli annunci intensivi.
Crei il contenuto dell'annuncio o gestisci uno strumento per creare il contenuto dell'annuncio
Continua a leggere per assicurarti di essere a conoscenza di come testare i tuoi contenuti per individuare problemi di prestazioni e utilizzo delle risorse. Ti consigliamo inoltre di fare riferimento alle indicazioni presenti sulle piattaforme pubblicitarie di tua scelta, in quanto potrebbero fornire ulteriori limitazioni o consigli tecnici. Ad esempio, consulta le linee guida di Google per le creatività display. Potresti creare soglie configurabili direttamente negli strumenti di creazione per evitare che annunci a scarso rendimento escano dall'annuncio.
Che cosa succede quando un annuncio viene rimosso?
Un intervento in Chrome viene segnalato tramite l'API di reporting correttamente denominata 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 di JavaScript.
Questi report vengono attivati sull'iframe principale con tag annuncio 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 tra siti, la gestione del report spetta alla terza parte (ad esempio il fornitore di annunci).
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 all'oggetto ReportingObserver un metodo observe()
che può essere utilizzato per attivare un callback fornito in caso di intervento. Questo 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 una protezione contro gli errori per garantire che il report venga acquisito definitivamente prima che la pagina venga cancellata completamente, ad esempio un annuncio all'interno di un iframe. Per farlo, 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, il tentativo di inviare una richiesta fetch() con i report ne comporterà l'annullamento.
Dovresti utilizzare navigator.sendBeacon() per inviare il report e, anche in questo caso, non è garantito che questo sia garantito dal browser.
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',
},
},
];
Diagnosi della causa di un intervento
Poiché i contenuti degli annunci sono solo contenuti web, utilizza strumenti come Lighthouse per verificare il rendimento complessivo dei tuoi contenuti. I controlli risultanti forniscono indicazioni incorporate sui miglioramenti. Puoi anche fare riferimento alla 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 verificarlo con un iframe con tag annuncio già pronto. 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 "Evidenzia frame degli annunci". Se stai testando i contenuti nella finestra di primo livello o in un altro contesto in cui non sono taggati come annunci, l'intervento non verrà attivato, ma puoi comunque controllare manualmente le soglie.
Lo stato dell'annuncio di un frame viene visualizzato anche nel riquadro Elementi, in cui viene aggiunta un'annotazione ad dopo il tag <iframe> di apertura. È visibile anche nel riquadro Applicazione nella sezione Frame, dove i frame con tag degli annunci includeranno un attributo "Stato annunci".
Utilizzo della rete
Apri il riquadro Rete in Chrome DevTools per visualizzare l'attività di rete complessiva per l'annuncio. Assicurati che l'opzione "Disabilita cache" sia selezionata per ottenere risultati coerenti sui caricamenti ripetuti.
Il valore trasferito nella parte inferiore della pagina mostrerà l'importo trasferito per l'intera pagina. Valuta la possibilità di utilizzare l'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 Initiator 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 troppo grandi. Le cause più comuni sono immagini e video non 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 ad attivare l'intervento, ma un numero elevato di richieste ripetute che superano in modo incrementale il limite.
Utilizzo CPU
Il riquadro Prestazioni in DevTools aiuterà a diagnosticare i problemi di utilizzo della CPU. Per prima cosa, apri il menu Impostazioni acquisizione. Utilizza il menu a discesa CPU per rallentare il più possibile la CPU. Gli interventi per la CPU hanno molte più probabilità di attivarsi su dispositivi con potenza inferiore rispetto alle macchine di sviluppo di fascia alta.
Quindi, fai clic sul pulsante Registra per iniziare a registrare l'attività. Ti consigliamo di sperimentare quando e per quanto tempo eseguire la registrazione, poiché il caricamento di una traccia lunga può richiedere un po' di tempo. Dopo aver caricato la registrazione, puoi utilizzare la sequenza temporale in alto per selezionare una parte della registrazione. Concentrati sulle aree del grafico di colore giallo, viola o verde a tinta unita che rappresentano scripting, rendering e disegno.
Esplora le schede Dal basso verso l'alto, Struttura ad albero delle chiamate e Log eventi in basso. Ordinando queste colonne per Tempo autonomo e Tempo totale, puoi identificare più facilmente i colli di bottiglia nel codice.
Qui troverai anche un link al file di origine associato, che potrai seguire nel riquadro Origini per esaminare il costo di ogni riga.
I problemi più comuni da cercare sono le animazioni poco ottimizzate che attivano operazioni di layout continuo e colorazione o costose operazioni nascoste all'interno di una libreria inclusa.
Come segnalare interventi errati
Chrome tagga i contenuti come annunci abbinando le richieste di risorse a un elenco di filtri. Se sono stati taggati contenuti non pubblicitari, ti consigliamo di modificare il codice per evitare la corrispondenza con le regole di filtro. Se sospetti che un intervento sia stato applicato erroneamente, puoi segnalare un problema tramite questo modello. Assicurati di aver acquisito un esempio del report di intervento e di avere un URL di esempio per riprodurre il problema.