# Resource hints and preloading — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-19

> Use resource hints (preload, prefetch, preconnect) to optimize resource loading and DNS resolution.

## Preload, prefetch, and preconnect

`<link rel=preload as=script href=critical.js>` loads resource immediately. `<link rel=prefetch href=next-page.js>` loads during idle. `<link rel=preconnect href=cdn.example.com>` opens connection early. Use preload sparingly for truly critical resources.

## DNS prefetch optimization

DNS lookup takes 20-120ms. Use `<link rel=dns-prefetch href=//cdn.example.com>` for third-party domains. Reduces latency for subsequent connections. Combine with preconnect for full handshake.

## Resource hints strategy

Prioritize: preconnect to third-party origins, preload critical resources, prefetch likely next pages. Too many hints can be counterproductive. Measure impact with RUM.

Quick check

**Quiz:** What does preconnect do?

- [ ] Opens connection early to third-party server
- [ ] Immediately loads the resource
- [ ] Disables connection