 Hello everyone. So I'm taking the session on performance optimizations and this is very necessary for us because we have seen a lot of web pages. Everybody can make a website today but nobody realizes that only the website that loads faster makes sense, right? So today I will introduce you to the work we have done during the Google Summer of Code with the project Open Event Wabab. Nirenjan has already introduced you about the APIs and all the things in the Orga server but I have done the work in the Wabab project and the Wabab project I will be going to take it forward today. So myself Ayush and I'm from India and I have worked on front-end development for two years and I like UI UX part of the websites and I try to optimize it as maximum as I can. I also work in Node.js and on the back-end side of MongoDB, mainly the main stack. So because already there is a lot of discussion already going on on Open Event so I'm not going much into depth of Open Event and what it does. I will just take care of how Open Event Wabab works and will guide you the whole structure we have integrated from Open Event Orga server and how it is integrated with the Open Event Wabab so that if you want to generate your Wabab what's the whole idea you have to follow, right? And there are the two links you are seeing here. The one goes to the Open Event Orga server repository where you can go and create your event, right? You can create your event there and once you create your event you can go to the above link of Open Event Wabab where you can create your website, right? So here is the architecture which I have created. So as an organizer what you need is only the data. Once you have the data you have to port it to the Open Event Orga server, right? So when Open Event Orga server gets the data because there is a lot of discussion on the Orga server so you will be understanding that after Orga server gets the data there are only the two outputs available. Either you get a zip file with your data which you have filled on the Orga server, you just have to upload a file or you can fill it manually in the form like the type of sessions you want to conduct, the speakers who are going to attend your sessions and a lot of colors and optimizations you have to do there. After that the output will be a zip file from the Orga server or the API endpoint and these two things are necessary for the Open Event Generator which we have made. Open Event Generator is made using Node.js because it requires a lot of automation and when we are doing automation we always try to do it with Node.js because it seems best. So the Open Event Wabab already consists of two main components. One is the Open Event Generator that is in Node.js and other is the Open Event Wabab which is generated using this generator, right? For example, if you want to have an app for your event what you need is just to go to the Open Event Orga server and have a zip and the API after filling your data. After you get this you have to upload the endpoint to our Open Event Generator and you get the Open Event Wabab because this is done in only three months last year. We haven't integrated it much but this year we are going to integrate it and make it more usable, right? And so I will show you, here it is working, right? So here is the other thing. You have to just write an email, the API endpoint and there is a lot of processing going on from our side. You can deploy it on the GitHub pages and it will deploy it like that. So it will ask your credentials and it will go to your GitHub repository. So like a person GeekyYD has uploaded it so it will be uploaded like GeekyYD.Github.io, right? Similarly, you can host it on your GH pages, right? So just it is very easy. You just need a name of the app and you need an email. You need the data endpoint and you can upload it, right? There are a lot of things you can do with this. You can download it to your own system, right? And then you can, you can host it via FTP and you can deploy it on GH pages as well and you can share it with everyone. So already we have worked on a lot of things. So the web app you are using right now in the event is generated with this application, right? Going back to the presentation. So here we have the main thing which I'm going to cover in this presentation. How we have done the performance optimizations in this web app. We have not completed it much but we are in the progress mode. And I will brief you about what is all about this and how people are not caring about performance optimizations on the client side which should be necessary to care about. So when we talk about performance optimization, we have to understand what is critical rendering path because this is the most important stuff which people will like to know and optimizing the critical rendering path makes your websites more smoother and faster. So going forward to critical rendering path and analyzing your stuff, you should be first aware is does you really need performance optimization or you are much good. And for that you have to measure CRP that is measuring of critical rendering path. I have not marked the tool that uses CRP which can, which I can tell you right now. But the point is what is a CRP? So CRP means that how you are going to load your web pages. Are you going to load your web pages in a single load or are you making it separate? I mean what is the meaningful content you want to show to the user at first instance or what are the other things you can load it afterwards. You don't have to load it everything at the right initial load and you can make it more like this shown in the figure. Like if I'm going from an optimized progressive rendering, I'm not loading anything at 1.5 seconds. In unoptimized rendering, the whole page is loaded at 1.5 seconds only. While going to an optimized rendering, pages loaded like a nav bar and a bottom bar is loaded at 0.3 seconds while the whole page is loaded at 1.5 seconds, right? So this is the way critical rendering path behaves. Now when we are talking about critical rendering path, we come across various terms that is dome, CSS, ohm, render tree, layout and page. So your browser basically as developers never realize what is going on in the browser. If you want to know, there are various steps whenever we have our website, there are various steps inside that goes within the browser. One of these steps that is the dome construction and the dome construction itself goes through tokenizing and various things but what we see as an output is only our HTML content, right? But that HTML content is necessary for dome and then we have CSS ohm. The CSS ohm takes your style and makes a similar tree. These two trees combine together and make a render tree and render tree contains only the meaningful information, right? But between, if you have seen the HTML, there is a link tag that you always include at the header to include your styles. That link tag itself is called as a render blocking CSS because whenever the page is rendered, it requires that CSS to load first without going ahead. So it stops there and say, hey, I'm not going forward because I need CSS first and at that time, your page just loaded, right? Similarly goes with JS, the JavaScript which you insert in the script tag does not happen to take HTML forward till the JavaScript loaded first, right? So these are the performance bottlenecks we have. We have to see what are the rendered blocking CSS and the best way to say this is to use various tools available online which will help you that do you really need optimization. One of the tools is Lighthouse. Lighthouse is a Chrome plugin which you can insert in your Chrome and then after Chrome is very simple actually. You just have to pass your URL in that and it will analyze all your website and give it you what which part of the website are slower and which parts of the websites are faster. Even if you can use Google page insights which give you the whole idea about yourself, right? About your website. And so I will be taking a bit technical in JS animations and recalculation styles because without understanding these we cannot understand how the browser will work, right? So if you see the performance bottleneck and you can see the diagram on the right-hand side, the diagram says of DOM, CSS, and the rendered tree. The DOM itself is the HTML model you get always, which is a tree-like structure and the CSS is the styling you get. Even if you write CSS, you have body which have a front side of 16 pixels, right? So the browser itself understood it as a tree. Now it is the duty of the browser to combine DOM and CSS on together to form a rendered tree. This is the meaningful tree that will be used to see your web pages, right? So there are a lot of steps that are happening at the background and if you want to optimize your website, you have to go to individual steps and optimize them. And then finally have to combine them to have the performance optimization at the maximum, right? So I have some code which I can show you. And if you want, you can take it and try it in your websites which can make you make your website faster. So if you see the first line, it says style.css is loaded directly without being media-specified. It means that you want to load it every time. You don't specify which time it should be loaded and which time it should be not. Like if you see the third one, it says media equals to minimum weight of 40 e.m. Means without that, without if the page is not having a minimum weight of 40 e.m., this line will not run. And at that time, you don't need the CSS. This is very beneficial if you are working on the desktop mode or the mobile mode. For mobile mode, people use different type of styling and for desktop mode, they want different type of styling. And this works better for them too, right? The second point says finding the critical CSS. There is a man, Eddie Osmani, who is very popular in JavaScript. He's a guru of JavaScript. And he has a very good solution of finding out which CSS is good for you and which CSS you doesn't require at the first load, right? So, Eddie Osmani has suggested, had made actually a plugin called Critical CSS, which you can download it from the repository I have written here, or you can have, you can just take it from NPN. And after you have it, you can see various things which, which will help you to find the only CSS that you require, and you can remove the further things and can load it asynchronously when you require them, right? You don't have to write, you don't have to require all the CSS at the first load. This is all about CSS, but, but there are a lot of things in JS2, which make your websites slower, right? People like, people are like that, they made a lot of things, animations using JS, which can be done using CSS. They never realized that JS will stop HTML to render and will make your page slower. So here comes Jank. And this is very important, because if you, if you have explored much in the Chrome Chrome tools, Chrome Dev tools, you must have find out after inspecting the element, there is a thing called timeline. When you run control plus R from the keyboard, it refreshes the page and give you the whole timeline view where you see these red marks. Nobody focuses on them, but if you can, if you can focus on them, you will see, you will see in the bottom that there are, there are other red marks too, which are known as four synchronous layouts. These four synchronous layouts block the whole rendering that is going on because of the JavaScript and the CSS you have taken to prevent HTML load, right? And our focus, if we want to make our website faster, our focus will be to remove these red marks that are on the purple shadows, right? And if you want to do this, there should be a very, very important thing you have to remember. Every device have a refresh rate of 60 frames per second. It means one frame of that device requires you have only one by 60 time for a frame if you want to consider it as a one frame. I mean that if I am using a mobile and I want to load my website, then the website is divided into number of frames. For each frames, I only get one by 60 of the time to load, right? That comes to 16.6 milliseconds. Also, the browser itself needs six milliseconds to load the pages. So the final time comes to us to load each frame is only 10 milliseconds, right? So if you want to load your website and if you have a website with various images and various things, and each, if you consider each image as a frame, then you only have 10 milliseconds to load this. Load each image, right? And 10 milliseconds are very less. So we have to figure it out how we can do this because we have done the same things in open event web app, right? So here comes the pixel pipeline, which starts from JavaScript goes style, layout, paint and composite. So these are the five steps that browser do whenever you load your pages, right? So if you have written any styles, if you have used jQuery, then you must have written dot CSS property, which which will take it which will directly consider CSS and blocks it till the whole page loads. So if you if you have seen here, the first thing is Java script. So first thing you have to consider is never write any animations in JS. And even if you want to write it, there is a technique to write it that will request animation frame, which I will be discussing soon, right? So what happens is the JS, the browser sees the JS first, and it sees if there is any style that is written in JS file, if it is, it will block the HTML to load and says, hey, let me complete first, and I will introduce you to HTML later. And it will take around it will take around one minute to 1.5 minutes to figure it out the whole CSS constructing whole CSS on that is CSS object model again, and then the dome that is document object model model again, and then your page is rendered perfectly, right? So there that's why people people feel that the website is very slower at mobiles, because at mobiles, this makes a lot of sense to go from one page to another, right? And here is the key. So what happens is people try to use JS to change geometry of the of the objects, right? For example, I want I have a div in HTML, and I want a CSS giving it a width of this and height of this. Now I go to a JavaScript file and write, hey, now the when I click it to when I click it, the width should be 15 pixels and the height should be 30 pixels like that. So what happens is after changing the width and the height, we are very cool because we don't know what is happening. But the browser says, hey, I'm in trouble. Why why you are in trouble? Because the thing is layout goes to paint and it includes all the steps again. When you say when you change the geometry when you change the geometry to height and width only, the browser itself goes follows all the steps again, it goes to JavaScript, it calculates the styles again, it goes to layout, it builds the dome, it goes to paint, it renders it and then combine all the layers together to lead to composition, right? So your two lines change in JavaScript file leads to the browser in trouble because now it have to calculate all the things again, right? Now if you are changing only the background color or the simple color by using JavaScript that comes under paint, right? Then you are not doing anything wrong in layouts because now you are considering only two steps. The one is the paint and the next is the composite, right? The paint itself only raster the pixels on the screen and the composition because these pixels are raster in different type of layers, the composition combined these layers together to give you the whole layout, right? So I will suggest if you are if you want this one, people may ask, hey, if I want to change the layout using JavaScript, then what is the best way? Because you said that if you change it the geometry, then it will take the whole steps again and make it slower. So if you want to change the layout, there is a thing in CSS called position absolute. And in position absolute, the layer of the layer of the page goes above this. For example, if I use position absolute in a static page, there is another layer that the browser interviews above the page and if you change the layout then only the HTML written in that layer will get affected and note the whole page, right? So instead of using position static or position relative, when you are calculating the layout, it is always suggested to use position absolute, right? And that's how you can save this trouble. Another thing is using the paint, right? So paint is very if you are just doing paint that it is quite normal and okay because it will not affect much. But it is always beneficial if you can do it in CSS only rather than considering the JavaScript part. Going forward to compose it. So composite is very flexible. So if you are doing nothing in JavaScript, I mean if you are not linking any CSS with the JavaScript right now, if your JavaScript is just JS and not including any .css or something like style changing, then you are the browser will shift you towards the composition and it will not do anything. And that's make your pages faster, right? But now the question arises, if you want to introduce various animations in your website, then you cannot do using it only the CSS, right? You can do it. But if you want to do it, it at a much greater level at a much advanced level, then you must be requiring JavaScript. And that's why the people introduced this that is called request animation frame, right? You just need to write a function that is of any name. Here I have written it as repeat often, you can write it any name, you can take it as any name. And then you have to call request animation frame and pass this function. This has already been developed in JavaScript and it will optimize your stuff, optimize as maximum as it can and take you to the another level, right? Now, so now considering that if you have a lot of images in your website, then how you can improve it further, right? So the web app improvements for images, what we have done is we have used lazy loading. The lazy loading features allow you to load only those images that are required and not the one that are not in the viewport, right? For example, if I want the images at scroll, for example, if you see the current website we have in action now and you go to the speakers page, you will not find every image loading at first, right? Previously in the previous version, what was happening is if the speakers are 200 and if you refrigerate the website, the 200 request calls goes to the server and it will load 200 requests, 200 images together and this takes around 1.25 minutes on the first load. But now we have done is we load only 12 images, 4 in the viewport and 8 that are not in the viewport because, for example, if a user scrolls it slowly, it will see the images, right? So we introduce only 12 images request out of the 212 and if the user scrolls down, we again send the request and load the images, right? So there are some snapshots which I want to show at the end. So here it was in the previous versions, if you can see at the previous version where we were loading all the images together, 23.8 MB data was transferring on the images only and the document content loaded was in 5.52 seconds here at the blue marker and also the 203 requests were passing on but now considering after lazy loading from the 203 request, it has reduced to only 22 requests and if you scroll down it further, it will take you 22 requests more and if you scroll down it to the bottom, it will complete the 222, right? And 204 actually here, right? So also if you see that finish time was 1.7 minutes earlier which have includes now 2, 3.48 seconds at the first initial load, right? So this was the major change after the lazy loading we have figured it out for the images in it. Other thing one person has contributed yesterday is the Gulp integration and what he has done is he has taken all the things together like the minification and all we have done compressing the images, scaling the images minification and he has done it through Gulp. Gulp is a trust runner that that automates your stuff, right? You have to write tasks and you have to just call one command Gulp serve and Gulp serve run through each command, each task and will make your life easier. So before Gulp, the Google page insights score was 75 out of 100 but after Gulp it is now 90 out of 100. So this is also a major change we have done right now, right? So if you want to go to the pull request you can see how the person has made the change because I have shared the link here too, right? So every slide you have you have a link, right? So this is all by my side. If you have any questions you can ask. Thank you. Any questions? Yeah. Just in the end you mentioned the Gulp changes. Yeah, yeah. And somehow you score but I've Gulp is a task runner. So yeah, so it is very interesting to know that we can do various things in Gulp. Like in speaker's page there there are all five pages here in the website of Forsesha if you can see. What we have done is we have combined all the pages together and minifies its HTML, right? The first change was the HTML minify. The second change is to CSS minify. The third change is to scaling the images. The fourth change is to compression of the images, right? Finally what we have done is we have run through all the compression techniques again. We have used jzip optimization technique where you can compress your data and make it more, make it a less flexible, right? So you have this zip together that was around 12 MB earlier. Now it goes to around 8 or 9 MB which you can download, right? So the scaling of the images and the compression of the images is all done by girl. So the compression is a jzip compression, yes. Yeah, so you can say that but you know no no no. So what happens is we compress images, right? So each image so there are 200 speakers, right? So we have image of around 1.2 MB and what we have done is we come we take the image, convert it to JPEG first, right? From PNG to JPEG that is already done by girl and then we compress it again by running a girl inbuilt compressor that reduce it only 40 to 50 kb each image but if you count 200 wise that it will be a major change, right? So for each image if it is 40 kb then if there are 200 and 500 tomorrow that it can make a huge change. Yeah, so this was any other questions? Yeah. The image is less Yes, no, it's yeah, yeah, yeah, exactly. Yes, so how do you do that? So if you can see here I have shared, I don't know if I have shared but I can tell you lazy loading is there is a JavaScript library known as lazy loading.js, right? So what happens is it just load the images that is in the viewport, right? So it calls an action when you scroll down. So on the scroll event of JS it calls the images that is in the viewport to take the load. So what happens is if you see if you have seen the HTML tag IMGSRC, so just basically if I go to basics in SRC you have to specify your path, right? The image path in which it is in the local system or the server, right? But what lazy loading does is it make a pseudo attribute known as dataSRC, right? That is in the HTML. So it takes all your paths dataSRC equal to the path rather than taking it to SRC. When you when you scroll down it takes that dataSRC path and copied it into the SRC and that makes their image rendering possible, right? Right? So this is the whole stuff, yeah. So the web app is basically consists of two approaches. One is the web app generator that is using Node.js for the automation purpose as I told and the second is the web app itself that uses jQuery and handlebars basically, right? And the bootstrap to make it more responsive. Thank you.