CODEWITHSUNDEEP
javascripthtmlcss
harshini asokan
harshini asokan

Reputation: 39

where to use async/defer and where to use preload/prefetch while loading assets

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

Upvotes: 3

Views: 3431

Answers (1)

Mahdi Aryayi
Mahdi Aryayi

Reputation: 1120

async and defer are two attributes for the <script> tag but preload and prefetch are valid values for rel attribute of the <link> tag.

Async

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).

enter image description here

Defer

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.

enter image description here

Preload

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.

Prefetch

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/

Upvotes: 5

Related Questions