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.

image

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

https://developers.google.com/web/fundamentals/performance/resource-prioritization

2 Likes

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

3 Likes

//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//youtube.com
//api.pinterest.com
//cdnjs.cloudflare.com
//pixel.wp.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//disqus.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s.gravatar.com
//stats.wp.com

prefetch these domains for best results

3 Likes

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

1 Like