-
CLS Lifespan
Mi piacerebbe condividere con voi questo tweet e trattare il concetto di "lifespan", magari a molti di voi già molto chiaro:
https://twitter.com/rick_viscomi/status/1466154500176158723Tutto è nato perché in un sito di cliente la situazione è:
- dato "lab" con CLS praticamente ZERO
- dato "field" pessimo (superiore a 1 mobile e 1,4 desktop)
Come è possibile?! All'inizio (pre nuovo pagespeed) pensavo fosse un problema sintattico legato alla mancanza di alcune width/height in pagina.
Poi però la cosa non reggeva e soprattutto insostenibile la differenza tra lab e field.
Qui la reale tematica:
CWV are measured from real users, so the lifespan is however long the page is kept open.
Il sito in questione era stato fatto in modo furbetto, proprio per fottere (si può dire?!) il Pagespeed Insight... ma in realtà sono le furbizie con gambe cortissime e SBAM!
ps: un grazie anche al nostrano Gilberto Cocchi
1 Risposta
-
Ciao @merlinox,
per caso nella pagine ci sono degli iframe?Tolto il caso iframe (che non viene misurato dai tool, ma solo dai dati reali), in generale, IMHO, se ci sono differenze, il motivo è che probabilmente si verificano nel tempo, mentre le pagine rimangono aperte.
Relativamente alle interazioni degli utenti, se gli shift si verificano entro i 500 ms da un'interazione (clic, tocco e tasti) non fanno parte del calcolo (usano il flag hadRecentInput). Scroll, zoom, o altre interazioni di questo tipo, invece non fanno escludere lo shift. Ad esempio se l'utente scrolla in basso e si sposta un box, quello è "negativo".
1 Risposta
-
@alepom non ci sono iframe. Ci sono delle "furbate" al mouse move, ove vengono caricati taluni stili etc...
-
@merlinox, potrebbe essere lì il problema, perché se guardi nella documentazione, quelle potrebbero essere interpretate come "continuous interactions", le quali non ricadono nei "Recent Input", e quindi potrebbero non essere escluse dal conteggio.
Per essere escluse le interazioni devono essere "discrete" (inteso come "non continue"). Di fatto, l'evento del movimento del mouse che fa muovere elementi, molto probabilmente è qualcosa di inaspettato per l'utente.https://github.com/WICG/layout-instability#recent-input-exclusion
Events caused by pointer movement or scrolling do not count as "input" for the purpose of the recent input exclusion and the input-related attributes on the LayoutShift entry.
-
@alepom ieri ho scoperto un meraviglioso tab di Chrome che si chiama Rendering.
Tra le varie opzioni è possibile navigare nel sito ed esporre un bel widget che mostra i principali valori del ChromeUX: naturalmente l'essenziale è CLS in quanto è "lifespan".Non solo: dinamicamente evidenzia gli elementi che hanno "shift" e così li capisci.
Ieri - dopo mesi - ho scoperto il problema di un sito: un mini bug sul logo che quando l'header passa in sticky il logo si deforma e regala uno 0,15 circa di CLS ad ogni UP&Down...
-
Sì assolutamente guarda il lifespan ed è sempre stato così.
Per la stessa logica hanno fatto delle modifiche per gestire infinite scroll e simili alleggerendo l'impatto.
Di fatto con Chrome puoi controllare tutto. Oppure anche con qualche Script su Webpagetest puoi automatizzare tutto e farti fare pure le GIF
-
@juanin per sicurezza ho guardato gli accordion e sono riusciti ad ignorarne l'impatto
