Preload, DNS Prefetch, Preconnect

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.

More from author

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related posts

Latest posts

Winamp is the best music player for Windows PC

Winamp, it really whips the llama's ass! 🙂 The best music player of all time.Old school people should know why. My first music player is...

Preload, DNS Prefetch, Preconnect

Find out what does Preload, DNS Prefetch an Preconnect functions are, how they differ from each other and where to use them.

All in One SEO Pack Pro vs Yoast SEO Pro

The ultimate comparison: All in One SEO pack Pro vs Yoast SEO Pro. Find out which one is the best in the year 2020.