Jen Buzza: 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 Ivailo, he’s coming in hot, he is the founder and CTO of NitroPack, so happy that you are here with us, hi.

Ivailo Hristov: Hi.

Jen Buzza: Wonderful, thank you for being here and for walking us through this, everybody is sitting on the edge of their chair, really excited about this, glad you’re here.

Ivailo Hristov: Thank you, yeah, strap in, because we’re going to go fast. Okay, so just a quick intro, my name is, as you already mentioned, I’m with NitroPack, the CTO of NitroPack, and at NitroPack we do site speed performance, so we’re going to have a quick session about performance and go over a few websites, see how they fare and how we can optimize them.

The general structure of this is I’m going to try to leave some room for Q&A, because I find Q&As to be very helpful and interesting and fun. We’re also going to go over how to differentiate and interpret results from RUM and from lab, so these are the real user metrics and also the lab metrics, 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 drop them in the chat and I’ll try to answer as much as I can.

Jen Buzza: Perfect, thank you.

Ivailo Hristov: All right, so we have a few websites already loaded, and we’re going to be using the Google PageSpeed Insights tool for looking at the performance of these websites, for two main reasons. As I mentioned, RUM is very important, and RUM actually stands for real user monitoring, so this is data that is actually collected from the devices of your visitors, this is how they actually experienced your page.

The PSI tool is 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 data here, so this should always be your first thing to look at and your starting point, and this is how you identify areas where you can improve and which areas you want to improve first. It is possible that everything is looking nice, and that’s also a good thing, because it means even though you might have areas for improvement, you can still be delivering very good results and performance to your visitors, which is what’s going to matter at the end of the day.

The lab performance score and results are something calculated in a specific environment under specific conditions, with some mathematical formulas applied to the end result to estimate how things are going to look in the real world, but it can never be an exact match, the results can sometimes be wildly different. That’s why Google is investing in these Core Web Vitals and real user monitoring, so they can give you a way to measure what is really happening with your website, and this is what Google is actually taking into account when ranking your website, it’s not looking at the lab results.

So here in PSI, just to give you an overview, it’s divided into a few sections, and this first section at the top is the real user data, this is the Core Web Vitals assessment for the website, it is available when you have sufficient traffic, which is an undisclosed amount. Below that you get the lab results, so this is what you get from the specific lab environment running the test, you can always get 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 your website, this could be empty, and this is all you can rely on. I would also like to go over the different metrics, how to interpret them and what they mean, and then how to fix them.

So starting with this specific website, we can see that it struggles somewhat with LCP, with INP, and with CLS, which are actually the three Core Web Vitals. These three metrics form your final assessment for Core Web Vitals, and you can be either failing or passing the assessment, and in order to pass, all three of these individually should be in the green zone. LCP measures how fast the main content of the website is displayed to the visitor, and it’s considered good if you’re able to display this under 2.5 seconds, that’s how you’re going to be in the green zone.

The next one is INP, which measures how quickly your website can respond to interactions, another very important factor for the overall user experience, INP is good if it’s under 200 milliseconds. The goal is to not have the user click on something that should do an action, let’s say they click a button that should open a popup, the popup should open within 200 milliseconds, otherwise it’s going to be in the orange or red zone.

The last metric is CLS, which again is focused around user experience, it measures how visually stable your website is, so the lower the score, the more visually stable your website is. This metric is aiming to give you a way to know whether your website is causing frustration when users are browsing, your website should load and all elements should be positioned where they need to be from the very beginning, there shouldn’t be any repositioning of elements. This metric doesn’t have any unit, so it’s just a number, and you want it ideally to be zero, the limit here is 0.1.

Now that we know this, we can also go over the metrics on the bottom, which are also important. FCP and FID are related to what they’re positioned below, FCP is a sub-measurement of LCP, this is the first contentful paint, the first thing that paints on your website, and FID is the first input delay, but FID is kind of being deprecated because it’s already within the measurement for INP.

