These things (Preload, DNS Prefetch, Preconnect) in order to be understood correctly by people discovering similar stuff in need for quick, but correct information, layman’s explanation is the only type of information they are after. So, let’s explain each of the functions through easy understandable way.
Preload
Preload is extremely useful when you have “render blocking resources” warnings. You can specify resources such as CSS or fonts which are needed right away, before anything else, when a website is loading. This can speed up page load time and make user experience snappier. (Very clear explanation, right?)
Files that you can preload are:
- images
- fonts: woff2 ... (this mostly means to preload local fonts)
- scripts (local js files)
- styles ( local css): /style.css ...
It's advisable to remove query strings if you use this technique.
DNS Prefetch
This is something that happens (if set) when a website is already loaded, and Preload function already happened. If you expect people to click a lot on your links, then DNS Prefetch is “a must use” feature. So, to improve your website performance, DNS Prefetch will resolve domain names (make a DNS lookup in the background before a user makes a click on any of your links within) that you set. You can use this technique if you have a lot of connections to third party links of some resources on your website. For example, if you have a lot of google fonts, a cdn, or even Google analytics:
//fonts.googleapis.com //www.google-analytics.com //cdn.domain.com
Preconnect
This is something similar to DNS Prefetch but different. It gives your CPU a bit more work, but it is great if you have the server resources to handle all that.
IMPORTANT: With this technique do not preconnect to fonts.googleapis.com
Only use fonts.gstatic.com preconnection. Google always serves its fonts from fonts.gstatic.com, while it is loading the CSS from fonts.googleapis.com. You use DNS prefetch for that connection.
In this case, you should be very careful. DNS prefetch and Preconnect, if together, should be used wisely. If you have resources loading a lot from your CDN, then DNS prefetch should be enough since CDN is super fast, and the reason why you use it is to take off the heavy load from your server, even tho the preconnect might be faster option, it is not worth it, the difference is not noticable, while your server will feel it.
However, the same goes for google fonts:DNS prefetch is simply a better used technique since it doesn’t put any heavy lifting to your server.
But, if you have a low traffic website, or ultra high traffic website, then Preconnect is a good choice.