Q228: Preload, Prefetch, Preconnect and Priority Hints

What Interviewers Want To Evaluate

Interviewers want to know whether you can use browser resource hints correctly instead of adding hints everywhere.

They check preload, prefetch, preconnect, dns-prefetch, priority hints, LCP optimization, route navigation, third-party origins, bandwidth contention, and validation with network traces.

Short Interview Answer

Resource hints help the browser discover or prepare resources earlier, but they should be used selectively. I use preload for current-page critical resources like an LCP image or critical font, prefetch for likely future navigation, preconnect for important third-party origins needed soon, and priority hints to influence fetch priority for key assets. I validate hints in the waterfall because overusing them can waste bandwidth and delay more important resources.

Detailed Interview Answer

Resource hints are instructions or suggestions to the browser.

They can improve performance when discovery is late.

They can hurt performance when used blindly.

Common hints:

preload
prefetch
preconnect
dns-prefetch
fetchpriority

Each solves a different problem.

preload

preload asks the browser to fetch a resource needed for the current page.

Good candidates:

LCP image
critical font
critical CSS
important script discovered late

Example:

<link rel="preload" as="image" href="/hero.webp">

Use the correct as value.

Incorrect as can reduce effectiveness or cause duplicate requests.

Preload Risk

Preload competes for bandwidth.

Bad candidates:

below-the-fold images
rare interaction scripts
future route assets
non-critical widgets
large third-party scripts

If everything is important, nothing is.

Preload should be tied to a current-page critical path.

prefetch

prefetch is for likely future use.

Examples:

next route
next chapter
search result details
checkout step after cart

Prefetch should be lower priority than current-page critical resources.

Frameworks may prefetch routes automatically.

Be careful with data usage and user intent.

preconnect

preconnect opens early connection work to an origin.

It can include:

DNS
TCP
TLS

Good candidates:

font CDN needed immediately
critical image CDN
analytics endpoint needed early
API origin used during startup

Do not preconnect to many origins.

Connections are not free.

dns-prefetch

dns-prefetch resolves DNS earlier.

It is lighter than preconnect.

Use it for origins that may be needed but are less critical.

For highly critical origins, preconnect is stronger.

fetchpriority

Priority hints can influence resource priority.

Example:

<img src="/hero.webp" fetchpriority="high" width="1200" height="640" alt="">

This can help an LCP image.

But priority hints should not replace good discovery, dimensions, compression, and format.

They are one lever.

Fonts

Fonts need careful handling.

Possible optimizations:

use framework font optimization
self-host fonts
preload critical font files
use font-display intentionally
limit font weights
avoid external CSS chains

Preloading every font weight is a classic mistake.

Only preload what is needed early.

Third-Party Origins

Third-party resource hints need governance.

Ask:

is this origin needed for first render
does it require consent
does it block interaction
who owns it
what happens if it fails

Preconnecting to a third-party origin tells the browser to spend resources early.

That should be justified.

Validation

Validate in the network waterfall.

Look for:

resource discovered earlier
priority changed as expected
no duplicate requests
critical resource completes sooner
LCP improves
other critical resources are not delayed

Measure before and after.

Common Mistakes

Common mistakes include:

preloading too many resources
using preload for future routes
forgetting correct as attribute
preconnecting to every third-party origin
preloading unused font weights
using hints without checking the waterfall
assuming priority hints fix oversized assets

Hints are scalpels, not seasoning.

Senior Trade-Offs

Resource hints trade earlier work for resource contention.

They help when:

critical resource discovery is late
connection setup is on the critical path
future navigation is highly likely
browser priority is wrong

They hurt when:

bandwidth is scarce
too many resources compete
prediction is poor
resources are unused

Interview Framing

In an interview, say:

I choose hints based on the critical path. Preload is for current-page critical resources, prefetch is for likely future work, preconnect prepares important origins, and priority hints adjust fetch priority. I always verify with the waterfall.

Revision Notes

• preload is for current-page critical resources.
• prefetch is for likely future navigation or work.
• preconnect prepares a connection to an important origin.
• dns-prefetch is lighter than preconnect.
• fetchpriority can help key images but is not magic.
• Overusing hints can delay more important resources.

Follow-Up Questions

• When would you preload an image?
• Why can preload hurt performance?
• What is the difference between prefetch and preload?
• When should you use preconnect?
• How would you verify a resource hint helped?

How I Would Answer This In A Real Interview

I would say resource hints are useful when the browser discovers something too late or under-prioritizes it. I would preload a current-page LCP image or critical font, prefetch likely next-route assets, preconnect to a truly important origin, and use priority hints carefully. Then I would verify in the waterfall that the resource completes earlier without starving other critical work.