Cos’è il CLS e perché impatta i tuoi progetti client
Il Cumulative Layout Shift (CLS) è una metrica Core Web Vitals che misura la stabilità visiva di una pagina. Un CLS superiore a 0.1 viene considerato problematico da Google e impatta direttamente il posizionamento nei risultati di ricerca dal 2021.
Nei progetti WordPress gestiti da agenzie, il CLS medio si attesta ancora oggi su 0.15-0.25 secondo dati HTTP Archive di marzo 2026. Questo significa che la maggior parte dei siti WordPress ha margini di miglioramento significativi.
Il problema principale del CLS in WordPress è che le cause sono molteplici e spesso si sommano: temi mal ottimizzati, plugin che iniettano contenuti, caricamento asincrono delle risorse e banner pubblicitari. Vediamo ogni caso con la soluzione tecnica definitiva.
Immagini senza dimensioni esplicite
Questo è il caso più comune e più facile da risolvere. Quando il browser non conosce le dimensioni di un’immagine prima del caricamento, non può riservare lo spazio necessario nel layout, causando shift quando l’immagine viene renderizzata.
Diagnosi rapida
Apri Chrome DevTools, vai su Lighthouse e analizza la voce “Image elements do not have explicit width and height”. Troverai l’elenco di tutte le immagini problematiche.
Soluzione definitiva
- Assicurati che ogni tag
<img>abbia attributiwidtheheightespliciti - WordPress 5.5+ aggiunge automaticamente questi attributi, ma solo per immagini caricate tramite Media Library
- Per immagini dinamiche o da plugin, utilizza il filtro
wp_img_tag_add_width_and_height_attr - Implementa
aspect-ratioCSS per browser moderni:img { aspect-ratio: attr(width) / attr(height); }
add_filter('the_content', function($content) {
return preg_replace_callback(
'/<img[^>]+>/i',
function($matches) {
if (strpos($matches[0], 'width=') === false) {
// Estrai src e calcola dimensioni
preg_match('/src="([^"]+)"/i', $matches[0], $src);
if ($src) {
$size = @getimagesize($src[1]);
if ($size) {
return str_replace('<img', '<img width="' . $size[0] . '" height="' . $size[1] . '"', $matches[0]);
}
}
}
return $matches[0];
},
$content
);
});
Font web e FOUT/FOIT
Il caricamento dei font personalizzati causa due problemi distinti: Flash of Invisible Text (FOIT) e Flash of Unstyled Text (FOUT). Entrambi generano CLS perché cambiano le dimensioni dei blocchi di testo.
Metriche reali
Un font custom Google Fonts può aggiungere 0.05-0.15 punti al CLS totale se non gestito correttamente. Nei test su 200 siti WordPress effettuati nel Q1 2026, i font rappresentano il 30% del CLS totale medio.
Soluzione definitiva
- Usa
font-display: swapper evitare FOIT - Implementa
preloadper i font critici nel<head> - Definisci
size-adjustper matchare le metriche del font di fallback - Considera font di sistema per progetti performance-critical
<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
size-adjust: 95%; /* Ajusta basandosi sul font fallback */
}
@font-face {
font-family: 'CustomFont-fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
descent-override: 20%;
line-gap-override: 0%;
}
body {
font-family: 'CustomFont', 'CustomFont-fallback', Arial, sans-serif;
}
</style>
Banner e annunci pubblicitari
Gli ad slot sono notoriamente problematici per il CLS. Google AdSense, per esempio, carica annunci di dimensioni variabili che causano shift significativi se non gestiti correttamente.
Soluzione definitiva
- Definisci sempre un contenitore con altezza minima fissa per ogni ad slot
- Usa
min-heightbasato sulle dimensioni più comuni degli annunci - Implementa skeleton loader visibile durante il caricamento
- Per AdSense, attiva “Optimize ad loading” nelle impostazioni avanzate
.ad-container {
min-height: 250px; /* Standard per 300x250 */
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
}
.ad-container::before {
content: 'Pubblicità';
color: #999;
font-size: 12px;
}
Per progetti client con elevato traffico pubblicitario, considera l’implementazione di Google Publisher Tag (GPT) con googletag.pubads().enableSingleRequest() per ridurre i tempi di caricamento.
Contenuti iniettati dinamicamente
Plugin come notification bar, cookie consent banner, popup e live chat iniettano contenuti dopo il caricamento iniziale della pagina, causando shift nel layout esistente.
Casi specifici WordPress
- WooCommerce notices: le notifiche di carrello/checkout appaiono dinamicamente
- Cookie banner: CookieBot, Complianz e simili si inseriscono dopo il DOM
- Notification bar: plugin come OptinMonster o Hello Bar
- Social share buttons: contatori dinamici che cambiano larghezza
Soluzione definitiva
La strategia è riservare spazio nel layout prima che il contenuto venga iniettato:
/* Riserva spazio per notification bar */
body.has-notification-bar {
padding-top: 50px;
}
/* Riserva spazio per WooCommerce notices */
.woocommerce-notices-wrapper {
min-height: 60px;
}
/* Cookie banner fixed non causa CLS */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Fixed positioning non impatta il flow del documento */
}
Per plugin che non offrono controllo sul timing, usa un approccio JavaScript:
// Esegui prima del render del plugin
document.addEventListener('DOMContentLoaded', function() {
// Crea placeholder
const placeholder = document.createElement('div');
placeholder.style.height = '50px';
placeholder.id = 'notification-placeholder';
document.body.insertBefore(placeholder, document.body.firstChild);
// Rimuovi quando il contenuto reale viene iniettato
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
const notificationBar = document.querySelector('.notification-bar');
if (notificationBar) {
placeholder.remove();
observer.disconnect();
}
}
});
});
observer.observe(document.body, { childList: true });
});
Embeds e iframe responsive
YouTube, Vimeo, Google Maps e altri embed sono spesso implementati senza aspect ratio definito, causando shift significativi quando vengono caricati.
Soluzione definitiva
WordPress 5.9+ include supporto nativo per aspect ratio, ma molti temi e plugin lo sovrascrivono. Implementa questa tecnica universale:
.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Per automatizzare su tutti gli embed WordPress:
add_filter('embed_oembed_html', function($html, $url, $attr, $post_id) {
return '<div class="embed-container">' . $html . '</div>';
}, 10, 4);
Lazy loading non ottimizzato
Il lazy loading nativo di WordPress (loading="lazy") è utile per le performance generali, ma può causare CLS se applicato a immagini above-the-fold o senza dimensioni definite.
Soluzione definitiva
- Disabilita lazy loading per immagini above-the-fold (prime 2-3 immagini visibili)
- Usa sempre dimensioni esplicite insieme a lazy loading
- Considera
loading="eager"per hero images e logo - Implementa Intersection Observer custom per controllo granulare
add_filter('wp_lazy_loading_enabled', function($default, $tag_name, $context) {
// Disabilita lazy loading per primi 3 contenuti
static $count = 0;
if ($tag_name === 'img' && $count++ < 3) {
return false;
}
return $default;
}, 10, 3);
Strumenti di monitoraggio e testing
Per gestire efficacemente il CLS su progetti client multipli, è necessario un workflow di monitoraggio continuo.
Setup consigliato per agenzie
- Chrome DevTools: Performance tab → Experience → Layout Shifts per vedere gli shift frame-by-frame
- PageSpeed Insights: misurazioni field data (reali) e lab data (simulate)
- Web Vitals Chrome Extension: overlay in-page con metriche real-time
- Lighthouse CI: integrazione in pipeline di deployment per test automatici
- Search Console: report Core Web Vitals per dati aggregati reali
Per progetti gestiti con AgencyPilot, puoi configurare alert automatici quando il CLS supera soglie definite su qualsiasi sito client, permettendo interventi preventivi prima che impattino il SEO.
Checklist finale pre-rilascio
Prima di mettere online qualsiasi progetto WordPress, verifica questi punti critici per il CLS:
- Tutte le immagini hanno attributi
widtheheightespliciti - Font web utilizzano
font-display: swapepreload - Ad slot hanno
min-heightdefinita - Embed hanno container con aspect ratio
- Cookie banner e notification bar sono
position: fixedo hanno spazio riservato - Lazy loading disabilitato per contenuti above-the-fold
- Test Lighthouse mostra CLS < 0.1 su mobile e desktop
- Verificato su device reali, non solo emulazione
Un CLS sotto 0.1 è raggiungibile su qualsiasi progetto WordPress con le tecniche descritte. La chiave è affrontare sistematicamente ogni causa invece di cercare plugin “magici” che raramente risolvono il problema alla radice.
FAQ
Come misuro il CLS reale dei visitatori su WordPress?
Usa la Web Vitals JavaScript library di Google per raccogliere metriche reali dai visitatori. Installa il codice nel footer e invia i dati a Google Analytics 4 o a un endpoint custom. In alternativa, consulta i dati aggregati nel report Core Web Vitals di Google Search Console, che mostra il CLS reale degli ultimi 28 giorni per URL specifici. Per monitoraggio continuo su più siti client, AgencyPilot offre dashboard centralizzate con alert automatici.
Il mio tema WordPress causa CLS: devo cambiarlo?
Non necessariamente. Prima identifica la causa specifica: spesso è risolvibile con CSS custom o filtri WordPress senza cambiare tema. Usa DevTools per individuare quali elementi causano shift e applica le soluzioni descritte (dimensioni immagini, font-display, spazio riservato). Solo se il tema inietta contenuti via JavaScript in modo non controllabile e lo sviluppatore non fornisce supporto, considera un tema più performante come GeneratePress o Astra.
I plugin di cache migliorano il CLS?
Indirettamente sì, ma non risolvono le cause strutturali. Plugin come WP Rocket o LiteSpeed Cache riducono i tempi di caricamento generali, ma se le immagini non hanno dimensioni o i font causano FOUT, il CLS rimane. La cache può addirittura peggiorare il CLS se implementa lazy loading aggressivo senza dimensioni esplicite. La priorità è sempre risolvere le cause tecniche descritte in questo articolo, poi aggiungere la cache per ottimizzazioni generali.
Quanto impatta veramente il CLS sul posizionamento Google?
Secondo dati di ranking factor analysis del 2026, i Core Web Vitals (incluso CLS) rappresentano circa il 3-5% dei fattori di ranking complessivi. Non è determinante come contenuto o backlink, ma fa la differenza in SERP competitive dove più siti hanno qualità simile. Inoltre, un CLS elevato aumenta bounce rate e riduce engagement, impattando indirettamente altri segnali di ranking. Per siti e-commerce, ogni 0.1 di CLS può ridurre conversion rate del 2-4% secondo case study Shopify.
Come gestisco il CLS su siti con contenuti dinamici complessi?
Per siti con feed social, commenti caricati dinamicamente o dashboard utente complesse, usa skeleton loaders che riservano spazio visivo prima del caricamento dei contenuti reali. Implementa anche content-visibility: auto per sezioni off-screen e usa contain: layout CSS per isolare sezioni che cambiano dinamicamente. Per applicazioni React/Vue integrate in WordPress, considera Server-Side Rendering (SSR) o Static Site Generation (SSG) per il first paint, riducendo shift durante l’idratazione JavaScript.