Preloading sounds like free speed. You tell the browser what it’s going to need ahead of time, it grabs those files early, and your page loads faster. Simple, right?

Dev note: Before you add, remove or move any script or tag on a live site, you need to know how scripts work and which ones matter and which ones don’t. Something that looks irrelevant on one page can be doing an important job for the whole site, like a script that loads everywhere to handle checkout, forms, analytics or security. Learn to trace a script back to its source (your theme, a plugin, or something added by hand) before you touch it. If you can’t say what it does, don’t change it on a live site.

Well, not always. I’ve opened sites with fifteen preload tags sitting in the head, half of them pointing at files the page never even uses, and the site was slower than before anybody “optimised” it. Same trick, opposite result.

That’s the part most people don’t hear. So let’s talk about how to preload critical resources properly, what’s actually worth it, and what you should leave alone.

What preloading actually does

For those who don’t know, a browser doesn’t see everything your page needs from the start. It reads the HTML first, then finds the CSS, and only after that does it discover the fonts and background images the CSS is pointing to. By then you’ve already lost time.

A preload tag is a note in the head of your page that says “fetch this file now, I’ll need it soon.” It doesn’t run the file or apply it. It just downloads it early and keeps it ready.

Here’s what one looks like for a font:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

Pay attention to that crossorigin bit. Leave it off for fonts and the browser can end up downloading the file twice, which defeats the whole point.

What is worth preloading

Not much, honestly. Two or three files at most on a normal page.

Your main hero image. This is usually the biggest thing on screen when the page loads, and it’s often what Google measures as your Largest Contentful Paint (LCP). If it’s a normal image tag near the top, the browser finds it quickly on its own. But if it’s a CSS background, or it’s loaded by a slider or a page builder, the browser finds it late. That’s where a preload earns its place.

One or two fonts you use above the fold. Your body font and your heading font, in woff2 format, only the weights that show up in the first screen. Not the whole family.

A late-discovered file that blocks the first render. This one is rare, but if your own testing shows a key stylesheet or script is being found too late, a preload can help.

What to leave alone

This list is longer, and it’s where most of the damage happens.

Anything below the fold. If a visitor has to scroll to see it, it doesn’t need to fight for bandwidth during the first load.

Every font weight “just in case.” Four weights and two italics means six extra downloads competing with your hero image for the same connection.

Images that are already easy to find. If it’s a normal image tag at the top of the page, the browser will pick it up without help. Adding fetchpriority="high" to that image is usually the lighter fix. Recent versions of WordPress already do this for the main content image automatically, so check your page source before you add anything yourself.

Third-party scripts. Preloading chat widgets, analytics or ad scripts just pushes them to the front of the queue, which is the opposite of what you want. If you need to help these, a preconnect hint to their domain is the gentler option.

Now why does over-preloading hurt? Because everything you preload competes for the same bandwidth as everything else. Mark ten files as urgent and nothing is urgent. You’ll also start seeing warnings in the browser console about files that were preloaded but not used, which is basically the browser telling you that you wasted its time.

How to add a preload on WordPress

Free options first.

The simplest route is a small snippet in your child theme’s functions file, or in a free snippets plugin like WPCode if you’d rather not touch theme files:

add_action( 'wp_head', function () {
    echo '<link rel="preload" href="https://example.com/fonts/main.woff2" as="font" type="font/woff2" crossorigin>' . "\n";
}, 1 );

Swap in your real font URL. Use the same pattern for your hero image, with as="image" instead. Back up first, and if you can, try it on a staging site before it goes live.

If you’d rather use a plugin, a few free ones can do it, and which one fits depends on what you’re preloading.

Autoptimize has a field for preloading specific files, and the setting sits under its extra options. If it’s fonts you’re after, OMGF (Optimize Google Fonts) is built around fonts and can preload the ones it hosts for you. Asset CleanUp is another free one worth a look if you want to preload CSS and JS files. Settings move around between versions, so look around the plugin rather than trusting my directions to the letter, and keep the dev note at the top in mind. A plugin that handles scripts is still touching scripts.

If you already pay for a performance plugin like WP Rocket or Perfmatters, both have preload options built in, so you don’t need the snippet. I wouldn’t buy either one just for this.

One more thing. If your site uses a page builder, check whether it lazy loads the hero image. A preloaded image that also has lazy loading switched on is working against itself, so exclude it from lazy loading.

How to check it actually worked

Don’t assume, test it.

Open Chrome DevTools, go to the Network tab, reload the page and look at the waterfall. Your preloaded files should start loading very early. Then run the page through PageSpeed Insights and compare your LCP before and after.

If LCP didn’t improve, take the preload out. A preload that doesn’t move a number you care about is just extra code.

Also check the console for the “preloaded but not used” warning. If it shows up, either the URL is wrong or you’re preloading something the page doesn’t need.

The short version

Preload your hero image if it’s hard for the browser to find. Preload one or two above-the-fold fonts with crossorigin. Leave everything else alone, test the result, and remove anything that doesn’t help.

Preloading is a precision tool. On two files it can shave real time off your load. On twenty, it’s just a slower site with more code. So why add weight to something you’re trying to make lighter?