 Welcome everyone to the session from Ashay and Srinivasan. They are here with us to talk about speed matters, client-side performance improvement tips and tricks. Without further delay, over to you both. Thank you Manjunath. So hello everyone, I'll quickly start sharing the screen. Okay, so we're going to talk about the speed matters, the client-side performance improvements. And we're going to also share some tips and tricks. More about caring the experiences of your users on your website, on your web presence, right? Before we talk about it, quick introduction, I'm Ashay. I'm a lead consultant with ThoughtWorks, front-end, back-end, day-offs. These are some of the areas I work on these days. And you can see my Twitter and GitHub handle and all to my pair Srinivasan. Hi everyone, myself Srinivasan Shekhar. I'm also a lead consultant in ThoughtWorks and I'm a conference speaker and contributor to various open-source repositories, maintainer of Appium, Blogger. And before coming here, I've also optimized my portfolio website. So you could see the link out there and feel free to share your feedback on the same in terms of performance or any. And I am available on this Twitter and GitHub handles. So we are here to talk about speed matters, performance, client-side performance improvement tips and tricks. And agenda for today is going to be why does performance matters, right? And what all different types of performance metrics we have and we are going to highlight some of the important ones. And then we are going to start live coding. Basically, we are going to show a lot of tips and tricks in live. And please be patient with us and keep your questions coming. And we have a Q&A tab on the bottom. So feel free to ask your questions and we will try to answer as early as possible and also at the end, but still keep your questions coming. And we are looking forward to learn from you as well. So to start with, why does performance really matters, right? So nowadays consumers are more demanding than ever before and they rate you against the services they consume daily, right? Performance is kind of a foundational for a wonderful user experience. When site begins to load, consumers basically wait for the content to load. Consumers are forced to wait basically on the load network then on the fast network, right? Performance kind of plays a crucial role in customer retention against your competitors. There are wonderful insights about certain organizations on optimizing their performance. For example, Pinterest used to be slower and they optimized by looking at certain performance metrics, they optimized their website and they started seeing, once they optimized and they say 40% more in terms of fast, I mean probably they measure and then they see the scores between difference and they say 40% more the fastness and they introduced and they experienced more signups in terms of 15% more signups. So the sooner you load and there is going to be a lot of conversion for you, revenue for you and the better customer experience and also a lot of goodwill for your website, right? And BBC on another end experienced one-second slowness and they measured that after fixing it, they measured that they experienced, I mean the one-second slowness had lead them to 10% of fewer users. Basically that conversions were dropping because of that one-second slowness, right? So every second matters when it comes to performance, when it comes to retaining your customers and providing them better customer experience, right? So we are here to share our experience in terms of improving client side performance with some cool demos that we have and we are also giving to provide you some valuable tips and tricks and feel free to ask questions if you have any on the Q&A tab and we will try to answer as early as possible, right? And Asher being a full-stack developer in ThoughtWorks and we both working on different clients, right? What are two crucial metrics that you experienced probably pulling your websites down? Two crucial metrics. Yeah, I think from when I'm on the other side of the table when I'm a user or a consumer of a website for me, when I enter the address in the address bar I expect it to load instantly. If it's showing me a wide screen, if it is showing me partial stuff, I kind of get annoyed and I may try to look at something else because our lives are super fast these days, right? You don't want to wait for a website to load. So yeah, if it loads faster, I'll be happy as a consumer on my website. The other thing I can think of is I have sometimes experience on my, especially on mobiles. So when you open a particular website, it shows you something. I click on a button, but it doesn't do anything for some couple of seconds and I get frustrated and confused. Is it my mobile which is slow and hanging or is it website which has some fault? Or whether even my click got registered or I'll probably frustratingly click it twice or thrice or something of that sort. So these are couple of things I can remember, Srini. Some of the cool metrics that we are going to see are about related to what you are talking about, which is about, at times, I also experience whether it's my mobile or do I need to go for a sale which is running behind the scenes now in India and purchase a new one or is it the web app that I'm using is driving me crazy, right? So some of the metrics that we are going to see crucial is about just contentful pain that you were talking about, how long does it take for it to see something out there in the largest area that we have and total blocking time and the layout shape that you were also talking about that and time to interact with you. These are some of the crucial metrics. Bit history behind this is basically Google kind of analyzed a lot of websites that through the search engines and see how they rank themselves based on and quite sometime back, they moved to mobile friendly ranking, I mean mobile first ranking as well, right? So based on analyzing a lot of websites, they come up with some wonderful metrics and they also have a wonderful way to score these and you all might have used Lighthouse to see some of your websites score and how they behave exactly, right? So some of the crucial metrics that we are going to see out of a lot more is largest contentful pain, total blocking time, cumulative layout shift and time to interact. Since actually we're talking about a hero image, right? Probably you can take us through a bit more in depth on what you are experiencing. Sure, sure. I think, yeah. When I was saying that I don't want to see the white screen, right? For longer, when I enter something on the address bar, I want to see something, text, image, probably I'll prefer that's my preference, right? It looks lively, feels lively. So when you show something on your website, your website can be large. Out of that, whatever you show on this first part of the screen, whatever is visible on the screen, scroll part we don't care, but whatever is visible in your viewport, viewport is the word we use for that, is called as your largest contentful pain. For example, if the image is taking largest part of the viewport, it's the image which will be treated as the largest contentful pen. Or if it is a text, a paragraph, that would be treated as the largest contentful pen. Whenever you render that paragraph for an image, you complete rendering it from the time you started loading the page. That's the time it takes and that's the time it takes for largest contentful pen on your website. So yeah, I think that's a very simple definition. Maybe we can also talk about the other terms we have seen. Yeah, so let's look at this one. So here on the 0.2 second, I can see the something started loading. So this is my first contentful pen when you see at least something and when I see my hero image, which is the largest section on my landing page, that's the largest contentful pen. So it has taken almost like 0.2 seconds to load it. Cool. So next bit is about the time it takes. It's quite related to contentful, the time it takes to do the contentful painting. Like if it is slow, why it is slow, right? There must be something happening which slows down my, slows down the process to show the image on my page. And the time it takes to show something, by the time your computer is doing something else, that's why it is not showing you the image or the text on your screen. And the time it does something else, which blocks your rendering is called as total blocking time, TBT, right? It can be JavaScript which is running. It can also be the time it takes to download resources and evaluate JavaScript's process styles, styles sheets. So the time your browser spends on this task is called as total blocking time or TBT. A bit of a context, your browser will have a main thread called as UI thread or main thread, which takes care of rendering something on your screen. And it also has some lower priority threads or slower threads where you can do some of the other work. But if you're doing something on the main thread, if it is doing one task, it cannot do other tasks. And that slows down your rendering if you're doing something before that. Maybe Srini, you can also play this to pay you back. You asked me about my experiences. Is there anything you would like to share for the others? I think the crucial metrics that I remember going through were about layout shifts, right? So it's hard to figure out where exactly the button is at times, right? And for example, here, if you see the layout shifts, I don't want to place an order button. Unfortunately, while pressing a button, unfortunately, you submit an order and the order is complete. And it could be due to various reasons. You might have not given a proper way. So probably some ads popped up on layout shifts when the other contents started loading, right? It's one of a crucial metric and a user-centric metric for measuring the stability. Also, it helps us to quantify how often users experience these kinds of unexpected layout shifts. So one thing that comes to mind very crucial when I was building my portfolio website is, I mean, which I've seen in other websites, too, is for a flash of seconds, you will see un-styled text, and then probably on gets loaded later, later, right? So that's another one. The layout shifts due to various reasons. This is very important that needs to be fixed to give a better user experience, right? And the next one is another interesting one which is quite relevant to what you have talked about, which is about thread, the main thread that gets blocked due to some other long-running tasks, right? And here it's quite relevant, which is time taken for your website to become interactive. Sometimes we might see that almost all the contents get loaded, but still it may not be interactive. As you said rightly, whether it's mobile or it's a website that it says freezing, right? So time taken for interactive is another crucial metric, which basically helps us to measure a responsiveness of your website, right? It helps us to identify exactly where, exactly in the page that looks like an interactive, but it is actually not, right? It is the time between the first contentful paint and the long-running tasks, the orange ones, the long-running tasks. So it's the diff of these two between, right? So that's taking a huge time. And that's when your website gets interactive, right? So these are two crucial metrics that I would say that needs to be much better in terms of score. So that it gives you amazing user experience, right? So given these metrics in hand, we have also built a website. So to showcase some of the tips and tricks that we have, and it's going to be a live demo, and we have so many cool things running, or to Ashay probably take us through the website, how it looks like, and what's the performance score at the moment, yeah. Cool. Thank you, Shaini. So I'll help everyone. I think I'll explain the website and the source code for this website is, we're going to share the source code as well as, it is being hosted on the website at the moment, the free hosting service they provide. So we are looking at the hosted website, and it's a typical website we created for this use case, and we tried to make, we added a lot of problems here so that you see the lowest score on the lighthouse or from a performance perspective, your lowest score, and we tried to improve it as we talk about in the session. Typical website, the hero image header, and then we are loading some of the top contributors from the ReactJS website, their names, IDs, and then also their images. Along with that, we have added some high quality images. I usually go on a walk with my dog, and in the morning I take some photos while on the way. So those are some of the high quality photos, but they're added as a thumbnail image here. We want to talk about certain image aspects and the use case we wanted to create for that. We also added the Twitter widget here, and as you can see, our session is being tweeted and we already started talking about it, right? So we are also loading a third party library, which is a Twitter widget. So that's about our website. Just before the session, I ran a page split insight on this website, and on the mobile it is scored quite late. It's just 18 scored, and we kind of failed in the split insight test, right? And it is also telling us what is wrong. Maybe we can talk about it in details as we cover those topics, but yeah, it is telling us what can be improved. If some of you have already used Lighthouse, the report is similar, but just that we are looking at something which is a hosted service instead of running it on our local machine. Cool. So if we are good here, maybe I can get started with the first topic. Yeah. Since you started about Hero Image, right? Let's start from there. So consider we have an image which is quite huge as like how we have in our website. How do we optimize that Hero Image so that I wanted to load and I don't see any blank screen. I wanted to load it as early as possible. Right, right. I think there are certain, so maybe a quick peek into what is the Hero Image. So this car image is the Hero Image on my website. And as we're talking about the largest content pool print, when I load my page, this is the image I see on my page and this should be the largest content pool print major on my website. Cool. So maybe we'll talk about what can you do. Okay, so we're going to cover something called progressive images. So instead of loading a high quality images, bit by bit, we're trying to load it in a low quality and improve it as the time progress. We can also use modern extensions which are lightweight and higher in the, if they can produce similar amount of quality of the JPEG, but then if you use WebP, WebP is the name of that extension, for example, it gives you similar quality of JPEG, but it's almost like, at least I have no experience. I have seen it's like quite, by quite large margin, it is smaller than JPEG. We can also preload some of the images. If you know the Hero Image is the one you need to load on your website, you can preload that image so that browser knows that I need to prioritize downloading this image. We can also do lazy loading of the images which are not required, which are not there on the viewport. We can also do asynchronous loading so that those can be loaded or decoded on the worker thread instead of being loaded or decoded on the main thread so that we pre-up more resources for other tasks. And we'll talk about also the fetch priority. Cool. So I think these are the topics we wanted to talk and let's see how we can implement them in reality. Right? So if you look at this particular website, for the demo purpose, we are going to use the local one so that we can quickly make changes and see them in action. So if I go to network tab, for that matter, and I say I want to see the fast 3G network and I disable the caching so that we can see the things getting downloaded each time and I reload this web page. What happens? When I reload this web page, there was a flash and now my image is loading one by one. Slowly it is loading. Right? So the image is hosted on a CDN, an image CDN. I'm using Contentful, which is the headless content manager. We are using the free account again here and they also support, they also have the image CDN, the content delivery network for the image. And we'll explore some of the interesting things over there. Right? So now if you see, if I am on this fast 3G, it is still showing you that the image is loading like in a section. It goes like a dot matrix printer from top to bottom. This CDN and also other CDNs do it. It supports progressive loading. So if I say FL equal to progressive, let's see how the image is. Oops, my mistake. Okay. I missed something over here. So I'm going to say FL equal to progressive. Yeah. So the image was still loaded slow, but it was a bit faster than the previous one. And then if you see, it is initially low quality. I'm going to load it once again. It is low quality and then it is getting clarified as the time progresses. What happens? You are able to show the image immediately on your web page instead of waiting for it and slowly loading it. Okay. With me so far, I believe at the same time, you can do something like, if you know that you don't really care about the clarity of this image, you can also do something like I want only 50% clarity. If you do that, the image is going to be super fast. Sorry. We're going to look at the all section here so that we can see the size. So now it is 181 KB. When I was not really talking about the quality, the image was 458 KBs. So based on where you're showing, you don't want, you may not need high quality image always, right? You may need a small, lower quality image. So in that case, you can save the bandwidth because more heavy image, more time it takes to download and it blocks your content pull paint. So image has to be as light as possible. Not just that. We can also use, for example, the format, which is WebP, for example. I want WebP image, which is again faster. The same high quality image, but instead of 458 KB, it was 306 KB at this time. So you can also use different formats to make it faster. I'm using content pull, which does all this image manipulations on the CDN network itself, but there are others which offer this opportunity. If not, you can upload multiple versions of your image and by query parameter, you can serve different images or by file name, by different file name, you can serve different images. If you're able to follow me so far, I'll go on and we'll also talk about another aspect. On this page, there are a lot of images. Do I need all those images up front? Maybe not, right? Can I do something about it? I was talking to Srini about improving the image and why are we spending time and wasting bandwidth on the images which user may never see. This is quite below on my web page. What if they don't even see it? Another aspect here, we have spoken about the sizes. What if I say, anyway, if you look at on my website, I'm showing it like a thumbnail, a small image. Can I say I want to show it on width of 150 pixels? Look at this. If I render it now, it is going to take only 3.5 kb. If I load the original image as it is, it's going to take 598 kb. Huge data I am able to save and also it's going to be faster because if you see the time it took, it took around 500 milliseconds. Total 585 milliseconds, but if you look at the larger image it was 3 seconds. Imagine the time you are able to save and you are able to draw something on your contentful like you are able to do your first as well as largest contentful contentful pet as fast as possible. We can again look at the another aspect. I touched base on it and that one is do I need all those images? Why don't I wait for those images? Also, another thing maybe she might have noticed that the other topic he likes. The web page flickers for a fraction of seconds there is a layout shift and the image actually lands in there. Probably I think we should give it's quite evident. We saw that the image doesn't load and then the content from the bottom came up and then after the image load the content came down as well. Probably to address this cumulative layout shift we can give appropriate width and height to be we are just telling the browser that reserve this width and height for some other components so that it gets rendered. So the content that gets loaded behind the scenes on the bottom can stay there as is so we don't see any flickering there. Probably we can go back to our code and then fix the height and width of it. As we know it's 1200 into 675 and try adding it. So the hero image we are adding in the app here so I can simply go and say I am using the styles over here so I can say width was 1200 pixel and the height was 675 pixel. That is one thing so we are fixing the size and if you do that I think the flickering should not appear but as we are here on the code already you can see another thing we are eagerly loading this is a hero image so I want to load it as fast as I can right and we also spoke about I think probably we can load the images which are not in our viewport as lazy so that it will help us to load our website faster I mean it gives more priority to hero image rather than giving the same priority to the images that are not as part of our viewport. So we can also defer that so another way along with laziness is we can defer it so that the website that gets loaded first will have this priority very high and remaining web pages I mean remaining web images can be deferred to a little later yeah so I think those four dog images I am going to lazily load because they are at the bottom also we are showing the GitHub contributors I am going to load their images lazily let's see how what it changes and how it changes at the same time we spoke about these sizes so as we know that the dog images are like 100 by 100 why don't I why can't I even say that I only want the smaller images that makes sense so maybe I will just copy the same stuff and we will put it in front of every image so to summarize what we are doing here is basically we are reducing the width and height of the images that are not in our viewport and we are deferring those images to lazy load which are not in our viewport so that the hero image we have takes more priority and probably we can preload that image which is a hero image as well so preloading in the sense is basically we are instructing our website to load this particular asset as early as possible so which basically preloads this asset from CDN as fast as possible because that's a preloaded image we can use the same preload image when we are referring that in our image tag yeah so let's see if this has changed something on our website now wonderful cool and I am going to look at the images let me read into it ok so as we can see I think if I try to scroll, if you scroll the images are getting downloaded as we scroll so if you don't scroll you don't really try to load them faster you are saving on the internet, you are not sharing the bandwidth it's going to be faster so this is by default supported by the browsers and they are downloading the images when they are needed at the same time the dog images I had at the bottom they are like super small now 4kb, 3kb, 4kb instead of the full size images we had so it's definitely an improvement compared to what we had earlier perfect preloading an image yes so if you look at this one I think this is the first thing which gets loaded and we cued it so when I open the page just 17 millisecond after this request was cued so you give it higher priority if you want to see the difference we can even see the difference if we go back here and comment out this preloading section and then I try to reload my website see where is my hero image sorry the twitter widget is going to load something over here but if I do it now you can see this is my hero image it was prioritized or cued at 168th millisecond before that we tried to download Fevicon and the svd for the logo right but if I add this one the browser is, we are instructing browser that this is the image I want to show as soon as possible so can you please prioritize it so now it is the first one as you can see it's even before Fevicon ICO and the time is I don't know last time it was 17 millisecond it may be a lot faster it may be something around the same time or bit faster but I am not able to show it somehow 12 milliseconds cool so this is about the images folks apart from that I think as I am saying we can do lazy loading we can also defer them so that you can say you want to download or decode this image you do it on the different thread or different process not on the main process also adding to that Ashe was also talking about modern web extensions similar kind of quality but the size is very less so which in turn gives us very less data transferred on wire so it loads our websites much faster so we loaded progressively which means we don't show the white blank out screen and then we show a poor quality image and then as we progress it loads a better quality and then we can use modern web extensions on the CDN here with the help of contentful but there are a lot of CDNs that offers amazing capabilities we can make use of that and also we have something called picture tag in JavaScript which will help you to give different source sets which will help you to render different sources from different width and height for different different landscapes probably for example for web it is different for tablet resolution it is different for mobile resolution it is different and last but not least we have something called fetch priority as like we were pre-loading we can also instruct the browser to fetch this on priority which is an experimental flag not supported except Chrome and quite recently been introduced which will also help your browser to know that this is an asset that I need to pre-load as early as possible so we talked a lot about images we optimized it for content I mean cumulative layout shifts as well next that attributes next thing about next thing is about fonts so fonts kind of plays a vital role on your website and it is advisable to not use so many number of fonts, stylings so it's better to stick to 3 or 4 and the max so that you will have a better experience in terms of user so there are a lot of ways you could optimize it so that we don't experience that flash of unstyled text, the moment you load it it loads something in a default manner and then applies the style here we are using I think we are using inter which is a font family it loads something else in between and then probably uses inter and then I mean that's the flash of unstyled text in web world we say that as a default flash of unstyled text so this needs to be definitely optimized because you have to provide a better user experience when it comes to font so a lot of so you could see that there is a difference it was a different font styling initially and you can also give default font styling till the original one loads that's another way you could improve it so we as like how we preloaded an image we can preload the font style as well let's say we are using font.google.com so most of the times people tend to use font.google.com to use their own fonts so that we can also instruct the browser to preload this specific font and preconnect to it because it's downloading from an external domain we can preconnect so preconnect is another wonderful tag in link tag where you can specify this is an asset that I wanted to preconnect which means you are instructing the browser to resolve the DNS of fonts.google.com api.com in a much faster way I mean it gives more priority basically so preconnect and then you can preload as well at times so that it will and let's say you are loading font from your local you could use pre preload so that it gets loaded on priority so online number 11 you see that we are using fonts.google.com and then family is inter and at the end you see something called display equal to swap so display equal to swap is nothing but Google kind of understands that if the family font inter not available on time you see there are a lot of font faces getting downloaded for that specific font it displays something on a swap I mean it gives you something else that is more and more relevant right so it gives you I mean it helps Google to take faster decisions another wonderful thing about fonts.google.com is about you could also append it with something called ampersand text and say let's say can we say ampersand text equal to agile India you could say hello world stringy ashe for now let's say agile India so instead of downloading the entire font faces it gives you I mean it it kind of instructs the server that I'm going to use this font for text so give me something much faster and which is very less so it will help you to download the image I mean download the fonts in because the font face is very less so it is much faster and it gives you something quite quite relevant and quite near to the end I mean it's part of inter but it is not the actual regular inter that you are using right only the characters we put in agile India were received and you can see only those things are styled others are still the fallback right so it helps us to load things faster if I if I let's say I have to you only for logo I'm going to use that so you could add a text there so it will help you to style your logo alone so we don't have to load all the font faces on time right so the next thing is about so we talked about preload preconnect self hosting versus Google self hosting probably you could use preload Google fonts you could play around with the displaying the swap and then text attributes right these are much faster ones to help you to load everything on time so that the FAUT time is very very minimal so you don't experience that very often right so that's about font optimization so to give you a better experience the next thing that we are going to talk about which Asha remembered at the friend whether it's my browser that gets freeze or it's my mobile or it's exactly the website that is inducing that right so render blocking resources apart from images and fonts that we have optimized so far we have huge style sheets right so style sheets plays a crucial role to block the main thread the UI thread which Asha was talking about on friend and then JavaScript web pages nowadays are full of JavaScript so JavaScript plays a crucial role in blocking the thread as well and we have an external library even in our website which is a Twitter widget which Asha was talking about and also we have Google analytics integration right so a lot of times these analytics integrations to it gives us huge pain right so we could optimize those analytics to not run on main thread so to reduce we can also reduce the style sheet we can defer which is not in our view let's say Asha has certain images on the bottom if you want to defer those style sheets we can defer those and also basically we can also figure out from coverage as Asha was showing here what are the highest number of I mean we could eliminate those unused JavaScript unused CSS so that it I mean the DOM size reduces and also helps us to eliminate these render blocking resources I remember Asha was playing around with respective analytics so Asha you have something around that So I think just to pick here so it is loading the JavaScript and it is telling me out of this JavaScript I am downloading from this location I am using 41% of it is unused right so this way maybe you can look at your bundles and figure out using all of it if not we will have to see what can be reduced that is going to definitely help us in reducing the time spent evaluating the JavaScript on the browser and focus more on drawing something and making it interactive as soon as possible right and the topic Shrinu was talking about is there is another library so Builder IO is another content management system it is a visual CMS and they came up with another library called as party town this party town library can actually take responsibility of loading your third party library is just like Google analytics and it can load it on the worker thread so your main thread is not blocked and if you are wondering what it takes to implement is it easy it is difficult it is super easy for React it is just four step process you add the build party town dependency you add party town tag in your page and then you whatever your script is maybe it is Google tag manager I am already adding it may be already present in your page you change the type of it text party town and the fourth step is you need to copy certain party town libraries to your public folder on react.js four steps to couple of it took couple of minutes and that's it while it works and it is not loading it stops loading the Google tag manager on your main thread and offloads it to a worker thread which reduces the blocking time for you this is wonderful right most of the times I remember saying that it is analytics who is blocking the rendering not the actual image we tend to optimize other resources like cleaning up unused JavaScript cleaning up unused CSS but still the TBT is kind of very huge most of the times it is because of this third party libraries like for example we are using GTM and we are using Twitter widgets which not necessarily has to be loaded a friend probably it is blocking all of our resources so probably it is better to offload the responsibilities from main thread and give it to a web worker as you were saying so that is wonderful it gives us a huge pain relief in terms of handling these kind of third party scripts which we don't have much control as well so that is wonderful I think just a call out not one side fits all it has to be used with concierge you should test if it is working I think party down on the website they have given a lot of resources on when to use it when not to use it but yeah this is something you can definitely try out awesome awesome so next crucial thing that we I remember we were fixing it about giving a dimension to image so that image has appropriate width and height right I remember we were giving some 1200 pixel and 675 pixel which helps us to instruct the browser that okay I have an image here which is going to be rendered and don't use the content so that the text contents behind the scenes I mean below the below this image will get loaded as in when as in when we have the content ready right so that's another thing and on the first demo that we I mean on the gift that we remember seeing that instead of not submitting and I ended up submitting all the orders so order got reserved most of the times it's mostly due to this ad spots right so it's better to reserve an ad spot with appropriate component width and height so that browser is completely aware that this component is going to be rendered and which has a fixed width and height in the modern probably you can also use aspect ratios rather than 1200 pixel and 700 pixel so we can compute the aspect ratio and use it which is much efficient way to say that okay to a browser on different aspect ratios so that it is able to load contents on the fly able to understand which kind of form factor that we are in probably it's a tablet or mobile or it's a web so it can work for different resolutions right so these are amazing things that helps us to solve this layer shift and now most of the modern websites have animations they wanted to look better so they do have they do use a lot of animation libraries right so the preferred animation is transform rather than another way so transform kind of helps us to reduce all this layout shift but in a normal way you use anything else apart from transformation that induces this kind of layout shifts basically so here we have a simple example which helps us to show transformation I have recorded the performance LS means layout shift as you can see this animation is using something called as top-left property to animate basically sorry I think the code is still loading but yeah when you do it's treating it as a layout shift but the same animation done on the done using the transform directives of CSS animation and if I look at the performance record it same animation no change at all and I look at the long log here on the performance there is no layout shift the transform animations are not treated as layout shift whereas you're another the top-left I'm changing the top-left attributes for animation and it is treated as layout shift amazing it also takes resources on your main thread by the way when you see it's a layout shift yeah I was about to say that so it also offloads that huge responsibility or long running task in the UI thread or the main thread so we talked about image font we talked about layout shifts now we talked about render blocking resource and comes up to mind is caching yeah I think it's the most crucial part of where you host your website so if you look at the website we are looking at so what is caching basically you want to cache because if something is not changing if user has already downloaded why you ask them to download this is for the repeat visitors to your website it's about optimizing the second visit to your website if they already have it why do you ask them to download so you have to minimize that also you can use CDN so that you can keep your website near to users because on the wire it takes time for data to flow near your to your user faster time faster they can download your data right so CDN you can use global use global CDN so that you can so global cloud global user base from global locations right so CDN is important but then from a cache perspective what should you do it differs on use case by use case basis on this website if I look at my document which is is going to change maybe frequently what I'm telling is this is cached on a public CDN don't cache it on your local machine and every time you should revalid it I'm saying must revalid it I'm not saying you download it every time but I'm saying revalid it so when I reload this page now I have to uncheck this disabled cache and maybe try it once again yeah I'm not sure I think maybe I have broken something in the settings I have yeah you can see my page is doing 304 I'm using eTag so when I downloaded the website first time it gave me a value and using that value I sent that value in my next request saying this is the eTag I have has it changed and they will tell you know it hasn't changed so this way you can use your caching mechanism to decide if something has to change or not has to change also there are some JavaScript which you know will not change that much so you can say it's gonna be valid forever and it's immutable means it will never change but when the file changes you will change the commit ID and that way they will be able they will be forced to download a new version so I think that is something you can do and play with the caching so I think that's where we probably would stop in the interstop time and we will we are up for the question and answers you have any thank you folks thanks for listening thank you thank you we have one question this question is from Raman assuming we are using akamai kind of cds we can use the image manager utility to optimize these further yes absolutely in my experience that is possible as I said look if your cdn allows you to use query params and do that you can do that if not you can have multiple versions of your images using the utility you can get multiple versions of your images and so then based on the device the image is being rendered on so instead of using an image probably you can use picture tag which takes a lot of source sets and each source set may point to different resolutions and which will have a different sources and we also have a default image I mean we can give a default image to it as well so that will help you to load these images as well faster thank you thank you all for joining us