Sette siti su dieci che non superano PageSpeed Insights rallentano a causa di JavaScript di terze parti. Script esterni, analytics, reti pubblicitarie, chat, font, banner cookie bloccano il rendering e posticipano il First Contentful Paint di secondi. E non puoi disabilitarli: gli analytics alimentano il marketing, la chat porta lead, senza banner cookie il sito non supera un audit.

C'è una soluzione: il lazy loading. Lo script viene caricato solo quando il contenuto principale è già stato mostrato all'utente. Il browser non attende, le metriche Core Web Vitals entrano in zona verde e la funzionalità del sito non ne risente.

Abbiamo raccolto tutti i metodi funzionanti, dagli attributi HTML nativi alle tecniche programmatiche e ai plugin per WordPress. Con esempi di codice che puoi copiare e applicare da subito.

💡 Panoramica rapida:

• Capire defer e async: la tabella mostra chiaramente la differenza tra gli attributi
• Padroneggiare il caricamento programmatico sull'evento load: una versione moderna del metodo di Patrick Sexton
• Configurare Intersection Observer per gli script below the fold: chat, mappe, commenti
• Ottimizzare WordPress senza toccare codice: i plugin Flying Scripts e Asset CleanUp

Come gli script di terze parti rallentano il caricamento

Il browser analizza l'HTML dall'alto verso il basso. Quando incontra <script src="..."> senza attributi, l'analisi si interrompe: il browser carica lo script, lo esegue e solo dopo riprende l'analisi della pagina. Questo è il render-blocking.

Per l'utente il risultato è una schermata bianca. La metrica First Contentful Paint (FCP), il tempo fino alla visualizzazione del primo contenuto, dipende direttamente da quanto velocemente il browser ha superato tutti gli script bloccanti. L'FCP fa parte dei Core Web Vitals e incide direttamente sul posizionamento nei motori di ricerca.

Gli script di terze parti pesano più dei tuoi: sono ospitati su server esterni e non hai alcun controllo sulla loro velocità di distribuzione o disponibilità. Query DNS, handshake TCP, handshake TLS, download: ogni fase aggiunge decine o centinaia di millisecondi. Secondo i dati HTTP Archive del 2024, il sito mediano su dispositivi mobili carica 21 script esterni e tre di questi sono bloccanti.

La soluzione è dare al browser un'istruzione chiara: «carica lo script in background ed eseguilo più tardi». È esattamente lo scopo per cui sono stati progettati gli attributi defer e async.

Defer e async: due meccanismi nativi

Entrambi gli attributi si scrivono nel tag <script> e modificano il comportamento di caricamento. In modi radicalmente diversi.

Defer: esecuzione differita con garanzia di ordine

L'attributo defer dice al browser: «carica lo script in background, eseguilo dopo l'analisi completa dell'HTML». L'ordine di esecuzione è preservato, gli script vengono eseguiti esattamente nella sequenza specificata nel markup.

1
<script src="https://example.com/analytics.js" defer></script>
2
<script src="https://example.com/chat-widget.js" defer></script>

La scelta ideale per script che devono essere eseguiti in un ordine specifico: libreria, poi il suo plugin, poi l'inizializzazione. defer garantisce che il DOM sia pronto al momento dell'esecuzione. L'evento DOMContentLoaded scatta dopo tutti gli script defer.

Async: indipendenza totale

async carica lo script in parallelo all'analisi e lo esegue subito dopo il caricamento, senza attendere gli altri. L'ordine non è garantito: viene eseguito per primo lo script che il server ha caricato prima.

1
<script src="https://example.com/independent-widget.js" async></script>

Adatto a script completamente indipendenti: contatori visite, pulsanti social, banner pubblicitari. Se lo script non dipende dal DOM e non dipende da altri script, usa async.

Sfumatura importante: uno script async può essere eseguito prima che il DOM sia costruito. Se fa riferimento a elementi della pagina che ancora non esistono, otterrai null e un errore nella console. Verifica sempre.

Caricamento programmatico sull'evento load: il metodo di Patrick Sexton

Cosa fare se lo script non supporta defer/async o se non hai il controllo del markup? Per esempio, lo script è inserito tramite Google Tag Manager o è scritto in modo rigido nel plugin di qualcun altro. Il metodo programmatico viene in soccorso.

L'idea è semplice: creare un elemento <script> via JavaScript e aggiungerlo al DOM solo dopo che la pagina è stata completamente caricata. L'autore dell'approccio, Patrick Sexton, ha descritto per primo la tecnica su varvy.com.

La versione moderna di questo codice:

1
function loadScriptOnPageLoad(src) {
2
  const script = document.createElement('script');
3
  script.src = src;
4
  script.async = false;
5
  document.body.appendChild(script);
6
}
7
 