The last one, which is a very interesting metric, is time to first byte, this is very closely related with LCP, because LCP is a multi-stage metric, it takes into account different stages of the loading of your web page, and time to first byte is entirely included within LCP. So the lower you can get this number, the lower you can get your LCP, for this website we can see that time to first byte is 1.4 seconds and LCP is 3.9, if we’re able to cut this in half, say make it 700 milliseconds, we’ll be able to shave off 700 milliseconds straight off, putting us at 3.2 seconds right away. So it’s really nice to pay attention to your time to first byte, because there are more ways to deal with this in fairly automated ways, you should be looking at caching, probably a CDN, edge caching, and you can really gain some speed with this one.

Jen Buzza: We do have a question from the chat, I just pinned it here, so what’s the difference between this and Google Analytics?

Ivailo Hristov: So it depends on what you’re looking at in Google Analytics, because for example this is kind of embedded in Search Console. I haven’t looked at Analytics recently, but previously it used to be somewhat similar with Google Analytics, the nice thing is that it’s more granular and you can look at shorter periods of time, let’s say you want to see how things are faring for the last 24 hours or the last week. A quirk with these CrUX measurements is that you are always looking at a 28-day rolling number, this is the 75th percentile, so that means out of all your visitors they are sorted from the quickest, lowest number to the highest, if you have 100 page views the 75th percentile is going to be at position 75, and this is what the number is picked there, so it’s kind of a weird formula. But with Analytics you can slice the data differently and graph it and get different percentiles.

Jen Buzza: Got it, wonderful, thank you.

Ivailo Hristov: And also, it is possible to collect this RUM data from different third-party providers, it’s not needed to use Google, and if you are just starting and don’t have sufficient traffic, it’s actually a nice idea, because you will not be seeing anything here, but if you use a dedicated solution you’ll be seeing the data for every single page. And that’s actually one of the things we’ve been working on in NitroPack, so it’s very interesting and gives you a real view of what’s happening with your website.

So yeah, I feel like I’m taking too much time on this, let’s move to the lab tests, and as I mentioned these lab tests are not always reflecting the experience of your visitors, but it’s a consistent thing, so it’s very important, once you figure out what you need to improve, you can rely on these to produce fairly stable results, and you can then make changes to your website and see how the measurement changes. So let’s say for this website we see that it’s estimating a large LCP, it’s not reflecting reality too well, but still we know we’re struggling with LCP and we want to improve it.

So we’ll be doing some iterations and updates, and after each update we can run a new test with this analyze button, this is going to analyze the website fresh, and we’re going to see whether we made things better or worse, and you can do this with any metric, that’s the nice thing about lab instruments. There’s a lot of these tools, PageSpeed Insights, GTmetrix is very popular, Pingdom, WebPageTest, you name it, but just be mindful that you need to use this for iterating when trying to improve your website performance, and when you’re happy with the changes, let’s say you bring this down to nine seconds, you can then leave it for a few days and measure your real user data to see how this actually affects your real visitors.

Going slightly further down on this page, we can see the different loading stages for this website, and this can often help us identify certain issues. For this website we also see we struggle with CLS, and this value, which is 0.5, roughly means that the content moves about half 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 half the height of the screen, so that’s how this number is calculated.

We can see that something happens here, this gives us a direction of where to look for problems, what’s loading here, is it an ad, is it a popup or message we want to convey, and when you figure out what it is you can figure out a way to make it load where it should be from the very beginning. A common issue is that your website renders something initially and then your JavaScript starts loading, things are trickling in, and other elements start loading at a later point and they’re moving other elements on the page, shifting around, and this is a bad user experience you should aim to remove. Typically you will set up a placeholder for this, so even in the initial render your website will have the placeholder, for example if this is for an advertisement you can later put your advertisement in that placeholder and everything else remains visually stable, so this is a better user experience than showing the website like this initially and then shifting it.

Jen Buzza: Awesome, Ivailo, we have about six or seven minutes left, so this has been really, oh really, yeah, time is flying.

