How to Understand & Use PageSpeed Insights to Optimize Your Website

PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices and provides suggestions on how that page may be improved. In this video, I’ll share with you how to leverage the PageSpeed Insights tool to understand how your pages are performing and what you can do to optimize them.

Video Transcript:

In this video, we’re going to be looking today at Google’s page speed insight too and how we can leverage this tool to optimize our site for both the search engines, as well as better user experience. All right, let’s go.

All right. Let’s look at how to understand and use page speed insights to optimize our websites.

Why is Page Speed Important?

So why is page speed important in the first place? Well, on June 15th, 2021, the page experience update began rolling out across the web globally. It was completed in August and it really includes all the aspects of how a user would interact with a webpage, as well as how well it meets their expectations in those.

These are things that Google is now taking into account when it comes to search ranking. Here are some of the key aspects of this page experience update:

• Loading time: How fast does your website load? How fast does that main content get in their view?
• Interactivity: How long does it take for a user to actually engage with your page?
• Visual stability: Is the page stable, or does things move around as it’s loading and create this kind of weird experience?

Those three things Google’s looking at very closely and they play a big role when it comes to search algorithms and ranking your site and making sure that you meet the expectations of your end user.

How do We Check Our Page Speed?

So how do we check our page speed? You can do this in a few ways.

The first way is to go into search console and eventually through a number of clicks, you will get over to page speed insights. So these tools have been grafted or integrated together. This is the page experience like box within Google search console, and we’ll take a look at that in just a minute. It breaks it down, how your page is performing, as well as shows you what are called core web vitals, which obviously you can see here, there’s some that this site needs to have addressed on it.

Google’s given us some tools that allow us to see how our pages are performing when it comes to speed and engagement interactivity. They’re even giving us some tips on how we can improve those pages. So page speed insight is really the tool that does this for us. They perform both on mobile as well as desktop, and they give us suggestions on how these pages could be improved. Exactly what I was just saying. You can read more about it at developers.google.com.

It’s a pretty simple page. You just pretty much type in a URL and hit go. That’s how it works. As you can see here, you can either go directly to the page speed insights tool, and you can just type that URL and hit analyze, or you can look at core web vitals, inside of the Google search console. You’ll be able to select a page like I’ve done right here, and then up at the top, it’ll say the URL, as well as a link to page speed insights, which will then launch this page over here. So there’s a few ways that you can get into page speed insights, but running the analysis is relatively easy to do so.

Understanding the Results

How do we make sense of all the data? If you’ve run one of these tests before, there’s usually a lot of information on them and it’s not always really clear, what it all means and how we really should interpret this. So let’s take a look at how we can break down this page speed insights report, so we can actually use it.

It starts at the top. And at the top, you’ll notice two things, you’ve got mobile and desktop. So you can look at your speed on both instances. Now Google is mobile first, so prioritize mobile, in my opinion.

Now, one thing you’ll notice is most of the time, your sites going to perform much better on desktop. There’s a lot more lenient requirements when it comes to desktops, but since most people are searching on mobile today, especially when it comes to consumer side of things, Google is really, really hammering down on mobile, and that’s why they’ve shifted to a mobile first index. So your score is based out of 100 and right below it, you’ll see that your score is in this case, 18 out of a 100, so it’s a failing grade. And then it’ll tell us why this specific page is failing.

Now, right under this, you’ll see a number of sections with some information. You’ll see the field data, you’ll see origin summary and you’ll see lab data. Now this one can be pretty confusing. And honestly, it was something that I was confused about until I started digging a little bit deeper.

Field Data

So starting with field data, this is a historical report about a particular URL and how it’s performed over time. In this case, you’ll see that Chrome didn’t have enough of sufficient real-world data, to give us any field data on this page, but if you’re a larger website, more often than not, you’re going to have this data to work with, which will tell you how this specific page you’re scanning and in this case would be the homepage of this website, has performed over time.

Origin Summary

