Come ritardare JavaScript in WordPress per migliorare la velocità della pagina
Che cosa è il JavaScript che blocca il rendering?
Quando un browser incontra un file JavaScript nell'HTML <head>, mette in pausa il rendering per scaricare, analizzare ed eseguire lo script. Questo ritarda la velocità con cui la pagina diventa visibile all'utente.
Fonti comuni di JS che bloccano il rendering:
- Script di temi e plugin (come slider, popup, animazioni)
- Script esterni (Google Analytics, Facebook Pixel, ecc.)
Qual è la differenza tra rinviare E asincrono?
asincrono: Scarica lo script senza bloccare l'analisi HTML. Lo esegue subito dopo il download. Potrebbero verificarsi conflitti se l'ordine è importante.rinviare: Scarica anche senza blocchi, ma ritarda l'esecuzione fino al completamento dell'analisi HTML: più sicuro e migliore per gli script dipendenti.
Come identificare JavaScript problematico
Utilizza questi strumenti per vedere quali script bloccano il rendering:
- PageSpeed Insights
- Chrome DevTools → Scheda Lighthouse
- Chrome DevTools → Rete → Filtra per JS
Concentrati sul caricamento dei file JS in <head> e contrassegnato come "render-blocking".
Come differire JavaScript in WordPress
Opzione 1: aggiungi Defer con codice (senza plugin)
Aggiungi questo codice al tuo tema figlio funzioni.php applicare rinviare a tutti gli script tranne jQuery:
funzione add_defer_attribute($tag, $handle) {
// Salta jQuery
se ('jquery-core' === $handle || 'jquery' === $handle) {
restituisci $tag;
}
restituisci str_replace(' src', ' differisci src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
Opzione 2: utilizzare Async
Simile a defer, puoi usare asincrono Invece, basta cambiare `defer` in `async` nel codice qui sopra. Ma attenzione: alcuni script dipendono dall'ordine di caricamento e potrebbero non funzionare.
Utilizzo dei plugin (con cautela)
Se non vuoi toccare il codice, questi plugin ti consentono di differire o rendere asincrono il JS:
- **WP Rocket** – Interfaccia semplice, funziona bene, ma a pagamento.
- **Asset CleanUp** – Consente di rinviare o disabilitare manualmente script specifici.
- **Flying Scripts** – Leggeri e focalizzati sul differimento di JS dopo un ritardo.
⚠️ Esegui sempre un test dopo l'abilitazione: rimandare lo script sbagliato può compromettere il layout o la funzionalità del sito.
Come testare l'impatto
- Utilizza PageSpeed Insights o GTmetrix prima/dopo
- Apri il tuo sito in una finestra di navigazione in incognito per individuare eventuali problemi visibili
- Utilizzare DevTools → scheda Rete → controllare l'ordine e la tempistica di caricamento
Conclusione: rinviare strategicamente
Il rinvio di JavaScript è una delle tecniche più semplici ma potenti per velocizzare il tuo sito WordPress. Inizia con script sicuri, evita di rinviare jQuery (a meno che non lo inserisca inline) ed esegui test approfonditi.
Vuoi approfondire? Richiedi un controllo gratuito delle prestazioni da SpeedWP Pro e ti aiuteremo a ottimizzare i tuoi script e la strategia di caricamento per ottenere i massimi risultati.