Hai aggiunto uno slider pesante su tutto il sito solo per un’animazione in homepage? Decine di kilobyte inutili si caricano su ogni pagina: articoli interni, contatti, sitemap. I visitatori aspettano e Google abbassa i punteggi dei tuoi Core Web Vitals.

Il problema non sono i plugin o il tema. Il problema è che WordPress di default non distingue tra le pagine quando registra gli script. Una sola riga wp_enqueue_script nel functions.php e il file si carica ovunque: homepage, pannello di amministrazione e pagina di login.

Ecco tre metodi funzionanti per accodare script e stili esclusivamente per la homepage. Niente plugin di ottimizzazione. Solo PHP e tag condizionali di WordPress.

💡 Panoramica rapida:

• Identifica il tipo di homepage: pagina statica o ultimi articoli, perché il tag condizionale dipende da questo
• Usa is_front_page() per una homepage statica e is_home() per la pagina del blog
• Inserisci il codice nel functions.php del tema child o tramite il plugin Code Snippets
• Verifica da DevTools → Network che gli script non vengano caricati sulle pagine interne

Step 1. Identifica il tipo di homepage

WordPress distingue due concetti: Front Page, ciò che il visitatore vede all’URL radice del sito, e Posts Page, la pagina che mostra gli articoli del blog. Possono coincidere (homepage = feed degli articoli) o essere diversi (homepage = pagina statica, mentre il blog risiede a un URL separato).

Apri il pannello di amministrazione: Impostazioni → Lettura. Nella sezione «La tua homepage mostra»:

• «Gli ultimi articoli»: homepage e pagina del blog coincidono. Nel codice usa is_home() o is_front_page(); entrambi restituiranno true.
• «Una pagina statica» con una homepage selezionata: usa is_front_page(). Qui is_home() restituirà true solo sulla pagina del blog (se ne è stata assegnata una separatamente).

Se hai dubbi, usa is_front_page(). È più affidabile perché si attiva sulla homepage indipendentemente dall’impostazione.

Step 2. Accoda lo script solo per la homepage

Il codice va nel file functions.php del tema child. Se non hai un tema child, usa il plugin Code Snippets (step 5): modificare il functions.php del tema padre verrà sovrascritto al prossimo aggiornamento.

L’esempio seguente accoda un file JavaScript nel footer solo quando il visitatore è sulla homepage:

1
/**
2
 * Enqueues a custom script only on the front page.
3
 * Hook location: child theme's functions.php or Code Snippets.
4
 */
5
add_action('wp_enqueue_scripts', function () {
6
    if (! is_front_page()) {
7
        return;
8
    }
9
 
10
    wp_enqueue_script(
11
        'my-frontpage-script',                         // handle — unique name
12
        get_template_directory_uri() . '/js/frontpage.js', // path to file
13
        array(),                                       // dependencies (jquery, etc.)
14
        '1.0.0',                                       // version for cache busting
15
        true                                           // true = in footer, false = in head
16
    );
17
});

Ecco cosa succede. L’hook wp_enqueue_scripts è il punto corretto per registrare gli script front-end (non init, non wp_head). is_front_page() verifica che ci troviamo sulla homepage. La funzione wp_enqueue_script aggiunge il file alla coda e WordPress stesso inserisce il tag <script> nel footer, prima del </body> di chiusura.

Nota: get_template_directory_uri() restituisce l’URL della cartella del tema padre. Se il file è nel tema child, sostituiscilo con get_stylesheet_directory_uri().

Step 3. Accoda gli stili allo stesso modo

Per un file CSS la logica è identica: tag condizionale + wp_enqueue_style. Il codice va nella stessa funzione degli script; non serve un hook separato.

1
if (is_front_page()) {
2
    wp_enqueue_style(
3
        'my-frontpage-styles',
4
        get_template_directory_uri() . '/css/frontpage.css',
5
        array(),
6
        '1.0.0'
7
    );
8
}

Il quinto parametro di wp_enqueue_style è il media type. Il default è 'all'. Se gli stili sono solo per schermi più larghi di 768px, specifica 'screen and (min-width: 768px)'.

Combina script e stili in un’unica funzione. Così eviti controlli ridondanti:

1
add_action('wp_enqueue_scripts', function () {
2
    if (! is_front_page()) {
3
        return;
4
    }
5
 
6
    wp_enqueue_script(
7
        'my-frontpage-script',
8
        get_template_directory_uri() . '/js/frontpage.js',
9
        array(),
10
        '1.0.0',
11
        true
12
    );
13
 
14
    wp_enqueue_style(
15
        'my-frontpage-styles',
16
        get_template_directory_uri() . '/css/frontpage.css',
17
        array(),
18
        '1.0.0'
19
    );
20
});

Un return anticipato in cima alla funzione è più pulito di blocchi if annidati. Il codice è più lungo, ma si legge più velocemente.

Step 4. Caso particolare: homepage e pagina del blog

Se Impostazioni → Lettura è su «Gli ultimi articoli», is_front_page() e is_home() funzionano in modo identico. Ma se la homepage è una pagina statica e il blog risiede su /blog/, ti serve un doppio controllo.

Per accodare uno script SOLO sulla pagina del blog (non sulla homepage statica), usa is_home():

1
if (is_home()) {
2
    // Code will only run on the posts page
3
}

Per accodare SIA sulla homepage SIA sulla pagina del blog, combinali:

