Optimize Web with Resource Hints: Preconnect, Prefetch, Preload and DNS-Prefetch

  1. Minimize the number of critical resources by deferring, or eliminate them altogether.
  2. Optimize the order in which critical resources are prioritized.

Resource Hints

DNS-Prefetch

<link rel="dns-prefetch" href="//fonts.gstatic.com/">

Preconnect

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
  • Too many preconnects
  • Preconnect to unused domain

Preload

<link rel="preload" as="font" href="https://example-cdn.com/custom-font.woff" type="font/woff2" crossorigin="anonymous">

Prefetch

<!-- Resource with prefetch -->
<link rel="prefetch" as="stylesheet" href="/style1.css">

<!-- Resource without prefetch -->
<link rel="stylesheet" href="/style2.css">

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store