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

Il sito web rilanciato ha anche una visibilità degli annunci superiore al 75%, una riduzione delle frequenze di rimbalzo del 50% e un aumento delle visualizzazioni di pagina del 27%.

Martin Schierle

Quando Google ha annunciato l'iniziativa Core Web Vitals, il publisher tedesco Netzwelt ha subito intuito il potenziale di queste nuove metriche per offrire un'esperienza sulle pagine eccellente e migliorare la monetizzazione basata sulla pubblicità. Ha intrapreso un percorso per riavviare il proprio sito web, applicare best practice comuni per il rendimento e ottimizzare contemporaneamente i tag annuncio e i posizionamenti. L'impegno per un'esperienza utente eccezionale e pagine veloci si è dimostrato un percorso per ottimizzare il coinvolgimento e le entrate pubblicitarie, con un aumento delle visualizzazioni di pagina del 27%, una visibilità degli annunci superiore al 75% e un miglioramento delle entrate pubblicitarie del 18%.

La sfida

Come molti altri editori di notizie, Netzwelt ha faticato a trovare il giusto equilibrio tra l'ottimizzazione dell'esperienza utente e la velocità delle pagine mantenendo al contempo elevate le entrate pubblicitarie. Le principali sfide che hanno incontrato sono state:

• Cumulative Layout Shift (CLS) elevato a causa di cambiamenti di layout attivati dagli annunci, in particolare da aree annunci di più dimensioni e banner in alto.
• Largest Contentful Paint (LCP) che viene visualizzato in ritardo perché gli annunci sono la visualizzazione più grande o perché occupano la larghezza di banda del caricamento dell'immagine 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 su Core Web Vitals dovuti alle finestre di dialogo per il consenso controllate da fornitori di terze parti, che hanno contribuito anche ai cambiamenti di layout e potrebbero essere rilevati come late largest paint.

Ottimizzazione di un sito web di notizie per Core Web Vitals

Quando Netzwelt ha iniziato a lavorare su Core Web Vitals, ha notato rapidamente che l'ottimizzazione di queste metriche non deve necessariamente influire negativamente sulla pubblicità, ma può essere utilizzata come un'opportunità per migliorare la visibilità degli annunci. Di conseguenza, il team di Netzwelt ha ottimizzato i Segnali web essenziali per aumentare la visibilità degli annunci su un valore superiore al 75% al fine di attirare pubblicità di valore superiore (la media globale per gli annunci display è inferiore al 50%).

Ottimizzazione del 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 dei posizionamenti degli annunci fluidi 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 salti massicci nel layout a causa del caricamento tardivo con dimensioni sconosciute. Bloccare lo spazio più grande di cui potrebbero avere bisogno può portare a una cattiva esperienza utente, mentre chiedere agli inserzionisti dimensioni fisse potrebbe ridurre le entrate pubblicitarie. Netzwelt ha risolto il problema rendendo fisso l'annuncio in alto e rimuovendo alcuni dei formati dei banner più grandi consentiti. L'annuncio in overlay evita di attivare i salti di layout per gli annunci di dimensioni diverse. Sebbene le dimensioni idonee ridotte influiscano sulle vendite degli annunci, la visibilità migliore compensa facilmente questo aspetto.

I dati storici e i test A/B hanno aiutato Netzwelt a trovare le dimensioni e il posizionamento giusti per dispositivi e schermi di dimensioni diverse, nonché le regole multimediali CSS utilizzate per prenotare lo spazio.

Gli annunci below the fold offrono margini di miglioramento significativi:

• Un banner che non viene visualizzato, ma caricato, riduce la visibilità dell'annuncio e peggiora l'esperienza sulla pagina.
• Un banner caricato quando un utente lo scorre può introdurre ulteriori salti nei contenuti.

Per mantenere un'esperienza di pagina positiva e un'elevata visibilità degli annunci, Netzwelt ha implementato il caricamento lento e uno spazio riservato per le dimensioni del minimo comune denominatore. In una zona con più dimensioni, i banner richiesti nelle dimensioni da 300 x 250 a 300 x 600 hanno riservato 250 pixel di altezza. In questo modo, abbiamo eliminato i cambiamenti di layout per le dimensioni più piccole e li abbiamo ridotti notevolmente per i banner più grandi. Questo approccio non è ottimale, ma è un buon punto di partenza e un buon compromesso.