8
window.addEventListener('load', () => {
9
  loadScriptOnPageLoad('/wp-content/plugins/chat/chat.js');
10
  loadScriptOnPageLoad('/wp-content/plugins/analytics/tracker.js');
11
});

Due differenze chiave rispetto al codice di dieci anni fa. Primo: restiamo in ascolto di load, non di DOMContentLoaded. L'evento load si verifica più tardi, quando tutte le immagini, gli stili e i font sono stati caricati. Uno script posticipato è garantito che non influisca su FCP o LCP. Secondo: niente window.attachEvent. Questo metodo serviva solo per Internet Explorer 8 e versioni precedenti, che non esistono più. Il moderno addEventListener funziona in tutti i browser attuali.

Tre situazioni in cui l'approccio programmatico è insostituibile

defer e async funzionano solo per i tag <script> scritti direttamente nell'HTML. Il metodo programmatico ti salva quando:

• Lo script viene inserito tramite Google Tag Manager o un altro tag manager, non vedi il markup.
• Non puoi modificare il template: un plugin o un tema di terze parti con una struttura rigida.
• Hai bisogno del caricamento condizionale: per esempio, uno script per un form di contatto solo sulle pagine che contengono un form.

Intersection Observer: caricamento on-demand

Per alcuni script, anche defer è troppo presto. Un widget di chat non serve finché l'utente non arriva al footer. Una mappa, finché non raggiunge il blocco con l'indirizzo. I commenti, finché non legge fino alla sezione di discussione.

L'API Intersection Observer risolve esattamente questo problema: lo script viene caricato solo quando l'elemento target entra nella viewport.

1
const chatTarget = document.getElementById('chat-container');
2
 
3
if (chatTarget) {
4
  const observer = new IntersectionObserver((entries) => {
5
    entries.forEach((entry) => {
6
      if (entry.isIntersecting) {
7
        const script = document.createElement('script');
8
        script.src = '/wp-content/plugins/chat/chat.js';
9
        document.body.appendChild(script);
10
        observer.unobserve(entry.target);
11
      }
12
    });
13
  }, { rootMargin: '200px' });
14
 
15
  observer.observe(chatTarget);
16
}

Il parametro rootMargin: '200px' carica lo script 200 pixel prima che l'elemento compaia sullo schermo, così l'utente non percepisce alcun ritardo. In passato, per anni gli sviluppatori hanno usato listener scroll con getBoundingClientRect(), ma questi si attivavano a ogni pixel di scorrimento e sovraccaricavano il thread principale.

Intersection Observer funziona in modo asincrono e non grava quasi per nulla sul browser. Il supporto è presente in tutti i browser moderni, incluso Safari dalla versione 12.1. IE11 non è supportato, ma la sua quota a giugno 2026 è prossima all'errore statistico.

WordPress: lazy loading senza modificare il codice

Se il sito è su WordPress, puoi implementare il lazy loading in tre modi, dal più semplice al più flessibile.

Plugin per il lazy loading degli script

Due opzioni funzionanti, testate su migliaia di siti.

Flying Scripts, un plugin gratuito di Gijo Varghese, oltre 30.000 installazioni attive, versione 1.2.4 (aggiornato a maggio 2026). Può ritardare JavaScript fino alla prima interazione dell'utente: movimento del mouse, click, scroll, tocco su mobile. Specifichi parole chiave dall'URL dello script e il plugin ne ritarda l'esecuzione. C'è un timeout: se l'utente non interagisce con la pagina, gli script vengono eseguiti dopo un tempo prestabilito. Massimo guadagno sulle metriche, ma chat o form di callback vanno esclusi dal ritardo, servono subito.

WP Rocket, un plugin di caching premium con funzionalità integrata di ritardo del caricamento JavaScript. Aggiunge defer o async agli script selezionati tramite l'interfaccia di amministrazione. Specifichi l'URL, il plugin cambia l'attributo durante il rendering della pagina. Adatto a chi usa già WP Rocket per la cache e non vuole moltiplicare i plugin.

Hook script_loader_tag in functions.php

Se non vuoi installare un plugin dedicato, WordPress permette di filtrare l'output del tag <script> tramite l'hook script_loader_tag. Il codice qui sotto aggiunge defer a tutti gli script tranne jQuery e il pannello di amministrazione:

1
add_filter('script_loader_tag', function($tag, $handle) {
2
    if (is_admin()) {
3
        return $tag;
4
    }
5
    $skip = ['jquery', 'jquery-core', 'jquery-migrate'];
6
    if (in_array($handle, $skip, true)) {
7
        return $tag;
8
    }
9
    return str_replace(' src', ' defer src', $tag);
10
}, 10, 2);

Inserisci il codice nel functions.php del tema child o tramite il plugin Code Snippets. Prima di applicarlo, fai un backup. defer su jQuery romperà qualsiasi codice che chiami $() o jQuery() prima di DOMContentLoaded. Inizia con script singoli, controlla la console per errori dopo ogni modifica.

