Boost WordPress Loading Speed with Preload, Prefetch, and Preconnect Hints

Resource hints are HTML <link> elements that instruct the browser to perform network actions — DNS lookups, TCP connections, or resource fetches — before those resources are discovered in the normal parsing flow, eliminating the sequential discovery waterfall that slows page rendering. Four hint types serve different purposes: rel="preconnect" establishes the TCP+TLS connection to a third-party origin (e.g., Google Fonts, a CDN) early in the page load, saving 100–200ms per connection; rel="dns-prefetch" does only the DNS resolution step and is used as a fallback for browsers that do not support preconnect, or for origins that are likely to be needed but not certain; rel="preload" fetches a specific resource at high priority and stores it in the browser cache before it is needed — the resource is not executed, only fetched, and it must include an as attribute (as="font", as="script", as="style") so the browser applies the correct security and priority rules; rel="prefetch" fetches a resource at low priority for use on the next navigation — appropriate for assets on the page a user is likely to visit next. For WordPress, the highest-impact preloads are the LCP image (covered in the Core Web Vitals post), the main stylesheet, and any web fonts that are loaded via @font-face in an external CSS file — the browser cannot discover @font-face fonts until the CSS file is parsed, so a preload eliminates this cascaded delay. WordPress 6.1 added automatic preconnect for Google Fonts when the Fonts API is used. Excessive preload hints harm performance — the browser’s bandwidth is limited, and preloading 10 resources on a slow connection delays the render-critical resources. Limit preload hints to 3–5 render-critical resources per page. The Core Web Vitals post covers LCP image preload specifically; this post covers the full resource hints toolbox available to WordPress developers.

Problem: A WordPress site’s waterfall shows a 3-step chain: HTML loads → CSS loads and discovers @font-face → font file starts loading, adding 400ms to the time before text is visible. A Google Maps embed adds a 200ms DNS lookup delay because the connection to maps.googleapis.com is not established until the script tag is reached in the HTML.

Solution: Add a preload hint for the web font file and preconnect hints for Google Maps and other third-party origins — eliminating the cascaded discovery delays and the DNS lookup penalty without any caching infrastructure changes.

// Add resource hints via wp_head — priority 1 so they appear early in 
add_action( 'wp_head', 'myplugin_add_resource_hints', 1 );

function myplugin_add_resource_hints(): void {
    // ── preconnect: establish TCP+TLS connections to third-party origins early ─
    $preconnects = [
        'https://fonts.gstatic.com',        // Google Fonts files
        'https://maps.googleapis.com',      // Google Maps API
        'https://www.googletagmanager.com', // GTM / GA4
    ];
    foreach ( $preconnects as $origin ) {
        printf(
            '' . PHP_EOL,
            esc_url( $origin )
        );
    }

    // dns-prefetch fallback for browsers without preconnect support
    $dns_prefetch = [ 'https://cdnjs.cloudflare.com', 'https://cdn.example.com' ];
    foreach ( $dns_prefetch as $origin ) {
        printf( '' . PHP_EOL, esc_url( $origin ) );
    }

    // ── preload: fetch render-critical font file before CSS discovers it ──────
    $font_url = get_theme_file_uri( 'fonts/inter-var.woff2' );
    printf(
        '' . PHP_EOL,
        esc_url( $font_url )
    );

    // ── prefetch: assets likely needed on the next page visit ────────────────
    if ( is_home() || is_archive() ) {
        $single_js = get_theme_file_uri( 'js/single-post.min.js' );
        printf(
            '' . PHP_EOL,
            esc_url( $single_js )
        );
    }
}

// ── WordPress filter approach for programmatic resource hint control ──────────
add_filter( 'wp_resource_hints', function( array $hints, string $relation_type ): array {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = [
            'href'        => 'https://api.example.com',
            'crossorigin' => 'use-credentials',
        ];
    }
    return $hints;
}, 10, 2 );

# .htaccess: HTTP/2 Server Push for critical assets (Apache 2.4.26+ with mod_http2)
# Pushes assets alongside the initial HTML response — no extra round-trip needed

    Header add Link "; rel=preload; as=style"         "expr=%{CONTENT_TYPE} =~ m#text/html#"
    Header add Link "; rel=preload; as=font; type=font/woff2; crossorigin"         "expr=%{CONTENT_TYPE} =~ m#text/html#"

NOTE: preload hints with as="font" MUST include the crossorigin attribute even for same-origin fonts — fonts are always fetched with CORS mode enabled, and omitting crossorigin causes the browser to fetch the font twice: once for the preload (without CORS) and once when the @font-face rule is encountered (with CORS). This double-fetch defeats the purpose of the preload and can actually slow the page down compared to having no hint at all. Always test resource hints in the browser’s Network panel with the “disable cache” option enabled and inspect the initiator column to verify that the font request shows “preload” as the initiator and only appears once.