Now, right below that is what’s called the origin summary. Now the origin summary is an aggregation of all pages served from this origin. So it’s not just looking at this specific page, it’s looking at all of the pages, and it’s an aggregate view of all of those. Now, one of the things that’s confusing about this is I think a lot of people come here and they look at origin summary and they assume that this is the score for their page. That would be an incorrect assumption. In order to see how this specific page has been performing.

Lab Data

You actually have to go down to the lab data, and this is the data that’s being pulled, that will show you exactly how your page is performing, and will even tag your core web vitals here as well, which we know to be largest contentful paint, as well as cumulative layout shift. If you want to know more about core web vitals, we’ve got another video that we’re going to link to in this one that you can check that out and go a little bit deeper within those metrics. The most important thing to understand right here is the results you want to pay attention to is the lab data.

Taking Actions

So right below all of our lab data and our actual score, we’re going to see some opportunities and diagnostics. Now, the first thing that we see is this flow chart here of how your site is actually loading within Google, how’s Google seeing this in real time? Now this happens relatively quickly for most websites, but it’ll take this screenshot, blank, blank navigation, and then you’ll start to see different elements load in the page, as it become available to the crawler. Now, as you can see, these two blank pages mean that there’s a little bit of a lag here.

And so Google is not able to get to the content until this fifth frame here, which could present some issues when it comes to crawling. Now below that, we have both opportunity section and below opportunities is diagnostics.

So opportunities, these are going to look at things that you can do to help load your page faster. And diagnostics is going to be a deeper look at how you can improve the performance of your application itself.

Let’s take a look at one of these reports in real time, and talk a little bit about the common issues that we see, and some of the things that you can do to solve those.

Page Experience

Two ways to look at the performance of your website. One of those ways is right within search console, where we can look at page experience. Now the page experience homepage will tell us the number of good URLs, so these are URLs that have a good status in core web vitals, and then the impressions along with that. Now, if we go below here, we’ll see some other signals that are related to page experience like core web vitals, mobile usability, as well as HTTPS in security.

Core Web Vital

If you go into your core web vital sections, it’ll actually call out the pages that are having some issues. So you can see both the positive pages, the pages that are good, the ones that need improvement and the ones that are having issues, just by clicking on these different boxes.

So we’ve got some pages here that are having some speed issues. They’re taking longer than four seconds to load. We need to adjust those, so let’s take a look at what they are. Now typically, it’s going to give you the largest defender and that’s it, not a whole list of pages, but if you click on, it’ll say, “Hey, here’s similar pages.” So if you look, they’re all blog pages, which means they probably all have some similar issues that could be fixed one time on the site, and then address all the issues across the board.

Page Speed Insight Tool

If I go up to the top here, I can just go ahead and click page speed insights, and it’ll launch the page speed insight tool with the URL I had inside of search console. This can take a few minutes to load. It just really depends on your internet speed and the size of your page and a couple of other factors there, but it’s usually takes anywhere between 20 to 45 seconds to run this.

So once this test is done, you’re going to see a few things. Again, we’re in mobile here, but you can also switch to desktop. As you can see the score changes when you switch over to desktop.

Now another thing we are using AMP for our mobile blog here, and so we could crawl this an AMP as well, and we’d probably get a different score because AMP is built specifically for mobile and specifically for speed, and it gets rid of a lot of animations and all the other fun stuff that you might have.

Below that, we see our score, which is terrible. It’s an 8 out of a 100, so failing miserably, when it comes to this page. Then we’ve got our field data or origin summary, which we talked about, which is the past 28 days. And finally our lab data here.

Now we can see that we’ve got first contentful paint, they’re saying it takes 3.7 seconds. Time to interact, almost a minute. Speed index, 24 seconds. Blocking time, largest contentful paint, 56 seconds. Cumulatively out shift at 0.378.

Now, you may look at this and go, “If this was your page, this is terrible. We should just blow it up and start over.” But now one thing I will tell you, this is looking at it from Google servers, using Lighthouse. If I went and I pasted this URL over here, you’re going to see that it does not take anywhere near seven seconds.

