L'ottimizzazione del CLS di 0,2 ha portato a un aumento del 15% delle visualizzazioni di pagina per sessione, a una durata delle sessioni più lunga del 13% e a una diminuzione di 1,72 punti percentuali della frequenza di rimbalzo.
Centro assistenza Yahoo! JAPAN è una delle più grandi società di media del Giappone, con oltre 79 miliardi di visualizzazioni di pagina al mese. La loro piattaforma di notizie, Yahoo! JAPAN News ha più di 22 miliardi di visualizzazioni di pagina al mese e un team di tecnici si dedica a migliorare l'esperienza utente.
Monitorando costantemente i Segnali web essenziali, il team ha correlato il miglioramento del punteggio Cumulative Layout Shift (CLS) del sito con un aumento del 15% delle visualizzazioni di pagina per sessione e del 13% della durata delle sessioni.
0,2
Miglioramento del CLS
15,1%
Più visualizzazioni di pagina per sessione
13,3%
Durata della sessione maggiore
Lo spostamento inaspettato dei contenuti della pagina spesso causa clic involontari, disorientamento nella pagina e infine frustrazione degli utenti. Gli utenti frustrati tendono a non restare nei paraggi a lungo. Per soddisfare gli utenti, il layout della pagina deve rimanere stabile per tutto il ciclo di vita del percorso dell'utente. Per Yahoo! GIAPPONE Notizie che questo miglioramento ha avuto un impatto positivo significativo sulle metriche di coinvolgimento importanti per l'attività.
Per dettagli tecnici su come hanno migliorato il CLS, consulta il Centro assistenza Yahoo! JAPAN News Engineering del team.
Identificazione del problema
Il monitoraggio dei Segnali web essenziali, incluso il CLS, è fondamentale per rilevare i problemi e identificarne la provenienza. Nel sito di Yahoo! JAPAN News, Search Console ha fornito un'ottima panoramica di gruppi di pagine con problemi di prestazioni e Lighthouse ha contribuito a identificare le opportunità per pagina per migliorare l'esperienza sulle pagine. Con questi strumenti, hanno scoperto che la pagina dei dettagli dell'articolo presentava un valore CLS scadente.
È importante tenere presente la parte cumulativa del Cumulative Layout Shift, in quanto il punteggio viene acquisito durante l'intero ciclo di vita della pagina. Nel mondo reale, il punteggio può includere variazioni dovute alle interazioni degli utenti, come lo scorrimento di una pagina o il tocco di un pulsante. Per raccogliere i punteggi CLS dai dati sul campo, il team ha integrato i report sulla libreria JavaScript degli elementi web vitali.
Il team ha usato Chrome DevTools per identificare gli elementi che apportavano modifiche al layout nella pagina. La sezione Regioni con variazioni del layout in DevTools mostra gli elementi che contribuiscono alla metrica CLS evidenziandoli con un rettangolo blu ogni volta che si verifica una variazione del layout.
Hanno capito che si è verificata una variazione del layout dopo che l'immagine hero nella parte superiore dell'articolo è stata caricata per la prima visualizzazione.
Nell'esempio precedente, al termine del caricamento dell'immagine, il testo viene spostato verso il basso (la modifica della posizione è indicata con la linea rossa).
Miglioramento del CLS per le immagini
Per le immagini a dimensioni fisse, le variazioni del layout possono essere impedite specificando gli attributi width
e height nell'elemento img e utilizzando la proprietà CSS
aspect-ratio
disponibile nei browser moderni. Tuttavia, Yahoo! JAPAN News doveva supportare non solo i browser moderni, ma anche i browser installati in sistemi operativi relativamente vecchi, come iOS 9.
Ha utilizzato le caselle proporzioni, un metodo che utilizza il markup per prenotare lo spazio sulla pagina prima del caricamento dell'immagine. Questo metodo richiede di conoscere in anticipo le proporzioni dell'immagine, che sono stati in grado di ottenere dall'API di backend.
Risultati
Il numero di URL con scarso rendimento in Search Console è diminuito del 98%, mentre il CLS nei dati di laboratorio è diminuito da circa 0,2 a 0. Aspetto ancora più importante, sono stati apportati diversi miglioramenti alle metriche aziendali.
Quando il monitoraggio motori di Yahoo! JAPAN News ha confrontato le metriche sul coinvolgimento degli utenti prima e dopo l'ottimizzazione CLS, ha riscontrato diversi miglioramenti:
15,1%
Più visualizzazioni di pagina per sessione
13,3%
Durata della sessione maggiore
1,72%*
Frequenza di rimbalzo più bassa (*punti percentuali)
Migliorando il CLS e le altre metriche di Segnali web essenziali, Yahoo! JAPAN News ha ricevuto anche l'etichetta "Pagina veloce" nel menu contestuale di Chrome Android.
Le variazioni del layout sono frustranti e scoraggiano gli utenti a leggere altre pagine, ma è possibile migliorarla utilizzando gli strumenti appropriati, identificando i problemi e applicando le best practice. Migliorare il CLS ti offre la possibilità di migliorare la tua attività.
Per ulteriori informazioni, consulta il Centro assistenza Yahoo! Japan.