CLS - domande e dubbi

manolomacchetta

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

@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

juanin

Quale è il sito in questione?

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

manolomacchetta

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

@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.

manolomacchetta

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

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

manolomacchetta

Allora mi taccio che sto impilando pessime figure