Now notice some of the things that happened. Did you see how the screen took a second to load, the images took? These boxes over here, jumped around. That is what’s causing the issues with cumulative layout shift. Even though it happened within a few seconds, those are the things that Google doesn’t want to see, and those are things that do need to be addressed. You also notice though, that it didn’t take 75 seconds to interact with this page, that would be still way past what we’re doing right now. So, you’ve got to take a little bit of this with a grain of salt and Google’s being pretty strict when it comes to this.

But as we look at these pages, you always want to go back and look at it in real time. And then you want to test it on a mobile device as well, because I just tested it on a browser. And as we know, the score is a lot different when it comes to a browser, so I want to see what those issues might be when it comes to a mobile.

Contentful Paint and Speed

If I go below, I can see here all of the different issues that are presented on this page. One of the cool things that they allow us to do is narrow this down. Let’s say I want to look at largest contentful paint and speed. I can click this and it’ll tell me specific things related to those issues. So I can reduce unused JavaScript. I can enable text compression. I can remove render blocking, this one’s very common, by the way.

I can do a number of things. If I’ve got access to the server, I can work on server response times, things like that. I can optimize the CSS. I can minify the JavaScript. So there’s a number of things that we can do here. First contentful paint, I can add text impression. You notice that some of these work in multiple areas.

Images

But look at all the biggest issue, and the biggest defender, is images. Now this will be most websites. And if you’ve got image problems like this or your images, they’re either too big or they’re not being formatted in next gen formats, so something like WebP, which is a format that Google Chrome likes images to be in, you can use tools. One of the tools that I like the best for this, it’s called Imagify, and it allows you to optimize your images really quickly without losing any of the quality of those images.

If you’re on a WordPress site, there’s actually a number of things that you can do here, when it comes to eliminating render blocking sources. Now this site is actually on HubSpot, but we’re moving it back to WordPress, so we actually have more control over these issues here. But, when it comes to WordPress, there are plugins that can help you with a lot of this as well. Things like WP Rocket, or W3 Total Cache, just make sure you set those up correctly, and you do it in an order where you’re not breaking things, because sometimes when you add these midifications or you kind of move code around using a plugin, it can cause your site to do some pretty funky things.

Diagnostics Section

Now, if we go down here to the diagnostics, this might not be something that you could always do if you don’t have a background in computer programming or website development or understanding how the servers work. But if you do have somebody that can help you with it, you can help them with the amount of payloads that you’re sending. This site right now is sending an enormous amount of payloads. So I can minimize that in a thread work. I can look at ensuring that the text remains visible during web font load.

And one of the ways that you can do that was using something called font display. Now this doesn’t work on every browser, it really only works with Chrome right now. It’s not something that’s been used across the board yet, but that’s one thing you can do. You can remove third-party code from your site.

Now this one is tricky too, because you might look in here and go, “Well, some of this is Google, and some of this is Facebook pixel, and some of this is other plugins that we need.” So don’t beat yourself over the head, do your best that you can, but don’t remove stuff that you really do need.

Just look through these and look for the elements, explicitly giving a height and a width for your images. That’s important. It helps the crawlers. It helps them do their job faster. So there’s a number of things that you can do. One of the things I like the best is I take these and I go into Google search and I find somebody else that’s having the problems, because guess what, we’re not the only ones having these issues. Everybody does. And people are finding solutions all the time.

So look for these problems and then look at it within your specific setup. So if you’re using WordPress, look at issues, how you can solve this in WordPress. If you’re HubSpot, if you’re Squarespace and all those others, look for those options there within Google.

This can be a really helpful report if you use it and you know how to read it and you can actually take some action off of it. The biggest takeaway from this is PageSpeed Insight is a great tool to help understand how your site or specifically your web pages are performing within the Google search and in how the crawler is interacting with them.

Now, some of the data may be overwhelming. Remember that you need to look at lab data to really understand what’s happening with that specific page. Check out these opportunities. Google always does a good job of giving you a learn more link here. So anytime you see these issues, you can click on, learn more, and it’s going to give you some ideas on how to solve these issues and things that you can do to make sure that your site is performing to the best of its ability.

If you’ve got any questions about PageSpeed Insights, any questions about what we talked about in this video, please comment below. We’d love to continue that conversation with you. And until next time, happy marketing.