Transcript for:
Chakde System Design Series - Optimization Techniques

Welcome back to chakde system design series. I am so excited about recording this episode as Optimization is very close to all the web developers and the demand of web app. So not limited to that Optimization is one of the most popular question in the interviews and that will also help you to become a senior developer So I will be covering in-depth optimization techniques in multiple episodes So before we start don't forget to subscribe and press the bell icon Among many performance optimization technique. We are going to talk about the network optimization What are the other type of optimization techniques? Let's let's talk about that those layer So we have assets right you have JavaScript CSS and your images and a lot more how to optimize that so that comes in the asset Optimization network optimization your network layer how you can utilize that build optimization and definitely how you are going to monitor all of These so we are going to cover in multiple episode in this episode We are going to focus on network optimization. So what we are going to cover in this particular episode Let's let's quickly talk about that the first one which we are going to talk about in the network optimization Okay, let me reset Okay in network optimization the things we are going to talk is first one is the lazy loading Okay, so first one first We will be covering lazy loading What else? We will be also covering loading JS in a async fashion loading JavaScript JavaScript In Async fashion What else we will be talking about? Content visibility which is very important and cool technique will be covering. What else we will be talking about Serving critical CSS and the techniques to do that we will be covering the resource hints. What is that? So hold on that mean we are going to cover that we are going to cover the caching layers as well So caching using service worker if you haven't heard about these technique, don't worry We are going to cover in depth. What else we will be covering caching using cdn And what are the headers basically that is going to help you to make it more beneficial? We are going to cover the client side rendering. We are going to cover server side rendering We are going to cover the compression techniques So we are going to cover this as well. Okay now What else we are going to cover things which will help you to basically avoid the you can say layout shift and Repaint which is going to give you a browser or your application a better performance not limited to that We have so many extra thing that we are going to cover. So keep watching till the end and so many exciting things are waiting for you First thing first, let's talk about how can we load our JavaScript as synchronously so that we can actually leverage the network layer Right, so we have a lot of limitation will be talking about those limitation in terms of downloading the asset How to download when to download but taking this example basic STML where we have in the head We have a script and in body we have simple text to be rendered So how generally browser basically renders this and how basically downloads the asset we will be talking in detail But let's see some glimpses of that. Okay, so in this particular case when it encountered the script tag What it is going to do it was parsing parsing parsing parsing its CEO. There is a script tag Okay, let me do something. What is that something it encounter a script tag over here? It started downloading it So once it is downloaded until it is downloaded your parsing is stopped So browser basically won't go into the parsing of the text, which is be you can beneath that So once that particular downloading is done, what is going to do next? Is it going to pass again? No, it is going to execute the script first and then once the script is executed It is going to pass again. So consider you have multiple script over here In that particular case your browser is going to download the script execute download execute download execute and You won't be able to see anything in the your web page or your browser Basically until less your scripts are downloaded and executed dude This is definitely going to hamper because you have a lot of script sometimes in your application You have written a lot of maybe react application or you have written so many script, right? So you can't wait all this script to be downloaded sometimes It's like more than 300 KB or 400 KB, right? If you don't optimize it it can be in MBs You can't wait for couple of minute or couple of second basically in order to showcase something to the user This is not going to work. Okay before we actually dive into and see what are the benefits and what are the different ways Let's try to understand this thing in a very simple way So consider you are dressed up you are you wanted to go and chill out with your friend You took a bike and you are basically about to leave your room You are you are about to leave your house Suddenly your dad encounter and you found that you are going to leave the house and dad just says dude first clean your bike Get the petrol filled and then only you can go out. Oh shit. My plan is screwed up I was just about to leave with my friend in order to do a party But as I was going out my dad give a responsibility Which is to clean the bike get the petrol filled and then basically go out for the party. I'm late Right. This is something which probably I can't be here. What else can we do? Let's talk about the other alternative Most of the folks may be aware, but let's talk in a different fashion altogether. This is this time now What if I say with this a script tag if I add a small thing which is say suppose a sink I just go and say I wanted to make this a sink and where basically a sink I can make it as an attribute and I can attach it anywhere inside a script tag, right? I just add an a sink what it is going to do it is let's try to understand With this your script or you can see your HTML is basically Getting passed and it when it encounter a script your script is going to be downloaded in parallel But once your script is downloaded the Execution of that a script will halt the parsing your parsing can't go ahead until is that JavaScript is executed Once the execution is done, then only the parsing is going to happen Okay, dude. This is again something very strange. So now in this particular case try to understand what is happening so Consider you are again ready and you wanted to basically go for a party What your dad says you can go you can get the cleaning done on your way Maybe but you have to get the petrol filled before you leave for a party Dude, this is again going to halt me for certain duration But again it is going to halt me in order to reach to the party with my friends as soon as possible What is the other better way now? Say suppose we can optimize the same thing by saying that I don't have to actually wait for the cleaning Or I don't have to wait for getting the fuel filled before actually I leave I can do this thing on the way or something I can delegate once I am coming back from the party How we can do that we can use differ So using this differ try to understand what is happening what you did basically your HTML parsing will Complete and there is no one who's going to hold your HTML part Parsing what it meant by you are going to see your content which is listed over here Which is hello Chirag as soon as possible your parsing is complete But whenever it encountered your script it will download that script in parallel without halting your parsing So that you can see your content as soon as possible But once the parsing is complete it is going to execute your script It is as similar as you you can get your vehicle clean on the way But when you are returning back to the home make sure you got your petrol filled Yeah, so this is how basically your async behavior in JavaScript basically works You can see how you are leveraging your network layer how you are leveraging your network layer with just adding few attributes in your script and You are making your web application fast so that your you your users your viewer can see your content as soon as possible Okay, this was one interesting thing They are a lot more thing that you can try it out You can try it putting this particular script at the bottom of the body and let me know What do you see do you see difference by using a single and putting your script at the bottom? So I will be waiting for your comment lazy loading So this is another yet very powerful technique as the name suggests. I am lazy lazy in a sense I am not going to hold the other work in order to complete this I will do this job in parallel of doing the other stuff, right? This is how basically the lazy loading does so consider this example We have a webpage right we might have used like everyone uses the Facebook or the Instagram, right? There are so many images in the Instagram so many stuff that is behind the fold What is for the thing which is visible in your viewport and the things which are not visible in the viewport now? We wanted to load the stuff which is not visible in the viewport lazy using the lazy load, right? How we can do that we can use a small techniques which will auto the box give this functionality in the feature What what to do? Let's see we can use a small snippet which is going to help you with which is There is new attribute which is called loading and you can pass multiple values to that There are two very powerful values that you can pass one is lazy and second is the eager What is this lazy and what this basically eager says? Let's let's talk about that So when you add anything lazy to any of your image or iframe basically what it is going to do It is not going to halt the parsing and the rendering of your webpage It is basically going to load this particular image in a sync fashion now lazy doing a lazy load, right? Now what are these two values one is the lazy and second is the eager so consider example You have added this value in in something like on your top of your screen Which is logo right or something some images or some icons which are visible basically using the IMD tag on your header Or something which is basically available on your viewport on the first screen itself, right? In that particular case you want to load your hero images or hero asset In a eager basis as the name says eager. I am very eager. I'm hungry Just give me as soon as possible, but don't halt my rendering of my webpage in that particular case You can definitely use something called loading eagerly Now anything which is behind the fold just use which is loading lazy now What it is going to do it is going to basically pass your webpage render your webpage load your images on the first fold with the eager fashion and Anything which is behind the viewport basically you can load it using the lazy tag This is going to give you a lot of benefit now even in your first fold say suppose You have a hero image in terms of banner some logo certain things which you wanted to load even at a faster rate You don't want to load certain carousel images which is at the bottom of your viewport You want to basically showcase the banner or your logo as soon as possible Even then you can decide some priorities among the P among the pieces which are doing Loading using the eager fashion. So how you can do that? You can use something called priority This is very very important very very interesting concept. So what you can do? You can add an extra parameter extra attribute which says that load with me with low priority So anything which is and the which is of the low priority in your viewport You can put this attribute and your browser will take care of that Definitely what it meant by you wanted to load your logo eta in an eager fashion But you wanted to load certain images in your eager fashion But again, you wanted to set the priority of it in a lower fashion, right? You wanted to set as a low. This is very interesting thing. It is very small feature is small thing that you have to add in your Document or you in your code basically and this is going to give you a lot of benefit Just go and try it out. Although you have to apply certain strategies depending on when you are coming to the viewport How to decide basically what to mark as in lazy and what to mark as in eager? We will be talking about those thing in the coming episode as well But this is what I wanted to highlight in terms of the lazy attribute which is going to give you a lot of benefit Just go and try it out. We will be talking about another lazy loading technique using intersection observer This is a web API which is provided by browser. So you can easily use it using window dot You can say intersection observer. So let's try to understand this concept What happens although we I have covered this in more detail in one of the mock interview which is related to auto complete You can find the link in the comment. You will get the detail, but let me brief you how this is basically happens Okay, in this particular case, this is our viewport. So consider we have so many images like flip cart Cart page where you have or you can say product page or you have infinite scroll or something say suppose You have Google photos where you have so many photos and so many content to be loaded or so many visit that need to be loaded So in some in such cases basically what we we can do we can actually add some element at the end of certain You can say container or the div which act as a sentinel element. We'll talk about that sentinel. What is that sentinel? So basically if we are when we are scrolling and we encounter that particular element We can basically take a decision. Dude. I want to load some other items as well So for this we don't have to believe you can say you have to wait on the scroll or you have to trust on the scroll event Because those scroll event are very glitchy in terms of the performance So you can use this intersection observer where you define this element as in sentinel element and whenever your browser basically intersect that particular Scroll intersect with that particular sentinel you will get a callback and based on that callback you can take some certain decision Didn't understand. Don't worry. We'll see the code. We'll try to understand from that as well But from this particular image you try to understand you have image one two and you have three and sort of thing You don't want to load everything all the images, right? You just wanted to load first two images or three images and once you basically have these three images in your viewport Or you just have seen these three images you wanted to load more images, right? How to do that? So after these two images you added a sentinel element in your DOM Once after scrolling your sentinel elements come into the viewport you will get a callback Using that callback you take it you can take a decision to make another set of a pay call Get the images and add those images in your image list. That's it Let's see from the code how how you can achieve this Okay What you can do This is this is an intersection observer a pay that we were talking about you can create an instance of that It gives basically two capability one is the callback which will be triggered wherever you encountered that particular sentinel element And second is basically set of options will be talking about both of them But what we need to do once we basically create an instance of this intersection observer You have to observe our element which is as we can say a target element or a sentinel element in this particular case The sentinel element is this which we have created and added in a DOM if you want to try out You want to see how basically it look like go and check out the autocomplete mock interview You will see a detailed description and detail implementation over there, but over here what we are basically doing We are passing certain options. What are those options? These are very important and interesting thing Basically one thing is basically you have a root say suppose you actually want to scroll in certain Person or certain container inside your viewport You don't want to actually do a scroll and do these strategies on the entire viewport or a document You want this is crawl you want this infinite loading you can say lazy loading basically inside certain section Maybe you have a search box or search pop-up with so some suggestions You want this capability over there in that particular case you can define your route to that particular suggestion list and There are certain to two parameter which is route margin and the threshold threshold is again very important and interesting part Say suppose This particular sentinel is wide enough or have a good amount of height in that particular case You wanted to make sure even you have actually crossed 50% of this div or the container you wanted to get a callback Based on that callback you wanted to make a pay call why this is important. This is interesting You can consider you have certain images once you are actually crossed 20% or 30% of that image You wanted to make sure you want other set of images, right in that particular case you you don't want to give a loading experience to the user That's how this is very important and interesting and this is a callback Which you get and you can do a lot more thing with the entries that you get as in parameter over here If you haven't tried just go and check out the mock interview related to the autocomplete and go and try out this particular Intersection observer this is going to a standout thing and you will come back to thanks me Content visibility this is another very powerful way to lazy load and that too with a very limited code changes that you have to do you have to just add one property in your CSS and Out of box you are going to get a lot of improvement. So let's talk about that So in this particular case consider you have a web page your web page is getting rendered It has multiple folds you see you will be having a loading you will be having some Scripting time there is a rendering painting and system time right in this particular case very important thing which you have to notice the rendering time which is taken from an example, which is 232 ms by just adding a Content visibility CSS property which is auto it actually reduced to 30 ms And what it does basically try let's try to understand by setting content visibility Which has multiple things which is like hidden you can set visible or you can set auto auto is something which is very great Outdoor box what it says that anything which is not Visible in my viewport. I will do a lazy rendering of that particular thing I am not going to render it until less basically user is actually scrolling or Reaching to a particular point so it will just set the priority of the things which are on the first fold or in the visible area It will try to load and render those things and anything which is behind the fold It is going to do that in a sink fashion or you can see the lazy load fashion. This is damn cool So it gives lot of other functionalities and capabilities which says that even there are certain things There are other attribute which you can try it out which is like hidden sort of thing even it has like got rendered but your Screen reader is not going to attach those things or the screen reader won't be able to basically read those things until unless you actually Scroll to those things so there are so many things which is done behind the scene in order to improve that too with just simple thing What it says that? Just says that content visibility is auto and there is another property which you can set in order to just let browser know What is the size of the content which is going to be loaded in order to make this decision and optimization better for you? If you can predict this Well and good even if you can't it is going to do a lot of things for you in terms of setting the content visibility. So if you haven't tried just go and try it out it most it is supported in most of the browser. But yes always check for these special properties the backward compatibility or the browser compatibility in order to try it out. Let's go through another technique of lazy loading which is serving critical CSS as the name suggests we have to make sure only the CSS which is critical we should load and rest we can load afterwards how can we do that and how it is going to basically benefit in the network layer. We have to think your CSS can be multiple KB sometimes it can be in MBs in some of the time if you are not optimized and it takes some time in order to load from the network right. And if you don't optimize if you don't think about that it can basically halt your rendering on your browser right. In that particular case what you can do we have above the fold below the fold if you can segregate your above the fold critical CSS in a different file and rest other CSS which is not critical in the other file and you there is there is a technique which says that make the first thing which is blocking and make sure once it is downloaded pass and then only your web page basically renders the rest is something it can be downloaded async and in parallel basically using the lazy loading technique how you can achieve let's quickly see that. Okay so there are two CSS basically we have broken down one is the critical.css and other is the full CSS. In that particular case what we are doing the first one is something which will block your rendering until it is downloaded it is your web page is not going to render but in the second one we are using a trick which says that this CSS is having a media type of print so do this is not something which is very critical it will only be used for the printing purpose but on the same time we are saying just load this once your web page is loaded your JavaScript is ready to execute just on load in that particular case load this on your document load make this media file as an all which is eligible or you can say available for everyone or for all the use cases in the CSS what it is going to do it is going to download and make it available for your next rendering and next set of things which are available below the fold so this is very cool technique and this makes your CSS non-blocking in terms of your rendering just go and try it out and you will definitely see a major performance boost just make sure you should not put anything which is very critical for the first fold inside your full .css because in that particular case you will see some of your pieces of your application or your web page are breaking so anything which is related to the sidebar you want it to be loaded on the critical basis don't put in the full .css make it available in the critical .css give or try resource hinting this is one of my favorite topic like I really love talking about it ok so is there any way as the name suggests is there any way can we give a hint to the browser that these are the resources that are going to be used or you can take some decision based on these resources given some hint I will provide you some hint from the code perspective so that browser can be more optimized or it can make some network call or process certain things on a major priority basis right so what are those things what are the different hints basically we can give to the browser for the different different resources or the asset that we have first come fast so we can give preload pre-fetch pre-connect DNS pre-fetch pre-render and module pre-load what are these let's try to understand one by one preload ok so we have a web page in this particular web page we have certain JavaScript or there are certain CSS right those JavaScript and CSS are going to be used just after you basically render your web page right in your rendering it is required that is critical so in that particular case can we give some hint to the browser go and just download so that when it is actually rendering we don't have to wait while passing it knows already there is a request and it can leverage that how can we do that there is a small thing that you can basically do which is which is you can actually add something called relation REL is equal to preload in any of your JavaScript and CSS where your browser will understand when I am basically loading your web page these are certain things which is very critical and these are going to be used just in couple of you can say millisecond or the second right in that particular case it will load and basically it will execute it now in this particular example you see there are certain chunks that will be basically used after you can say few visits are loaded and these are basically used in couple of the visit and as these are lazy loaded but we don't want to show the loader experience to the user what we can do we can add a relation as is equal to preload basically we wanted to preload these as it or the chunk so that we don't have to show the loader what it does it actually shift the loading of these chunks at the start of your rendering of your web page itself so that it knows these are already downloaded thing whenever it is required it can be used but every time we may want it to load something in the background but we may not want it to execute that because that execution can be unnecessary if that is not available in your first fold altogether right in such cases what you can do okay there is another hint that you can give to the browser which is I want to load but I don't want to basically execute it in that particular case we can use which is something called pre-fetch which works like quite similar to what we have seen in a preload situation but in this particular case it is not going to load not going to execute let's see we are loading example.com the browser finds pre-fetch link what it will do browser fetch required content to display the pre-fetch pages and basically it downloads and put in the cache so whenever you are at the time of your execution at the time of your passing of your content rendering it if there is a asset which is needed it will basically look from that particular cache it will execute and basically it's available that script that style is basically available to you so where to use the pre-fetch any place where you don't want to get it executed because that is not going to be used right away it is going to be used afterwards right in those cases try to use pre-fetch but again there may be certain use cases where you don't want to even download those assets because you may not aware of the complete URL which is going to be used ahead in your code or your web page right in certain case you can use some other you can say hints which is going to be helpful what are those let's see the next thing is your pre-connect what it says this is very very interesting and important when you basically make any request to the server it basically does you can say DNS TCP TLS basically handshake and after that basically try to load a lot more thing you make a request for the another asset in that particular case also it will do a handshake and then it actually try to load the thing but as you know I have to load say suppose Google font I have to load certain things which are there in my web page in that particular case I can utilize I can basically prevent that handshake to happen at the moment when I wanted it to be downloaded I can do this handshake pre-hand so that it actually saved my time in doing a hi hello so when you enter something you enter a confidence you just do a hi so that when you have to actually ask a question in that particular case you have already done an introduction is quite similar to that in that particular case what you have to do is nothing special you use a similar kind of attribute which is real is equal to pre-connect so in that particular case it will basically do a handshake with this particular domain which or a subdomain that you have provided so that the next time and it is required it is just going to directly go and download it pre-connect may not be available in all the browser because it recently has been released in the last few months and it basically started being available so you can try it out another thing which works in the similar fashion which is you can use the DNS prefetch it is the same thing what it basically does it actually make a handshake and it is basically supported on the old browser so nothing special it's more about the fallback situation which you can see now this is again very very interesting hint that you can give which is say suppose you wanted to basically render certain things or certain pages which you are going to load next right or you users may be like going to request for this in the next cycle altogether or user are going to basically click on a certain page and you know that these are the pages which are highly visited in that particular case you don't want user to click navigate then start requesting then downloading this is a very powerful what you can say you can basically define any relation which is a pre-render or what it will do it will create a hidden tab content with that hidden type content it will load your page including your JS execution it will execute it will throw the hidden tab away once basically after a certain time it will throw away if the user navigate you can leverage it what it meant by you are on your way to the browser you can see the user is on the main page and you know mostly when a user comes the user basically click on the login or they click on the sign up and there are the two possibilities most of the user are going to be doing a login and after login you have to show the dashboard the main dashboard that is common for most of us right what you can do once a user is doing a login you can actually pre-render the dashboard out of the box and it will basically load in the hidden tab or the tab content and it will also execute so that once a user click on the login they will they will do it redirect to a new page the user navigate to a new page where your hidden tab the execution thing which happened behind the scene actually shows up so in no time you will see your next page is available then and there itself but again it comes with a cost you have to be very sure these are the next user or next pages basically which a user is going to navigate else you will end up unnecessary loading lot of resources which is not required and people who are in the low bandwidth or using the mobile data they can actually end up wasting their data all together right or it can actually end up slowing down certain things so use it with very precaution but this is way powerful trust me this is way powerful now there is another very interesting thing which is resource hinding for the module preload as as now in the browser you can actually load the you can say modules all together you can import those module you can leverage those module what we can do we can provide this relation this hint basically says that this is a module preload and in this particular case what it is going to do it is going to basically load your ES module and it is going to download cache and it is going to compile your JS module code as soon as possible this this is way good example which you can leverage along with that you can leverage this one more for one more thing which is if any resource any module which is required within from your service worker as well basically you can leverage this so you can give a hint which says that I this is a sign of the module which is something which is going to be leveraged in service worker just give a hint as a service worker and you can load this module as well what it will do again just note it out what it is going to do it is going to download it is going to cache it and it is going to compile it so that it is available for you consumption then in their itself so this is again very powerful if you are using the ES modules just go and try it out these are couple of the resource hint if you haven't tried in past I will request you just go and try it out and you will see that you can do it in the next video. So this is the performance impact in your production application and if you are in an interview if you are talking about this and you can detail it out trust me it is going to impact a lot of things and it is going to make a very positive impact. Service worker, service worker are way powerful in order to basically provide you a caching strategy or making offline applications right so in that particular case there are so many cool things which are provided by service worker but before we jump into what are the things which are provided. Let's let's try to understand what are the service worker are service workers are something like proxy server which sits between your browser your web page and the internet so in that particular case any request which goes to the internet via the network those are basically intercepted by service worker. Now it has lot of interesting thing using service worker you can interact with your cache you can interact with your index DB and lot more there are certain limitations in terms of what you can do in terms of the DOM manipulation and sort of thing which can't be done via service worker but again apart from that it actually holds a very good interceptor for any request that goes out basically on the internet world. Now try to understand how the server worker are related our day to day life I personally feel service worker is quite similar to our mothers so how it's very interesting like how a service worker can be related to our mother so most of the time what happens we can offload our work to mom just remind her mom I have to basically wake up at this particular time can you take care of the things which I have to do or can you remind me at that particular time. Now your mom will work in the background she will make everything in order to make you aware or make you awake of certain things so she is there to basically do a lot of background job for you now there are lot of things she can actually do she can actually provide you functionality like push notification which is like someone was seeking for you right and your friend was seeking for you anything that you wanted to be aware of happening nearby your mother can give you push notification actually she can let you aware of that. So those are the cool things and again in terms of the caching just let your mother know you like certain foods she will make sure she will have a lot of plethora of those things inside the house so that next time you are looking for a similar kind of food or similar kind of taste you don't have to look out for that she will make you make it cook it and she will basically add a cache and store it in the house itself right so that next time when you are looking for it she will quickly provide you the flavor the flavor of the food. The food the taste and and the best experience right so it's that's why I relate the service worker quite with the mom which helps with a lot of interesting thing now try to understand in a bigger in a different picture all together if that is helpful so basically we can also try to visualize this in this form you have a page. You have a caching layer you have a network and on on the mid of that your service worker is sitting what it meant by any request where your page wanted to make first it will go to the service worker now service worker you can write your strategies either it should look from the cash or basically it should go to the network layer in order to fetch it. Now you can also make it more optimized and more advanced in a sense you can say you can write a logic if you don't have internet connectivity you try playing with the cash you try to play and keep your data in the index dp maybe or any storage on the browser and once the internet is back basically you do all those operation on the network so that even without the internet you can provide a lot of good experience to your end customers right so this is how all the offline things that you might have seen like Google Doc or anything which is working on the browser in offline mode. To provide you a better experience those are basically using the service worker and definitely that also helps you to build the pw progressive web app so now try to understand what are the different phases of the life cycle of the service worker where you can actually fit your lot of use cases so first thing is installing installing right so there is a file basically there is a way basically we will be talking about the code as well you can basically write your code you can initiate your service worker and it will install in your browser basically. And the service worker instance which is created it can be shared between the multiple occurrences in your tab also say suppose we have two tabs open for the same domain or the sub domain and you wanted to have a communication between both of them you can basically leverage that as well so there are strategies and ways we will be talking about that as well. So once first is the installation so in this particular case it is going to install the service worker the second one is installed in that particular case what you can do it will basically wait for other clients who were using the previous set of service worker sort of in order to get it close so that you can have a fresh installment of the new service worker instance now it is activating it over here you can take certain decision in order to clean up some cash the previous cash or you wanted to do some operation on the cash once it is activated now it is. Ready to listen all the events that can happen over the which you can basically transmit via the service worker all these things you can do and definitely this is redundant if your service worker is replaced by another service worker this is basically being called you can take certain decision in order to do something or something you wanted to make sure now where the service worker basically resides in your browser where you can see and how you can basically debug certain things then we will jump into the code part of that as well okay over here let's let's have a look up. So in your browser in your depth to basically we have application you can go into the application you can try it out if you haven't seen the service worker going basically tab into the service worker tab you will see the service worker over here and if this worker is activated you can see the service worker ID and in which state it is basically and when basically it was set up right you will see all the events you can actually do a testing you can try pushing some operation over here you can try to push something over here or you can. Try to sync from some something over here you can update and register you can play around you just give a try play around that but again playing around that first you need to basically understand how these different stages are and how you can leverage so. We'll go through quickly some glimpses and I will also telling about you don't have to actually learn all of these they are small libraries and small tricks basically will help you to set up your service worker and it is going to boost your experience so let's talk about that. Basically first step is in order to register you have to do a small thing you have to basically check if the service worker is available inside your web API in a later if it is available basically you can actually set up if it is not available you can do anything if it is available what you have to do is just a simple thing using service worker you have to register this is a file basically this is where your code will go for the service worker right now what are the other things they are simple steps that you can basically write in your service worker file what are those you can write the first installation step. Which is this you can write your activation and you can define what will happen in case of the fetch if something is basically looked after in via the network call how basically you wanted to respond from your service worker right from the installation you can see what what is basically we are doing we are basically trying to open up. Cash with certain name we wanted to add some files to that particular cash and we wanted to make this available when a person is basically looking for the fetch calls right in all those cases you can define you wanted to basically fetch these files from the cash only or cash first approach they are different approach that we can talk about right. Second is if it is activated or not so that you can start listening a lot of the event now the third important is the third important event is your fetch right in this particular case what we are doing you can basically look for the request you can basically fetch for the which URL this request is being made. you can get to know the you can check the origin and everything inside your logic now based on that you can decide you wanted to do a cash first order network first approach. Based on that there are a lot of strategies which you can define if it is a cache first you can define you wanted to look up from the cache or you wanted to make a network call first you wanted to basically look up for the cache if it is not available then probably you wanted to go and make a network call right in case of network first, you can see in this particular case what is being made we are fetching from the network and we are basically putting that particular data into the cache show that if the next time someone is looking for the cache first approach in that particular case our cache is already having those data right. So you can do a lot more interesting thing and we can also see if there is some error basically in order to fetch the network call you can actually land back into the cache strategy also right. So many things can be done using the service worker and these events that we have talked about I have just given you a glimpses so that you can basically go and try it out because this is very very cool if you haven't actually looked into this so trust me you are a step behind and you have to give a look into this. Now say suppose you have to build a lot of complex use cases in that particular case you don't want to write all of these methods and all of your implementation can be there some way to write the you can say standard code or good quality code with a very less things that you have to peep into right. Yes there is something called word box which gives you out of box lot of capability and it gives you things to enrich lot of things so taking example prefetching is something that you can do using word box you can actually define some caches on the runtime strategy you can actually define the strategies you can build your own strategies. These strategies like I wanted to make a cache only or cache first network first network only right you can define cache and network right first try to look from the cache if it is not available make a network call right you can define a routing so the request which is coming from this particular path you wanted to basically make a request to a different server or different you can say that all together the server all together right. You can basically define very easily the background sync processes right you can actually help lot of like good debugging capabilities you will get with the word box so if you haven't tried go and try it out. We are going to talk about very interesting concept which is client-side rendering server-side rendering combination of client-side rendering and server-side rendering static rendering and pre-rendering hold with me this is going to make basically change the way you think about how to create a web app right. Now before we jump into what is this client-side server-side and basically understanding the pre-rendering and the static rendering let's try to understand very basic and the fundamental things which is going to help you in order to understand this important thing. So first thing first what is the server-side so consider example you are requesting for I wanted a login page or I want a dashboard. This is a request which goes from a browser to the server now your server basically does some certain things what it does it basically process the request for this particular route which is slash login and slash dashboard it generates the STML it's generate the relevant JavaScript and everything and it ships right. So your server got a responsibility to generate and ship for each and every route where the browser user is requesting for this is basically a server-side rendering every route every request goes to server server decide what need to be rendered and it gives you the final STML that need to be rendered. Now coming to the second part which is our client-side rendering in this particular case what your server gives your server gives the JS respective you can say CSS and all sort of thing now your browser does certain things what it does browser start understanding the routing. So say suppose is the similar example someone was on the dashboard the home page slash now he wanted to go into the login now in order to get the data or the STML for slash login your browser is not going to make a request to the server. Your browser is capable enough to understand there is something called slash login and I should basically get the data from the local chunks all together although while rendering it it require any extra JavaScript or chunk it can go to the server that is different thing but for your routing purpose your landing page which is required in order to do the routing you don't need any server in order to tell you for this particular route you need different different. Okay now what are these things which are in between let's try to understand and will understand its benefit and which one to use and when to use what all you can do static SSR what it meant by when basically you are building your application when you are writing something like npm run build or doing the similar kind thing on the server what it does say suppose you are creating some blob and you know you have thousands or you suppose 100 pages with a static data. What you can do you can build those 100 web pages all together and you can put that web pages directly on your browser so that anytime a web page is requested you basically go and serve that static web page directly from the server. Okay this is cool right because there is no dynamic thing no API request we can avoid not a thing and you can directly serve the already pre generated web page right. The second thing which is again very popular people call it server side rendering with rehydration what it meant by you might have used react or angular by using the server side rendering what it does it creates a web page it's basically generate your STML but that STML needs some events to be there right. Say suppose you have a form in form you wanted to add some event handling on change updates on blur of that on different different events are there you want those events to also work but on the server your server don't understand these events what it will do it will generate this STML and it will give to the browser. Now browser have a responsibility to rehydrate it rehydrate in a sense you have given me a STML and I know the events which need to be binded I will bind these event so that your web page become interactive now before hydration your web page is not interactive so this is basically called your server side rendering with the rehydration. Now there is another concept which is called client side rendering with a pre high pre rendering what does it mean by this is very interesting concept what it says that I'm not going to basically render everything on the server. What I'm going to do I'm going to just give you a shell and it will have the basic HTML and things rendered rest of the things client is going to take care of in order to render but over here any dependency which you have in terms of the JS in terms of the CSS or anything that you have in order to render. So this is the kind of application which need to be loaded at a faster rate I will make sure I get those dependency and inject those dependency in your web page itself so that when you are you doing a client side rendering on the client on the browser you don't have to look for those dependencies those can be made advance right this is this is very cool. Now you will find lot of the application old application that was built on the 100% server side rendering you will find lot of application which is like on the pure you can say client side rendering and there are a lot of application which are blog related which are built on the server side the static server side rendering and using the rehydration so they are two very popular these days these mechanism which people are using one is client side rendering with a pre rendering mechanism and the server side rendering with a rehydration. These are two ways which is very very popular let's try to understand couple of more important things over here what are those first let's try to see who is basically using it in this particular case you can see the Gmail was using is very actively even you see the static one the net netflix was using for lot of the static pages the server side rendering with the rehydration you can say next just is built on the same concept and even the result is based on the same concept so client side rendering with the pre rendering. You can say pre rendering this is used by getzbee and the viewpress and full you can say client side rendering is used by most of the application right so although there are lot of strategies in terms of the Gmail is also trying to use you can say client side rendering with the pre rendering like these are the different applications or the companies which keep on experimenting and trying between the lot between now there are couple of things that we have to understand what is the cost of these different mechanism right the first one. Which is server side rendering it is going to cost you a lot in terms of your infrasize reason every request need to be handled from the server. Second this is going to cost you in terms of when you are building and you have to keep all those assets on the browser your storage is basically going to be very costly in terms of server side rendering with the rehydration your infra cost is going to be costly and you have to basically think about the GS. GS sizes right because infra cost because most of the request basically is going to be on the server and that need to be rehydrated on the on the client side right this is going to cost you JavaScript because you just get the cell and rest everything is basically going to be costly operation in terms of the JavaScript need to be loaded and lot more. This is 100% you can see JavaScript because the server takes care of nothing it will just give you the estimate and from there the passing loading rendering getting those GS and running on the web page everything is taken on the client. Now along with that this is very interesting which is time to interactivity is as close your you can say first contentful paint although this is very very recommended if you have your time to interactivity and your first contentful paint very close this is very very good right. It is almost equivalent and in this particular case you can see this is also equivalent but your TT FB is very fast in this particular case right so time to get your first bite which is which is again this is a flexible approach you can do lot of thing in terms of the SSR with the hydration this is again doing a CSR with the pre rendering is something which you can leverage you can do lot of optimization over here. So just go through this and try out these different things you will definitely find depending on your use cases you are going to leverage a lot of stuff over here so don't forget to try it out and keep watching compression this is another very small but very powerful technique what it meant by. So consider example you I think most of folks have already used four metrics metrics basically in that particular case how those are shipped those are rolled back and those are delivered to your home but how those small wrapping basically converts into actual metrics what you have to do you have to just cut the cover it will basically roll up and roll out basically and you will see after certain time after getting the air available it will actually block into the not only the air but also the air. The normal size of your mattress or you might have seen some crystals basically in those crystals are small small thing you have to put into the water and it actually glows up to a bigger size and those are very eye catching sort of thing right so we have seen lot of these things which are basically very helpful in order to transmit from one place to the other place else basically it will it is going to occupy a lot of the space right similar kind of thing happens with your. Assets as well when we say assets your JavaScript CSS the images and whatnot so consider instead of shipping your 300 400 KB is of files in through the network what if I say I'm going to compress it using some. Encoding and basically I browser knows how to decode it so in our case is suppose the water was one of the medium in order to decode or say suppose the air was another medium in order to decode right so similar thing if the browser understand the way I have encoded from the server if browser also understand how to decode it then our job is simple right we can compress it from the server and in the network layer those compressed file which converted from the 300 KB to a small you can say 60 KB file. 60 KB is definitely a very cheaper as compared to the 300 KB right so they are two very popular strategies which browser also understand one is the broadly and second is the Z zip so we can see a comparison even the broadly is far better than the Z zip we can see one of them is from the OO which they have shared the report and the thesis from there we can see earlier the size was around we can say 38 KB sort of and now you can see it's around 30 KB over here right. So that's a difference we can see it has a lot of reduction in the approximate 8 KB reduction right but just enabling a broadly so that's a big deal right so you get a lot of thing now there is still some browser which does not understand the broadly compression in that particular case how we can leverage it we can add a strategy we say is that from the browser high server please serve me the any file which is maybe site script.js and I can understand both the browser and broadly. In that particular case your server is going to give you one with the broadly comparison right in that particular case you are getting a lot of benefit because the size is small but they are legacy browser which does not understand they will say I just understand the Z zip right in that particular case what browser is going to give browser is going to give you the Z zip version of that so now in that particular case you can leverage the broadly compression but also taking care of the legacy browser. In the starting of this video we have talked about how JavaScript delay or the CSS delay loading from the network can impact the performance right now it's time to dive into the detail actually what is happening and why this is impacting we will be going through the render cycle and we'll try to understand different cycles different phases of this rendering cycle and what are the things that you have to take care of in order to make your web application more more more performance right. So we'll be talking about layout shift and the reprints that happens because of certain things not taken care in a certain fashion now let's understand the rendering cycle first first thing is you have to request your page you will get a STML from that STML you will get the response from your response in a sense if there are certain CSS or if there are certain years those will be downloaded to note it is very important any CSS or STML basically which is our own. So you have to have a response on your head and those are in general basically render blocking or parsing blocking right so your render blocking basically you see anything is not going to render until unless your JavaScript or CSS are basically loaded and similarly if your CSS is not loaded it is not going to block your passing but it is going to block your rendering right this is very important thing to note. Once you have a response your DOM is created you are aware of the DOM tree basically which is created from that DOM tree now you have your STML you have your CSS both of them get combines and there is a recalcate styles is done and the CSS is basically created now depending on what strategy basically is being used in order to load your JavaScript now your JavaScript is basically executed over here once a JavaScript is executed you get your DOM and CSS is basically done. So now there was a DOM there was a CSS now CSS or that rules for the CSS was generated both of them get merged in order to create your render tree this is very important face we have to understand right you created certain rules with that rule we have CSS or we have DOM tree which talks about the structure and different div and different layouts that you have in your DOM tree and now both of them got merged in order to create a render tree from there the layout is basically done. When we say layouting layouting is just you can consider you whenever you see a big buildings in metro cities how they have basically structured they are structured based on the pillars first the pillar the blocking and everything is done then the walls and everything is basically structured and your interior is done right similarly you have a long tall building where the pillars are basically configured or you can establish after that what is happening you basically build your. Different walls and then your paint basically starts right your painting is like you get things started furnishing in your empty house and finally once everything is configured you start basically putting the items at their different places like you put your TV you put your. So far and different different thing in your house right that is basically a pixel perfect thing which is basically drawn on your screen so in similar fashion you can basically relate from a building construction to getting things basically created and segregated using your walls and then getting it painted and so that you have full firm is marble tiles and what not painting is done and then finally placing those things in your. So similar thing happened over here now you have to understand with taking the same example there are certain things which are taken care of or the technologies that you should be aware of right first thing is. Composting second is painting third is layout parsing right these are the technologies you should be aware of now try to understand there are certain scenarios which are very costly when I say costly. Consider example once your house got built your your setup got built you realize or do my kitchen is very small I want to increase my kitchen size what you have to do think of. In order to increase the size of your kitchen you have to shift your wall to increase the size you have to get the denting painting marble and sort of thing and then again you have to basically in order to make your kitchen model you have to make some major changes and in order to put the different item in your kitchen this is very costly. What if you have to just say okay everything is perfect I just wanted to place my refrigerator from this wall to that particular wall that is way cheaper right so now let's put those technologies inside the the rendering so how how this is basically going to happen. Consider there was a change there are two types of change basically one is just going to trigger your repaint which is just shifting your refrigerator from one location to the other location it is not going to impact anything. Second kind of thing anything which is related to the dimension anything which is related to the user interaction or the JS operation those are basically going to actually change the dimension of your kitchen as well right. In that particular case it will go through again creating the layout again doing a painting and finally putting it into the pixel perfect thing. Now let's try to understand what are the different things what are the different properties which can basically impact this and which can be main cause for this let's let's understand that. We have seen this these phases right so anything which is related to the like downloading the JavaScript because of the JavaScript if there is an impact in the CSS or the DOM basically taking care of that anything which is basically going to impact your CSS or right. Then basically there is a layout layout in a term the similar thing we talked about the builders building structure which need to be created painting is again making it full fun you can say making it denting painting marble and what not the painting done with that. Composting is basically this is very interesting we talked about above this is the final like putting your pixel perfect and the items in your house at a different different places one thing which we have to also consider over here it also. Do consider the different layers that we have so in your web page say suppose you have a model that comes in a different layer all together Right you hover on certain things you see the different tooltip and different Layout all the dialog box model which you see those are the different different layers right even you use position absolute side of thing or Position fix those are the different layer kind of thing those are handled in this particular composting phase Now try to understand if we try to make any change in our Styles using JavaScript or CSS which is going to change our dimension. What are those dimension property which can be changed? Let's quickly peep into that these are the properties which can basically trigger all of these cycle Either you are changing from here or here. It doesn't matter either you are using JavaScript or the styling Basically, what are the phases it has to go it has to basically go through Layouting which is basically creating your building structure second is painting getting his furnace using your Your paints and basically getting the marble everything perfect then finally composting putting things in a different layer Making it final giving it a final touch by placing the different different items right all of these has to be taken care of This is very very costly. What are these property anything which is related to your height which is related to your width anything Which is related to the dimension So if even if you're trying to read certain properties which are related to the dimension You can see which is related to the offset or client hide So all of these are going to trigger all of these phases which is very very costly Why these are very costly because browser have to give the latest values of these dimension whenever you are looking for even that Is read not right right? This is very very important to note down anything which is related to the offset Again, those are going to be very costly anything which is actually going to make your scroll to top Or we might have used a scroll X or Y sort of thing all of these are very costly And these are going to basically trigger all of these phases now what what better we can do What are the properties which can actually save something in this particular cycle or these phases? So the other set of properties which are very important and cool to understand anything which is related to your background color Or even your text color right anything which is related to shadows Right anything which is related to visibility These are and they are a couple of more these are basically going to do a very good job for you Which is it won't do a layout shift In this particular phase it will basically Definitely if there is anything from the JavaScript or style that is going to be there But it is good directly going to jump into the paint and it is going to directly jump into your composting It is not going to do anything which is related to the layout shift and which is very very important thing if you can basically avoid This is very time-consuming and this takes lot of you can say computation for the browser in order to basically Draw the final pixels on your web page now there are other cool things which you can do you can even avoid your paint You can directly jump into the composting Compost step how you can do that there are two properties which helps to do that one is transform and Second is the playing with the opacity These are the two things which is even going to Remove two different phases and important phases which is your layout and your paint You can directly or definitely any from any place we are doing you can directly jump into the composting over here And this is very good So that's why you might have seen anyone who wanted to play with some sort of animation where you wanted to change the dimension of your You can say dialogue or you wanted to change or you wanted to play some animation Placing component or a visit at one place and you wanted to do a transition to a different place in that particular case It is recommended not to play with the dimension within height of this instead of you can basically do a transition Which are going to help you out right or do a opacity play with the opacity These are the two things which is going to help you even the composting now the question comes even why These things actually matters like even if we ask our browser dude do some extra work Then what's the harm for a browser in order to do an extra work which is layouting what it costs? Let's understand what it costs for the browser in order to do that and why this is important Let's understand very interesting concept Which is frequency or you can say refresh rate and how this is related to you can say different devices and how it is Even related to what we just talked about right try to consider when we are scrolling our web page What do you want it to see we wanted to be a even we are scrolling fast You wanted to see some content on that we don't want to make it Shaktima, right? What it meant by we scroll and we see something is happening weird, but we are not able to see anything right? We don't want to make Shaktiman people who are aware of flash We also don't want to make it flash like we don't know what happened in behind We are not able to see anything in between when you are scrolling and we don't need that experience at all when we are The scrolling or doing some activity on your web page, right? So for that there is very interesting thing that we have to understand which is a frequency or which is a You can say device refresh rate so most of the browser most of the devices that we have has a frequency of has a frequency of 160 you can say 60 Hertz over here, which is equivalent to what it meant by it is going to basically Render or refresh your screen 60 times in a second. Okay, what it meant by? 60 times in a second then how many frames do you see in a second? Any guesses I small math. Let's do that. How many frames we are going to see in That particular case what we are saying in one second How many how many frames basically we need or how many times it is going to refresh it is going to refresh 60 times So this is equivalent to your 16.67 These number of the frames basically we have to show within that one second So you can understand a browser have got a job in order to complete whatever we talked about your styling layout in paint and your Composite whatever activity are doing within this particular interval Don't you think this is crazy? This is very crazy for this it is going to be 16.67 but there are a few devices which actually works on 160 Hertz where you wanted to show better Experience when you are playing the game you wanted to have a very refined You don't want those delays between the frames and you wanted to be very real time active on that right? So in those particular case now device are having 120 Hertz as well Which is these many frames that need to be rendered in a second right these many times it need to be rendered How many frames is like 8.33 ms is required in order to basically render a single frame now This is this is even complex and in tougher now This is very tedious if if we have to basically what so understand even if we are not able to do in 16 or 16 ms actually which is not a 16 ms I will tell you very frankly because they are browser have to do lot of other thing in order to basically make the render the one frame Right so behind the scene actually if you see you actually got 10 ms in order to render a single frame So that you don't give a Shaktimaan Vala experience to your users in that particular case you have to make sure whatever activity is being Done can be completed by in within 10 ms by the browser so that there is no glitch and what it meant by it You might have seen you are actually doing something and your browser hangs you are scrolling your browser hangs You are not able to see certain things when you are doing a very very frequent scrolls and your screen gets blank Right these things happens basically when your browser is not able to complete the Expected stuff within your 16 ms or you can actually say which is 10 ms Right so you have to make sure these things which we talked about layout shifting and the repainting why this is important If you give browser to do a less job then browser we can make sure these things happen within our given interval Which is within our Required ms which is there right which is 16 ms for the browser now They are couple of more interesting thing which we have to understand say suppose We are loading multiple fonts in those particular case Can we club those font in order to render them in one time load them in one time and apply to in the one time altogether, right? can we Set the height and the width of the images when actually it is going to the render for the first time instead of It is deciding the height and width of the images when it is when it is actually rendering it, right? Can we basically use the svg placeholder for the images and the videos to reserve the display box so that it does not basically? Create a layout shift when actually actual images are basically rendered So there are so many interesting thing that you have to think about in order to avoid these things Whoa, this was a powerful pack with the network optimization And there are so many things that we wanted to cover in the optimization the upcoming episode. This is just I start We are going to cover the asset optimization We are going to cover the build optimization and the performance related stuff how to monitor a lot more is coming in the upcoming episode so keep watching and with that just wanted to recap what we have basically learned over here we talked about the Lady z loading we have seen the tricks related to how you can load your JavaScript in a single fashion We have gone through the content visibility serving critical cases resource hinting caching with the using the service worker We have talked about the client-side rendering service at rendering pre-rendering with the server-side rendering static rendering We have covered the compression techniques. We have also covered the layout shift and the repaint We have covered so many interesting and so many things are coming in the upcoming episode So don't forget to like share and subscribe to this channel so that you are always up to date on the upcoming stuff And there are so many cool things which are coming So let me know in your comment if you have tried any of these method in previously or You get this benefit from all these techniques that we have leveraged so keep watching chakde system Design