Riduci a icona la variazione del layout

Una variazione del layout si verifica quando un elemento visibile sulla pagina cambia posizione o dimensione, influenzando la posizione dei contenuti circostanti. A volte lo spostamento è intenzionale, ad esempio quando un contenitore si espande a seguito di un'azione dell'utente. Tuttavia, la natura dinamica degli annunci può portare a variazioni impreviste del layout, che hanno un effetto negativo sull'esperienza utente e possono causare seri problemi di usabilità.

Questa guida spiega come misurare e ridurre al minimo la variazione del layout quando si utilizzano i tag publisher di Google (GPT).

In che modo gli annunci causano la variazione del layout

In genere gli annunci vengono richiesti in modo asincrono e aggiungono contenuti dinamicamente alla pagina durante o dopo il caricamento. Durante il recupero degli annunci, il resto della pagina continua a caricarsi e i contenuti non pubblicitari potrebbero diventare visibili all'utente. Se non prevedi uno spazio sufficiente per il caricamento degli annunci, questi potrebbero finire per spostare i contenuti non pubblicitari visibili quando vengono aggiunti alla pagina.

Quando utilizzi i tag publisher di Google, ci sono alcuni punti nel ciclo di vita dell'annuncio in cui può verificarsi il cambiamento del layout:

1. Quando viene chiamato display(). Uno slot può espandersi o contrarsi, a seconda di come è stato configurato.
2. Quando vengono visualizzati i contenuti dell'annuncio. Le dimensioni di uno spazio possono essere ridimensionate se viene pubblicato un annuncio fluido o se lo spazio disponibile non è sufficiente. A questo punto, uno slot può anche espandersi o comprimarsi, a seconda di come è stato configurato.
3. Dopo il rendering dei contenuti dell'annuncio. Alcuni tipi di creatività sono progettati per espandersi dopo la visualizzazione sulla pagina.

Tieni presente che più un'area annuncio è in alto nell'area visibile, più contenuti può potenzialmente spostare. Presta particolare attenzione alle aree vicino alla parte superiore dell'area visibile iniziale (above the fold). Queste aree possono causare una quantità sproporzionata di variazione del layout in quanto hanno maggiori probabilità di essere visibili quando vengono caricati i contenuti degli annunci.

Misurare la variazione del layout

Cumulative Layout Shift (CLS) è una metrica di Core Web Vitals che puoi utilizzare per quantificare l'impatto delle variazioni del layout sul tuo sito, sia in laboratorio che sul campo.

Nel laboratorio

Gli strumenti di laboratorio misurano il CLS in modo sintetico. Ciò significa che non si basano sull'interazione con utenti reali, il che li rende adatti all'uso nell'integrazione continua e nei flussi di lavoro di sviluppo locale. Tuttavia, questi strumenti in genere misurano le prestazioni solo durante il caricamento della pagina e sono limitati nelle condizioni che possono simulare, pertanto i valori riportati potrebbero essere inferiori rispetto a quelli che sperimenterebbero un utente reale.

Controlli degli annunci dei publisher per Lighthouse è uno strumento che può essere utilizzato per misurare il CLS specificamente attribuibile agli annunci GPT. Per maggiori dettagli, consulta la documentazione relativa al controllo per ridurre la variazione del layout in relazione agli annunci.

Chrome DevTools può essere configurato anche per evidenziare le variazioni del layout mentre navighi nel sito. Questo può essere utilizzato per identificare manualmente i cambiamenti di layout che si verificano vicino alle aree annuncio sulla pagina.

Sul campo

Gli strumenti sul campo misurano la metrica CLS percepita da utenti reali quando interagiscono con il tuo sito. Questa procedura è nota come monitoraggio degli utenti reali (RUM). RUM consente di osservare in che modo il CLS è influenzato da fattori reali, come le funzionalità del dispositivo, le condizioni della rete, l'interazione utente e la personalizzazione della pagina, che spesso sono difficili o impossibili da simulare con i test sintetici.

Ridurre al minimo la variazione del layout

L'unico modo garantito per evitare il cambiamento del layout è riservare uno spazio sufficiente per un determinato spazio annuncio utilizzando il CSS. Impostare un'altezza e una larghezza fisse direttamente sull'area annuncio div è il modo più efficace per farlo. Tuttavia, anche se questo approccio funziona bene per gli slot pubblicitari statici di dimensioni fisse, scenari più complessi potrebbero richiedere un approccio più articolato. Alcuni scenari comuni sono illustrati nelle sezioni seguenti.

Aree annuncio di più dimensioni

Per gli spazi pubblicitari che accettano più dimensioni, consigliamo uno dei seguenti approcci:

• Riserva spazio per le dimensioni più grandi configurate per la pubblicazione.
• Riserva spazio alle dimensioni minime configurate per la pubblicazione.
• Riserva spazio per le dimensioni con maggiori probabilità di pubblicazione, determinate esaminando i dati storici di completamento dei report di Google Ad Manager.

Scegliere l'approccio giusto