Controllo totale: Asset CleanUp

Asset CleanUp, un plugin gratuito (versione 1.4.0.4, aggiornato a maggio 2026) che mostra TUTTI gli script e gli stili caricati su una pagina. Con indicazione di dimensione e origine. Puoi disabilitare uno script specifico su una pagina specifica, cambiare l'attributo di caricamento in defer/async o scaricare completamente un asset non necessario.

Il vantaggio principale rispetto a Flying Scripts: Asset CleanUp dà un quadro completo per ogni pagina. Vedi esattamente cosa sta caricando e prendi decisioni mirate. La versione Pro aggiunge il caricamento condizionale per tipo di schermo e lo spostamento degli script tra HEAD e BODY. Funziona con qualsiasi plugin di caching, WP Rocket, W3 Total Cache, WP Fastest Cache.

Un approfondimento sull'accelerazione di WordPress è in un articolo dedicato: 21 consigli per migliorare il punteggio PageSpeed Insights. Se il problema non sono solo gli script ma la velocità complessiva dell'hosting, dai un'occhiata a come ridurre il tempo di caricamento delle pagine WordPress. E gli strumenti per verificare le performance di WordPress ti aiuteranno a misurare l'effetto reale dell'ottimizzazione.

Video: async e defer nella pratica

Un'analisi di cinque minuti dal canale xplodivity, con diagrammi visivi di caricamento ed esempi di codice dal vivo:

⁉️🤔 Domande frequenti

defer** o async, quale scegliere per Google Analytics?**

async. Analytics.js e gtag.js sono completamente indipendenti dal DOM, non hanno bisogno di un ordine di esecuzione. GA4 raccomanda ufficialmente async, la libreria gestisce autonomamente l'inizializzazione ritardata.

In cosa differisce l'evento load da DOMContentLoaded?

DOMContentLoaded si attiva quando l'HTML è stato completamente analizzato e l'albero DOM è costruito, stili e immagini potrebbero essere ancora in caricamento. load avviene dopo: quando tutto è stato caricato, incluse immagini, font e fogli di stile. Per il caricamento lazy degli script, load è più sicuro: a questo punto la pagina è stata sicuramente mostrata all'utente.

Si può aggiungere defer a uno script inline?

No. L'attributo defer funziona solo per script esterni con l'attributo src. Uno script inline (<script>code</script>) con defer verrà ignorato, il browser lo eseguirà come un normale script bloccante. Per ritardare codice inline, racchiudilo in un listener DOMContentLoaded o load.

È sicuro mettere defer su tutti gli script di un sito WordPress?

jQuery con defer romperà qualsiasi codice che chiami $() o jQuery() prima di DOMContentLoaded. È esattamente per questo che jQuery è escluso dall'elaborazione nello snippet sopra. Inizia con gli script non critici: chat, social media, pubblicità. Espandi la lista gradualmente, controllando la console per errori dopo ogni modifica.

Intersection Observer o defer, qual è meglio?

Risolvono compiti diversi. defer è per script sempre necessari sulla pagina ma non critici per il primo render: analytics, test A/B. Intersection Observer è per script legati a un blocco specifico: mappa, chat nel footer, widget dei commenti. Regola semplice: script nella parte alta della pagina, defer; script sotto la piega, Intersection Observer.

Cosa fare se Flying Scripts ha rotto delle funzionalità?

Escludi lo script problematico dalla lista di ritardo nelle impostazioni del plugin. Flying Scripts permette di specificare parole chiave per l'inclusione, rimuovi la parola chiave dello script problematico e questo verrà caricato normalmente. Per elementi critici come form e chat, questo è un passaggio obbligatorio prima di attivare il ritardo.

Cosa mettere sul tuo sito: matrice decisionale

La scelta si riduce a una semplice tabella decisionale:

• Lo script è scritto in HTML, controlli i tag, defer se dipende dall'ordine, async se è completamente indipendente.
• Lo script è inserito via GTM o un plugin di terzi, i tag non sono accessibili, caricamento programmatico sull'evento load.
• Lo script è legato a un blocco sotto la piega, Intersection Observer con rootMargin: '200px'.
• WordPress, ti serve senza codice, Flying Scripts (gratuito, oltre 30.000 siti) o Asset CleanUp per un controllo completo degli asset.

Inizia dalla cosa più semplice: apri PageSpeed Insights, trova gli script esterni bloccanti e aggiungi loro defer. Un solo attributo, e l'FCP può passare da rosso a verde. E quando avrai padroneggiato gli attributi, dai un'occhiata alla nostra recensione degli strumenti per verificare le performance di WordPress, ti aiuterà a misurare l'effetto reale.