• User

    CLS - domande e dubbi

    Lunedì mi è arrivata una mitragliata di errori sul webmaster tool
    Affected URLs : 353 -> tutti per il Cumulative Layout Shift / CLS
    unico problema: NON ho banner su e non vedo cose strane da far partire l'errore CLS

    Vedere qui sotto due print screen dal pagespeed insight:
    alt text

    alt text

    altra cosa: ho un altro sito con stesso template (di themeforest, i know i know 🙂 e NON da lo stesso problema.

    ovviamente uno ha anche tanti JS per il tracciamento e l'altro no, ha Cloudfare (di cui sto leggendo il tread e che probabilmente toglierò...)
    non è nemmeno ottimizzato e carica mille cose che non dovrebbe

    ma al momento vorrei focalizzarmi sul CLS dato che è l'argomento più nebbioso (a meno che le due cose sia molto correlate)

    Da cosa consigliate iniziare?

    Manolo


    giorgiotave 1 Risposta
  • Community Manager

    @manolomacchetta ha detto in CLS - domande e dubbi:

    Lunedì mi è arrivata una mitragliata di errori sul webmaster tool

    Chissà quanti, @juanin dovremmo fare un contenuto apposito 😄


  • Admin

    Quale è il sito in questione?

    In teoria in Pagespeed insight ti dicono quali sono gli elementi che contribuiscono al CLS.


  • User

    Grazie per la risposta @j-amp-j ese fai un video super @giorgiotave !

    La pagina tra le 350 che mi suggeriva webmaster tool è
    https://www.cocooa.com/domande-al-colloquio-di-lavoro
    ma questa a tutti gli effetti è uguale a https://www.cocooa.com/in-un-mondo-di-troll-sii-una-driade
    eppure i risultatati di punteggio sono nettamente diversi ( e vabbè ci sta) ma anche il punteggio del CLS è diverso (anche se nell'indicazione sono gli stessi problemi) e in nessun caso ho adv.

    Si, Pagespeed indica "These DOM elements contribute most to the CLS of the page."... ma non saprei come sistemare la maggior parte problemi, dato che temo siano del tema... ma scriverò agli sviluppatiri


    juanin 1 Risposta
  • Admin

    @manolomacchetta a occhio non si nota moltissimo, ma probabilmente dipende da questa parte di codice.

    <div class="johannes-section category-pill johannes-cover johannes-bg-alt-2 johannes-section-margin-alt size-johannes-single-3">
          <div class="section-bg">
                <img width="1" height="1" src="https://s3.eu-central-1.amazonaws.com/cocooa.cdn/wp-content/uploads/2009/09/01165227/domande-colloquio-lavoro-header.jpg" class="attachment-johannes-single-3 size-johannes-single-3 wp-post-image" alt="domande-colloquio-lavoro-header-foto-montagna" loading="lazy" title="Le 10 Domande che ti faranno al colloquio di lavoro 1">
          </div>
            
        <div class="container">
            <div class="section-head johannes-content-alt section-head-alt">
                   <div class="entry-category">
                        <a href="https://www.cocooa.com/produttivita/colloquio-di-lavoro" rel="tag" class="cat-item cat-551">Colloquio di Lavoro</a>               
                  </div>
                  <h1 class="entry-title">Le 10 Domande che ti faranno al colloquio di lavoro<span class="wtr-time-wrap after-title"><span class="wtr-time-number">15</span> min read</span></h1>
                 <div class="entry-meta">
                        <span class="meta-item meta-comments"><a href="https://www.cocooa.com/domande-al-colloquio-di-lavoro#comments" class="johannes-scroll-animate">244 commenti</a></span><span class="meta-item meta-date"><span class="updated">September 23, 2009</span></span><span class="meta-item meta-rtime">17 minuti di articolo.</span>                
                  </div>
            </div>
         </div>
    </div>
    

    Nello specifico la parte dell'immagine di background dell'header che viene settata non come background ma come img.

     width="1" height="1"
    

    inoltre per una HERO Image il lazy loading non ha alcun senso

    loading="lazy"
    

    dovresti impostare

    loading="eager"
    

    e settare altezza e larghezza corretti o almeno l'aspect ratio.


  • User

    Grazie Mille!!!
    Qualcosa è di sicuro colpa mia che ho messo WP rocket e l'ho settato un po' troppo ad mentula canis (il lazy load sicuro).

    qualcosa mi sa che lo giro al creatore del tema.

    cmq GRAZIE davvero. non mi aspettavo una risposta cosi.

    ps risolto potenzialmente il mio problema... avere un CLS pessimo per 1 pixel di shift.. credo che sto tool necessiti di una calibrata.


    juanin 1 Risposta
  • Admin

    @manolomacchetta in realtà lo shift non è di 1 pixel ma dell'altezza dell'immagine che saranno almeno 200 di pixel.


  • User

    Allora mi taccio che sto impilando pessime figure 🙂