Riservare spazio alla dimensione massima configurata per la pubblicazione è il modo più efficace per eliminare le variazioni del layout. Tuttavia, questo metodo può comportare uno spazio vuoto aggiuntivo attorno all'annuncio, nel caso in cui venga pubblicata una creatività più piccola delle dimensioni riservate. Se riduci le dimensioni dell'area annuncio in modo che corrispondano a quelle della creatività pubblicata, si verificherebbe un ulteriore cambiamento del layout, pertanto ti consigliamo di evitare questa operazione. In alternativa, puoi utilizzare il centratura verticale e orizzontale per ridurre l'impatto visivo degli spazi vuoti in eccesso.

Invece, riservando spazio alla dimensione più piccola configurata per la pubblicazione si eviti l'eccesso di spazio vuoto intorno all'annuncio. Questa può essere una buona opzione se la tua area annuncio viene solitamente riempita con creatività più piccole o nei casi in cui tutte le dimensioni supportate dall'area siano simili. Tuttavia, questo metodo comporta un cambiamento nel layout nel caso in cui venga pubblicata una creatività più grande delle dimensioni riservate (anche se questi cambiamenti sono in genere minori rispetto a quelli che si verificano se non viene riservato alcun spazio).

Per trovare un equilibrio tra spazio vuoto e cambiamenti di layout, puoi riservare una quantità di spazio "media" per gli slot degli annunci. Ad esempio, la prenotazione di 100px verticalmente comporta un piccolo spazio vuoto quando viene pubblicata una creatività 320x50, ma riduce il punteggio CLS rispetto alla mancata prenotazione di alcuno spazio. Dovrai sperimentare dimensioni diverse per trovare il miglior equilibrio per il tuo sito.

Quando decidi quanto spazio riservare per un determinato spazio, esaminare i dati storici sul riempimento dei report di Google Ad Manager può aiutarti a prendere una decisione più consapevole. Questo può essere illustrato meglio esaminando alcuni esempi.

Esempio 1

In questo caso, la prenotazione di 250px in verticale può ridurre notevolmente il CLS, poiché la maggior parte delle creatività pubblicate è 300x250.

Esempio 2

In questo caso, la maggior parte degli annunci ha un'altezza massima di 90px, quindi la prenotazione di 90px verticalmente dovrebbe evitare un cambiamento di layout nella maggior parte dei casi.

Come prenotare uno spazio

Ti consigliamo di risolvere questo problema specificando le dimensioni dell'area annuncio tramite le proprietà CSS min-height e min-width:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

L'utilizzo degli attributi min-height e min-width ti consente di prenotare una quantità minima di spazio per l'area annuncio, consentendo al browser di aumentare le dimensioni del contenitore in base alle necessità. In questo modo, nessun contenuto viene tagliato nel caso in cui venga pubblicata una creatività più grande.

Puoi combinare questa tecnica con le query supporti CSS per specificare valori minimi diversi per schermi di dimensioni diverse:

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

È preferibile evitare di riservare spazio con JavaScript, in quanto ciò può comportare un cambiamento del layout al momento del caricamento dello script. La prenotazione di spazio con CSS evita questo rischio.

Aree annunci flessibili

Le aree annuncio flessibili non specificano un insieme fisso di dimensioni supportate. Queste aree si ridimensionano automaticamente per adattarsi ai contenuti delle creatività pubblicate, in modo da supportare creatività di dimensioni indeterminate. Di conseguenza, non è possibile prenotare spazio per queste aree prima di richiedere i contenuti degli annunci e gli annunci con dimensioni fluide causano sempre variazioni del layout.

Per ridurre gli effetti delle variazioni del layout quando utilizzi gli spazi pubblicitari fluidi, consigliamo quanto segue:

• Utilizza le dimensioni fluid solo per gli slot sotto la piega.
• Recupera gli slot fluidi il prima possibile per ridurre al minimo la possibilità che un utente scorra fino a visualizzarli prima che lo slot venga ridimensionato.

Comprimire ed espandere le aree annuncio

Il metodo collapseEmptyDivs() ti consente di comprimere i div delle aree annuncio in modo che non occupino spazio sulla pagina quando non sono presenti contenuti dell'annuncio da visualizzare. Tuttavia, questa funzionalità deve essere utilizzata con cautela in quanto può introdurre cambiamenti indesiderati nel layout. Come indicato nella sezione precedente, il collasso e l'espansione degli spazi annunci possono causare cambiamenti nel layout in due punti diversi del ciclo di vita dell'annuncio.

Se devi utilizzare questa funzionalità, puoi ridurre l'impatto dei cambiamenti di layout utilizzando i dati storici sul completamento dei report di Ad Manager per implementare le seguenti best practice:

• Le aree che probabilmente verranno riempite devono iniziare sempre espanse.
• Gli slot che probabilmente non verranno riempiti devono sempre essere compresi all'inizio.

Per un esempio di implementazione, consulta l'esempio Comprimere le aree annuncio vuote.