First Contentful Paint (FCP) is the moment a visitor first sees something appear on the page. On most WordPress sites that something is the logo, yet the logo is rarely the first file the browser fetches. A single line of HTML, the preload directive, fixes that order. Here is how to apply it on a site hosted with us, what else to change so it works, and the one mistake that cancels the gain.
What preload does
A browser reads the HTML top to bottom and starts downloading files in the order it discovers them: stylesheets, scripts, fonts, then images as it lays out the page. <link rel="preload"> in the head tells the browser “you will need this file, start fetching it now”. It does not make the file smaller or the server faster. It moves the file to the front of the queue. For a logo that means the image is already in hand by the time the header is drawn, and the first paint happens as soon as the CSS arrives.
Adding the preload on a WP Alpha site
You do not need to edit theme files. Every common optimisation plugin has a field for it:
- Autoptimize: Extra tab, “Preload specific requests”. Paste the full URL of the logo file, one per line.
- WP Rocket: Preload tab, “Preload Links” is a different feature; the one you want is under File Optimization or, in current versions, Media and Preload fonts for font files, plus the “Exclude images” field discussed below. For the logo itself, add the tag with a small snippet or use Perfmatters.
- Perfmatters: Preloading section, “Preload” field, with the resource type set to image.
- FlyingPress: Fonts tab handles font preloading; for an image add the tag through a header snippet.
If you would rather add it by hand, this is the whole thing, placed in the head:
<link rel="preload" as="image" href="https://example.com/wp-content/uploads/logo.svg">Save, then clear the page cache (your plugin’s purge button, and the server cache from the hosting panel if you use it). Preload tags live in cached HTML, so until the cache refreshes nothing changes.
The step people miss: take the logo out of lazy loading
Lazy loading delays images until they scroll into view, and most plugins apply it to every image including the logo. A lazy-loaded logo waits for the lazy-load script to run before it appears, which is slower than no preload at all. Add the logo filename to the lazy-load exclusion list (WP Rocket: Media, “Excluded images or iframes”; Perfmatters: Lazy Loading, “Exclude from Lazy Loading”; FlyingPress: Images, “Exclude above-fold images”). With preload on and lazy loading off for that one file, the logo shows almost instantly.
Two more uses for the same field
- Fonts. Self-hosted or Google-hosted font files are a frequent cause of late text rendering. Preload the one or two weights used above the fold (woff2 only, with
crossorigin). - One slow third-party file. If a single external script is dragging the load out, preloading it can pull it forward. Use this sparingly; preloading everything just recreates the original queue.
WebP conversions
If an image plugin such as ShortPixel or Imagify serves WebP copies, the browser may receive the WebP logo while your preload points at the PNG, so you download both. Either preload the WebP version, or exclude the logo from WebP conversion. One file, one preload.
What to expect
On sites where the logo was previously queued behind scripts, this change alone brings FCP down to well under a second in PageSpeed Insights and moves the field FCP into the green for most visitors within a few weeks of Chrome collecting data. It costs nothing and takes two minutes. If you would like us to check it on your site, open a ticket from the client area and we will confirm the preload and the lazy-load exclusion are both in place.