Using preload and preconnect for fonts and assets in WordPress

Resource hints are small <link> instructions in the <head> of a page that tell the browser which resources it should touch early. The three most important ones are rel="preconnect" (establishes the connection – DNS, TCP, TLS – to a third-party domain ahead of time), rel="dns-prefetch" (only resolves the DNS name in advance, a cheap fallback for older browsers) and rel="preload" (downloads a specific file at high priority before the browser discovers it in the document). Used correctly, they shorten the Largest Contentful Paint (LCP) by often 100 to 400 ms, because the most important image and the fonts no longer sit at the end of the loading chain. Used incorrectly or too generously, however, they do harm: every preload competes for bandwidth, and too many hints delay exactly the resources that should be fast. This guide shows when and how to set the hints deliberately in WordPress.

The three hints at a glance

Hint	What it does	What for
`preconnect`	establish DNS + TCP + TLS to the third-party domain ahead of time	font host, CDN, analytics – domains that are loaded from early on
`dns-prefetch`	only DNS resolution in advance	cheap fallback and for domains needed a little later
`preload`	load a specific file immediately at high priority	LCP image, critical web fonts, critical CSS

Step 1: Identify critical resources

Open the Chrome DevTools, Network tab, reload the page and look at the waterfall diagram. Determine:

The LCP element: usually the large hero image at the top. In the Performance tab or in Lighthouse it is marked as the "Largest Contentful Paint element".
Fonts that are needed for visible text (fonts loaded late cause the "Flash of Unstyled Text").
Third-party domains that are loaded from early on (Google Fonts, an image CDN, an icon host).

Only these few resources get a hint – not every file.

Step 2: Preconnect for third-party domains

If your site embeds resources from another domain, preconnect saves you the connection setup. Example for a font or CDN host:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

The crossorigin attribute is mandatory for fonts and other anonymously loaded resources, otherwise the pre-established connection is not reused. The dns-prefetch below it serves as a fallback for browsers without preconnect support.

Note on Google Fonts: The fastest option is to host Google Fonts locally and avoid the third-party domain entirely. If that is not possible, preconnect to fonts.gstatic.com helps.

Step 3: Preload for the LCP image and fonts

Preload the LCP image

<link rel="preload" as="image"
      href="/wp-content/uploads/2026/07/hero.avif"
      type="image/avif"
      fetchpriority="high">

Alternatively – and often more elegantly – set fetchpriority="high" directly on the <img> tag of the hero image and remove lazy loading for that image, instead of using a separate preload.

Preload a font

<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/themes/mein-theme/fonts/inter.woff2"
      crossorigin>

For fonts, crossorigin is required even on the same domain, because fonts are always loaded anonymously.

Implementation in WordPress

Option A: via functions.php

Add the hints through the wp_head hook (in the functions.php of the child theme):

add_action( 'wp_head', function () {
    ?>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" type="font/woff2"
          href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
          crossorigin>
    <?php
}, 1 ); // Priority 1 = as early as possible in the head

Option B: via the resource_hints filter

For preconnect and dns-prefetch, WordPress provides the official wp_resource_hints filter:

add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = array(
            'href'        => 'https://fonts.gstatic.com',
            'crossorigin' => 'anonymous',
        );
    }
    return $hints;
}, 10, 2 );

Option C: via a plugin

Optimization plugins such as WP Rocket, Perfmatters or FlyingPress offer fields where you can enter preload and preconnect URLs – without code.

How do I measure the impact?

Run Lighthouse (Chrome DevTools, Lighthouse tab) before and after the change and compare the LCP value.
In the Network tab, check that the LCP image and the fonts now start earlier in the chain (priority "High").
PageSpeed Insights should no longer show the diagnostics "Largest Contentful Paint image was lazily loaded" or "Preconnect to required origins".

Common mistakes

Too many preloads: If everything is preloaded, nothing is prioritized. Limit yourself to 1–2 images and 1–2 fonts.
Preload without use: An asset loaded via preload but not used within a few seconds triggers the "was preloaded but not used" warning in the console and wastes bandwidth.
Forgetting crossorigin: If it is missing on fonts, the browser downloads the file twice (once anonymously via preload, once regularly).
Preconnect to too many domains: Every open connection costs resources. More than 4–6 preconnects are rarely useful.
Wrong as value: as="image", as="font", as="style" must match the resource type, otherwise the preload is ignored.

Frequently asked questions (FAQ)

What is the difference between preload and preconnect?

preconnect establishes the connection (DNS, TCP, TLS) to a third-party domain ahead of time, but does not yet load a file. preload downloads a specific file at high priority before the browser discovers it in the document. Use preconnect for font hosts or CDNs, and preload for the LCP image and critical fonts.

Why do fonts need the crossorigin attribute when preloaded?

Fonts are always loaded anonymously (in CORS mode) by the browser, even from your own domain. If the crossorigin attribute is missing on the preload, the preloaded request does not match the later font request and the browser downloads the file twice. That is why crossorigin is always required for preload as="font".

How many resources should I preload?

As few as possible. If everything is preloaded, nothing is prioritized and the hints slow down exactly the resources that should be fast. Limit yourself to 1 to 2 images and 1 to 2 fonts, plus a maximum of 4 to 6 preconnects.

What does the console warning "preloaded but not used" mean?

This warning appears when a resource loaded via preload is not used on the page within a few seconds. The preload then wastes bandwidth. Check whether the as value (image, font, style) is correct and whether the preloaded URL exactly matches the URL used later.

How does InspectWP help with resource hints?

InspectWP captures the <link> resources present in the <head> as well as the embedded third-party domains and fonts. The report shows which external hosts are contacted early and where third-party fonts are loaded – good starting points for deliberately using preconnect or local hosting.