1
if (is_front_page() || is_home()) {
2
    // Code will run on both "home" pages
3
}

Per l’elenco completo dei tag condizionali, consulta la documentazione ufficiale di WordPress. Lì troverai anche is_page (pagina per slug), is_single (singolo articolo), is_category (archivio di categoria) e decine di altri controlli per un caricamento granulare.

Step 5. Senza modificare functions.php: il plugin Code Snippets

Se preferisci non toccare i file del tema, installa il plugin gratuito Code Snippets dalla directory di WordPress.org. Aggiunge una sezione Snippets → Aggiungi nuovo nel pannello di amministrazione: incolla il tuo codice, scegli di eseguirlo «sul front end» e salva. L’effetto è lo stesso del functions.php, ma il codice sopravvive a un cambio di tema.

Un altro vantaggio di Code Snippets: se commetti un errore di sintassi, il plugin intercetta l’errore fatale e ti permette di annullare la modifica. Modificando il functions.php dal pannello di amministrazione, una sola parentesi mancante abbatte l’intero sito. Fai sempre un backup completo prima di modificare i file del tema.

Verifica del risultato

Apri il tuo sito, premi F12 → scheda Network e ricarica la pagina. Nell’elenco delle richieste, individua il tuo script (frontpage.js o come l’hai chiamato). Ora naviga su una qualsiasi pagina interna e ricarica; lo script non dovrebbe comparire nell’elenco.

Se lo script si carica ancora ovunque, controlla quanto segue:

• L’hook è sicuramente wp_enqueue_scripts e non init? init si attiva prima che il contesto della pagina sia determinato, quindi i tag condizionali possono restituire risultati errati.
• Il file è nel functions.php del tema child? Il tema padre potrebbe aver sovrascritto l’hook.
• Un plugin di ottimizzazione sta facendo caching? Svuotalo.

⁉️🤔 Domande frequenti

In cosa is_front_page() differisce da is_home()?

is_front_page() restituisce true sulla homepage del sito con QUALSIASI impostazione, sia che mostri gli ultimi articoli o una pagina statica. is_home() restituisce true solo sulla pagina degli articoli del blog. Se Impostazioni → Lettura è su «Gli ultimi articoli», entrambi i tag restituiscono true. Se la homepage è una pagina statica, is_home() si attiva solo su /blog/ (se ne è stata assegnata una).

Perché il mio codice nel functions.php non funziona?

Tre motivi più comuni. Primo: usare l’hook init invece di wp_enqueue_scripts, perché i tag condizionali non sono ancora definiti su init. Secondo: il functions.php del tema padre è stato sovrascritto da un aggiornamento; usa sempre un tema child o Code Snippets. Terzo: il percorso del file è sbagliato. get_template_directory_uri() punta alla cartella del tema padre, mentre get_stylesheet_directory_uri() punta alla cartella del tema child. Verifica stampando il valore e aprendo l’URL nel browser.

Posso accodare uno script su diverse pagine specifiche?

Sì. Sostituisci is_front_page() con is_page(array('about', 'contact')) e lo script si caricherà sulle pagine con slug about e contact. Oppure usa is_single('post-slug') per un articolo specifico. L’elenco completo dei tag condizionali è su developer.wordpress.org.

Qual è la differenza tra get_template_directory_uri() e get_stylesheet_directory_uri()?

Il primo restituisce l’URL della cartella del tema padre; il secondo restituisce l’URL della cartella del tema child. Se lavori in un tema child e il file è memorizzato lì, usa get_stylesheet_directory_uri(). Se il file è nel tema padre (o hai un solo tema, senza child), usa get_template_directory_uri(). Un percorso sbagliato è la prima causa del mancato caricamento di uno script.

Dovrei usare $_SERVER['REQUEST_URI'] per il controllo?

No. $_SERVER['REQUEST_URI'] si rompe con i parametri di query: /?utm_source=twitter non equivale più a /. Inoltre, alcuni host includono il percorso completo con la sottodirectory in REQUEST_URI. I tag condizionali di WordPress sono più affidabili e funzionano senza configurazioni.

In sintesi: tre righe che migliorano la velocità di caricamento

In pratica, la maggior parte dei siti ha bisogno solo di un singolo is_front_page() e di un paio di chiamate wp_enqueue_script/wp_enqueue_style.

Il caricamento condizionale degli script non è una micro-ottimizzazione. Un singolo plugin slider «pesante» da 300 KB, accodato su tutto il sito per un’animazione in homepage, aggiunge mezzo secondo al tempo di caricamento di ogni pagina interna. Moltiplicalo per il numero di visitatori e otterrai posizionamenti persi nei motori di ricerca.

La regola è semplice: un file si carica dove viene usato. Per la homepage, is_front_page(). Per il blog, is_home(). Per una pagina specifica, is_page('slug').

• Se hai una homepage statica, usa is_front_page() e mantieni le cose semplici.
• Se la homepage è il feed degli ultimi articoli, entrambi i tag funzionano.
• Se script e stili si ripetono su più pagine, estrai le condizioni in un array e verifica con in_array().

Inizia con un audit: apri DevTools → Coverage (tre puntini in Network → Altri strumenti → Coverage), ricarica la pagina e guarda quanti kilobyte di JS e CSS restano inutilizzati. Il numero ti sorprenderà. Quale tecnica di caricamento condizionale usi? Condividila nei commenti.