In che modo l'impegno per i Segnali web essenziali ha aumentato del 18% le entrate pubblicitarie di Netzwelt

Il nuovo sito web registra inoltre una visibilità degli annunci superiore al 75%, una riduzione della frequenza di rimbalzo del 50% e un aumento delle visualizzazioni di pagina del 27%.

Martin Schierle

Quando Google ha annunciato l'iniziativa Segnali web essenziali, il publisher tedesco Netzwelt ha realizzato rapidamente il potenziale di queste nuove metriche, per un'esperienza sulle pagine eccezionale e una migliore monetizzazione basata sulla pubblicità. Ha quindi ripreso il sito web, applicando best practice comuni sul rendimento e ottimizzando parallelamente tag annuncio e posizionamenti. L'impegno a garantire un'ottima esperienza utente e pagine veloci si è rivelato un modo per ottimizzare il coinvolgimento e le entrate pubblicitarie di pari passo, con un aumento delle visualizzazioni di pagina del 27%, della visibilità degli annunci di oltre il 75% e un miglioramento delle entrate pubblicitarie del 18%.

La sfida

Come molti altri editori giornalistici, NetzWelt ha faticato a trovare il giusto equilibrio tra l'ottimizzazione dell'esperienza utente e della velocità delle pagine, mantenendo al contempo elevate entrate pubblicitarie. Le principali sfide incontrate sono state:

• Cumulative Layout Shift (CLS) elevato a causa delle variazioni di layout attivate dagli annunci, in particolare da aree con più dimensioni e banner in alto.
• La funzionalità Largest Contentful Paint (LCP) è in ritardo perché gli annunci sono la pittura più grande o perché utilizzano la larghezza di banda per il caricamento delle immagini hero.
• First Input Delay (FID) elevato causato da JavaScript di terze parti necessario per la pubblicità, le offerte su intestazioni e altri scopi.
• Effetti collaterali dei Segnali web essenziali delle finestre di dialogo per il consenso controllate da fornitori di terze parti, che si sono aggiunti anche alle variazioni del layout e potrebbero essere rilevati come versioni più recenti in ritardo.

Ottimizzare un sito web di notizie per Core Web Vitals

Quando Netzwelt ha iniziato a lavorare ai Core Web Vitals, ha notato rapidamente che l'ottimizzazione di Core Web Vitals non deve influire negativamente sulla pubblicità, ma può essere utilizzata come opportunità per migliorare la visibilità degli annunci. Pertanto, il team di Netzwelt ha ottimizzato i Segnali web essenziali in modo da aumentare la visibilità degli annunci oltre il 75% e attirare pubblicità di maggior valore (la media globale per gli annunci display è inferiore al 50%).

Ottimizzazione CLS

Gli annunci vengono spesso caricati in ritardo (a volte consapevolmente tramite il caricamento lento) e le loro dimensioni reali spesso non sono note in anticipo a causa di posizionamenti degli annunci flessibili e di più dimensioni.

Il problema può essere suddiviso in due annunci: above the fold e below the fold.

Gli annunci above the fold possono causare notevoli salti del layout a causa del ritardo di caricamento con dimensioni sconosciute. Bloccare lo spazio più grande di cui potrebbero avere bisogno può portare a un'esperienza utente negativa, mentre chiedere agli inserzionisti di utilizzare dimensioni fisse può ridurre le entrate pubblicitarie. Netzwelt ha risolto questo problema rendendo persistente l'annuncio superiore e rimuovendo alcune delle dimensioni dei banner più grandi consentite. L'annuncio sovrapposto evita l'attivazione di salti nel layout per annunci di dimensioni diverse. Sebbene le dimensioni idonee ridotte influiscano sulle vendite di annunci, maggiore è la visibilità che contrasta facilmente questo problema.

I dati storici e i test A/B hanno aiutato Netzwelt a trovare la giusta dimensione e il giusto posizionamento per diversi dispositivi e dimensioni degli schermi, nonché per le regole multimediali CSS utilizzate per prenotare spazio.

Gli annunci below the fold offrono un margine di miglioramento significativo:

• Un banner che non viene visto, ma caricato determina una scarsa visibilità dell'annuncio e peggiora l'esperienza sulle pagine.
• Un banner che viene caricato nel momento in cui un utente vi scorre sopra può introdurre ulteriori salti di contenuti.

Per mantenere una buona esperienza sulle pagine e un'elevata visibilità degli annunci, Netflix ha implementato il caricamento lento e ha riservato spazio per le dimensioni del minimo comune denominatore. In una zona a più dimensioni, i banner richiesti nelle dimensioni da 300 x 250 a 300 x 600, con altezza riservata 250 px. In questo modo, sono state eliminate le modifiche al layout per le dimensioni più piccole e le ridotte drasticamente per i banner più grandi. Questo approccio non è ottimale, ma è un inizio e un buon compromesso.