Per ottimizzare ulteriormente, Netzwelt ha utilizzato Intersection Observer e l'API Network Information per controllare i posizionamenti degli annunci e ridurre i cambiamenti di layout. Vengono utilizzate posizioni degli annunci e strategie di caricamento lento diverse a seconda della posizione di scorrimento e della qualità della connessione di rete e gli annunci possono passare da più dimensioni a dimensioni fisse. Lo scopo dell'algoritmo è sempre 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 tipo di rete dedotto dal dispositivo e dall'IP. Questa strategia di caricamento adattivo consente di ridurre il CLS in particolare per gli utenti con connessioni a internet lente.

Ottimizzazione del FID

Il ritardo del primo input potrebbe sembrare un problema per i publisher di notizie, poiché gli annunci spesso includono molte librerie JavaScript aggiuntive. Sembra che ci sia un impatto negativo se si esaminano i dati di laboratorio come Lighthouse. Tuttavia, esaminando i dati sul campo nel 2020 Web Almanac, molti siti web hanno una risposta sufficientemente rapida. In parte ciò è dovuto al caricamento tardivo del codice JavaScript pubblicitario (dopo il primo input), alla memorizzazione nella cache (ad esempio al trattamento della memorizzazione nella cache del codice v8) o all'ottimizzazione da parte dei fornitori di annunci. I tracker della visibilità dei fornitori si assicurano di evitare attività lunghe, pertanto anche se la somma del tempo di esecuzione è lunga, il tempo di blocco totale (TBT) e il FID non sono interessati. Sebbene il FID non fosse un problema enorme per Netzwelt, erano ancora necessarie alcune ottimizzazioni:

• Ridurre gli script e i fornitori degli annunci, concentrandosi su un'unica piattaforma, se possibile.
• Caricamento di tutti gli script con defer o async.
• Utilizzo di webpack o tecnologie simili per il tree shaking e l'unbundling.
• Utilizzare semplici regole CSS simili a BEM.
• Evitare attività che richiedono molto tempo e utilizzare il pattern idle-until-urgent.
• Utilizzo di RequestAnimationFrame ovunque il layout sia interessato.

Ottimizzazione dell'LCP

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

Netzwelt aveva già rimosso gli annunci rettangolari medi dalle aree annuncio principali durante l'ottimizzazione per il CLS. Questo ha avuto il vantaggio aggiuntivo che gli annunci non sono diventati l'elemento più grande.

Netzwelt segue norme rigorose per dare la priorità ai contenuti rispetto agli annunci. Netzwelt ha dato la priorità alle immagini hero e ai caratteri utilizzati nella parte visibile della pagina e ha ottimizzato il percorso critico in modo che abbia la precedenza su annunci e script pubblicitari. Questa priorità ha consentito di non far influire gli annunci sul valore LCP.

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

• CSS separato per il percorso di rendering critico e inserito nell'intestazione.
• Sono stati precaricati i caratteri, gli script e le immagini più importanti.
• Sono state evitate le immagini con caricamento lento sopra il riquadro.
• Utilizzato font-display="swap".

Consenso GDPR e Core Web Vitals

Le finestre di dialogo per il consenso influiscono spesso negativamente sui Core Web Vitals. Come per gli annunci, una finestra di dialogo per il consenso può influire sui Core Web Vitals in due modi:

• In modo esplicito se viene rilevato come la pittura più grande o causa variazioni del layout.
• Implicitamente, rubando la larghezza di banda dal Largest Contentful Paint effettivo, bloccando il percorso critico per il Largest Contentful Paint o ritardando gli annunci fino al momento in cui viene fornito il consenso, il che può, a sua volta, attivare cambiamenti di layout.

Netzwelt collabora con un fornitore di servizi per il consenso di terze parti, che ha anche implementato le ottimizzazioni. Innanzitutto, Netzwelt ha evitato le insidie più evidenti:

• Gli script per il consenso vengono caricati in modo asincrono per non bloccare le risorse critiche.
• Il consenso è formattato in modo che gli elementi di grandi dimensioni non siano idonei come elemento più grande all'interno di LCP.
• L'overlay per il consenso utilizza position: fixed per evitare spostamenti.
• Anche se gli annunci vengono mostrati solo dopo che è stato concesso il consenso, viene preservato in anticipo uno spazio bianco adeguato per evitare cambiamenti di layout al caricamento degli annunci.
• Assicurati che la visualizzazione e il posizionamento della finestra di dialogo per il consenso non attivino cambiamenti di layout. Un problema rilevato e risolto è stato l'opzione di blocco dello scorrimento del fornitore di servizi, che disattivava lo scorrimento durante la visualizzazione del consenso spostando i contenuti principali dell'articolo durante lo scorrimento, causando cambiamenti nel layout.

Dopo questo lavoro, erano ancora presenti notevoli discrepanze tra il CLS sul campo e quello di laboratorio. Sebbene il CLS di laboratorio fosse vicino allo zero, i valori dei campi erano notevolmente superiori alle soglie. Dall'indagine è emerso che il problema è rappresentato dai cambiamenti di layout all'interno dell'iframe del consenso, che al momento vengono acquisiti correttamente solo nei dati di campo. Netzwelt continua a collaborare con il fornitore di servizi per il consenso di terze parti per risolvere il problema.

Modelli di abbonamento alle notizie e Core Web Vitals

Gli editori di notizie stanno adottando modelli di abbonamento per finanziare il giornalismo. Questo modello è pertinente per i Core Web Vitals perché le persone non si iscriveranno a siti web con un'esperienza utente scadente. Inoltre, gli iscritti non si aspettano di vedere annunci nei contenuti a pagamento, ma nasconderli potrebbe causare cambiamenti nel layout. Il sito web deve verificare se gli utenti hanno il diritto di visualizzare i contenuti e se mostrare gli annunci. Questi controlli potrebbero causare latenze aggiuntive, con conseguente spostamento dei contenuti o un'esperienza utente scadente.

Netzwelt utilizza un modello in cui i contenuti sono sempre senza costi, ma gli abbonati non vedranno gli annunci. Hanno esaminato diversi modi per eseguire query e archiviare i diritti al fine di ridurre le latenze e i cambiamenti di layout.

Una query iniziale del diritto ha sempre causato latenze, e pertanto, se la query dei diritti richiede troppo tempo, il sito mostrerà l'ultimo stato memorizzato nella cache. Per i nuovi abbonati, questo significa un piccolo rischio che un utente pagante veda gli annunci una volta. Gli utenti che stanno per terminare un abbonamento potrebbero visualizzare un caricamento senza annunci prima dell'aggiornamento dei diritti archiviati localmente. Una volta noti, i diritti vengono memorizzati localmente utilizzando l'API LocalStorage per evitare latenze e cambiamenti di layout aggiuntivi durante la navigazione futura.

Risultati dell'ottimizzazione

I risultati delle ottimizzazioni di Netzwelt parlano da soli. Il suo punteggio PageSpeed Insights è senza rivali tra gli editori di notizie di tutto il mondo:

Le ottimizzazioni hanno migliorato l'esperienza sulla pagina, ma sono state effettuate tenendo conto dell'attività e hanno migliorato l'esperienza pubblicitaria, la visibilità degli annunci e le entrate. Dopo il lancio della pagina ottimizzata, la visibilità degli annunci di Netzwelt è aumentata al di sopra del 75%, con un aumento del CPM del 20-30%. Tuttavia, Netzwelt presume che l'aumento complessivo delle entrate sia ancora più elevato. Il traffico è aumentato dal lancio, probabilmente a causa di un maggiore coinvolgimento degli utenti e di tassi di rimbalzo inferiori grazie al miglioramento dell'esperienza utente. Questi effetti sono difficili da quantificare e stabilire in relazione causale al lancio, poiché il traffico fluttua naturalmente e ci sono anche gli effetti della pandemia globale. Questi effetti indiretti sono uno dei motivi per cui Netzwelt esamina sempre tutti i numeri quando esamina il proprio sito, non solo il CPM, che potrebbe essere fuorviante. Le metriche Core Web Vitals e UX, 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 per contesto tramite i contenuti, insieme a una buona UX ed esperienza sulle pagine (inclusa la visibilità degli annunci), sia la chiave del successo come editore di notizie.

Pertanto, Netzwelt non si ferma a Core Web Vitals, ma fa di più implementando molte funzionalità web moderne come le applicazioni web progressive (PWA), i contenuti offline, la modalità oscura, l'API Web Share e le attività web attendibili (TWA) utilizzando la nuova API Digital Goods.