Core Web Vitals: Guida WordPress 2026

I Core Web Vitals sono metriche di Google che misurano l’esperienza utente reale. Influenzano direttamente il ranking SEO. Ecco come ottimizzare un sito WordPress per ottenere punteggi verdi su tutte e tre.

Le Tre Metriche Chiave

Ottimizzare LCP (Largest Contentful Paint)

1. Preload dell’Immagine Hero

// functions.php - Preload immagine LCP
add_action( 'wp_head', function() {
    if ( is_front_page() ) {
        echo '<link rel="preload" as="image" href="' . 
             get_template_directory_uri() . '/images/hero.webp" 
             fetchpriority="high">';
    }
}, 1 );

2. Priorità di Fetch per Immagini Above-the-Fold

<!-- Immagine LCP: priorità alta, NO lazy loading -->
<img src="hero.webp" 
     fetchpriority="high" 
     decoding="async"
     alt="Hero">

<!-- Immagini below-the-fold: lazy loading -->
<img src="other.webp" 
     loading="lazy" 
     decoding="async"
     alt="Other">

3. Eliminare Render-Blocking CSS

// Inline CSS critico, differisci il resto
add_action( 'wp_head', function() {
    $critical_css = file_get_contents( get_template_directory() . '/critical.css' );
    echo '<style id="critical-css">' . $critical_css . '</style>';
}, 2 );

// Carica CSS completo in modo non-blocking
add_filter( 'style_loader_tag', function( $html, $handle ) {
    if ( $handle === 'main-style' ) {
        return str_replace( "rel='stylesheet'", 
            "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", 
            $html );
    }
    return $html;
}, 10, 2 );

Ottimizzare FID/INP (Interattività)

1. Differisci JavaScript Non Critico

// Aggiungi defer a tutti gli script
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    $critical_scripts = ['jquery']; // Script che devono caricare subito
    
    if ( ! in_array( $handle, $critical_scripts ) && 
         strpos( $tag, 'defer' ) === false ) {
        return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}, 10, 2 );

2. Delay Scripts di Terze Parti

// Carica analytics solo dopo interazione utente
<script>
const loadAnalytics = () => {
    if (window.analyticsLoaded) return;
    window.analyticsLoaded = true;
    // Carica Google Analytics, Facebook Pixel, etc
    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXX';
    document.head.appendChild(script);
};

['scroll', 'click', 'mousemove', 'touchstart'].forEach(event => {
    window.addEventListener(event, loadAnalytics, {once: true, passive: true});
});

// Fallback: carica dopo 5 secondi
setTimeout(loadAnalytics, 5000);
</script>

3. Riduci/Elimina jQuery

// Se non hai plugin che dipendono da jQuery
add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_admin() ) {
        wp_deregister_script( 'jquery' );
    }
}, 100 );

Eliminare CLS (Layout Shift)

1. Dimensioni Esplicite per Immagini

<!-- SEMPRE specificare width e height -->
<img src="image.webp" width="800" height="450" alt="...">

<!-- Con CSS per responsività -->
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>

2. Riservare Spazio per Ads/Embed

<!-- Container con aspect ratio fisso -->
<div class="ad-container" style="aspect-ratio: 728/90; min-height: 90px;">
    <!-- Ad caricato dinamicamente -->
</div>

<!-- Embed YouTube con aspect ratio -->
<div style="aspect-ratio: 16/9;">
    <iframe src="..." style="width:100%; height:100%;"></iframe>
</div>

3. Font Display Swap

/* Evita FOIT (Flash of Invisible Text) */
@font-face {
    font-family: 'Inter';
    src: url('inter.woff2') format('woff2');
    font-display: swap;
}

/* Preload dei font critici */
<link rel="preload" href="inter.woff2" as="font" type="font/woff2" crossorigin>

Checklist Core Web Vitals

# LCP < 2.5s
□ Preload immagine hero
□ fetchpriority="high" su immagine LCP
□ Inline critical CSS
□ Immagini WebP ottimizzate
□ CDN per assets statici

# FID/INP < 100ms
□ defer su tutti gli script non critici
□ Delay analytics/tracking
□ Riduci/elimina jQuery se possibile
□ Code splitting per JS

# CLS < 0.1
□ width/height su tutte le immagini
□ aspect-ratio su container dinamici
□ font-display: swap
□ Preload font critici

Non riesci a superare 80/100? Spesso il problema è structurale (page builder, tema pesante, troppi plugin). Contattaci per un audit completo.