Faster page loading with async and defer!
Async and defer change the way a script is loaded. In this video you will learn everything that goes into rendering a page. We learn the basics of page loading such as HTML parsing and DOM construction. Impact of script tag on the loading of a page. The critical rendering path and how to improve the loading time for a page with the help of async and defer script attributes.
► Blog post related to this video: https://gauravsen.codes/faster-page-r...
► Blog: https://gauravsen.codes/blog
► Mentorship - https://gauravsen.codes
Find me here👇🏼:
► Instagram: / gaurav.sen_
► Twitter: / gaurav_sen_
► LinkedIn: / gauravs3n
⏱Timeline:
00:00 About
00:25 Page rendering - DOM
05:24 CSS Object Model(CSSOM)
06:59 Loading scripts
07:45 The problem -parser blocking scripts
08:00 Example of parser blocking script
09:45 Why is the script tag parser blocking?
11:32 Impact of slow loading css
13:46 Possible solution?
15:38 Async to the rescue
16:36 Visual representation of async script loading
16:52 Defer the second option
18:17 Deferred scripts visualized
18:36 The order matters
20:45 Async vs defer
21:29 The key differences visualized
21:41 Which one to use?
22:37 Outro
Gif Credits:
https://giphy.com/gifs/paul-walker-vi...
https://giphy.com/gifs/fallontonight-...
https://giphy.com/gifs/WitchandWomb-n...
https://giphy.com/stickers/weird-why-...
#Async #Defer #HTML #JavaScript #CSS #DOM #TweakedDev