Intermediate LevelHTML & Semantic Web
How do resource hints (dns-prefetch, preconnect, prefetch, preload) optimize loading performance?
❓ Interview Prompt: Explain resource hints: dns-prefetch (DNS resolution), preconnect (TLS handshake), prefetch (future page), and preload (critical current asset).
Resource Hints instruct the browser to prepare network connections or download assets early:
1
'dns-prefetch': Resolves domain IP addresses early.
2
'preconnect': Performs DNS resolution + TCP connection + TLS handshake early.
3
'preload': Mandatory high-priority download for critical resources needed on the current page (hero image, critical font).
4
'prefetch': Low-priority download for assets needed on subsequent page navigations.
Code Implementation Example
html
<head>
<!-- High-priority preload for critical LCP hero image -->
<link rel="preload" href="hero.webp" as="image" type="image/webp">
<!-- Preconnect to API origin establishing early TLS handshake -->
<link rel="preconnect" href="https://api.myapp.com">
</head>💡Preloading critical hero images and preconnecting to API origins using link resource hints.
🎯 Interview Key Takeaway
Use preload for critical assets needed on the current page, preconnect for early TLS handshakes, and prefetch for future pages.
#preload#preconnect#prefetch#Performance#Intermediate
Back to all HTML & Semantic Web Questions→