How To Add Preloader In WordPress: A Step By Step Guide

Table of contents

Should You Even Add a Preloader in 2026?

Before I walk through the how-to, let me give you the honest answer first: most sites should not add a preloader.

Google’s Core Web Vitals measure Largest Contentful Paint (LCP) — how quickly your most visible content appears. A preloader literally delays that paint by covering the screen with an animation. If your preloader runs for even 1.5 seconds, that’s 1.5 seconds of guaranteed LCP penalty on every page load.

When a preloader makes sense:

• Your site is genuinely heavy — large hero videos, interactive maps, canvas-based animations — and the raw blank state looks broken without one.
• You have a loading bar or progress indicator that gives users real feedback, not just a spinner for aesthetics.

When to skip it entirely:

• You have a typical blog, portfolio, or WooCommerce store. Speed up the site instead — lazy-load images, use a CDN, switch to a faster host.
• Your LCP is already under 2.5 s. Adding a preloader will only make it worse.

If you still want to proceed, here’s how to do it correctly in the Gutenberg / Full Site Editing era.

What is a Preloader?

A preloader is a UI element — usually an animated spinner, progress bar, or branded logo animation — displayed while the browser downloads and renders page resources. Text and HTML load fast; images and embedded video take longer. The preloader fills that gap so users see something instead of a blank or partially-rendered layout.

In older WordPress (pre-5.0 classic editor days), preloaders were commonly added by editing header.php directly. In 2026, with Gutenberg and FSE themes, editing theme files directly is strongly discouraged — theme updates wipe your changes. Use a plugin or a Code Snippets approach instead.

How to Add a Preloader in WordPress (2026 Methods)

Method 1 — WP Smart Preloader Plugin

WP Smart Preloader is a free plugin in the WordPress.org repository that works with classic themes and block themes. Verify it is still actively maintained and compatible with your current WordPress version before installing — plugin maintenance status can change; check the “Last updated” date on its repository page.

1. In your WordPress dashboard go to Plugins → Add New and search for “WP Smart Preloader”.
2. Install and activate it.
3. Go to Settings → WP Smart Preloader.
4. Choose a preloader style from the built-in options, or paste your own custom HTML/CSS.
5. Under “Show only on Home Page” — enable this if you only want the animation on the homepage. Running a preloader on every page multiplies the LCP cost across your whole site.
6. Set Duration to Show Loader. The default is 1500 ms. I’d recommend going lower — 800–1000 ms max. The longer it runs, the worse your LCP score.
7. Click Save Changes and test with PageSpeed Insights before and after. If LCP goes up, remove the plugin.

Method 2 — Custom Code via Code Snippets Plugin

If you want full control without a dedicated preloader plugin, use the Code Snippets plugin (free, widely maintained) to inject the markup and styles without touching theme files.

Step 1 — Add the HTML snippet (PHP)

In Code Snippets, create a new snippet set to run on “Front-end only”:

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

Note: wp_body_open only fires on themes that call wp_body_open() in their template. Most modern block themes and maintained classic themes do this. If your preloader doesn’t appear, check whether your theme supports this hook.

Step 2 — Add the CSS

Create a second snippet set to “Front-end only → 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); }
}

Step 3 — Add the dismissal JavaScript

Create a third snippet set to “Front-end only → JavaScript”:

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

This removes the preloader on the window.load event — after images and subframes have loaded — rather than on DOMContentLoaded, which fires too early.

Method 3 — Block Theme / FSE: Use a Loading Overlay Block or Plugin

If you are running a Full Site Editing theme (Twenty Twenty-Four, Kadence, GeneratePress block mode, etc.), some page builder plugins (Elementor, Kadence Blocks, Spectra) have built-in preloader or loading screen options in their settings. Check your theme or builder’s documentation first — duplicating a preloader with a separate plugin on top of a built-in one will cause a double-overlay.

Performance Checklist Before Going Live

Before you ship a preloader, verify all of the following:

1. Run a PageSpeed Insights test on a page without the preloader. Note your LCP.
2. Enable the preloader and run the same test. If LCP is worse by more than ~100 ms, reconsider.
3. Keep preloader duration at or under 1000 ms. Anything longer is a UX and ranking liability.
4. Test on a mobile 4G throttled connection (Chrome DevTools → Network → Fast 4G). Preloaders feel much longer on slower connections.
5. Make sure the preloader is hidden from screen readers (aria-hidden="true") and does not trap keyboard focus.

WordPress Preloader FAQ — 2026

Does a preloader hurt SEO?

Yes, it can. Google’s Core Web Vitals — specifically LCP — are a confirmed ranking signal. A preloader that sits in front of your content delays LCP. For most standard WordPress sites I’d skip it entirely and invest the time in image optimization and caching instead. If your site is heavy enough to genuinely need one, keep the duration short and monitor CWV in Google Search Console.

Do preloader plugins work with Full Site Editing (Gutenberg) themes?

Most do, as long as the theme calls wp_body_open(). The WordPress block editor itself doesn’t change how page load events work in the browser. Check the plugin’s “Tested up to” version in the WordPress.org repository to confirm compatibility with your installed WordPress version — verify this at install time, as compatibility status changes.

Can I add a preloader without a plugin in 2026?

Yes — the Code Snippets method above is the cleanest no-plugin approach. It survives theme updates, is easy to disable, and gives you complete control over the markup and timing. Avoid editing header.php directly in your active or child theme; it adds maintenance debt and breaks if you switch themes.

My preloader shows on every page. How do I limit it to the homepage only?

In WP Smart Preloader, check “Show only on Home Page” in the settings. For the custom code approach, wrap the add_action call with a conditional:

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

Related reading:

• How to Speed Up Your WordPress Site
• Best WordPress Plugins
• WordPress.com vs. WordPress.org

This guide is part of alejandrorioja.com — written by Alejandro Rioja, who now builds AI agent systems for founders. Including the agent that keeps this site current. How it works →

Updated for May 2026

A short note from May 2026: the workflow this post describes was checked against the current state of the underlying tools and platforms. Where specific tools, UIs, or features have evolved, the structural advice still holds — the implementation will look slightly different in 2026. If you hit a step that doesn’t match what you see on screen, that’s likely a UI refresh, not a fundamental change in approach. Drop a note via the contact form and I’ll patch it explicitly.