Vous avez ajouté un slider volumineux sur l’ensemble du site juste pour une animation sur la page d’accueil? Des dizaines de kilooctets inutiles se chargent sur chaque page: articles internes, contacts, plan du site. Les visiteurs patientent, et Google dégrade vos scores Core Web Vitals.

Le problème ne vient ni des extensions ni du thème. Le problème vient du fait que WordPress ne distingue pas les pages lors de l’enregistrement des scripts par défaut. Une seule ligne wp_enqueue_script dans le fichier functions.php, et le fichier se charge partout: la page d’accueil, l’administration et la page de connexion.

Voici trois méthodes fonctionnelles pour mettre en file d’attente des scripts et des styles strictement pour la page d’accueil. Aucune extension d’optimisation. Uniquement du PHP et les balises conditionnelles WordPress.

💡 Aperçu rapide:

• Identifiez votre type de page d’accueil: page statique ou derniers articles, car la balise conditionnelle en dépend
• Utilisez is_front_page() pour une page d’accueil statique et is_home() pour la page de blog
• Placez le code dans le fichier functions.php de votre thème enfant ou via l’extension Code Snippets
• Vérifiez via DevTools → Réseau que les scripts ne se chargent pas sur les pages internes

Étape 1. Identifiez votre type de page d’accueil

WordPress distingue deux concepts: Front Page, ce que le visiteur voit à l’URL racine du site, et Posts Page, la page qui affiche les articles de blog. Ils peuvent être identiques (page d’accueil = flux d’articles) ou différents (page d’accueil = page statique, tandis que le blog se trouve à une URL distincte).

Ouvrez l’administration: Réglages → Lecture. Dans la section «La page d’accueil affiche»:

• «Vos derniers articles»: la page d’accueil et la page de blog sont identiques. Dans le code, utilisez is_home() ou is_front_page(); les deux renverront true.
• «Une page statique» avec une page d’accueil sélectionnée: utilisez is_front_page(). Ici, is_home() renverra true uniquement sur la page de blog (si une page est assignée séparément).

En cas de doute, utilisez is_front_page(). C’est plus fiable, car elle se déclenche sur la page d’accueil quel que soit le réglage.

Étape 2. Mettez le script en file d’attente uniquement pour la page d’accueil

Le code se place dans le fichier functions.php de votre thème enfant. Si vous n’avez pas de thème enfant, utilisez l’extension Code Snippets (étape 5): toute modification du fichier functions.php du thème parent sera écrasée lors de la prochaine mise à jour.

L’exemple ci-dessous met en file d’attente un fichier JavaScript dans le pied de page uniquement lorsque le visiteur se trouve sur la page d’accueil:

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
});

Voici ce qui se passe. Le hook wp_enqueue_scripts est l’endroit approprié pour enregistrer les scripts front-end (pas init, pas wp_head). is_front_page() vérifie que nous sommes sur la page d’accueil. La fonction wp_enqueue_script ajoute le fichier à la file d’attente, et WordPress insère lui-même la balise <script> dans le pied de page, avant la fermeture de </body>.

Remarque: get_template_directory_uri() renvoie l’URL du dossier du thème parent. Si le fichier se trouve dans le thème enfant, remplacez-la par get_stylesheet_directory_uri().

Étape 3. Mettez les styles en file d’attente de la même manière

Pour un fichier CSS, la logique est identique: balise conditionnelle + wp_enqueue_style. Le code se place dans la même fonction que les scripts; un hook séparé n’est pas nécessaire.

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
}

Le cinquième paramètre de wp_enqueue_style est le type de média. Sa valeur par défaut est 'all'. Si les styles sont uniquement destinés aux écrans de plus de 768px, spécifiez 'screen and (min-width: 768px)'.

Combinez scripts et styles dans une seule fonction. Vous évitez ainsi les vérifications redondantes:

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 précoce en haut de la fonction est plus propre que des blocs if imbriqués. Le code est plus long, mais il se lit plus vite.

Étape 4. Cas particulier: page d’accueil et page de blog

Si Réglages → Lecture est réglé sur «Vos derniers articles», is_front_page() et is_home() fonctionnent de manière identique. Mais si la page d’accueil est une page statique et que le blog se trouve sur /blog/, vous avez besoin d’une double vérification.

Pour mettre en file d’attente un script UNIQUEMENT sur la page de blog (pas sur la page d’accueil statique), utilisez is_home():

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

Pour mettre en file d’attente à la fois sur la page d’accueil ET sur la page de blog, combinez-les:

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

Pour la liste complète des balises conditionnelles, consultez la documentation officielle de WordPress. Vous y trouverez également is_page (page par slug), is_single (article unique), is_category (archive de catégorie) et des dizaines d’autres vérifications pour un contrôle granulaire du chargement.

Étape 5. Sans modifier functions.php: l’extension Code Snippets

Si vous préférez ne pas toucher aux fichiers du thème, installez l’extension gratuite Code Snippets depuis le répertoire WordPress.org. Elle ajoute une section Snippets → Ajouter dans l’administration: collez votre code, choisissez de l’exécuter «sur le front-end» et enregistrez. L’effet est le même que celui de functions.php, mais le code survit à un changement de thème.

Autre avantage de Code Snippets: si vous faites une erreur de syntaxe, l’extension intercepte l’erreur fatale et vous permet d’annuler la modification. Lorsque vous modifiez functions.php via l’administration, une simple parenthèse manquante fait tomber tout le site. Faites toujours une sauvegarde complète avant de modifier les fichiers du thème.

Vérification du résultat

Ouvrez votre site, appuyez sur F12 → l’onglet Réseau et actualisez la page. Dans la liste des requêtes, trouvez votre script (frontpage.js ou le nom que vous lui avez donné). Naviguez maintenant vers une page interne et actualisez; le script ne doit pas apparaître dans la liste.

Si le script se charge encore partout, vérifiez les points suivants:

• Le hook est-il bien wp_enqueue_scripts et non init? init se déclenche avant que le contexte de la page ne soit déterminé, les balises conditionnelles peuvent donc renvoyer des résultats incorrects.
• Le fichier se trouve-t-il dans le fichier functions.php du thème enfant? Le thème parent a peut-être écrasé le hook.
• Une extension d’optimisation est-elle en cache? Videz-le.

⁉️🤔 Questions fréquentes

Quelle est la différence entre is_front_page() et is_home()?

is_front_page() renvoie true sur la page d’accueil du site quel que soit le réglage, qu’elle affiche les derniers articles ou une page statique. is_home() renvoie true uniquement sur la page des articles de blog. Si Réglages → Lecture est réglé sur «Vos derniers articles», les deux balises renvoient true. Si la page d’accueil est une page statique, is_home() se déclenche uniquement sur /blog/ (si une page est assignée).

Pourquoi mon code dans functions.php ne fonctionne-t-il pas?

Trois raisons les plus courantes. Premièrement: l’utilisation du hook init au lieu de wp_enqueue_scripts, car les balises conditionnelles ne sont pas encore définies au moment de init. Deuxièmement: le fichier functions.php du thème parent a été écrasé par une mise à jour; utilisez toujours un thème enfant ou Code Snippets. Troisièmement: le chemin du fichier est incorrect. get_template_directory_uri() pointe vers le dossier du thème parent, tandis que get_stylesheet_directory_uri() pointe vers le dossier du thème enfant. Vérifiez en affichant la valeur et en ouvrant l’URL dans un navigateur.

Puis-je mettre un script en file d’attente sur plusieurs pages spécifiques?

Oui. Remplacez is_front_page() par is_page(array('about', 'contact')), et le script se chargera sur les pages ayant les slugs about et contact. Ou utilisez is_single('post-slug') pour un article spécifique. La liste complète des balises conditionnelles se trouve sur developer.wordpress.org.

Quelle est la différence entre get_template_directory_uri() et get_stylesheet_directory_uri()?

La première renvoie l’URL du dossier du thème parent; la seconde renvoie l’URL du dossier du thème enfant. Si vous travaillez dans un thème enfant et que le fichier y est stocké, utilisez get_stylesheet_directory_uri(). Si le fichier se trouve dans le thème parent (ou si vous n’avez qu’un seul thème, sans enfant), utilisez get_template_directory_uri(). Un chemin incorrect est la première raison pour laquelle un script ne se charge pas.

Dois-je utiliser $_SERVER['REQUEST_URI'] pour la vérification?

Non. $_SERVER['REQUEST_URI'] échoue avec les paramètres de requête: /?utm_source=twitter n’est plus égal à /. De plus, certains hébergeurs incluent le chemin complet avec le sous-répertoire dans REQUEST_URI. Les balises conditionnelles de WordPress sont plus fiables et fonctionnent immédiatement.

À retenir: trois lignes qui améliorent la vitesse de chargement

En pratique, la plupart des sites n’ont besoin que d’un seul is_front_page() et de quelques appels wp_enqueue_script/wp_enqueue_style.

Le chargement conditionnel des scripts n’est pas une micro-optimisation. Un seul plugin de slider «lourd» pesant 300 Ko, mis en file d’attente sur tout le site pour une animation de page d’accueil, ajoute une demi-seconde au temps de chargement de chaque page interne. Multipliez cela par votre nombre de visiteurs, et vous obtenez des positions perdues dans les moteurs de recherche.

La règle est simple: un fichier se charge là où il est utilisé. Pour la page d’accueil, is_front_page(). Pour le blog, is_home(). Pour une page spécifique, is_page('slug').

• Si vous avez une page d’accueil statique, utilisez is_front_page() et restez simple.
• Si la page d’accueil est le flux des derniers articles, l’une ou l’autre balise fonctionnera.
• Si les scripts et les styles se répètent sur plusieurs pages, extrayez les conditions dans un tableau et vérifiez avec in_array().

Commencez par un audit: ouvrez DevTools → Couverture (trois points dans Réseau → Plus d’outils → Couverture), actualisez la page et voyez combien de kilooctets de JS et de CSS ne sont pas utilisés. Le chiffre vous surprendra. Quelle technique de chargement conditionnel utilisez-vous? Partagez-la dans les commentaires.