VP Speed - Preload and preconnect

The browser discovers most resources only as it parses your HTML and CSS, which can leave important files waiting. Resource hints fix that: preload tells the browser to fetch a critical file early, and preconnect opens a connection to an external domain ahead of time. VP Speed offers both.

Preload Manager PRO

Some resources are critical but discovered late — a web font referenced deep inside a CSS file, or a hero image set as a CSS background. The Preload Manager lets you declare these so the browser starts fetching them immediately, on the Preload tab.

Each entry is a row with a few fields:

  • URL — the resource to preload.
  • Type (as) — what kind of resource it is: font, image, style, script or fetch. This is required for the browser to prioritize correctly.
  • MIME type — optional, for example font/woff2.
  • Crossorigin — switch on for fonts and any cross-origin resource. Fonts always need this even when served from your own domain.

The best preload candidates are your above-the-fold hero image and the primary web font your text uses. Preloading those two often improves Largest Contentful Paint noticeably. Don't preload everything — preloading low-priority files just delays the ones that matter.

Preload a resource only if the page actually uses it. A preloaded file that goes unused is wasted bandwidth, and browsers will warn about it in the console. Match the as type to the real resource, and include crossorigin for fonts, or the browser may fetch the file twice.

Auto preconnect

Preconnect is lighter than preload: instead of fetching a file, it tells the browser to set up the connection to an external domain — DNS, TCP and TLS — ahead of the moment the file is requested. When the request comes, the connection is already warm.

The Auto preconnect to external domains switch, on the JavaScript tab, does this automatically. VP Speed scans the rendered page for external domains that serve stylesheets or scripts and adds up to four <link rel="preconnect"> hints. It skips domains that already have a hint, and it ignores delayed scripts — those don't need an early connection.

The four-domain limit is intentional. Preconnecting to too many origins wastes connections and can slow things down; the most impactful external domains are covered, and the rest aren't worth the overhead.

How they work together

Preconnect and preload complement each other. For a font on a domain you don't control, preconnect warms the connection while preload fetches the file — the connection is ready exactly when the download starts. For first-party resources, where the connection already exists, preload alone is enough. VP Speed's local icons feature uses preload internally for exactly this reason.

Next step

The final feature article covers browser caching — making visitors' browsers keep your static files so repeat visits load almost instantly.