Question 1

What is preload and when should it be used?

Accepted Answer

Preload is a directive that tells the browser to fetch a resource with high priority for the current page. It's used for critical resources that the browser discovers late: LCP images, fonts, key CSS or JS. Without preload, the browser waits for HTML parsing, which can increase LCP by 500–800 ms and reduce conversion by 12%.

Question 2

How does prefetch differ from preconnect?

Accepted Answer

Prefetch loads resources for future navigation with low priority, while preconnect establishes a connection to a domain (DNS+TCP+TLS) without downloading content. Preconnect speeds up external domains (fonts, APIs), and prefetch preloads pages the user is likely to visit. For example, preconnecting to Google Fonts reduces TTFB by 300–400 ms.

Question 3

How do you configure preconnect for third-party domains?

Accepted Answer

Add tags in for critical domains (Google Fonts, CDN, API). If the resource requires CORS (fonts, fetch), include the crossorigin attribute. For less critical domains, use dns-prefetch — it only performs a DNS lookup, saving bandwidth. Verify that preconnect doesn't trigger unnecessary requests.

Question 4

What are common mistakes when using preload?

Accepted Answer

A frequent mistake is preloading a resource that isn't used on the page (browser issues a warning). Preloading a font without crossorigin causes double downloads. Too many preload directives compete for bandwidth, reducing LCP priority. Also, never combine preload and lazy loading for the same image.

Question 5

What is the Speculation Rules API and how does it help?

Accepted Answer

The Speculation Rules API is a modern alternative to prefetch, available in Chrome 108+. It not only loads but also fully pre-renders pages based on rules (e.g., on hover). This enables instant navigation. Rules are set via <script type="speculationrules"> with eagerness values (immediate, eager, moderate, conservative). We use it for pages with a high probability of transition.

Preload, Preconnect, Prefetch: Resource Hints for Core Web Vitals

Development and maintenance of all types of websites: