Annunci e Core Web Vitals: convivere senza perdere velocità

Google avvisa che il tuo sito è lento e il sospetto ricade sulla pubblicità. A volte a ragione, a volte no. Ecco cosa misura ogni metrica, quale parte del problema è davvero degli annunci e cosa si può sistemare senza rinunciare ai ricavi.

Cosa misura Google quando dice che il tuo sito è lento

Core Web Vitals è l'insieme di metriche con cui Google riassume l'esperienza reale dei tuoi lettori. Non sono un voto di laboratorio: si calcolano con i dati di navigazione di chi ha aperto le tue pagine, e il valore pubblicato è il 75esimo percentile, il valore sotto il quale ricadono tre visite su quattro.

Sono tre. LCP (Largest Contentful Paint) misura quanto tempo impiega ad apparire il contenuto principale. CLS (Cumulative Layout Shift, spostamento cumulativo del layout) misura quanto la pagina si muove da sola mentre carica. INP (Interaction to Next Paint) misura quanto ci mette a rispondere quando qualcuno tocca qualcosa. Tutte e tre hanno una soglia pubblica di Google per essere considerate buone.

LCP: quanto ci mette ad apparire ciò per cui il lettore è venuto

L'LCP segna il momento in cui finisce di essere disegnato l'elemento visibile più grande della prima schermata: di solito l'immagine di testata o il titolo. Google considera buono un LCP di 2,5 secondi o meno, da migliorare fino a 4 e scarso oltre. Si misura da quando l'utente chiede la pagina, non da quando il tuo server risponde.

La pubblicità è raramente la colpevole diretta di un LCP scarso: il creativo non è quasi mai l'elemento più grande della prima schermata. Lo è in modo indiretto. Se il browser è occupato a scaricare ed eseguire librerie pubblicitarie, ci mette di più ad arrivare alla tua immagine principale. Niente dello stack pubblicitario dovrebbe competere per la banda con la risorsa che definisce il tuo LCP.

CLS: il salto che fa sbagliare il clic

Il CLS non si misura in secondi, ma con un punteggio senza unità che combina quanta superficie dello schermo si muove e quanta distanza percorre. Google considera buono un CLS di 0,1 o meno, da migliorare fino a 0,25 e scarso oltre. Zero è raggiungibile, ed è l'obiettivo ragionevole per una pagina di contenuto.

È la metrica più facile da capire perché l'ha subita chiunque: stai leggendo, qualcosa carica sopra, il testo scende di colpo e perdi la riga. O peggio: stai per toccare un link e in quell'istante compare un blocco che lo spinge verso il basso, così tocchi altro. Uno spostamento subito dopo un'interazione dell'utente non conta; quello che avviene da solo, sì.

Perché la pubblicità è la solita sospettata del CLS

Perché uno spazio pubblicitario, così com'è implementato di default, è una scatola che non ha dimensione finché l'asta non finisce. Il browser disegna la pagina con lo spazio ad altezza zero, arriva la risposta, il creativo è alto 250 pixel e tutto quello che stava sotto scende di 250 pixel. Ripetuto su cinque spazi, il CLS schizza. Gli schemi più frequenti:

• Spazi senza altezza riservata, che passano da zero alla dimensione finale quando arriva l'annuncio.
• Spazi multiformato in cui non si sa quale altezza arriverà.
• Annunci inseriti tra i paragrafi quando la pagina è già disegnata.
• Contenitori che collassano con l'asta vuota e poi vengono riempiti con un ripiego.
• Barre fisse che spingono il contenuto invece di sovrapporsi ad esso.

Riservare lo spazio prima che arrivi l'annuncio

La soluzione è noiosa e funziona: dare al contenitore la sua altezza prima di chiedere qualsiasi cosa. Se lo spazio servirà un 300x250, occupa già 250 pixel di altezza dal primo disegno, con uno sfondo neutro. Arrivi quel che arrivi, niente si muove. In CSS si ottiene con min-height o aspect-ratio, e conviene dichiarare altezze diverse per breakpoint.

Se uno spazio ammette più dimensioni, riserva l'altezza della più grande fra quelle che servi davvero, oppure riduci l'elenco perché la differenza resti piccola. E per l'asta vuota decidi prima: o il contenitore mantiene sempre la sua altezza, o collassa, ma non collassa dopo essere stato aperto. Gli spazi sopra la piega sono quelli che puniscono di più.

Riservare lo spazio non toglie ricavi a nessuno: l'annuncio viene servito lo stesso, solo senza spingere il testo.

INP e il costo reale degli script pubblicitari

L'INP ha sostituito il vecchio FID (First Input Delay) e misura qualcosa di più onesto: fra tutte le interazioni della visita, quanto ci mette la pagina a mostrare una risposta visibile. Google considera buono 200 millisecondi o meno, da migliorare fino a 500 e scarso oltre. Qui la pubblicità pesa in modo diretto.

Uno stack moderno carica la libreria dell'ad server, un wrapper di header bidding e un adattatore per ogni partner di domanda. Tutto questo è JavaScript che gira sullo stesso thread principale che gestisce i tocchi dell'utente. Mentre quel thread risolve un'asta, il menu non si apre. Da sorvegliare non è quanti partner hai, ma quanto thread principale consumano nel loro insieme.

Caricare in modo asincrono: cosa risolve e cosa no

Uno script normale blocca: il browser si ferma, lo scarica, lo esegue e solo allora continua a costruire la pagina. Con async lo scarica in parallelo e lo esegue appena è pronto, senza frenare l'analisi dell'HTML. Con defer aspetta anche che il documento sia completo. Qualsiasi tag pubblicitario dovrebbe essere async.

Ma conviene capire il limite: async evita il blocco del download, non il costo dell'esecuzione. Lo script continua a consumare thread principale quando arriva il suo turno, e può ancora muovere il layout se lo spazio non ha altezza riservata. Asincrono è il punto di partenza, non la soluzione completa.

Lazy loading: non chiedere ciò che nessuno ha ancora guardato

Un articolo lungo può avere sei o sette spazi, ma il lettore ne vede solo uno o due prima di decidere se restare. Chiederli tutti insieme moltiplica le richieste, allunga l'asta e occupa il thread principale per niente. Il caricamento differito fa partire la richiesta di ogni spazio solo quando si avvicina all'area visibile.

Il margine di anticipo è ciò che va calibrato. Troppo corto e l'annuncio arriva quando lo spazio è già passato, il che abbassa la visibilità. Troppo lungo e torni a caricare tutto. Un punto di partenza comune è chiedere quando lo spazio è a una schermata di distanza. Gli spazi della prima schermata non si differiscono mai.

Quanti spazi regge una pagina

La tentazione quando i ricavi calano è aggiungere uno spazio in più. Ogni spazio nuovo somma richieste, tempo d'asta e lavoro di thread principale, e ripartisce la stessa attenzione fra più unità. Allo stesso tempo la pagina risponde peggio, e il lettore che se ne va non arriva a caricare nessuna impressione.

L'esercizio utile è guardare ogni spazio separatamente: che visibilità ha, che ricavo porta e quanto costa alla pagina. Quasi sempre ne saltano fuori uno o due che fatturano appena e sporcano le metriche. Toglierli di solito conviene più che aggiungere l'ottavo.

Il riassunto è corto: riserva l'altezza di tutti gli spazi, carica i tag in modo asincrono, differisci ciò che sta sotto la piega e rivedi ogni posizione per quello che apporta davvero. Pubblicità e pagina veloce non sono incompatibili; è incompatibile un'implementazione pubblicitaria che nessuno ha rivisto.