I siti editoriali vivono una contraddizione che nessun altro tipo di sito sperimenta con la stessa intensità. Il loro modello di business si regge in gran parte sulla pubblicità, che richiede script, aste in tempo reale, annunci che arrivano in ritardo e occupano spazio. Allo stesso tempo dipendono dal traffico organico e dai canali di Google come Discover e le notizie principali, dove l’esperienza della pagina conta, e da lettori che abbandonano rapidamente una pagina lenta o instabile. Ogni annuncio aggiunto porta ricavi e sottrae prestazioni.
Questa tensione non si risolve rinunciando alla pubblicità, ma gestendola bene. In questo articolo vediamo i problemi tipici delle Core Web Vitals nei siti di notizie, riviste e blog con molta pubblicità, e le soluzioni che permettono di tenere insieme ricavi ed esperienza di lettura: spazi pubblicitari che non spostano il testo, caricamento degli annunci al momento giusto, attenzione allo scorrimento infinito e misure che collegano le metriche ai ricavi.
Il CLS e gli spazi pubblicitari
Il problema più visibile, e quello che più spesso porta un sito editoriale fuori dalle soglie, è il CLS. Un annuncio pubblicitario arriva dopo il testo: la pagina viene disegnata, il lettore inizia a leggere, poi l’asta si conclude, l’annuncio viene caricato e spinge in basso tutto ciò che segue. Il lettore perde il punto in cui era arrivato, a volte tocca l’annuncio per errore. Su una pagina con cinque o sei spazi pubblicitari nel corpo dell’articolo, questi spostamenti si sommano rapidamente.
La soluzione è riservare lo spazio fin dall’inizio: ogni contenitore pubblicitario deve avere un’altezza minima pari al formato che vi compare più spesso. Il dato si ricava dai report del sistema pubblicitario, che indicano per ogni spazio la distribuzione dei formati serviti. Se uno spazio riceve formati diversi, per esempio 300×250 e 300×600, si riserva l’altezza del più frequente, accettando uno spostamento solo nei casi meno comuni, oppure si sceglie di limitare lo spazio ai formati di dimensioni simili. Un’etichetta «Pubblicità» e uno sfondo neutro nel contenitore rendono lo spazio vuoto comprensibile al lettore durante l’attesa.
.slot-pubblicita {
min-height: 250px; /* formato più frequente di questo spazio */
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
}
@media ( min-width: 1024px ) {
.slot-pubblicita--laterale {
min-height: 600px; /* su desktop lo spazio laterale serve formati alti */
}
}Resta da decidere cosa fare quando lo spazio non viene riempito, perché l’asta non ha prodotto un annuncio. Chiudere il contenitore vuoto genera uno spostamento; lasciarlo aperto lascia un buco. La scelta ragionevole dipende dalla posizione: gli spazi sopra o vicino alla porzione visibile è meglio lasciarli aperti, magari con un contenuto alternativo come una promozione interna; quelli molto più in basso possono essere chiusi prima che il lettore ci arrivi. I sistemi pubblicitari più diffusi offrono opzioni per gestire la chiusura degli spazi vuoti, da configurare con questa logica.
Alcuni formati sono intrinsecamente più problematici. Gli annunci che si espandono, i banner inseriti in cima alla pagina dopo il caricamento e i formati che si aprono tra i paragrafi spingono il contenuto per costruzione. Gli annunci ancorati in basso, con posizionamento fisso, e gli interstitial a tutto schermo non spostano il layout, ma i secondi hanno un impatto negativo sull’esperienza e Google li considera invadenti quando coprono il contenuto appena si arriva sulla pagina.
Il peso della pubblicità programmatica
Il secondo problema è il lavoro che la pubblicità richiede al browser. Nella pubblicità programmatica, prima di mostrare un annuncio si svolge un’asta a cui partecipano diversi acquirenti: ciascuno ha il proprio script, le proprie richieste di rete, i propri controlli. A questo si aggiungono gli script del sistema di gestione degli annunci, quelli di verifica della visibilità e della sicurezza, e il codice degli annunci stessi, a volte pesante. Su molti siti editoriali la pubblicità è la voce principale del lavoro del processore.
L’effetto si vede soprattutto sull’INP: gli script pubblicitari producono lunghi task sul main thread proprio mentre il lettore scorre, tocca un link o apre il menu. Ma incide anche sull’LCP, quando le risorse della pubblicità competono con l’immagine di apertura dell’articolo, e sul consumo di dati e batteria dei dispositivi mobili.
Le leve per ridurlo
- Meno partecipanti all’asta. Ogni acquirente aggiuntivo porta ricavi marginali decrescenti e costi di prestazione costanti. Analizzare quali partecipanti vincono davvero le aste permette spesso di eliminarne diversi senza perdite significative.
- Tempi massimi più brevi. L’asta ha un tempo massimo oltre il quale si procede con le offerte ricevute. Tempi lunghi aspettano acquirenti lenti a scapito di tutti; tempi più brevi riducono l’attesa con effetti spesso trascurabili sui ricavi.
- Caricamento differito degli annunci. Gli annunci in fondo all’articolo non devono essere richiesti all’apertura della pagina. I principali sistemi di gestione degli annunci permettono di richiederli quando lo spazio si avvicina alla parte visibile, con benefici anche sulla visibilità misurata e quindi sul valore degli annunci stessi.
- Ricaricamento con moderazione. Ricaricare gli annunci dopo un certo tempo aumenta le impressioni, ma ripete tutto il lavoro dell’asta mentre l’utente legge. Va limitato agli spazi effettivamente visibili e con intervalli ragionevoli.
- Script nel momento giusto. Il codice pubblicitario va caricato in modo asincrono e dopo le risorse critiche dell’articolo, mai in modo da bloccare il rendering del testo.
L’immagine di apertura e l’LCP
Negli articoli l’elemento LCP è quasi sempre l’immagine di apertura o, in sua assenza, il titolo. Le regole sono quelle generali: immagine nell’HTML con priorità alta, nessun caricamento differito, dimensioni e formati corretti, come spiegato nell’articolo sul lazy loading. Nei siti editoriali si aggiungono due insidie ricorrenti. La prima sono i banner in cima alla pagina, sopra il titolo, che possono diventare essi stessi l’elemento più grande o spingere l’articolo fuori dalla parte visibile. La seconda sono i sistemi di abbonamento e i muri di pagamento, che a volte nascondono il contenuto per poi mostrarlo dopo una verifica via JavaScript, ritardando il disegno del testo.
Lo scorrimento infinito degli articoli
Molti siti di notizie, alla fine di un articolo, caricano automaticamente l’articolo successivo, e poi un altro, cambiando l’indirizzo nella barra del browser. L’obiettivo è aumentare le pagine viste e le impressioni pubblicitarie. Dal punto di vista delle prestazioni, però, questo modello si comporta come una Single Page Application: la pagina continua a crescere, con decine di immagini e spazi pubblicitari in memoria; CLS e INP si accumulano su tutta la sessione e vengono attribuiti al primo articolo; ogni nuovo articolo porta con sé nuove aste e nuovi script. Dopo qualche articolo, sugli smartphone meno potenti lo scorrimento diventa lento e le interazioni faticose.
Un’alternativa è proporre in fondo all’articolo una selezione di letture correlate come normali link, e rendere istantaneo il passaggio con le Speculation Rules: ogni articolo resta una pagina a sé, con metriche misurate correttamente e memoria liberata a ogni navigazione, e il lettore ha comunque la sensazione di una lettura continua. Se lo scorrimento infinito viene mantenuto, conviene almeno limitare il numero di articoli caricati di seguito e rimuovere dal documento quelli già letti.
AMP e dopo
Per anni molti editori hanno pubblicato versioni AMP dei propri articoli, anche perché erano necessarie per comparire in alcune sezioni dei risultati di ricerca dedicate alle notizie. Dal 2021 questo requisito non esiste più: le pagine normali possono comparire in quegli spazi, e l’esperienza della pagina viene valutata con le stesse Core Web Vitals. Molti editori hanno abbandonato AMP per concentrarsi su un’unica versione del sito, veloce per tutti. È la strada più sostenibile: una sola versione da mantenere, ottimizzata con le tecniche descritte in questo articolo, invece di due con compromessi diversi.
Commenti, post incorporati e video
Oltre alla pubblicità, gli articoli contengono spesso elementi esterni: post dei social incorporati per citare una dichiarazione, video dei servizi di condivisione, sistemi di commenti di terze parti, sondaggi. Ognuno porta con sé il proprio JavaScript e, spesso, un’altezza che cambia quando il contenuto arriva. Le soluzioni sono quelle già viste per gli iframe di terze parti e per i video: facciate che caricano il contenuto al clic, spazio riservato, caricamento differito. Per i post dei social, una citazione in HTML con un link all’originale conserva il valore giornalistico senza il peso del widget; per i commenti, caricare il sistema solo quando il lettore arriva in fondo all’articolo, o al clic su un pulsante, evita di farne pagare il costo a chi non li legge.
Un esempio
Una rivista online con traffico prevalentemente da mobile ha un CLS al 75° percentile di 0,32 e un INP di 380 millisecondi sugli articoli. L’analisi mostra sei spazi pubblicitari nel corpo senza altezza riservata, un banner in cima che compare dopo il titolo, una dozzina di partecipanti all’asta con un tempo massimo di tre secondi e annunci ricaricati ogni trenta secondi anche fuori dalla parte visibile. Gli interventi riservano l’altezza di ogni spazio in base ai report dei formati, spostano il banner superiore sotto il titolo con spazio riservato, riducono i partecipanti ai sei più redditizi con un tempo massimo di un secondo e mezzo, attivano il caricamento differito degli annunci e limitano il ricaricamento agli spazi visibili. Dopo un mese il CLS scende a 0,05 e l’INP sotto i 200 millisecondi; le impressioni visibili aumentano e i ricavi per sessione restano sostanzialmente invariati, con più pagine viste per visita.
Misurare ricavi ed esperienza insieme
Il modo più efficace per uscire dalla contrapposizione tra pubblicità e prestazioni è misurare entrambe con gli stessi dati. Un sistema di Real User Monitoring, collegato agli analytics e ai dati pubblicitari, permette di vedere per ogni modello di pagina le Core Web Vitals, le pagine viste per sessione, il tempo di lettura e i ricavi per sessione. Spesso emerge che le sessioni con pagine più veloci e stabili producono più pagine viste e più impressioni visibili, compensando in parte o del tutto la riduzione degli spazi o dei partecipanti all’asta.
Il metodo più rigoroso è un test controllato: a una parte dei lettori si serve una configurazione pubblicitaria più leggera, per esempio con meno spazi o meno partecipanti all’asta, e si confrontano ricavi per sessione, pagine viste e metriche con quelli della configurazione attuale. Un test di qualche settimana dà una risposta basata sui propri dati, molto più convincente di qualsiasi stima esterna, come abbiamo visto parlando del ritorno economico delle prestazioni.
In sintesi
Nei siti editoriali le Core Web Vitals sono messe alla prova soprattutto dalla pubblicità: annunci che arrivano in ritardo e spostano il testo, aste e script che occupano il processore, banner che competono con l’immagine di apertura. A questi si aggiungono lo scorrimento infinito, che accumula lavoro e memoria, e i muri di pagamento che ritardano il contenuto.
Le soluzioni permettono di conservare i ricavi: spazio riservato per ogni annuncio con l’altezza del formato più frequente, meno partecipanti alle aste e tempi massimi più brevi, annunci caricati quando stanno per diventare visibili, ricaricamenti moderati, articoli come pagine separate con prerender invece dello scorrimento infinito. E soprattutto misure che mettano insieme esperienza e ricavi, perché la decisione su quanta pubblicità sia sostenibile si prenda sui dati e non sulle impressioni.
