we are live and this is so exciting we are going to be doing this most amazing website performance consultancy we are going to be looking at the websites that you all have submitted with our professional at hand we’ve got evalo he’s coming in hot coming in it’s exciting y’all he’s coming in he is the founder and CTO of nitro pack hey there he is so happy that you are here with us hi wonderful thank you for being here and for walking us through this everybody is sitting on the edge of their chair really really excited about this um glad you’re here thank you yeah strap in because we’re gonna go fast okay all right all right so just a quick intro so my name is uh I as you already mentioned I’m uh with naturop Pac the CTO of naturop Pac and uh at naturop Pac we do site speed performance uh so we’re going to have a quick session about performance and we’re going to go over a few websites see how they are fair and how we can optimize them um so the general structure of this is I’m going to try to to leave some room for Q&A because I find q&as to be very helpful and very interesting and fun so uh we’re also going to go over how to differentiate and how to um interpret results uh from run and from lab so the these are the real user matrics and also the lab metrics so I think it’s very important to know the difference there so we’re going to spend a little bit more time on that and if you have any questions just uh drop them in the chat and I’ll try to uh answer as much as as much as I can perfect thank you all right um so let’s see um we have these websites now okay so we have a few uh websites already uh loaded and um we’re going to be using the Google Bas P insights tool for uh looking at the performance of these websites because two main reasons and as I mentioned R is very important and rum actually stands for real user monitoring so this is data that is actually connected collected uh from the devices of your visitors so this is how they actually experienced your page and um the PSI tool is uh the one tool that can actually give you this information for free out of the box you don’t have to do anything if your website has sufficient traffic you will have uh data here so this should always be your first uh kind of thing to look at and uh your starting point and uh then this is how you identify areas where you can improve and which areas you want to improve first uh it it is possible that everything is uh uh looking nice actually and that’s also a good thing um because it means that your even though you might have areas for improvement of of your website um you can still be delivering very good results and performance to your visitors which is actually what what’s going to matter at the end of the day so the lap performance score and the performance results um they are something that is calculated in a specific environment with under specific conditions and there are some mathematic for formulas applied to the end result to estimate how things are going to look like in the real world but um you can never be uh an exact match or uh the results can actually sometimes be wildly different so that’s why also Google is uh investing in this cor Vitos and the real user monitoring uh so they can give you um kind of a way to measure what is really happening with your website and this is what Google is actually taking into account um when when they’re ranking your website and when they’re looking at the performance of your website it’s not actually looking at the the lab results so here in PSI uh just to page P insights just to kind of give you an overview of what we’re looking at it’s divided into a few sections and this first section right over here in the top is the real user uh data and this is the cor vitals assessment for the website it is available when you have sufficient traffic which is an undisclosed amount of uh traffic but uh this is how it is and um below that you get the lab results so this is what you uh get from the uh um the specific lab environment that is uh running the test so you can always get uh actually results from Lab but if you don’t have enough traffic this section can be empty so if you’re just starting a business or just starting your weite this this could be empty so you this is all um that you can rely on um and I would also like to go over the different metrics and what how to interpret this what they mean and then how to fix them all right so starting with this uh specific website uh we we can see that um it has kind of it struggles some somewhat with LCP with inp and with CLS which are actually the Three core web vitals so these three metrics uh form your final assessment for core vital and you can be either failing or passing the assessment and in order to be passing all of these three metrics individually each one of these should be in the green zone so these measure different uh um kind of performance and user experience um kind of numbers and uh they have different thresholds so LCP is the thing that measures how fast your main content of the website is uh displayed to the to the visitor and it’s considered good if you are able to display this under 2.5 seconds um so this is how you are going to be in the green zone and uh the next one is inp which is a metric for uh measuring how in how quickly can your website respond to interactions so that’s also another very important factor for measuring the overall user experience of your website um inp uh is good if it’s under 200 milliseconds so uh it the goal here is to not have uh the user click on something that should do an action let’s say they click on a button that should open a popup the popup should open within 200 milliseconds otherwise it’s going to be um not in the green zone and you can go uh in into the orange or the the red zone here so uh last the the last metric is CLS which uh again is focused around user experience it measures how stable uh how visually stable your website is so the lower the score uh your the more visually stable your website is so this metric is kind of aiming towards um giving you a way to know where whether your website is um causing kind of frustration when users are uh trying to browse and use your uh your pages your website should load and all of the elements should be positioned um where they need to be from the very beginning there shouldn’t be any repositioning of elements changing because this thing happened that thing happened um so if everything is stable you are going to have a low score for this this metric doesn’t have a uh any kind of unit so it’s just a number and you want it to be ideally zero so the the limit here is 0.1 um so now that we know this um we can also go over those metrics on the bottom that they’re also kind of important so FCP and uh FID are also kind of related to what they are uh positioned below so FCP is kind of a sub measurement of LCP this is the first content for paint so the first thing that paints on your website is um measured by this metric and then FID is the input delay but f is kind of being dicated because it’s all already within uh the measurement for inp and last which is very actually interesting metric is the 10 first bite this is uh um very closely related with LCP because LCP actually can it’s a multi-art metric so it multi-stage metric it has um takes into account different stages of the loading of your web page uh to form the final result and time to First buy this uh entirely included within LCP so the lower you can get this number uh the lower you can get your LCP so if this uh for this website we can see that time first bite is 1.4 seconds and LCP is 3.9 if we are able to uh cut this in half so let’s say make it 700 milliseconds we’ll be able to shave off 700 milliseconds straight off of here so this is going to put us on 3.2 seconds right away so it’s really really nice to take um a look at this and pay attention to your time first bite um because optimizing it is also uh becoming more um there are more ways to to deal with this in a in a in a fairly automated ways so uh you should be looking at your uh at caching at probably uh CDN for your websites and Edge caching things like that and uh you can really really gain some uh speed with this one we do have a question from the chat I just pinned it here yep so what’s that difference between this and Google analytics so depends on what you’re looking at Google analytics but um uh because for example this is kind of embedded in search console for analytics uh it’s also uh actually I I haven’t uh looked at Analytics uh recently but previously uh it used to be somewhat similar with Google analytics the ni nice thing is that it’s also kind of more granular and you can look at uh shorter periods of time so let’s say you want to see how things are fairing for the last 24 hours or the last uh week whether um kind of a quirk with this uh Crux measurements is that you are always looking at a 28 day um see rolling number so this is the What’s called the percental number the 75th percentile uh so that means out of all of your visitors they are sorted uh from the the quickest the lowest number to the highest number uh it’s calculated like they figure out what is the uh let’s say if you have 100 page views the 75th perc is going to be the at uh position 75 and it’s this is what the number is picked there so it’s kind it’s kind of a weird formula yeah but with okay analytics you can get a more uh kind of you can kind of uh choose a different way to slice the data and to uh to graph it and to get different percentiles things like that got it wonderful y thank you uh and also it is possible to collect this rum data from also different third party providers it’s not uh uh needed to to use Google and if you are just starting and you don’t have sufficient traffic it’s actually a nice idea because um you will not be seeing anything here but if you use a dedicated solution for this you will be seeing the data for every single Pages excellent and actually that’s been one of the things that we’ve been working with uh we’ve been working on in in Nitro pack so it’s very interesting and gives you really uh you can really see what’s happening uh with your website wonderful so yeah uh I feel like I’m taking too much time on this so yeah let’s let’s do it let’s yeah we’re going to move um to the lab tests and as I mentioned these lab tests are uh the things that is not always reflecting your uh how your the experience of your visitors but it’s a consistent thing so that’s why it’s very important once you figure out what you need to improve you can uh you can kind of rely on these two to produce uh fairly stable results and you can then do changes to your website and see how the measurement changes here so let’s say for this website we see that uh it’s estimating a large LCP as we can see it’s not reflecting the the the reality to very well but still we know that we are struggling with LCP and we want to improve it so uh this is what we’ll be looking at we’ll be doing some iterations on our website uh and some updates and we can run after each update that we do we can run a new test with this analyze button this is going to analyze the website uh fresh and we’re going to see whether we actually made things better or worse um and you can do this with any metric and that’s the nice thing about uh lab instruments we have a lot of these you’re probably familiar with a lot of tools uh there’s Bas pit inside there like GT Matrix is very popular like pingdom everything web page test you name it um but just be uh mindful that you need to use this for um iter when you’re iterating and trying to improve your website performance and when you’re happy with the changes that you’ve done let’s say you bring this down to 9 seconds uh after a thing that you did you can then leave it for a few days and then measure your real uh user data to see how this actually uh affects your uh the experience of your real visitors and um slightly uh going slightly further down on on this page um we can see the different loading stages for these website and this can all uh um often times help us identify certain issues and we’re going to see this in in the few other examples but for this website we also see that we struggle struggle with CLS and this value uh which is 0.5 roughly means that about uh the content moves about the uh half of the height of the screen and we can also see this in the filmstrip here you can see how this website loads initially and then something happens and the content is shifted about the half of the height of the of the screen so that’s how this number is actually calculated and what it means and we can see that something happens here this gives us a direction of where to look at for problems what’s loading here is it an add is it a uh some kind of a popup or message that we want to convey to the user uh what is it and when you figure out what is it you can figure out a way to to make it load uh where it should be from the very beginning uh common common issue is that uh your website renders something initially and then your JavaScript starts loading uh things are trickling in and then uh other uh things and elements start loading at a later point and they are moving other elements on the page they’re kind of shifting around and this is uh actually a bad user experience and you should aim to remove these so uh there are a few things that you can do typically uh you will set up a placeholder for this so even in the initial render your website will have the placeholder that for example if this is for an advertisement you can uh later put your adver advertisement in that placeholder and everything else is going to remain visually stable so this is a better user experience than showing the website like uh this initially and then shifting it uh shifting awesome IIA we have about six seven minutes left so this is this has been really oh really yeah time is flying yeah okay so cool I guess uh I would like to also show you some other examples of things that you should be looking at before before the time runs out and uh for this website is uh also something that I wanted to point out is that some metrics are actually uh not always collected and for this website for example we don’t have inp this is perfectly normal so don’t get alarmed if you if you see something like this um but also it’s an indication that either no interactions are happening on your website or um if they’re happening there’s probably an issue with collecting the data but typically you want to have interactions so you might be thinking about why people are not clicking around around the website um and also for this website you can see that this is a very good example of the difference between lab measurements versus uh uh real user measurements you can see how this website is uh loading actually very quickly LP CLS everything is very good time first bite very good uh but down there if you just want to lab test you can see that the score that it gets is actually very low uh so this is because this the lab score is again uh kind of calculated from a formula so it’s an estimate and for this specific case uh the fact that it has a low score doesn’t really correlate with the user experience and people are having a great time bring this website but again we can use the lap results to kind of figure out what to improve there and when we’re looking uh for what to improve there we also get this area down here which helps us a little bit with uh information for what might be going wrong and for this website for example we can uh see let’s say we want to optimize the LCP which is actually the LCP element uh when did it start loading so so for example with this load delay section we see that it starts loading um quite late in the in the page life cycle so that’s an indication that there’s either a lazy loer in place or some other script that is running that is blocking it so look into into ways to to unblock this um use resource hints things like that uh for for optimizing kcp especially focus on your main images that’s that’s a common common issue uh make sure this that this main image is loaded as early as possible um that this is kind of the main uh kind of information that I wanted to provide and the rest of the examples are just more of these things uh I would like to just give a little bit time of time to answer some questions so maybe uh Jen do you know if we yeah so so how do we fix page speed and um yeah so just some general questions around around um you know some some quick fixes for this yeah um the it really depends the the reason why we uh with these talks we we are always kind of uh it seems like we’re talking General things is that it really depends on on on the for for each and every case it’s it’s different but mostly it falls into some U common patterns uh LCP is one of the things that is typically harder to fix and most commonly sites are struggling with that so lcps I mentioned just look at your time first bite and try to make this um uh like we saw in this example like a half a second is a great time to First Bite make sure that this you have this and this is stable and then move on to uh improving like how you deliver images try to ship uh um like optimized images do not ship like a lot of HTML like huge Dome um be mindful with CSS because we all know that today uh our Pages typically are require a lot of styling but a lot of styling especially if we’re using uh automated tools for building the pages can lead to a lot of CSS a lot of CSS bundles and this is actually for mobile devices is very very uh resource intensive to par those files and figure out how they affect the page layout and the the browser um performance so try to be minimal with this pick a good team pick a good Builder well and and not to interrupt you there because I I want to just um go off of what PK was saying in the chat um this is this is complicated stuff I mean this is this is what you do for a living right they’re you’re the professionals this is not um you pick it up one day and you know how to do all of it I mean it’s very complex so we really do appreciate you coming in and kind of you know pulling back the curtain and showing us um some of some of what this looks like on how you can improve the performance of your website um and how you know we’re talking about you get the traffic in how do you convert the traffic right so I really appreciate your time AOS thank you for being here thank you for coming in and going through these sites um I really appreciate it and and yeah this is this is this is big stuff yeah one thing that I just want to add is that for many of these problems there are automated Solutions like like Nitro pack that um are trying to kind of help you in this because as you can see it’s a lot of things it’s a lot of uh cases and uh ways to optimize uh your web pages and I I do believe that the the way to go forward with this is with an automated solution because otherwise you will be spending most of your time just constantly trying to reoptimize things uh even though you if you decide to do it yourself manually you can do it today and tomorrow there’s going to be an update to some of your plugins or something or you might want to install something new this changes everything and you have to start all over again uh or some new technology comes in and it’s uh I do believe it’s just better to it to um automated tools and to these tools they have teams working on uh just ways to optimize this yeah and um you you this doesn’t have to be your job um if if you’re yeah it’s if you’re interested in it it it’s a nice job but yeah if you have other goals and you want to achieve them I think you should be looking into tooling and automating I love it and that perfect note to end on ailio thank you for your time today everybody watching we do have a survey running always it helps us improve what we bring to you we’re so happy to be here and we’re so happy to be with you all we do have another session coming up which is really exciting another expert panel y’all on ux driven route to conversions to maximizing your conversions so thank you all ailio thank you so very much it’s wonderful to have you here today much appreciated and everybody watching we will be back shortly with another expert panel and we’ll be closing out the day with that so thank you all for being here don’t forget about the leaderboard contest where whoever can uh comment the most and be in there we get a $150 gift card to cloudways so thank you allo thank you so very much for being here and um have a wonderful rest of your day and the rest of you yeah the rest of you we’ll see you back in just a minute yep bye everyone wonderful thank you for