Per ottimizzare ulteriormente, Netzwelt ha utilizzato Intersection Observationr e l' API Network Information per controllare il posizionamento degli annunci e ridurre le variazioni del layout. Vengono utilizzate diverse posizioni degli annunci e strategie di caricamento lento a seconda della posizione di scorrimento e della qualità della connessione di rete; inoltre, gli annunci possono essere modificati da più dimensioni a dimensioni fisse. Lo scopo dell'algoritmo è sempre quello di massimizzare la visibilità degli annunci riducendo al minimo le variazioni del layout. I browser che non supportano l'API NetworkInfo utilizzano un valore proxy basato su una combinazione di dispositivo e tipo di rete IP derivato. Questa strategia di caricamento adattivo riduce in particolare la metrica CLS per gli utenti con connessioni a internet lente.

Ottimizzazione FID

First Input Delay potrebbe sembrare un problema per gli editori giornalistici, in quanto la pubblicità spesso ha molte librerie JavaScript aggiuntive. Sembra che ci sia un impatto negativo sull'analisi di dati di laboratorio come Lighthouse. Tuttavia, esaminando i dati sul campo nell'Almanacco web del 2020, molti siti web hanno una risposta sufficientemente rapida. In parte ciò è dovuto al caricamento in ritardo di JavaScript (dopo il primo input), alla buona memorizzazione nella cache (ad esempio al trattamento della cache del codice v8) o alla buona ottimizzazione da parte dei fornitori di annunci. I tracker di visibilità dei fornitori fanno in modo di evitare attività lunghe, quindi anche quando la somma del tempo di esecuzione è lunga, il Tempo di blocco totale (TBT) e il FID non subiranno modifiche. Sebbene il FID non sia stato un grosso problema per Netzwelt, dovevano comunque effettuare alcune ottimizzazioni:

• Ridurre i fornitori e gli script degli annunci, concentrandosi su un'unica pila, se possibile.
• Caricamento di tutti gli script con differita o asincrona.
• Utilizzo di webpack o di tecnologie simili per il treehaking e la separazione.
• Utilizzo di semplici regole CSS, simili a BEM.
• Evitando le attività di lunga durata e utilizzando il pattern inattivo fino al momento urgente.
• Lavorare con RequestAnimationFrame ovunque sia interessato il layout.

Ottimizzazione dell'LCP

