Hoe Voeg Je een Preloader Toe in WordPress: Een Stap-voor-Stap Handleiding

Inhoudsopgave

Bijgewerkt mei 2026.

TL;DR: Een preloader-animatie vult de leemte terwijl zware assets laden. In 2026 is de juiste plugin WP Smart Preloader of een lichtgewicht aangepast snippet — maar sla het over als je site al snel is, want een slecht afgestelde preloader schaadt actief je LCP.

Moet je Überhaupt een Preloader Toevoegen in 2026?

Voordat ik uitleg hoe het moet, geef ik je eerst het eerlijke antwoord: de meeste sites zouden geen preloader moeten toevoegen.

Google’s Core Web Vitals meten Largest Contentful Paint (LCP) — hoe snel je meest zichtbare inhoud verschijnt. Een preloader vertraagt die weergave letterlijk door het scherm te bedekken met een animatie. Als je preloader zelfs maar 1,5 seconden duurt, zijn dat 1,5 seconden gegarandeerde LCP-straf bij elke paginaweergave.

Wanneer een preloader zinvol is:

• Je site is echt zwaar — grote hero-video’s, interactieve kaarten, canvas-gebaseerde animaties — en de kale lege staat ziet er zonder preloader kapot uit.
• Je hebt een laadbalk of voortgangsindicator die gebruikers echte feedback geeft, niet alleen een spinner voor de esthetiek.

Wanneer je het helemaal overslaat:

• Je hebt een typisch blog, portfolio of WooCommerce-winkel. Versnel de site — laad afbeeldingen lui in, gebruik een CDN, schakel over naar een snellere host.
• Je LCP is al onder de 2,5 s. Het toevoegen van een preloader maakt het alleen maar erger.

Als je toch wilt doorgaan, hier is hoe je het correct doet in het Gutenberg / Full Site Editing-tijdperk.

Wat is een Preloader?

Een preloader is een UI-element — meestal een geanimeerde spinner, voortgangsbalk of een merklogo-animatie — dat wordt weergegeven terwijl de browser pagina-resources downloadt en weergeeft. Tekst en HTML laden snel; afbeeldingen en ingesloten video kosten meer tijd. De preloader vult dat gat zodat gebruikers iets zien in plaats van een leeg of gedeeltelijk weergegeven layout.

In oudere WordPress (de classic editor-dagen vóór 5.0) werden preloaders vaak toegevoegd door header.php direct te bewerken. In 2026, met Gutenberg en FSE-thema’s, wordt het direct bewerken van themabestanden sterk afgeraden — thema-updates wissen je wijzigingen. Gebruik in plaats daarvan een plugin of een Code Snippets-aanpak.

Hoe Voeg Je een Preloader Toe in WordPress (2026-methoden)

Methode 1 — WP Smart Preloader Plugin

WP Smart Preloader is een gratis plugin in de WordPress.org-repository die werkt met klassieke thema’s en blokthema’s. Controleer of het nog actief onderhouden wordt en compatibel is met je huidige WordPress-versie voordat je het installeert — de onderhoudsstatus van plugins kan veranderen; check de datum „Laatste update” op de repository-pagina.

1. Ga in je WordPress-dashboard naar Plugins → Nieuwe plugin toevoegen en zoek naar “WP Smart Preloader”.
2. Installeer en activeer het.
3. Ga naar Instellingen → WP Smart Preloader.
4. Kies een preloader-stijl uit de ingebouwde opties, of plak je eigen aangepaste HTML/CSS.
5. Onder „Alleen weergeven op de startpagina” — schakel dit in als je de animatie alleen op de startpagina wilt. Een preloader op elke pagina uitvoeren vermenigvuldigt de LCP-kosten over je hele site.
6. Stel de duur van de loader in. De standaardwaarde is 1500 ms. Ik raad aan dit lager te zetten — maximaal 800–1000 ms. Hoe langer het draait, hoe slechter je LCP-score.
7. Klik op Wijzigingen opslaan en test met PageSpeed Insights voor en na. Als LCP stijgt, verwijder de plugin.

Methode 2 — Aangepaste Code via Code Snippets Plugin

Als je volledige controle wilt zonder een speciale preloader-plugin, gebruik dan de Code Snippets plugin (gratis, breed onderhouden) om de markup en stijlen te injecteren zonder themabestanden aan te raken.

Stap 1 — Voeg het HTML-snippet toe (PHP)

Maak in Code Snippets een nieuw snippet aan dat is ingesteld op uitvoeren op „Alleen front-end”:

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

Opmerking: wp_body_open wordt alleen uitgevoerd op thema’s die wp_body_open() in hun sjabloon aanroepen. De meeste moderne blokthema’s en onderhouden klassieke thema’s doen dit. Als je preloader niet verschijnt, controleer dan of je thema deze hook ondersteunt.

