PluginsArmorProCitedProBoostPro
PricingDocsBlogAboutGet Started

Connection Optimization

Auto-preconnect, custom domains, asset preloading with advanced rules, and LCP image preloading.

Last updated Feb 11, 2026

What is Preconnect?

When your page loads resources from third-party domains (CDNs, analytics, fonts, ads), the browser must first perform DNS lookup, TCP connection, and TLS negotiation for each domain. This can add 100-300ms per domain before any data transfers.

Preconnect hints tell the browser to establish these connections early, so when the resource is actually needed, the connection is already ready.

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

Auto-Preconnect

BoostPro automatically detects third-party domains used by your registered scripts and stylesheets, then adds preconnect hints for them.

  • Default: On
  • How it works: Scans all enqueued scripts and styles during wp_head, extracts external domains, and outputs preconnect hints
  • Exclusions: Your own domain is automatically excluded

This works for scripts and styles loaded in the <head>. Resources loaded in the footer or injected dynamically are not detected automatically.

Custom Preconnect Domains

For domains that auto-detection misses, you can manually add preconnect hints. This is useful for:

  • Scripts loaded in the footer (after auto-detection runs)
  • Dynamically injected resources (ads, analytics, chat widgets)
  • API endpoints your page calls via JavaScript
  • Image CDNs referenced in your content

Enter one domain per line in the Custom Preconnect Domains textarea:

https://cdn.example.com
https://analytics.example.com
https://api.example.com

Tip

You can enter URLs with or without the protocol. BoostPro automatically adds https:// if not specified. Duplicate domains (already auto-detected) are filtered out.

How to Find Domains to Preconnect

To identify which third-party domains your site connects to:

  1. Open Chrome DevTools (F12)
  2. Go to the Network tab
  3. Reload your page
  4. Click the Domain column to sort by domain
  5. Look for external domains that load multiple resources or large files

Asset Preloading

While preconnect prepares the connection, preloading tells the browser to start downloading a specific resource right away. This is useful for critical assets that the browser discovers late, like fonts loaded from CSS or images referenced in JavaScript.

Enter one URL per line in the Preload Assets textarea. BoostPro auto-detects the resource type from the file extension:

/wp-content/themes/mytheme/fonts/heading.woff2
/wp-content/themes/mytheme/images/hero.webp

You can override the resource type by appending as:type:

/path/to/resource.js as:script
/path/to/data.json as:fetch

Preload rules (advanced)

For more precise control, preload rules let you specify conditions for when and how resources are preloaded. Each rule can include:

  • URL: The resource to preload
  • Resource type: font, image, style, script, fetch
  • Device targeting: Load only on mobile or desktop
  • Page conditions: Only preload on specific pages or URL patterns
  • Fetch priority: Set high or low priority for the browser

This is ideal for sites that need different preloading strategies on different pages, such as preloading a hero font only on the homepage or a product image only on product pages.

Auto-preload LCP image

The Largest Contentful Paint (LCP) image is often the biggest factor in your PageSpeed score. BoostPro can automatically detect the hero image on each page and add a <link rel="preload"> hint for it.

  • Default: Off
  • Detection: Scans for the first large image or CSS background image in the page content
  • Impact: Reduces LCP by telling the browser to fetch the hero image immediately instead of waiting for CSS/HTML parsing to discover it

Tip

Auto-preload LCP image works best with page caching enabled. The preload hint is added during the first page render and then cached, so every subsequent visitor gets the benefit.

Best practices

  • Don't over-preconnect: Each preconnect hint uses browser resources. Only preconnect to domains that load critical resources (4-6 domains max)
  • Prioritize critical domains: Focus on domains that serve resources needed for the initial render (fonts, CSS, critical JS)
  • Self-host when possible: If you can host the resource locally (like Google Fonts), that's even better than preconnecting
  • Limit preloads: Only preload resources that are critical for above-the-fold content. Too many preloads can actually hurt performance by competing for bandwidth
  • Test the impact: Use WebPageTest or Chrome DevTools to verify the hints are working
Previous← Font OptimizationNextSpeculative Loading →