What is Preload, Preconnect & Prefetch ? Please Explain

Now a days, I am wandering for pro technique to reduce loading time of wp blog. So I came to preload, preconnect and prefetch. These are new for me. So dear expert, have you used the techniques? please elaborate here.
Thanks in advance @GulshanKumar

All these directive are used as resources hint to prioritize HTTP requests.

  • Preconnect is used for connecting a domain earliest by dns lookup, intiating connection, TLS negotiation.


Best use case: For connecting high priority domain/subdomain.

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preconnect" href="https://www.google-analytics.com">

  • Preload hint act as highest priority to load subresources.

Best use case: For critical CSS, high priority JS, web font files

  • Prefetch act as lowest priority hint.

For example, it can be used for low-priority critical elements such as logo, sub-page, etc.

<link rel="prefetch" href="https://example.com/logo.jpg" as="image">

Read more



if you’re loading a library from any external domain. These tags will reduce your DNS lookup time which is aroung 50-100ms.



prefetch these domains for best results


Good list. But I prefer to use webpagetest.org to find out such urls

1 Like