Comment ajouter un preloader dans WordPress : Guide étape par étape

Table des matières

Mis à jour mai 2026.

TL;DR: Une animation de preloader comble le vide pendant le chargement des ressources lourdes. En 2026, le bon plugin est WP Smart Preloader ou un extrait personnalisé léger — mais ignorez-le si votre site est déjà rapide, car un preloader mal réglé nuit activement au LCP.

Devriez-vous vraiment ajouter un preloader en 2026 ?

Avant d’expliquer la procédure, laissez-moi vous donner la réponse honnête : la plupart des sites ne devraient pas ajouter de preloader.

Les Core Web Vitals de Google mesurent le Largest Contentful Paint (LCP) — la vitesse à laquelle votre contenu le plus visible apparaît. Un preloader retarde littéralement ce rendu en recouvrant l’écran d’une animation. Si votre preloader tourne ne serait-ce que 1,5 seconde, c’est 1,5 seconde de pénalité LCP garantie à chaque chargement de page.

Quand un preloader est justifié :

• Votre site est vraiment lourd — grandes vidéos hero, cartes interactives, animations canvas — et l’état vierge paraît cassé sans preloader.
• Vous avez une barre de chargement ou un indicateur de progression qui donne un retour réel aux utilisateurs, pas juste un spinner esthétique.

Quand l’ignorer complètement :

• Vous avez un blog classique, un portfolio ou une boutique WooCommerce. Accélérez plutôt le site — chargement différé des images, CDN, hébergement plus rapide.
• Votre LCP est déjà inférieur à 2,5 s. Ajouter un preloader ne ferait qu’aggraver les choses.

Si vous souhaitez quand même continuer, voici comment procéder correctement à l’ère Gutenberg / Full Site Editing.

Qu’est-ce qu’un preloader ?

Un preloader est un élément d’interface — généralement un spinner animé, une barre de progression ou une animation du logo de la marque — affiché pendant que le navigateur télécharge et rend les ressources de la page. Le texte et le HTML se chargent vite ; les images et les vidéos intégrées prennent plus de temps. Le preloader comble cet écart pour que les utilisateurs voient quelque chose plutôt qu’une mise en page vide ou partiellement rendue.

Sous l’ancien WordPress (avant l’éditeur classique version 5.0), les preloaders étaient couramment ajoutés en modifiant header.php directement. En 2026, avec Gutenberg et les thèmes FSE, modifier les fichiers du thème directement est fortement déconseillé — les mises à jour du thème effacent vos modifications. Utilisez plutôt un plugin ou l’approche Code Snippets.

Comment ajouter un preloader dans WordPress (méthodes 2026)

Méthode 1 — Plugin WP Smart Preloader

WP Smart Preloader est un plugin gratuit du dépôt WordPress.org qui fonctionne avec les thèmes classiques et les thèmes blocs. Vérifiez qu’il est toujours activement maintenu et compatible avec votre version de WordPress actuelle avant de l’installer — le statut de maintenance des plugins peut changer ; regardez la date «Dernière mise à jour» sur sa page dans le dépôt.

1. Dans votre tableau de bord WordPress, allez dans Extensions → Ajouter et recherchez «WP Smart Preloader».
2. Installez-le et activez-le.
3. Allez dans Réglages → WP Smart Preloader.
4. Choisissez un style de preloader parmi les options intégrées, ou collez votre propre HTML/CSS personnalisé.
5. Sous «Show only on Home Page» — activez cette option si vous voulez l’animation uniquement sur la page d’accueil. Exécuter un preloader sur chaque page multiplie le coût LCP sur l’ensemble de votre site.
6. Définissez la Durée d’affichage du loader. La valeur par défaut est 1500 ms. Je recommande de la réduire — 800–1000 ms maximum. Plus il tourne longtemps, plus votre score LCP sera mauvais.
7. Cliquez sur Enregistrer les modifications et testez avec PageSpeed Insights avant et après. Si le LCP augmente, supprimez le plugin.

Méthode 2 — Code personnalisé via le plugin Code Snippets

Si vous voulez un contrôle total sans plugin dédié au preloader, utilisez le plugin Code Snippets (gratuit, largement maintenu) pour injecter le balisage et les styles sans toucher aux fichiers du thème.

Étape 1 — Ajouter l’extrait HTML (PHP)

Dans Code Snippets, créez un nouvel extrait configuré pour s’exécuter en «Front-end uniquement» :

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Remarque : wp_body_open ne se déclenche que sur les thèmes qui appellent wp_body_open() dans leur template. La plupart des thèmes blocs modernes et des thèmes classiques maintenus le font. Si votre preloader n’apparaît pas, vérifiez si votre thème prend en charge ce hook.