Stap 2 — Voeg de CSS toe

Maak een tweede snippet aan ingesteld op „Alleen front-end → 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); }
}

Stap 3 — Voeg de JavaScript voor sluiting toe

Maak een derde snippet aan ingesteld op „Alleen front-end → JavaScript”:

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

Dit verwijdert de preloader bij het window.load-event — nadat afbeeldingen en subframes zijn geladen — in plaats van bij DOMContentLoaded, dat te vroeg wordt geactiveerd.

Methode 3 — Blokthema / FSE: Gebruik een Loading Overlay Block of Plugin

Als je een Full Site Editing-thema gebruikt (Twenty Twenty-Four, Kadence, GeneratePress blokmodus, enz.), hebben sommige page builder-plugins (Elementor, Kadence Blocks, Spectra) ingebouwde preloader- of laadschermopties in hun instellingen. Controleer eerst de documentatie van je thema of builder — het dupliceren van een preloader met een aparte plugin bovenop een ingebouwde veroorzaakt een dubbele overlay.

Prestatie-checklist Voordat je Live Gaat

Verifieer het volgende voordat je een preloader publiceert:

1. Voer een PageSpeed Insights-test uit op een pagina zonder de preloader. Noteer je LCP.
2. Schakel de preloader in en voer dezelfde test uit. Als LCP met meer dan ~100 ms verslechtert, overweeg het dan opnieuw.
3. Houd de preloader-duur op of onder de 1000 ms. Alles langer is een UX- en rankingrisico.
4. Test op een mobiele verbinding met 4G throttling (Chrome DevTools → Netwerk → Fast 4G). Preloaders voelen veel langer aan op langzamere verbindingen.
5. Zorg ervoor dat de preloader verborgen is voor schermlezers (aria-hidden="true") en het toetsenbaardfocus niet vasthoudt.

WordPress Preloader FAQ — 2026

Schaadt een preloader de SEO?

Ja, dat kan. Google’s Core Web Vitals — met name LCP — zijn een bevestigd rankingsignaal. Een preloader die voor je inhoud staat, vertraagt LCP. Voor de meeste standaard WordPress-sites zou ik het helemaal overslaan en de tijd investeren in beeldoptimalisatie en caching. Als je site zwaar genoeg is om er echt een nodig te hebben, houd de duur dan kort en monitor CWV in Google Search Console.

Werken preloader-plugins met Full Site Editing (Gutenberg) thema’s?

De meeste wel, zolang het thema wp_body_open() aanroept. De WordPress-blok-editor zelf verandert niet hoe paginalaad-events in de browser werken. Controleer de versie „Getest tot” van de plugin in de WordPress.org-repository om compatibiliteit met je geïnstalleerde WordPress-versie te bevestigen — verifieer dit bij installatie, want de compatibiliteitsstatus verandert.

Kan ik een preloader toevoegen zonder een plugin in 2026?

Ja — de hierboven beschreven Code Snippets-methode is de schoonste aanpak zonder plugin. Het overleeft thema-updates, is gemakkelijk uit te schakelen en geeft je volledige controle over de markup en timing. Vermijd het direct bewerken van header.php in je actieve of child theme; dat voegt onderhoudsschuld toe en breekt als je van thema wisselt.

Mijn preloader verschijnt op elke pagina. Hoe beperk ik het tot alleen de startpagina?

In WP Smart Preloader, vink „Alleen weergeven op de startpagina” aan in de instellingen. Voor de aangepaste code-aanpak, wikkel de add_action-aanroep in een voorwaardelijke:

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

Gerelateerde artikelen:

• Hoe je je WordPress-site kunt versnellen
• Beste WordPress-plugins
• WordPress.com vs. WordPress.org

Deze handleiding maakt deel uit van alejandrorioja.com — geschreven door Alejandro Rioja, die nu AI-agentsystemen bouwt voor oprichters. Inclusief de agent die deze site actueel houdt. Hoe het werkt →

Bijgewerkt voor mei 2026

Een korte noot van mei 2026: de workflow die in dit artikel wordt beschreven is gecontroleerd aan de hand van de huidige staat van de onderliggende tools en platforms. Waar specifieke tools, UI’s of functies zijn geëvolueerd, geldt het structurele advies nog steeds — de implementatie ziet er in 2026 iets anders uit. Als je een stap tegenkomt die niet overeenkomt met wat je op het scherm ziet, is dat waarschijnlijk een UI-vernieuwing, geen fundamentele verandering in aanpak. Laat een bericht achter via het contactformulier en ik zal het expliciet bijwerken.