Resource Hints Preconnect
Use <link rel='preconnect'> for critical third-party origins, <link rel='preload'> for critical first-party assets, and <link rel='dns-prefetch'> as a fallback for lower-priority origins — placed in <head> before any sty…
$ aoe install @community/pattern-resource-hints-preconnectProjection
Always in _index.xml · the agent never has to ask for this.
ResourceHintsPreconnect [pattern] v1.0.0
Use for critical third-party origins, for critical first-party assets, and as a fallback for lower-priority origins — placed in
before any stylesheet or script tags.Loaded when retrieval picks the atom as adjacent / supporting.
ResourceHintsPreconnect [pattern] v1.0.0
Use for critical third-party origins, for critical first-party assets, and as a fallback for lower-priority origins — placed in
before any stylesheet or script tags.Meta
- License: MIT AND Apache-2.0
- License Provenance: legacy-backfill
Problem
Browsers discover third-party font, analytics, and API origins late in the parse — costing a full TCP/TLS handshake (100–300ms) before any data can transfer. First-party critical assets (fonts, hero images) are discovered even later in CSS.
Solution
Three hint types, in order of cost-effectiveness:
1. preconnect — early TCP+TLS handshake with a cross-origin server.
Use for: font providers, analytics, API hosts that will be hit on every page.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2. preload — fetch a specific resource with high priority before it is discovered in CSS/JS.
Use for: above-the-fold fonts, hero images, critical JS chunks.
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image">
3. dns-prefetch — DNS lookup only, no TCP/TLS. Fallback for browsers not supporting preconnect.
Use for: every cross-origin with a preconnect; add as a fallback.
<link rel="dns-prefetch" href="https://analytics.example.com">
Loaded when retrieval picks the atom as a focal / direct hit.
ResourceHintsPreconnect [pattern] v1.0.0
Use for critical third-party origins, for critical first-party assets, and as a fallback for lower-priority origins — placed in
before any stylesheet or script tags.Meta
- License: MIT AND Apache-2.0
- License Provenance: legacy-backfill
Problem
Browsers discover third-party font, analytics, and API origins late in the parse — costing a full TCP/TLS handshake (100–300ms) before any data can transfer. First-party critical assets (fonts, hero images) are discovered even later in CSS.
Solution
Three hint types, in order of cost-effectiveness:
1. preconnect — early TCP+TLS handshake with a cross-origin server.
Use for: font providers, analytics, API hosts that will be hit on every page.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2. preload — fetch a specific resource with high priority before it is discovered in CSS/JS.
Use for: above-the-fold fonts, hero images, critical JS chunks.
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image">
3. dns-prefetch — DNS lookup only, no TCP/TLS. Fallback for browsers not supporting preconnect.
Use for: every cross-origin with a preconnect; add as a fallback.
<link rel="dns-prefetch" href="https://analytics.example.com">
Relations
related: [@community/rule-font-loading-fout-foit, @community/rule-image-optimization, @community/rule-font-self-host, @community/check-focus-visible]
Meta
- License: MIT AND Apache-2.0
- License Provenance: legacy-backfill
Problem
Browsers discover third-party font, analytics, and API origins late in the parse — costing a full TCP/TLS handshake (100–300ms) before any data can transfer. First-party critical assets (fonts, hero images) are discovered even later in CSS.
Solution
Three hint types, in order of cost-effectiveness:
1. preconnect — early TCP+TLS handshake with a cross-origin server.
Use for: font providers, analytics, API hosts that will be hit on every page.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2. preload — fetch a specific resource with high priority before it is discovered in CSS/JS.
Use for: above-the-fold fonts, hero images, critical JS chunks.
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image">
3. dns-prefetch — DNS lookup only, no TCP/TLS. Fallback for browsers not supporting preconnect.
Use for: every cross-origin with a preconnect; add as a fallback.
<link rel="dns-prefetch" href="https://analytics.example.com">
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/pattern-resource-hints-preconnect/atom.yaml