6 Ways To Improve Web Performance With Preload Content
prefetch vs preload vs preconnect vs dns-prefetch vs prerender vs modulepreload
*advanced javascript techniques*
🧵 Thread...
prefetch vs preload vs preconnect vs dns-prefetch vs prerender vs modulepreload
*advanced javascript techniques*
🧵 Thread...
1. preload
<link rel="preload"> tells the browser to download and cache a resource (script or stylesheet) as soon as possible
It’s helpful when you need that resource a few seconds after loading the page
<link rel="preload"> tells the browser to download and cache a resource (script or stylesheet) as soon as possible
It’s helpful when you need that resource a few seconds after loading the page
2. prefetch
<link rel="prefetch"> tells browser to download and cache a resource in the background
The download happens with a low priority, so it doesn’t interfere with more important resources
It’s helpful when you need resource on a subsequent page
<link rel="prefetch"> tells browser to download and cache a resource in the background
The download happens with a low priority, so it doesn’t interfere with more important resources
It’s helpful when you need resource on a subsequent page
3. preconnect
<link rel="preconnect"> tells browser to perform a connection to a domain in advance
It’s helpful when you download something from that domain soon, but you don’t know what exactly, and you want to speed up the initial connection
<link rel="preconnect"> tells browser to perform a connection to a domain in advance
It’s helpful when you download something from that domain soon, but you don’t know what exactly, and you want to speed up the initial connection
4. dns-prefetch
<link rel="dns-prefetch"> tells browser to perform a DNS resolution of a domain in advance
It’s helpful when you connect to that domain soon, and you want to speed up the initial connection
<link rel="dns-prefetch"> tells browser to perform a DNS resolution of a domain in advance
It’s helpful when you connect to that domain soon, and you want to speed up the initial connection
5. prerender
<link rel="prerender"> tells browser to load a URL and render it in an invisible tab
When a user clicks on a link, the page should be rendered immediately
It’s helpful when you’re sure user will visit a specific page next, and you want to render it faster
<link rel="prerender"> tells browser to load a URL and render it in an invisible tab
When a user clicks on a link, the page should be rendered immediately
It’s helpful when you’re sure user will visit a specific page next, and you want to render it faster
6. modulepreload
<link rel="modulepreload"> tells browser to download, cache, and compile a JS module script as soon as possible
It’s helpful when you use ES modules in production, and you want to load your app faster
<link rel="modulepreload"> tells browser to download, cache, and compile a JS module script as soon as possible
It’s helpful when you use ES modules in production, and you want to load your app faster
TLDR;
preload – you need a resource in a few seconds
prefetch – you need a resource for the next page
preconnect – you need a resource soon, but you don’t know its full url yet
preload – you need a resource in a few seconds
prefetch – you need a resource for the next page
preconnect – you need a resource soon, but you don’t know its full url yet
dns-prefetch – you need a resource soon, but you don’t know its full url yet (for older browsers)
prerender – you’re certain users will navigate to a specific page, and you want to speed it up
modulepreload – you’re need an ES module script soon
prerender – you’re certain users will navigate to a specific page, and you want to speed it up
modulepreload – you’re need an ES module script soon
Thanks for reading!
❤️ and share this thread if you found it helpful.
❤️ and share this thread if you found it helpful.
First tweet 👇
#100DaysOfCode #javascript30 #CodeNewbie
#100DaysOfCode #javascript30 #CodeNewbie
https://twitter.com/nickbulljs/status/1317357731376996352
• • •
Missing some Tweet in this thread? You can try to
force a refresh
