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-rendering-async-defer-preload/ ► Blog: https://gauravsen.codes/blog​ ► Mentorship - https://gauravsen.codes Find me here👇🏼: ► Instagram: https://www.instagram.com/gaurav.sen_​ ► Twitter: https://twitter.com/gaurav_sen_​ ► LinkedIn: https://www.linkedin.com/in/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-vin-deisel-diseal-OJ1csu37BS3eg https://giphy.com/gifs/fallontonight-jimmy-fallon-tonight-show-monologue-UmRwdELs7GEzfisEec https://giphy.com/gifs/WitchandWomb-nope-salt-shaker-na-ah-fxeWwyOg76A9sDP06s https://giphy.com/stickers/weird-why-question-dupTpF2ePiFTNggMnt #Async #Defer #HTML #JavaScript #CSS #DOM #TweakedDev