Ivailo Hristov: Yeah, okay, cool, I would like to show you some other examples of things you should be looking at before the time runs out. For this website, something I wanted to point out is that some metrics are actually not always collected, for this website for example we don’t have INP, this is perfectly normal so don’t get alarmed if you see something like this, but it’s also an indication that either no interactions are happening on your website, or if they’re happening there’s probably an issue with collecting the data, typically you want to have interactions, so you might be thinking about why people are not clicking around the website.

And also for this website, this is a very good example of the difference between lab measurements versus real user measurements, you can see how this website is loading actually very quickly, LCP, CLS, everything is very good, time to first byte very good, but down there in the lab test you can see the score it gets is actually very low. This is because the lab score is calculated from a formula, so it’s an estimate, and for this specific case the fact that it has a low score doesn’t really correlate with the user experience, people are having a great time browsing this website, but we can use the lab results to figure out what to improve.

When we’re looking for what to improve, we also get this area down here which helps us with information for what might be going wrong, for this website for example, let’s say we want to optimize the LCP, we can see the LCP element and when it started loading, with this load delay section we see that it starts loading quite late in the page life cycle. That’s an indication that there’s either a lazy loader in place or some other script running that’s blocking it, so look into ways to unblock this, use resource hints, and for optimizing LCP especially focus on your main images, that’s a common issue, make sure this main image is loaded as early as possible. That is the main information I wanted to provide, and the rest of the examples are just more of these things, so I would like to give a little bit of time to answer some questions, so maybe, Jen, do you know if we, yeah?

Jen Buzza: So, how do we fix page speed, and just some general questions around some quick fixes for this?

Ivailo Hristov: Yeah, the reason why with these talks it seems like we’re always talking general things is that it really depends, for each and every case it’s different, but mostly it falls into some common patterns. LCP is one of the things that’s typically harder to fix and most commonly sites are struggling with that, so for LCP, just look at your time to first byte and try to make this, like we saw in this example, half a second is a great time to first byte, make sure you have this and it’s stable, and then move on to improving how you deliver images, try to ship optimized images, do not ship a lot of HTML, a huge DOM.

Be mindful with CSS, because we all know that today our pages typically require a lot of styling, but a lot of styling, especially if we’re using automated tools for building the pages, can lead to a lot of CSS bundles, and this is very resource-intensive for mobile devices to parse those files and figure out how they affect the page layout and browser performance, so try to be minimal with this, pick a good team, pick a good builder.

Jen Buzza: And not to interrupt you there, because I want to go off of what PK was saying in the chat, this is complicated stuff, this is what you do for a living, you’re the professionals, this is not something you pick up one day and know how to do all of it, it’s very complex, so we really do appreciate you coming in and pulling back the curtain and showing us some of what this looks like on how you can improve the performance of your website, we’re talking about, you get the traffic in, how do you convert the traffic, so I really appreciate your time, Ivailo, thank you for being here and going through these sites, this is big stuff.

Ivailo Hristov: Yeah, one thing I just want to add is that for many of these problems there are automated solutions, like NitroPack, that are trying to help you in this, because as you can see it’s a lot of things, a lot of cases and ways to optimize your web pages, and I do believe the way to go forward with this is with an automated solution, because otherwise you will be spending most of your time constantly trying to reoptimize things. Even 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 you might want to install something new, and this changes everything and you have to start all over again, or some new technology comes in, so I do believe it’s just better to go to automated tools, these tools have teams working on ways to optimize this.

Jen Buzza: Yeah, and this doesn’t have to be your job, if you’re interested in it, it’s a nice job, but if you have other goals you want to achieve, I think you should be looking into tooling and automating. I love it, and that’s the perfect note to end on, Ivailo, 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 do have another session coming up which is really exciting, another expert panel on a UX-driven route to maximizing your conversions. So thank you, Ivailo, 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. Don’t forget about the leaderboard contest, whoever can comment the most, we’ve got a $150 gift card to Cloudways. So thank you, Ivailo, thank you so much for being here, and have a wonderful rest of your day, and the rest of you, we’ll see you back in just a minute, bye everyone.