La metrica Largest Contentful Paint può essere influenzata dagli annunci in due modi: riconoscendo esplicitamente un annuncio come visualizzazione più grande e, indirettamente, congestionando la larghezza di banda della rete o influenzando il percorso critico in modo che la visualizzazione più grande effettiva (ad esempio un'immagine hero) non venga caricata abbastanza velocemente.

Netzwelt aveva già rimosso gli annunci rettangolari medi dalle aree annuncio superiori durante l'ottimizzazione per il CLS. Questo comportava l'ulteriore vantaggio di non avere più accesso agli annunci.

Netzwelt segue una rigida norma che dà priorità ai contenuti rispetto agli annunci. Netzwelt ha dato la priorità alle immagini e ai caratteri hero utilizzati above the fold e ha ottimizzato il percorso critico in modo che avesse la precedenza sugli script pubblicitari e sugli annunci. Questa priorità ha consentito a LCP di non essere interessato dagli annunci.

Oltre a queste ottimizzazioni, Netzwelt ha seguito altre best practice:

• Separa il codice CSS per il percorso di rendering critico e inseriscilo nell'intestazione.
• I caratteri, gli script e le immagini più importanti sono stati precaricati.
• Evita il caricamento lento delle immagini above the fold.
• font-display="swap" in uso.

Consenso GDPR e Segnali web essenziali

Le finestre di dialogo per il consenso spesso hanno un impatto negativo sui Segnali web essenziali. Come per gli annunci, ci sono due modi in cui una finestra di dialogo per il consenso può influenzare i Segnali web essenziali:

• Indica esplicitamente se viene rilevata come l'immagine più grande o se causa variazioni del layout.
• Implicito, sottraendo larghezza di banda dal rendering più grande, bloccando il percorso critico verso il rendering più grande o ritardando l'attivazione del consenso, il che può, a sua volta, attivare variazioni del layout.

Netzwelt collabora con un fornitore di consenso di terze parti, che ha anche implementato le ottimizzazioni. Il primo Netzwelt si è assicurato di evitare le insidie semplici:

• Gli script relativi al consenso vengono caricati in modo asincrono, in modo da non bloccare le risorse critiche.
• Il consenso è formattato in modo che gli elementi di grandi dimensioni non siano idonei come l'elemento più grande nella metrica LCP.
• L'overlay del consenso utilizza position: fixed per evitare variazioni.
• Sebbene gli annunci vengano mostrati solo dopo aver ricevuto il consenso, viene conservato in anticipo uno spazio vuoto sufficiente per evitare variazioni del layout durante il caricamento degli annunci.
• Assicurati che la visualizzazione e il posizionamento della finestra di dialogo per il consenso non attivi variazioni del layout. Un problema rilevato e risolto qui è stata l'opzione di blocco dello scorrimento del fornitore di servizi, che disattivava lo scorrimento durante la visualizzazione del consenso spostando il contenuto principale dell'articolo sullo scorrimento, causando variazioni del layout.

Al termine di questo lavoro, sono ancora presenti notevoli discrepanze tra la CLS sul campo e quella del lab. Mentre il CLS del lab era vicino allo zero, i valori dei campi erano significativamente al di sopra delle soglie. Dopo l'indagine, la causa è stata una variazione del layout all'interno dell'iframe del consenso, che al momento vengono acquisiti correttamente solo nei dati dei campi. Netzwelt continua a collaborare con il fornitore del consenso di terze parti per migliorare questo problema.

Modelli di abbonamento alle notizie e Segnali web essenziali

Gli editori giornalistici stanno passando a modelli di abbonamento per finanziare il giornalismo. Questo modello è pertinente per i Segnali web essenziali, in quanto le persone non si abbonano a siti web con un'esperienza utente scadente. Inoltre, gli abbonati non si aspettano di vedere annunci nei contenuti a pagamento, ma nasconderli potrebbe causare variazioni del layout. Il sito web deve verificare se gli utenti hanno il diritto di visualizzare i contenuti e se pubblicare annunci. Questi controlli potrebbero causare ulteriori latenze, con conseguenti variazioni dei contenuti o un'esperienza utente scadente.

Netzwelt usa un modello in cui i contenuti sono sempre senza costi, ma gli abbonati non visualizzano gli annunci. Hanno esaminato diversi modi per eseguire query e archiviare i diritti per ridurre le latenze e le variazioni del layout.

Una query iniziale del diritto causava sempre latenze; pertanto, se l'esecuzione di query sui diritti richiede troppo tempo, il sito mostrerà l'ultimo stato memorizzato nella cache. Per i nuovi abbonati, significa un piccolo rischio che un utente pagante visualizzi gli annunci una sola volta. Gli utenti che terminano un abbonamento potrebbero visualizzare un caricamento senza annunci prima dell'aggiornamento dei diritti archiviati localmente. Una volta noti, i diritti vengono archiviati localmente utilizzando l'API LocalStorage, per evitare ulteriori latenze e variazioni del layout durante la navigazione futura.

Risultati dell'ottimizzazione

I risultati delle ottimizzazioni di Netzwelt parlano da soli. Il suo punteggio PageSpeed Insights non ha rivali tra gli editori giornalistici di tutto il mondo:

Le ottimizzazioni hanno migliorato l'esperienza sulle pagine, ma sono state effettuate in funzione dell'attività, migliorando l'esperienza pubblicitaria, la visibilità degli annunci e le entrate. Dopo il riavvio della pagina ottimizzata, Netzwelt ha registrato un aumento del CPM del 20-30%, con una visibilità dell'annuncio superiore al 75%. Tuttavia, Netzwelt presuppone che l'aumento complessivo delle entrate sia ancora più elevato. Il traffico è aumentato dal riavvio, probabilmente generato da un maggiore coinvolgimento degli utenti e da una frequenza di rimbalzo inferiore dovuta a una migliore UX. Questi effetti sono difficili da quantificare e da definire in una relazione causale con il rilancio, poiché il traffico varia naturalmente. Inoltre, ci sono anche effetti della pandemia globale. Questi effetti indiretti sono uno dei motivi per cui Netzwelt considera sempre tutti i numeri quando esamina il sito, non solo il CPM, che potrebbe essere fuorviante. Le metriche UX e i Segnali web essenziali, insieme a tutte le metriche relative agli annunci, forniscono un quadro reale.

Uno sguardo al futuro

Netzwelt ritiene che, in un futuro senza cookie di terze parti, il targeting contestuale tramite i contenuti, combinato con una buona esperienza utente ed esperienza sulle pagine (compresa la visibilità degli annunci), sia la chiave del successo di un editore giornalistico.

Per questo motivo Netzwelt non si ferma ai Segnali web essenziali, ma si impegna ulteriormente implementando molte funzionalità web moderne come le app web progressive (PWA), i contenuti offline, la modalità Buio, l'API Web Share e le attività web attendibili (TWA) utilizzando la nuova API Digital Goods.