I'm working on performance improvements in my application, there are lots of static files loading in head. I came across async, defer, preload, prefetch
Can someone share the advantage of preload/prefetch over async/ defer and the advantages of using async, defer, preload, prefetch with the use case
It really helps to understand the behavior and choose the right one
async and defer are two attributes for the <script> tag but preload and prefetch are valid values for rel attribute of the <link> tag.
The async keyword is an attribute for the <script> tag. it tells the browser to fetch the script asynchronously while doing something else. When the download is complete the browser immediately runs the script (which blocks other parsings and renderings).
The defer is also an attribute for the <script> tag. it tells the browser to fetch the script asynchronously while doing something else but runs the script only when the parsing of HTML is finishing. so it doesn't block the rendering of HTML and wait for rendering to be finished before running the script.
preload is a value for the rel attribute of the <link> tag. it simply tells the browser to prioritize fetching that content (CSS, font, ...) before rendering the page. Preload works on current navigation. e.g you want to show a text with a specific font but you don't want the user to see the text with another font before the intended font is downloaded. so you can add a rel=" preload" to the <link /> tag of that font to prevent this.
It is a value for the rel attribute of the <link /> tag too. the purpose of prefetch is to load the contents of other navigations/links before the user visits them. so when the user clicks on those links she will see the next page faster. it is about loading the contents of the next navigation.
P.S. images are from: https://webspeedtools.com/async-vs-defer-vs-preload-vs-server-push/
