Il costo CLS nascosto nel widget di valutazione a stelle

Cos'è il CLS e perché la valutazione a stelle lo causa?

Il Cumulative Layout Shift misura quanto il contenuto visibile si sposta mentre la pagina si stabilizza. Ogni volta che un elemento già presente sullo schermo si sposta in una nuova posizione senza che l'utente lo abbia richiesto, quel movimento viene registrato e i punteggi si sommano. Un CLS alto è la pagina che ti fa perdere il punto di lettura, oppure toccare il punto sbagliato perché un pulsante si è spostato sotto il pollice.

La valutazione a stelle è una delle cause più frequenti. La maggior parte delle app di recensioni carica la valutazione tramite uno script che viene eseguito dopo l'arrivo dell'HTML iniziale. Per un momento la pagina non ha valutazione, il titolo e il prezzo si trovano più in alto, poi arriva il widget e spinge verso il basso tutto ciò che si trova sotto. Quello spostamento è il CLS.

Quanto sposta la pagina un widget di valutazione a stelle?

Più di quanto sembri. Una riga di stelle sembra piccola, ma raramente arriva da sola. La stessa iniezione porta spesso un numero di valutazione, un conteggio di recensioni, un link "X recensioni" e a volte una barra di riepilogo, tutti in un blocco che in precedenza era alto zero pixel.

Ancora peggio, di solito appare nella parte alta della pagina prodotto, sopra la piega, che è il punto più costoso in cui avviene uno spostamento. Uno spostamento nella parte bassa della pagina, dove nessuno ha ancora fatto scorrere, registra poco. Uno spostamento nella sezione hero, mentre il cliente sta leggendo il titolo e sta per cliccare Aggiungi al carrello, è quello che fastidisce le persone e che pesa di più nel punteggio.

Perché il CLS conta oltre l'esperienza visiva?

Perché è una delle Core Web Vitals, e le Core Web Vitals sono un fattore di posizionamento. Google ha dichiarato esplicitamente che l'esperienza della pagina, CLS incluso, è un fattore reale, anche se modesto, nell'ordinamento delle pagine. Non è la leva principale come contenuto e link, ma è un tiebreaker che non conviene perdere su un termine prodotto competitivo.

Il costo per l'utente è la parte che è facile sottovalutare. Una pagina che si rimonta visivamente appare economica e leggermente rotta, e questa impressione si forma nei secondi esatti in cui il cliente sta decidendo se fidarsi di te con il numero della carta.

• Posizionamento: il CLS fa parte del segnale di esperienza della pagina utilizzato da Google.
• Conversione: un'impaginazione che salta durante una decisione d'acquisto erode la fiducia.
• Click sbagliati: un'impaginazione in movimento fa toccare il controllo sbagliato.
• Velocità percepita: una pagina stabile sembra più veloce di una in movimento, anche a parità di tempo di caricamento.

Come bloccare lo spostamento dell'impaginazione causato dalla valutazione a stelle?

Ci sono due soluzioni concrete, a livelli di sforzo diversi.

La prima è riservare lo spazio. Se sai che il blocco valutazione sarà alto, diciamo, 28 pixel, assegna quella altezza al suo contenitore con CSS prima che il widget arrivi, in modo che le stelle in ritardo si inseriscano in uno slot già esistente. Nulla si sposta perché nulla deve fare spazio. È un intervento rapido che funziona con quasi qualsiasi widget, purché l'altezza riservata corrisponda a quella che effettivamente carica.

La seconda è renderizzare la valutazione nell'HTML della pagina lato server, così le stelle sono presenti nella prima risposta e nessuno script deve iniettare nulla. È la soluzione più pulita perché non c'è nessuna gara da vincere: il contenuto è semplicemente lì. È anche più difficile da applicare in seguito se le tue recensioni vivono interamente dentro un widget di terze parti.

• Riserva l'altezza con min-height o aspect-ratio CSS sul contenitore della valutazione.
• Evita font o immagini all'interno della valutazione che si caricano tardi e ridimensionano il blocco.
• Preferisci una valutazione renderizzata lato server dove puoi, in modo che non ci sia nessuna iniezione.
• Misura con dati di campo, non solo con un singolo test in laboratorio, perché il CLS varia per dispositivo e rete.

Un widget in iframe è meglio o peggio per il CLS?

Un iframe può essere più efficace nel contenere lo spostamento, perché le sue dimensioni sono spesso fissate a livello del contenitore padre, il che significa che il box non cresce quando arriva il contenuto. Ma questo stesso box fisso è di solito opaco ai crawler e ai motori di risposta, quindi il testo delle recensioni al suo interno tende a non essere leggibile come parte della tua pagina.

C'è quindi un compromesso da nominare con chiarezza. L'iframe protegge la tua impaginazione nascondendo il contenuto ai sistemi che leggono le pagine. Una valutazione renderizzata lato server protegge l'impaginazione e mantiene il testo leggibile. Se hai la possibilità di scegliere, la soluzione lato server vince su entrambi i fronti, ma richiede più lavoro nella configurazione.

Correggere il CLS aiuta le recensioni a essere trovate?

In modo indiretto, e solo fino a un certo punto. Riservare lo spazio blocca lo spostamento, il che è un risultato concreto per l'esperienza e uno piccolo per il posizionamento, ma riservare un box vuoto non fa nulla per rendere le parole delle tue recensioni leggibili a un crawler o a un motore di risposta. Uno slot riservato che si riempie da uno script nasconde comunque il testo delle recensioni a tutto ciò che non esegue quello script.

La versione che aiuta su tutti i fronti è quella in cui la valutazione e le recensioni si trovano nell'HTML lato server: nessuno spostamento, e il testo è presente per la ricerca e l'AI da leggere. La maggior parte delle app di recensioni è stata costruita per il cliente sulla pagina e si ferma al widget, il che è il divario che BeyondReviews è costruita per colmare: le recensioni che hai già renderizzate, leggibili e citabili invece di chiuse in un box che ti costa CLS e non dice nulla al crawler.

Il quadro complessivo

Una valutazione a stelle che appare dopo il caricamento è un piccolo dettaglio visivo con un costo sproporzionato: sposta l'impaginazione nel punto più costoso della pagina, muove una Core Web Vital nella direzione sbagliata e riduce la fiducia nel momento dell'acquisto. Riservare lo spazio esatto elimina lo spostamento con poco sforzo. Renderizzare la valutazione lato server lo elimina in modo definitivo, e mantiene il testo delle recensioni leggibile nel farlo. Scegli la seconda soluzione dove puoi, e la prima ovunque non puoi.