• User Newbie

    CLS come migliorarlo? valori strani

    Ho testato un sito che ho creato da poco e purtroppo ha un valore discontinuo di CLS.
    Il link del sito è il seguente simonechiozzi.com di seguito
    Mobile
    1 home.PNG
    desktop
    2 home.PNG
    Il peggio è sulla Landing Page al link simonechiozzi.com/coaching-online/
    mobile
    1 lp.PNG
    desktop
    2 lp.PNG
    La home Page si salva, mentre la landing ha molti problemi. come posso risolvere? ho provato a togliere molte cose e rifare il test ma non cambia quasi nulla. Può essere che il test non sia in tempo reale?


  • User Attivo

    Il CLS è influenzato dal "movimento" del layout durante il caricamento della pagina. Guardati questa "post live" di @giorgiotave dove @juanin spiega bene ed in maniera comprensibile la cosa.

    Diciamo che il problema mi pare molto legato al fatto che carichi un sacco di codice "sporco". Non preoccuparti è un problema abbastanza diffuso con Wordpress..
    Il consiglio è di iniziare a metter mano al template cercando di evitare il caricamento di risorse inutili dando già che ci sei un occhiata alla dimensioni delle immagini.. considera magari anche il fatto di alleggerire i contenuti diminuendo per esempio i post che apri inizialmente e richiamandoli in seguito allo scroll..


  • User Newbie

    Grazie Mirko per la risposta. Da quel video ho deciso di postare. Concentriamoci sul CLS, come sono possibili certi valori? Ad esempio sulla landing page la versione mobile ha parecchi ghirigori. Ma togliendoli, il valore non cambia. Mi chiedo, forse l analisi di pagespeed non è in tempo reale?


  • User Attivo

    @Giulio89 il problema è capire cosa stai togliendo.. e cosa stai caricando...
    Mi spiego il fatto che tu abbia un CLS "scarso" è dato dal fatto che gli spazi occupati dagli elementi cambia con il caricamento dei contenuti.
    I casi qui sono 2:

    1. Fai in maniera che gli spazi dedicati ai contenuti siano già fissati.. quindi se per esempio l'immagine appare dopo ed occupa uno spazio di 100x100 dai al box giù la dimensione di 100x100 (così eviti lo shift anche se il caricamento dell'immagine avviene dopo x secondi)
    2. Ottimizzi il tutto per ottenere risposte più rapide dal server (ovviamente questa è l'opzione consigliata).. se le risposte sono molto rapide lo shifting c'è ma sta nei tempi...

    Questa è la situazione del caricamento della tua home... 7 secondi!
    Il contenuto inizia ad apparire a 2.9 ... da li a 7 quando il sistema inizia a far girare il tutto mi capisci che il tempo è alto.. quindi se fai modifiche minime difficile che tu veda la differenza nell'analisi di google.

    Untitled-7.jpg

    Premetto che non sono per nulla un amante di Wordpress... ma la base sta nel fatto che il CMS non è ottimizzato.. ovvero la prima risposta è veramente bassa.
    A questo si aggiunge che il codice lato front-end (il template per capirci) è esoso e carica un sacco di cose inutili.
    Rivedi pian piano il layout generale cercando di capire innanzitutto cosa ti serve e cercando di ottimizzare il codice con cui ottieni quel risultato... magari ti accorgi che hai qualche js di troppo e che magari pesa parecchio.. rallentando la fruizione senza utilità.

    Questo è quanto ti dice pagespeed a riguardo

    Untitled-9.jpg

    Qui ti riporto due analisi di una pagine performanti (la prima è una pagina ultraleggera, mentre la seconda è una pagina categoria di un ecommerce.. quindi un pò più articolata)

    Untitled-8.jpg
    Untitled-11.jpg


    G 1 Risposta
  • User Newbie

    @mirkomassarutto ha detto in CLS come migliorarlo? valori strani:

    @Giulio89 il problema è capire cosa stai togliendo.. [...]

    Allora innanzitutto ti ringrazio tantissimo per il tempo che hai investito nel post. Quindi il CLS é legato anche al tempo di caricamento, questa cosa non l'avevo capita. Comunque mi confermi che il pagespeed é in tempo reale. Giusto? Proverò ad ottimizzare la.velocota e vedere se incide sul CLS.. grazie mille 🙏 Purtroppo di codice non so nulla. 😬Mi affiderò a qualche servizio esterno.


    giorgiotave 1 Risposta
  • Community Manager

    @Giulio89 ha detto in CLS come migliorarlo? valori strani:

    @mirkomassarutto ha detto in CLS come migliorarlo? valori strani:

    @Giulio89 il problema è capire cosa stai togliendo.. [...]

    Allora innanzitutto ti ringrazio tantissimo per il tempo che hai investito nel post.

    Puoi settare la sua come migliore risposta! ⭐

    Ho ridotto il tuo quote nel post, così è più pulito per chi legge 🙂 🙂 🙂


    G 1 Risposta
  • User Newbie

    @giorgiotave ha detto in CLS come migliorarlo? valori strani:

    @Giulio89 ha detto in CLS come migliorarlo? valori strani:

    @mirkomassarutto ha detto in CLS come migliorarlo? valori strani:

    @Giulio89 il problema è capire cosa stai togliendo.. [...]

    Allora innanzitutto ti ringrazio tantissimo per il tempo che hai investito nel post.

    Puoi settare la sua come migliore risposta! ⭐

    Ho ridotto il tuo quote nel post, così è più pulito per chi legge 🙂 🙂 🙂

    Perfetto fatto 😊


    juanin 1 Risposta
  • Miglior Risposta
    Admin

    @Giulio89 ciao.

    Sono arrivato un po' in ritardo, ma provo a suggerirti l'elemento su cui porre attenzione riguardo il CLS.

    Così a occhio sembra essere principalmente un elemento, ossia quello di trustpilot. Si nota abbastanza bene dalla sequenza di rendering in pagespeed insights.

    cls1.jpg

    Come puoi notare la parte alta con il triangolo in grigio prima di assestarsi si muove in modo visibile spostando più volte il layout sottostante.

    Dentro PSI puoi vedere segnalati gli elementi che si spostano, ma ti danno poche indicazioni perché di fatto sono si loro a spostarsi, ma a causa del blocco di cui sopra.

    cls.png

    Il consiglio dunque per risolvere è allocare l'altezza esatta di quel box senza che cambi nel giro di 3 secondi 5 volte.


    G 1 Risposta
  • User Newbie

    @juanin ha detto in CLS come migliorarlo? valori strani:

    Il consiglio dunque per risolvere è allocare l'altezza esatta di quel box senza che cambi nel giro di 3 secondi 5 volte.

    É proprio questo il problema. hai ragione! ora il secondo problema è che sono una pippa con il codice. questo sito è stato fatto con elementor ed io mi sono limitato a copiare il codice del trustbox nella colonna html di elementor.

    <!-- TrustBox widget - Starter -->
    <div class="trustpilot-widget" data-locale="it-IT" data-template-id="5613c9cde69ddc09340c6beb" data-businessunit-id="5f0d4db445f81300016d1e2d" data-style-height="100%" data-style-width="100%" data-theme="light">
      <a href="https://it.trustpilot.com/review/simonechiozzi.com" target="_blank" rel="noopener">Trustpilot</a>
    </div>
    <!-- End TrustBox widget -->
    

    ora se ho capito bene, anzichè impostare il data style 100% dovrei darli una grandezza definita, giusto?
    Ho provato a cercare in rete, non riesco a capire come settare la grandezza del box in partenza. Tu hai qualche consiglio?

    AGGIORNAMENTO: Impostando una grandezza precisa il CLS è sceso a 0.1 ♥ ♥
    il problema è che adesso non è centrato come vorrei 😂


  • User Newbie

    (Cattura.PNG
    probabilmente per centrarlo è una banalità, ho cercato qualche tutorial ma non mi prende il codice.


  • User Attivo

    Ora non riesco a fare una prova veloce.. hai provato un semplice margin:auto ?


    G 1 Risposta
  • User Newbie

    @mirkomassarutto ho risolto banalmente lasciando la larghezza al 100%. Ora il CLS è migliorato in tutte le pagine. ma resta un dubbio.
    mobile lp.PNG


    mirkomassarutto juanin 2 Risposte
  • User Attivo

    @Giulio89 perfetto.. ora non resta che andare a risolvere tutto il resto 😉
    Buon lavoro.


  • Admin

    @Giulio89 attenzione perché il valore che vedi sopra è l'aggregato per origin del Chrome UX Report quindi inizierai a vedere i benefici da ora in avanti e se non hai molto traffico passerà qualche mese.

    Ti incollo infatti cosa c'è scritto sopra.

    Origin Summary: Nel precedente periodo di raccolta dei dati di 28 giorni, l'esperienza globale di tutte le pagine pubblicate da questa origine non supera la valutazione Segnali web essenziali. Per visualizzare suggerimenti su misura per ogni pagina, analizza i singoli URL delle pagine.