Étape 2 — Ajouter le CSS

Créez un second extrait configuré en «Front-end uniquement → CSS» :

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

Étape 3 — Ajouter le JavaScript de fermeture

Créez un troisième extrait configuré en «Front-end uniquement → JavaScript» :

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

Cela supprime le preloader à l’événement window.load — après le chargement des images et des sous-cadres — plutôt qu’à DOMContentLoaded, qui se déclenche trop tôt.

Méthode 3 — Thème blocs / FSE : Utilisez un bloc de superposition de chargement ou un plugin

Si vous utilisez un thème Full Site Editing (Twenty Twenty-Four, Kadence, GeneratePress en mode blocs, etc.), certains plugins de constructeurs de pages (Elementor, Kadence Blocks, Spectra) disposent d’options de preloader ou d’écran de chargement intégrées dans leurs réglages. Consultez d’abord la documentation de votre thème ou constructeur — dupliquer un preloader avec un plugin séparé par-dessus un preloader intégré provoquera une double superposition.

Liste de contrôle des performances avant la mise en ligne

Avant de publier un preloader, vérifiez tout ce qui suit :

1. Effectuez un test PageSpeed Insights sur une page sans le preloader. Notez votre LCP.
2. Activez le preloader et relancez le même test. Si le LCP se dégrade de plus de ~100 ms, reconsidérez.
3. Gardez la durée du preloader à 1000 ms ou moins. Tout ce qui est plus long est un handicap pour l’UX et le référencement.
4. Testez sur une connexion mobile 4G bridée (Chrome DevTools → Réseau → 4G rapide). Les preloaders paraissent beaucoup plus longs sur des connexions lentes.
5. Assurez-vous que le preloader est masqué des lecteurs d’écran (aria-hidden="true") et ne piège pas le focus clavier.

FAQ sur les preloaders WordPress — 2026

Un preloader nuit-il au référencement ?

Oui, il peut. Les Core Web Vitals de Google — en particulier le LCP — sont un signal de classement confirmé. Un preloader qui se place devant votre contenu retarde le LCP. Pour la plupart des sites WordPress standard, je l’ignorerais complètement et investirais le temps dans l’optimisation des images et la mise en cache. Si votre site est assez lourd pour en avoir véritablement besoin, gardez la durée courte et surveillez les CWV dans Google Search Console.

Les plugins de preloader fonctionnent-ils avec les thèmes Full Site Editing (Gutenberg) ?

La plupart oui, à condition que le thème appelle wp_body_open(). L’éditeur de blocs WordPress lui-même ne change pas le fonctionnement des événements de chargement de page dans le navigateur. Vérifiez la version «Testé jusqu’à» du plugin dans le dépôt WordPress.org pour confirmer la compatibilité avec votre version de WordPress installée — vérifiez cela au moment de l’installation, car le statut de compatibilité évolue.

Puis-je ajouter un preloader sans plugin en 2026 ?

Oui — la méthode Code Snippets décrite ci-dessus est l’approche sans plugin la plus propre. Elle survit aux mises à jour du thème, est facile à désactiver et vous donne un contrôle total sur le balisage et le timing. Évitez de modifier header.php directement dans votre thème actif ou enfant ; cela génère une dette de maintenance et se casse si vous changez de thème.

Mon preloader s’affiche sur toutes les pages. Comment le limiter à la page d’accueil ?

Dans WP Smart Preloader, cochez «Show only on Home Page» dans les réglages. Pour la méthode de code personnalisé, encadrez l’appel add_action avec une conditionnelle :

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Lectures complémentaires :

• Comment accélérer votre site WordPress
• Meilleurs plugins WordPress
• WordPress.com vs. WordPress.org

Ce guide fait partie de alejandrorioja.com — écrit par Alejandro Rioja, qui construit désormais des systèmes d’agents IA pour les fondateurs. Y compris l’agent qui maintient ce site à jour. Comment ça marche →

Mis à jour pour mai 2026

Une courte note de mai 2026 : le flux de travail décrit dans cet article a été vérifié par rapport à l’état actuel des outils et plateformes sous-jacents. Là où des outils, interfaces ou fonctionnalités spécifiques ont évolué, les conseils structurels restent valides — l’implémentation aura un aspect légèrement différent en 2026. Si vous trouvez une étape qui ne correspond pas à ce que vous voyez à l’écran, c’est probablement une mise à jour de l’interface, pas un changement fondamental d’approche. Laissez-moi un message via le formulaire de contact et je le corrigerai explicitement.