rel=preconnect: the CDN origins squirrel checks for a hint

What preconnect does

Fetching from a new origin costs a DNS lookup, a TCP handshake and a TLS negotiation before a single byte of the file moves. <link rel="preconnect"> tells the browser to do all three as soon as it parses <head>, so the connection is ready when the resource is requested. rel="dns-prefetch" does the first step only and is the cheaper fallback.

The budget is small. Each open connection costs memory and contends for bandwidth, so two to four origins is the practical limit and they should be the ones on the critical path. A font host qualifies. An analytics host that loads after paint does not.

What squirrel checks

The rule runs on every crawled page and emits one or two checks:

• preconnect-missing: emitted only when at least one known CDN is used without a preconnect. It warns with the message Missing preconnect for N CDN(s) and lists each hostname as an item.
• preconnect-usage: passes with the message Resource hints in use when the page has any link[rel="preconnect"] or link[rel="dns-prefetch"] carrying a non-empty href. With no hints and nothing missing, it reports at info status with No preconnect hints (may not be needed). With no hints but a CDN missing one, this check is not emitted at all and only the warning appears.

The known list is thirteen hosts: cdn.jsdelivr.net, cdnjs.cloudflare.com, unpkg.com, fonts.googleapis.com, fonts.gstatic.com, ajax.googleapis.com, code.jquery.com, stackpath.bootstrapcdn.com, maxcdn.bootstrapcdn.com, cdn.cloudflare.com, use.fontawesome.com, kit.fontawesome.com and cdn.tailwindcss.com. One is reported only when the page loads a script[src], link[href] or img[src] whose origin is exactly https://<host>, and no preconnect names that host. A CDN not on the list is never reported.

The signals come from a shared analysis of the page that six performance rules read, computed once per page.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Put them at the top of <head>, before the stylesheets and scripts that use those origins. Fonts and anything else fetched in CORS mode need the crossorigin attribute, because a connection opened without it cannot be reused for a CORS request.

The limit worth knowing is a page loading a listed CDN over a scheme or subdomain that does not match exactly. The origin comparison is literal, so anything other than https://<host> is not matched and the CDN is not reported at all.

Enable / disable

Disable this rule

[rules]
disable = ["perf/preconnect"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/preconnect"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• perf/font-delivery: third-party font stylesheets, the most common reason a preconnect is worth it.
• perf/font-loading: the Google Fonts preconnect checked from the font side.
• perf/critical-request-chains: the dependency chains a connection delay lands in.
• perf/http2: the protocol those connections are negotiated over.

Performance findings ship in every audit next to the SEO, security and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Establish network connections early, web.dev
• rel=preconnect, MDN

Check your site

Run squirrel audit https://example.com and open the Performance section of the report. Each missing origin is listed by hostname. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.