How to Optimize Network Performance for Web Apps? | Frontend Interview | Chakde System Design Ep.4

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ •

  • @newsnoodlehumour
    @newsnoodlehumour 2 роки тому +13

    I was looking for these things, but it was always in small chunks in different places. Good to have all of it in one video. Thanks for the effort Chirag!

    • @engineerchirag
      @engineerchirag  2 роки тому +2

      Glad I could help @ashim. Keep watching and sharing #chakdeSystemDesign

  • @gururajchadaga
    @gururajchadaga Рік тому +6

    Hi Chirag,
    dns-prefetch is not a fallback for pre-connect.
    dns-prefetch just does the DNS lookup in advance, and it does not establish a connection with the crossorigin.
    and rel="prerender" has been deprecated.

  • @aburayhanprince8164
    @aburayhanprince8164 2 роки тому +3

    I can't thank you enough. I just started my career as Front End Engineer.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Great @abu. Welcome to Frontend community. Long way to go!. Keep watching @chakdeSystemDesign

  • @RajnishKumarlive
    @RajnishKumarlive Рік тому +3

    This whole series is on another level. I cannot thank you enough! 🙌

    • @engineerchirag
      @engineerchirag  Рік тому

      Glad you enjoy it! Do share it and help me to make it big ❤️🙏

    • @RajnishKumarlive
      @RajnishKumarlive Рік тому +1

      @@engineerchirag 100%. I ask everyone I know to look at this series.

  • @soumakmaji2766
    @soumakmaji2766 2 роки тому +2

    Thanks, Chirag excellent explanation looking forward to more great content in the upcoming days.

  • @TravellingEngineer-x2h
    @TravellingEngineer-x2h 10 місяців тому

    Liked last part "render cycle" you covered. Basically omitting layout setup. I was not aware of this. Thanks :)

  • @VijayKumar-vv6yw
    @VijayKumar-vv6yw 2 роки тому +1

    Awesome content Chirag ! Love the breadth and the depth ! Explained succinctly ! ! Keep them coming

    • @engineerchirag
      @engineerchirag  2 роки тому

      Thank you! Will do! More in pipeline. Keep watching #chakdeSystemDesign

  • @namanjiandani4593
    @namanjiandani4593 Рік тому

    Thanks!

  • @priyasivakumar3607
    @priyasivakumar3607 2 роки тому +1

    you nailed it. Got to learn a lot of new things in this 1 hr video. Thanks Chirag

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Thanks Priya. Keep watching #chakdeSystemDesign and do share it in your network 🙂

  • @marhawk6468
    @marhawk6468 Рік тому

    As someone who has frontend experience but looking to improve my skills….this is great. TY!

  • @ajayprakash1167
    @ajayprakash1167 9 місяців тому +1

    Need more content like this which are not available in the you tube. Many jobless people and waste people are publishing wrong content video. Ur video are awesome. Try to make production level application for entire frontend backend and db

    • @engineerchirag
      @engineerchirag  9 місяців тому

      More video to come. Need lot of your support to make this video reach more curious developer like you. Thanks in advance!

  • @forceboxed
    @forceboxed 2 роки тому

    @22:07
    onload is called when the stylesheet has been loaded, NOT on document load as you said.

  • @pranshuchittora5444
    @pranshuchittora5444 2 роки тому

    A real gold in the sea of noise. Keep making such awesome videos.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Thanks Pranshu, I'm glad you think so. I will need support to make it reachable to more audidence. Thanks in advance!

  • @tushar54983
    @tushar54983 Рік тому

    This is years of knowledge I got to know by crawling so many resources all explained in 1 video. I would love an in depth video series on each of these modern web performance topics in future. Thank you for this

    • @engineerchirag
      @engineerchirag  Рік тому

      Will do! 👍 Keep watching, keep growing 🚀

    • @tushar54983
      @tushar54983 Рік тому +1

      1 thing I noticed, you said while prefetching, resource is not going to execute. But, execution won't happen for neither preload nor prefetch. The difference b/w them is that preload is a directive/command to browser while prefetch is merely a suggestion

  • @shivaliraghav8524
    @shivaliraghav8524 Рік тому

    This series is great!! Must watch for all frontend devs

    • @engineerchirag
      @engineerchirag  Рік тому

      Awesome ❤️ Help me to spread the series 🙏

  • @naruto5437
    @naruto5437 2 роки тому

    what an awesome channel...finally advance frontend stuff

  • @YuHsinShih
    @YuHsinShih Рік тому

    Very useful information to catch up with the latest technology. Thank you for sharing!

  • @deepaknegi4385
    @deepaknegi4385 2 роки тому +1

    Chirag bhai keep it up!! Kudos to you for bringing up this topic and you explained it really well.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Thanks Deepak. I'm glad you liked it. Keep watching. Pls do share it in your network ☺️

  • @shobhitgarg6897
    @shobhitgarg6897 2 роки тому

    The way you teach these concepts is just awesome...Thanks for creating such a great content.

    • @engineerchirag
      @engineerchirag  2 роки тому

      It's my pleasure. Keep watching #chakdeSystemDesign

  • @deepamohan5177
    @deepamohan5177 Рік тому +2

    It is always better to use async and defer for loading the script file which will significantly reduce the DOM Load time than even adding the script tag below the body. Thanks Chirag for the awesome content.

  • @forceboxed
    @forceboxed 2 роки тому +1

    Good collection of optimizations. I learned many new things.

  • @kevinmaria2456
    @kevinmaria2456 2 роки тому +1

    This video is super helpful. Great, thanks dude 🙏🙏👏👏. Do more videos to the community 👍

    • @engineerchirag
      @engineerchirag  2 роки тому

      More to come! Thanks Kevin. Keep watching #chakdeSystemDesign and do share it in your network 🙂

  • @mdnawazishalam5222
    @mdnawazishalam5222 2 роки тому +2

    Can thank you enough for the great video

  • @aurangzebhusain8366
    @aurangzebhusain8366 Рік тому +3

    One day this series is going to cross million views ❤. Its very obvious from the content quality. This is pure gold❤‍🔥. Looking forward to complete the whole playlist.

    • @engineerchirag
      @engineerchirag  Рік тому

      Thank you so much 😀 Need your support to make it happen 🙏

  • @nikhil6842
    @nikhil6842 2 роки тому

    your channel is pure gem. Thanks for creating such great and easy to understand content

    • @engineerchirag
      @engineerchirag  2 роки тому

      Glad you think so! Keep watching and sharing #chakdeSystemDesign

  • @gauthamvijayan
    @gauthamvijayan Рік тому

    Top notch content. Absolute Gem😇

  • @madhurya141292
    @madhurya141292 Рік тому

    Phenomenal stuff!

  • @aryanrahman3212
    @aryanrahman3212 Рік тому

    Your knowledge is exceptional sir thank you for sharing

  • @VivekBaruah-u4u
    @VivekBaruah-u4u 2 місяці тому +1

    Suggest to also put relevant links in description to deep dive, as these are not detailed videos

  • @pranjalagnihotri6072
    @pranjalagnihotri6072 2 роки тому

    Netflix is not pure "SSR" and it also uses "CSR" in a way, as when the static page (pre-rendered on the server) is painted on the browser, the user can go and play the content which is dynamic and JS takes care to fetch and load it in the media frame

  • @bhaveshgupta7736
    @bhaveshgupta7736 2 роки тому

    again thanks for this, even I have applied concept of lazy loading, resource hinting in my project...

  • @sameeravhad6266
    @sameeravhad6266 4 місяці тому

    Thank you so much . Learning new things.

  • @omprakashsharma9767
    @omprakashsharma9767 2 місяці тому

    very good informative thanks

  • @yadwindersingh9722
    @yadwindersingh9722 Рік тому

    Very informative series, Please make more such type of contents 🥳

  • @kapilthukral618
    @kapilthukral618 2 роки тому

    Great Content! respect the efforts you have put in.

  • @amitankur11
    @amitankur11 2 роки тому

    Awesome work Chirag, you are really a GEM :)
    😃

  • @prakashnaikwadi
    @prakashnaikwadi Рік тому

    Thank you for the videos, please make more 😊

  • @yashpreetbathla4653
    @yashpreetbathla4653 2 роки тому

    Awesome content bhaiya , really appreciate your efforts ! Keep making such knowledgable content.

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Yeah, keep watching #chakdeSystemDesign. Pls help me to spread #chakdeSystemDesign series to more folks 🙂🙏

    • @yashpreetbathla4653
      @yashpreetbathla4653 2 роки тому +1

      @@engineerchirag for sureeee

  • @MrAbhay0007
    @MrAbhay0007 2 роки тому +2

    Great Video! One correction - "preload" attribute only downloads the assets and doesn't execute it immediately.

    • @engineerchirag
      @engineerchirag  2 роки тому +2

      Thanks for highlighting it, Abhay. It loads and just caches it. I have rectified the video.

  • @Bakwasteacher
    @Bakwasteacher 2 роки тому +1

    I didn’t got single concept .. but seeing my “bachpan ka yrr” on screen feels good … god bless u .. keep growing 😎

  • @scalpertrader61
    @scalpertrader61 2 роки тому +1

    Quality Content

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Thanks Scalper. Keep watching #chakdeSystemDesign and do share it in your network 🙂

  • @makkarpuneet
    @makkarpuneet 2 роки тому

    thanks Chirag. lot of learnings from the video.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Great to know that @puneet. Keep watching and spreading love for #chakdeSystemDesign 🙂

  • @pratyushkaran
    @pratyushkaran 6 місяців тому

    If you put the script tag at the bottom of the body tag, it will first parse the HTML completely and then fetch the JavaScript file and execute it and then the DOMContentLoaded event will fire.
    In the normal vs async vs differ, you forgot to mention one point that in async, scripts are not guaranteed to execute in order whereas in defer they are guaranteed to execute in order

  • @venkateshpachigulla
    @venkateshpachigulla 2 роки тому +1

    @chirag please add timestamps so that it will helpful to refer again as video length is more.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Thanks for suggestion. Added the timestamps. Keep watching #chakdeSystemDesign

  • @SachinDolta
    @SachinDolta 2 роки тому

    this is GOLDEN stuff

  • @harshsinha7642
    @harshsinha7642 2 роки тому +1

    Very well explained!! . thank you so much for the insight details about performance optimization.
    I am currently working on react application, could you please make video on how we make optimize react application?

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Thanks Harsh, will plan framework specific optimization soon

    • @harshsinha7642
      @harshsinha7642 2 роки тому +1

      @@engineerchirag Thank you !!

  • @lksjfadlk
    @lksjfadlk 2 роки тому

    This is great!!

  • @coolme7437
    @coolme7437 Рік тому

    What's the difference b/w if we add 'defer' in the and if we write the at the bottom?

    • @engineerchirag
      @engineerchirag  11 місяців тому

      Both using the defer attribute and placing the tag at the bottom of the HTML document can achieve deferred script execution, allowing for faster page rendering.

    • @Ashish-_-
      @Ashish-_- 9 місяців тому

      I believe adding defer will help in the script downloading in parallel due to the prescanner

  • @swapnilrenge335
    @swapnilrenge335 2 роки тому

    I always wanted to try out these things but never understood these concepts due to the technical jargon used in the docs and articles, Thanks a lot for coming up with this brilliant series and taking efforts to explain the concepts in so simple ways. Also I don't know if someone has observed this but I think caching using CDN is skipped. Correct me If I am wrong.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Glad I could help! I will be covering CDN as part of build time optimization.

  • @viditgoel2909
    @viditgoel2909 Рік тому

    Thanks a lot sir for this awesome series, but I wonder if it is completed?
    Also as you've mentioned in earlier comments that you will be making optimisation techniques specific to react, any update on those?

    • @engineerchirag
      @engineerchirag  11 місяців тому +1

      Thanks for the feedback 🙂. Wait for a big announcement 😀

    • @viditgoel2909
      @viditgoel2909 11 місяців тому

      @@engineerchirag @akshaymarch7 (Akshay saini)revealed the big surprise and that's one of the best things you both could've done for us, super excited to join the course.
      Thanks a lot both to both of you in advance. ❤️❤️

  • @RohitYadav-bo9mm
    @RohitYadav-bo9mm 5 місяців тому

    Hey Chirag, this helps a lot but It would have been a lot better if you could have given examples and implemented that in React projects. This way, we would also know its implementation in our projects.

  • @js__talks
    @js__talks 2 роки тому

    I really like your videos on system design. why the way which tool you are using here for writing and drawing.

  • @4444-c4s
    @4444-c4s 8 місяців тому

    How this is relevant in Modern JS Frameworks like React, Angular?

  • @vasudevrao1434
    @vasudevrao1434 2 роки тому

    Is it possible to get that ppt slides ? Would be really helpful to brush up them before interview ?

    • @engineerchirag
      @engineerchirag  2 роки тому

      Vasudev, I would suggest to create your known notes in your wording. This will help to remember it. :)

  • @pramithasdhakal5367
    @pramithasdhakal5367 6 місяців тому

    The preload does not execute the script actually. According to the documentation, even though the name contains the term load, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority.
    Prefetch is used for improving the load time of subsequent pages while preload works best on critical resources for the current page

  • @4444-c4s
    @4444-c4s 9 місяців тому

    just reading what's in the flow charts...will be better if each topic has a separate video with real demonstration with code. BTW good video compared to other creators

    • @engineerchirag
      @engineerchirag  7 місяців тому +1

      Thanks. Feedback noted!

    • @4444-c4s
      @4444-c4s 7 місяців тому

      @@engineerchirag You keep constantly improving ❤️❤️❤️
      I like this about you 😍

  • @kanishkbadola
    @kanishkbadola 5 місяців тому

    Really liked the topics you covered but the explanation could have been better. Most of the time I was confused with the explanation and have to watch another video to understand the concept, but thanks for listing those topics here.

  • @abhishekdhillon7110
    @abhishekdhillon7110 Рік тому +7

    I feel that you unnecessarily use analogies sometimes and things would be a lot clearer if you just explain things to the point. In the layout shifts and repaints, you spoke so much about building construction that you missed out on few of the important concepts that would have easily been mentioned if you had spoken to the point.

    • @siddharthjoshi3328
      @siddharthjoshi3328 6 місяців тому

      Agreed to your point but Those unnecessary analogies are important to know for the interviews otherwise they don't take you for a knowledgeable candidate and can you please mention the points that he missed according to you. It'll be helpful.

  • @pratyushkumar7999
    @pratyushkumar7999 Рік тому

    can you please make videos of implementing these technique in details with examples😅

    • @engineerchirag
      @engineerchirag  Рік тому

      It's in pipeline, keep watching #chakdeSystemDesign 🚀

  • @susmitamitra3955
    @susmitamitra3955 2 роки тому

    ye ho chuka hai kya real life me party me jate huye bike saaf karna?!

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      I think, it's story of most of the boys 😜

  • @ganeshshetty8441
    @ganeshshetty8441 2 роки тому

    Hi Guys , Lets make this channel very famous

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Thanks a ton Ganesh. Need more support for the channel. Thanks in advance 🙏🙂💖

  • @codedusting
    @codedusting 2 роки тому

    NextJS optimization? Because these techniques cannot always be used in such indepth control!

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      I haven't covered any framework level optimization. But will be covering them soon. Knowing fundamentals is important. Some time these are supported out of box by framework, else we can implement them.

  • @RajYadav-yh7vv
    @RajYadav-yh7vv Рік тому +1

    not useful video, no specific practical information #time wasting

  • @shagunpreetsingh7105
    @shagunpreetsingh7105 7 місяців тому

    Hey God, Bless this channel with lakhs of subscribers

    • @engineerchirag
      @engineerchirag  7 місяців тому

      Thanks a ton ❤️❤️❤️❤️❤️❤️❤️❤️