{"id":4806,"date":"2026-09-21T20:39:34","date_gmt":"2026-09-21T17:39:34","guid":{"rendered":"https:\/\/fastpixel.io\/?p=4806"},"modified":"2026-09-21T20:44:07","modified_gmt":"2026-09-21T17:44:07","slug":"preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress","status":"publish","type":"post","link":"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/","title":{"rendered":"Preload, Prefetch, Preconnect: A Practical Guide to Resource Hints in WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Three <code>&lt;link&gt;<\/code> tags. Nearly identical names. And a surprising number of WordPress sites using them backwards.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s easy to see why. Preload, prefetch, and preconnect sound like one idea wearing three different hats. They&#8217;re not, and swapping one for another can quietly make a page slower.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So instead of dictionary definitions, let&#8217;s take one ordinary site and figure out which hint goes where.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#the-site-were-fixing\" >The site we&#8217;re fixing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#preconnect-the-google-fonts-problem\" >Preconnect: the Google Fonts problem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#dns-prefetch-for-the-stuff-that-can-wait\" >DNS-prefetch: for the stuff that can wait<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#preload-the-hero-photo\" >Preload: the hero photo<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#dont-preload-the-whole-page\" >Don&#8217;t preload the whole page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#if-the-hero-is-a-normal-image\" >If the hero is a normal image<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#prefetch-one-page-ahead\" >Prefetch: one page ahead<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#wordpress-68-already-prefetches\" >WordPress 6.8 already prefetches<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#putting-it-into-wordpress\" >Putting it into WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#checking-your-work\" >Checking your work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#the-bottom-line\" >The bottom line<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#faqs\" >FAQs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#whats-the-difference-between-preload-and-prefetch\" >What&#8217;s the difference between preload and prefetch?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#how-many-files-should-i-preload\" >How many files should I preload?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#do-i-need-a-prefetch-plugin-on-wordpress-68-or-newer\" >Do I need a prefetch plugin on WordPress 6.8 or newer?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/fastpixel.io\/fr\/blog\/preload-prefetch-preconnect-a-practical-guide-to-resource-hints-in-wordpress\/#can-resource-hints-make-my-site-slower\" >Can resource hints make my site slower?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"the-site-were-fixing\"><\/span>The site we&#8217;re fixing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s a small agency site built with Elementor. Big background photo in the hero. Inter from Google Fonts for all the text. Google Analytics, plus one of those chat bubbles in the bottom corner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nothing unusual. But watch what the browser goes through when someone lands on the homepage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It reads the HTML and spots the stylesheets right away. The font and the hero photo, though, are hiding inside that CSS. The browser won&#8217;t know they exist until the CSS has arrived and been read, and on a phone, that gap is where your Largest Contentful Paint (LCP) suffers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Resource hints are how you tip the browser off early. Here&#8217;s the cheat sheet before we get into each one:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Hint<\/th><th>What it does<\/th><th>Best for<\/th><\/tr><tr><td><code>preconnect<\/code><\/td><td>Opens a connection to another domain early<\/td><td>Critical third-party origins on the current page<\/td><\/tr><tr><td><code>dns-prefetch<\/code><\/td><td>Looks up a domain&#8217;s address early<\/td><td>Less urgent third-party origins<\/td><\/tr><tr><td><code>preload<\/code><\/td><td>Downloads a specific resource early<\/td><td>Critical resources needed on the current page<\/td><\/tr><tr><td><code>prefetch<\/code><\/td><td>Fetches something at low priority for later use<\/td><td>Resources or pages likely to be needed next<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"preconnect-the-google-fonts-problem\"><\/span>Preconnect: the Google Fonts problem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Inter lives on <code>fonts.gstatic.com<\/code>, a different server. Before a single byte of font data moves, the browser has to find that server, connect to it, and agree on encryption. That&#8217;s a lot of back-and-forth before anything useful happens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Preconnect gets that paperwork done early:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That <code>crossorigin<\/code> at the end isn&#8217;t decoration. Fonts get requested in CORS mode, which runs over its own connection. Skip the attribute and the browser prepares a connection the font can&#8217;t use, then builds another one when the font request shows up. It&#8217;s one of the most common mistakes with this hint.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What about analytics and the chat bubble? I&#8217;d leave them out. Open connections aren&#8217;t free, and Chrome drops an idle preconnect after roughly 10 seconds anyway. The chat widget usually loads later than that. (web.dev has a <a href=\"https:\/\/web.dev\/articles\/preconnect-and-dns-prefetch\">good explainer on the tradeoff<\/a>.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So: preconnect only for the few outside servers the first view really depends on. None for your own domain, since the browser is already talking to it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"dns-prefetch-for-the-stuff-that-can-wait\"><\/span>DNS-prefetch: for the stuff that can wait<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Analytics and the chat bubble still come from other domains, so they can get a smaller favor. DNS-prefetch only looks up the address and stops there.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"dns-prefetch\" href=\"https:\/\/www.googletagmanager.com\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tiny saving, tiny cost. Fine for scripts that load a bit later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Side note: WordPress can add dns-prefetch hints on its own for external hosts that your scripts and styles load from. Worth a quick look at your page source before adding your own.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"preload-the-hero-photo\"><\/span>Preload: the hero photo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now the part that actually moves LCP on our site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The hero is a CSS background, so by default the browser grabs it late. Preload tells it: this file, this page, go get it now.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" as=\"image\"\n      href=\"\/wp-content\/uploads\/hero-1200.webp\"\n      imagesrcset=\"\/wp-content\/uploads\/hero-600.webp 600w, \/wp-content\/uploads\/hero-1200.webp 1200w\"\n      imagesizes=\"100vw\"\n      fetchpriority=\"high\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Two attributes in there deserve a sentence each. Without <code>imagesrcset<\/code> and <code>imagesizes<\/code>, a phone would get the same 1200px file as a desktop monitor. And <code>fetchpriority=\"high\"<\/code> matters because preload moves the request earlier but doesn&#8217;t automatically make it important. For the LCP image, you want early and important.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you self-host Inter, the font can be preloaded too:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"\/wp-content\/uploads\/fonts\/Inter-Regular.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Check three things here. <code>as<\/code> has to be there. So does <code>crossorigin<\/code>, even though the file sits on your own server. And the URL must match your CSS exactly, because to a browser <code>Inter-Regular.woff2?ver=1.2<\/code> is a different file from <code>Inter-Regular.woff2<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, if the site pulls in five font families, deal with that first. <a href=\"https:\/\/fastpixel.io\/fr\/blog\/optimize-wordpress-fonts\/\">Heavy fonts drag down Core Web Vitals<\/a> whether you preload them or not.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"dont-preload-the-whole-page\"><\/span>Don&#8217;t preload the whole page<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is where preload goes sideways. Everyone wants their stuff loaded first, so everything gets preloaded, and the browser ends up back at square one with a longer to-do list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Skip anything below the fold. Skip lazy-loaded images. Skip a plain <code>&lt;img&gt;<\/code> near the top of the HTML, because the browser finds that on its own almost instantly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chrome will flag your leftovers, by the way. A preloaded file that goes unused for a few seconds triggers a warning in the DevTools console.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"if-the-hero-is-a-normal-image\"><\/span>If the hero is a normal image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Different site, and the hero is a regular <code>&lt;img&gt;<\/code> tag? Then preload is usually overkill. Put <code>fetchpriority=\"high\"<\/code> on the image and move on.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=&quot;hero.webp&quot; fetchpriority=&quot;high&quot; alt=&quot;...&quot; width=&quot;1200&quot; height=&quot;600&quot;&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Since version 6.3, WordPress tries to do this for you by guessing which image is the LCP element. Page builders sometimes throw that guess off, so view the source and check which image actually got the attribute. Google&#8217;s <a href=\"https:\/\/web.dev\/articles\/fetch-priority\">Fetch Priority guide<\/a> goes deeper.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"prefetch-one-page-ahead\"><\/span>Prefetch: one page ahead<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prefetch plays a different game. It&#8217;s not about the page on screen. It&#8217;s about the next one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The browser downloads the file when it has nothing better to do, at low priority:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"prefetch\" href=\"\/wp-content\/themes\/mytheme\/checkout.js\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Our agency site doesn&#8217;t have an obvious next step, so prefetch won&#8217;t do much there. A shop is different. People on the cart page mostly head to checkout, so fetching the checkout script ahead of time makes sense.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Guess wrong, though, and it&#8217;s wasted data. And never use prefetch for something the current page needs. Low priority is the last thing that file wants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"wordpress-68-already-prefetches\"><\/span>WordPress 6.8 already prefetches<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A lot of people missed this one. Since WordPress 6.8, core ships with speculative loading turned on. When a visitor starts clicking a link, the next page gets prefetched a moment early. It stays off for logged-in users and on sites without pretty permalinks, and the <a href=\"https:\/\/make.wordpress.org\/core\/2025\/03\/06\/speculative-loading-in-6-8\/\">6.8 announcement<\/a> has the rest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For many sites, that means a separate &#8220;instant page&#8221; plugin may no longer be necessary for basic internal prefetching. For more aggressive behavior, including prerendering, there&#8217;s the Speculative Loading plugin from the WordPress Performance Team.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Caching helps here too, since a prefetched page that&#8217;s already cached takes far less server work. One more reason <a href=\"https:\/\/fastpixel.io\/fr\/blog\/why-wordpress-caching-matters-and-how-fastpixel-nails-it\/\">WordPress caching matters<\/a>. And for links that shouldn&#8217;t be prefetched (logout, add to cart), there&#8217;s the <code>no-prefetch<\/code> class.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"putting-it-into-wordpress\"><\/span>Putting it into WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Please don&#8217;t hand-edit <code>header.php<\/code>. A theme update erases it, and duplicates sneak in. WordPress has two filters for exactly this.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Preconnect and dns-prefetch go through <code>wp_resource_hints<\/code>, in your child theme&#8217;s <code>functions.php<\/code> or a snippets plugin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {\n\n    if ( 'preconnect' === $relation_type ) {\n        $urls&#91;] = array(\n            'href' =&gt; 'https:\/\/fonts.gstatic.com',\n            'crossorigin',\n        );\n    }\n\n    if ( 'dns-prefetch' === $relation_type ) {\n        $urls&#91;] = 'https:\/\/www.googletagmanager.com';\n    }\n\n    return $urls;\n}, 10, 2 );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Preload goes through <code>wp_preload_resources<\/code>, added in WordPress 6.1:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp_preload_resources', function( $resources ) {\n\n    \/\/ Inter font, used on every page\n    $resources&#91;] = array(\n        'href'        =&gt; get_stylesheet_directory_uri() . '\/assets\/fonts\/Inter-Regular.woff2',\n        'as'          =&gt; 'font',\n        'type'        =&gt; 'font\/woff2',\n        'crossorigin' =&gt; 'anonymous',\n    );\n\n    \/\/ Hero background, homepage only\n    if ( is_front_page() ) {\n        $img = get_stylesheet_directory_uri() . '\/assets\/img\/';\n\n        $resources&#91;] = array(\n            'href'          =&gt; $img . 'hero-1200.webp',\n            'as'            =&gt; 'image',\n            'imagesrcset'   =&gt; $img . 'hero-600.webp 600w, ' . $img . 'hero-1200.webp 1200w',\n            'imagesizes'    =&gt; '100vw',\n            'fetchpriority' =&gt; 'high',\n        );\n    }\n\n    return $resources;\n} );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That <code>is_front_page()<\/code> line saves every blog reader from downloading a homepage photo they&#8217;ll never see. Easy to forget. Full parameter lists live in the reference for <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_resource_hints\/\">wp_resource_hints<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_preload_resources\/\">wp_preload_resources<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before pasting any of this, hit Ctrl+U on your page and search for <code>rel=\"pre<\/code>. Themes and plugins often add hints already. On a site running FastPixel, DNS prefetching, preconnect hints, and LCP-related prioritization are handled automatically, so you&#8217;d only be filling gaps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"checking-your-work\"><\/span>Checking your work<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A bad hint doesn&#8217;t crash anything. It just sits there. So test before and after.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In DevTools, open the Network tab. Does the preloaded file start earlier than it used to? Switch on the Priority column to see how the browser really ranks it. Then run PageSpeed Insights on mobile and compare LCP and First Contentful Paint (FCP).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No change? Delete the hint. And while you&#8217;re in there, hunt for fossils, like a preconnect to <code>fonts.googleapis.com<\/code> left over from before you self-hosted your fonts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"the-bottom-line\"><\/span>The bottom line<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For the agency site we used as example, the final list is short. Preconnect to Google Fonts (or self-host and drop it), dns-prefetch for analytics, preload for the hero background, and let WordPress handle prefetching for internal links.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s typical. Most sites need a few careful hints, not a pile of them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using <a href=\"https:\/\/wordpress.org\/plugins\/fastpixel-website-accelerator\/\">FastPixel<\/a>? You don\u2019t need to worry about any of this, resource hints and loading priorities are fully handled automatically by the plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"faqs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-4472a2b1\"><h3 class=\"uagb-heading-text\"><span class=\"ez-toc-section\" id=\"whats-the-difference-between-preload-and-prefetch\"><\/span><strong>What&#8217;s the difference between preload and prefetch?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Preload is for a file the current page needs, fetched early. Prefetch is for something the next page might need, fetched at low priority.<\/p>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-052e809f\"><h3 class=\"uagb-heading-text\"><span class=\"ez-toc-section\" id=\"how-many-files-should-i-preload\"><\/span><strong>How many files should I preload?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">As few as possible. Only files that are critical and that the browser would otherwise find late.<\/p>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-79d59188\"><h3 class=\"uagb-heading-text\"><span class=\"ez-toc-section\" id=\"do-i-need-a-prefetch-plugin-on-wordpress-68-or-newer\"><\/span><strong>Do I need a prefetch plugin on WordPress 6.8 or newer?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Usually not for basic internal navigation. Core already handles speculative prefetching for eligible links. The Speculative Loading plugin is there if you want prerendering or more aggressive settings.<\/p>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-c5278c16\"><h3 class=\"uagb-heading-text\"><span class=\"ez-toc-section\" id=\"can-resource-hints-make-my-site-slower\"><\/span><strong>Can resource hints make my site slower?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Too many preloads compete with each other, unused preconnects waste resources, and aggressive prefetching eats into mobile data.<\/p>","protected":false},"excerpt":{"rendered":"<p>Three &lt;link&gt; tags. Nearly identical names. And a surprising number of WordPress sites using them backwards. It&#8217;s easy to see why. Preload, prefetch, and preconnect sound like one idea wearing three different hats. They&#8217;re not, and swapping one for another can quietly make a page slower. So instead of dictionary definitions, let&#8217;s take one ordinary [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4808,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[12],"tags":[],"class_list":["post-4806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-world-of-wordpress"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress.png",1500,850,false],"thumbnail":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress-150x150.png",150,150,true],"medium":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress-300x170.png",300,170,true],"medium_large":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress-768x435.png",768,435,true],"large":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress-1024x580.png",1024,580,true],"1536x1536":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress.png",1500,850,false],"2048x2048":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress.png",1500,850,false],"trp-custom-language-flag":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress-18x10.png",18,10,true],"betterdocs-category-thumb":["https:\/\/fastpixel.io\/wp-content\/uploads\/2026\/09\/Preload-Prefetch-Preconnect_-A-Practical-Guide-to-Resource-Hints-in-WordPress-360x204.png",360,204,true]},"uagb_author_info":{"display_name":"Bianca Rus","author_link":"https:\/\/fastpixel.io\/fr\/blog\/author\/bianca\/"},"uagb_comment_info":0,"uagb_excerpt":"Three &lt;link&gt; tags. Nearly identical names. And a surprising number of WordPress sites using them backwards. It&#8217;s easy to see why. Preload, prefetch, and preconnect sound like one idea wearing three different hats. They&#8217;re not, and swapping one for another can quietly make a page slower. So instead of dictionary definitions, let&#8217;s take one ordinary\u2026","_links":{"self":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/4806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/comments?post=4806"}],"version-history":[{"count":4,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/4806\/revisions"}],"predecessor-version":[{"id":4812,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/4806\/revisions\/4812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/media\/4808"}],"wp:attachment":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/media?parent=4806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/categories?post=4806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/tags?post=4806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}