INP su WordPress: La Metrica che Nessun Plugin di Cache Può Risolvere
INP (Interaction to Next Paint) ha sostituito FID come Core Web Vital nel marzo 2024. Misura quanto tempo passa tra il click dell’utente e l’aggiornamento visivo della pagina. La soglia: 200ms o meno.
La cache non aiuta qui. INP è un problema lato client, non lato server. Il tuo TTFB può essere 10ms e il tuo INP 800ms. Perché? JavaScript.
Perché WordPress Ha Problemi di INP
WordPress carica mediamente 15-25 file JavaScript nel frontend. Ogni file può contenere event handler che si attivano al click. Se un handler blocca il main thread per 300ms, l’INP è 300ms. Fallito.
I colpevoli ricorrenti:
| Colpevole | Impatto INP tipico | Fix |
|---|---|---|
| jQuery + jQuery Migrate | +50-100ms | Rimuovi jQuery Migrate |
| Elementor frontend JS | +100-300ms | Disabilita feature non usate |
| Google Analytics (gtag.js) | +30-50ms | Carica async, usa Partytown |
| Facebook Pixel | +50-100ms | Carica defer, o server-side |
| Slider (Slick, Swiper) | +100-200ms | Rimuovi slider su mobile |
| Chat widget (Crisp, Tawk) | +50-150ms | Carica solo dopo interazione |
Come Diagnosticare INP
// Chrome DevTools → Performance → Registra un'interazione
// Cerca i "Long Tasks" (barre rosse) > 50ms durante il click
// O usa la Web Vitals library
import {onINP} from 'web-vitals';
onINP(({value, entries}) => {
console.log('INP:', value, 'ms');
console.log('Target:', entries[0].target);
});I 5 Fix Più Efficaci
1. Rimuovi jQuery Migrate
add_action('wp_default_scripts', function($scripts) {
if (!is_admin()) {
$scripts->remove('jquery');
$scripts->add('jquery', false, ['jquery-core']);
}
});2. Defer tutti i tracking script
add_filter('script_loader_tag', function($tag, $handle) {
$defer = ['google-analytics', 'facebook-pixel', 'hotjar'];
if (in_array($handle, $defer)) return str_replace(' src=', ' defer src=', $tag);
return $tag;
}, 10, 2);3. Lazy load i widget pesanti
Carica chat widget, social widget, commenti Disqus solo quando l’utente scrolla verso di loro o clicca un trigger.
4. Usa CSS per le animazioni, non JS
Le animazioni CSS con transform e opacity non bloccano il main thread. Le animazioni jQuery/JS sì.
5. Code splitting del page builder
Elementor carica tutto il suo JS anche se la pagina usa solo 2 widget. Usa “Improved Asset Loading” (Elementor → Settings → Performance) per caricare solo il JS dei widget usati.
FAQ
Il mio INP è alto solo su mobile. Perché?
I processori mobile sono 3-5x più lenti dei desktop. Un JavaScript che gira in 50ms su desktop gira in 150-250ms su un telefono medio. Testa sempre su un dispositivo reale mid-range, non sul tuo iPhone 15.
INP è più difficile da risolvere di LCP?
Sì. LCP si risolve con cache + immagini ottimizzate (server-side). INP richiede di modificare o rimuovere JavaScript lato client, il che spesso significa cambiare plugin o tema. È più invasivo.