Boost Web Performance: Master Preload, Prefetch, Preconnect & More
This article explores a range of web preloading techniques—including DNS‑prefetch, preconnect, preload, prefetch, prerender, the Speculation Rules API, streaming rendering, HTTP/2 push, and Early Hints—detailing how they reduce network latency, improve first‑paint times, and enhance overall user experience.
The article examines various preloading strategies that can dramatically improve website performance and user experience by reducing network latency before a user even requests resources.
CDN Dynamic Acceleration
CDNs can accelerate both static and dynamic content by caching at edge nodes, shortening the physical distance between users and servers, and using intelligent routing to avoid congestion.
dns‑prefetch (DNS Pre‑resolution)
Browsers can resolve domain names in advance using the <link rel="dns-prefetch" href="//example.com"> tag, eliminating DNS lookup delays when the resource is needed.
<link rel="dns-prefetch" href="//example.com">preconnect (Domain Pre‑connection)
Preconnect establishes TCP and TLS connections ahead of time with <link rel="preconnect" href="//example.com">, reducing round‑trip time for subsequent requests.
<link rel="preconnect" href="//example.com">preload & prefetch
preload forces the browser to download critical resources (fonts, scripts, styles) early using <link rel="preload" href="styles.css" as="style">. prefetch hints the browser to download resources during idle time with <link rel="prefetch" href="next-page-image.jpg">. Preload has higher priority than prefetch.
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="image.jpg" as="image"><link rel="prefetch" href="next-page-image.jpg">
<link rel="prefetch" href="next-page-script.js">prerender (Full Page Pre‑rendering)
Prerender downloads and renders an entire page in the background, allowing instant display when the user navigates. It can waste bandwidth if the page is never visited and may interfere with analytics.
<link rel="prerender" href="https://example.com/next-page">User‑behavior based prefetch
By listening to mouse events (e.g., mouseover), developers can trigger prefetch for the next page, saving ~200 ms of latency.
function App() {
return (
<div className="App">
<h1>Product List</h1>
<div className="product-list">
<Product id="1" name="Product 1" imageUrl="https://via.placeholder.com/150" prefetchUrl="/next-page-1" />
<Product id="2" name="Product 2" imageUrl="https://via.placeholder.com/150" prefetchUrl="/next-page-2" />
<Product id="3" name="Product 3" imageUrl="https://via.placeholder.com/150" prefetchUrl="/next-page-3" />
</div>
</div>
);
}
const Product = ({ id, name, imageUrl, prefetchUrl, delay = 200 }) => {
const [prefetchTimeout, setPrefetchTimeout] = useState(null);
const handleMouseOver = () => {
const timeout = setTimeout(() => {
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = prefetchUrl;
link.credentials = 'include';
document.head.appendChild(link);
}, delay);
setPrefetchTimeout(timeout);
};
const handleMouseOut = () => {
clearTimeout(prefetchTimeout);
};
return (
<div className="product" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
<img src={imageUrl} alt={name} loading="lazy" />
<p>{name}</p>
</div>
);
};Adding credentials="include" ensures the prefetch request carries cookies.
<link rel="prefetch" href="..." as="script" credentials="include">Speculation Rules API
The emerging Speculation Rules API lets developers declaratively specify which URLs to prefetch, offering finer control over timing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Speculation Rules API</title>
<script type="speculationrules">
{"prefetch": []}
</script>
</head>
<body>
<a href="/page1.html" data-prefetch-url="/page1.html">Go to Page 1</a>
<a href="/page2.html" data-prefetch-url="/page2.html">Go to Page 2</a>
<a href="/page3.html" data-prefetch-url="/page3.html">Go to Page 3</a>
<script>
function addPrefetchRule(url) {
const script = document.querySelector('script[type="speculationrules"]');
const rules = JSON.parse(script.textContent);
if (!rules.prefetch.some(r => r.urls.includes(url))) {
rules.prefetch.push({"source": "list", "urls": [url]});
script.textContent = JSON.stringify(rules);
console.log(`Prefetch rule added for: ${url}`);
}
}
document.querySelectorAll('a[data-prefetch-url]').forEach(link => {
link.addEventListener('mouseover', () => {
const url = link.getAttribute('data-prefetch-url');
addPrefetchRule(url);
});
});
</script>
</body>
</html>Streaming Rendering
Streaming rendering sends chunks of HTML to the browser as they are generated, allowing the page to render progressively. It leverages HTTP/1.1 chunked transfer encoding.
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/html',
'Transfer-Encoding': 'chunked'
});
function renderChunk(chunk) {
res.write(`<div>${chunk}</div>`);
}
renderChunk('Loading...');
setTimeout(() => renderChunk('Chunk 1'), 1000);
setTimeout(() => renderChunk('Chunk 2'), 2000);
setTimeout(() => renderChunk('Chunk 3'), 3000);
setTimeout(() => {
renderChunk('done!');
res.write('</body></html>');
res.end();
}, 4000);
}).listen(3000, () => console.log('Server listening on port 3000'));When combined with preconnect/preload tags, streaming can return critical resources early while the server continues heavy computation.
Early Hints (HTTP 103) & HTTP/2 Push
Early Hints (103) let the server send Link headers for resources before the final response, prompting the browser to preload them. HTTP/2 Push allows the server to push resources proactively.
HTTP/1.1 103 Early Hints
Link: </code><code></styles/main.css>; rel=preload; as=style, </code><code></images/example.jpg>; rel=preload; as=imageserver {
listen 443 ssl http2;
location / {
http2_push_preload on;
http2_push banner.jpg;
add_header Link "<banner.jpg.css>; as=image; rel=preload";
}
}These mechanisms further reduce perceived latency by delivering assets before the HTML is fully parsed.
Overall, combining CDN acceleration, DNS‑prefetch, preconnect, preload/prefetch, prerender, speculation rules, streaming rendering, Early Hints, and HTTP/2 Push provides a comprehensive toolbox for optimizing web performance.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Alibaba Cloud Developer
Alibaba's official tech channel, featuring all of its technology innovations.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.