Understanding Google’s Page Experience Update

In the latest episode of Hack My Growth, we’re going to be looking at Google’s page experience update, and what it means to your site and what you can do to prepare for these changes. Google will be adding page experience sometime in 2021. We don’t know exactly the date it’s going to be added, but we know that it is coming and now is the time to prepare.

Video Transcript:

As I said in the opener, we’re going to be looking at the page experience update, and a few things you can do to prepare yourself and your site so that you get better rankings and create better experiences for your users. So let’s take a look at Google’s page experience update. Here are some big ideas when it comes to the page experience update.

Google will be adding page experience as part of their search algorithm sometime this year. This is 2021. We don’t know exactly the date it’s going to be added, but we know that it is coming.

This will be one of many factors that impact search results. Other factors still apply. You still need to follow all the guidelines. This is one more of those many factors. Now this is going to include Google’s web vitals, such as loading speed, interactivity and the visual stability of a page. And lastly, we don’t have any idea of the impact yet. The results are still unknown because it hasn’t been released. And we’re going to have to see exactly how big this update will be and how much Google is going to weigh the page experience features when it comes to search.

What will this include? Page experience, like we talked about before, is looking at loading time in our activity and stability. It’s taking a holistic view of how a user interacts with a webpage and how well that page meets their expectations.

If we break down those three areas, we can look at them like this:

Loading time is really the perceived loading speed. It’s not how fast the entire page loads, but it’s how fast most of the content, the most important part of the page loads. Can a user see what they want to see quickly? The second thing is, can that user engage on the page? Here they’re measuring the time from when a user can interact with the page. Can they click a button or a link? Can they start to fill out a form? And lastly, they want to look at stability of a page.

Is that page moving around or is that page stable? This is the prevention of those unexpected movements that a page can have. To learn more about these you can check out the web.dev/vitals, and we’ll cover a little about what that page has to say in the next slide.

This is a quote from the web.dev page, where it talks about the web vitals as well as the core web vitals. Web vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Core web vitals are the subset of web vitals that apply to all pages and should be measured by all site owners and will be surfaced across all Google tools. So make note of all, they’re talking about every web page, everybody should pay attention to it.

Google is going to be tying it into a number of their marketing tools. This last quote is really important. It says, “The metrics that make up core web vitals will evolve over time.” Google is giving themselves some space here to change things, and we have to pay attention to that because things will change and make sure that we’re aware of what those changes are and how we can respond to those changes.

What they say now may not apply in two to three years. Things are most likely going to move very fast as they always do in the digital space. And especially they do in the search marketing space. What are these core web vitals? Well, we’ve covered it once before on a video on PageSpeed, but this one is specifically on these web vitals and we’ve got three of them at the moment.

We’ve got Largest Contentful Paint. This is all about loading time. It’s also abbreviated as LCP. We’ve got First Input Delay, and this is the interactivity of a page, and this is abbreviated to FID. And lastly, we’ve got Cumulative Layout Shift. This is all about visual stability of a page, and it’s going to be abbreviated with a CLS.

That’s just what we needed in marketing. Some more acronyms to learn. But if we look at these, we have a few different scores and it used to be that Google would say, “This score is good. That score is bad.” But they’re giving us some wiggle room today. So anything for speed or loading of a page, we’re looking at 2.5 seconds or faster is good. And then we’ve got this breakdown with 2.5-4 seconds needs improvement. And anything over four seconds is a poor loading speed.

Next with the interactivity. How quickly can you engage? 100 milliseconds and faster is great. From 100 milliseconds to 300, you need some improvement. And then from 300 milliseconds and above, it’s poor. And lastly with the shift or the visual stability, we’ve got a 0.1 and less is good. Needs improvement is a 0.1-0.25. Anything over a 0.25 is bad.

One of the things we want to know is how do we check this on our pages? How do we see these scores for our website and what are some of the things that we can do to improve these scores? Well, Search Console is a great place to start. Inside of Search Console we now have the ability to see our core web vitals and Google will give us a real-time scores on these as well as some ways to go into another tool, their PageSpeed tool, to start to see how we can maybe make some improvements to our pages.

Let’s take a look at Search Console. Once you log into Google Search Console in your left hand side under enhancements you’ll see core web vitals. Once you click on this, it’s going to give you two different charts, one for mobile, and one for desktop. You’ll be able to see very quickly the pages that are good, the ones that need improvement and the ones that are not so good. And you’ll see them in a graph form here.

You’ll see both the difference between your mobile and your desktop. To view these pages you just want to open the report. We’ve got a nice long list of pages that have some issues that need to be fixed. As you can see, we’re at 0.25 here for the Cumulative Layout Shift and for Largest Contentful Paint were longer than four seconds.

If we click into one of these, it’ll actually bring up the chart of the URLs here, and then we can see some examples. So we see that as a blog here that’s having the issue. And right now the average LCP is 6.4 seconds. So this is something that we need to look at in order to bring that speed closer to that 2.5 to make it into the good range. This was first detected, as you can see, in the summer. Obviously there’s some work that we need to do here. If we click on this, it’s going to open it up and it’s going to show us all these other URLs that are similar. What’s nice about this it’s showing us that, “Hey, these are similar URLs. So probably the issue that you’re having on this page is going to be replicated across these pages as well.”

It’s very likely if I make the fix here for whatever it is, we can make the fix across all of these pages in a very similar way. And as you notice, there’s not much more information other than that, “Hey, is this taking too long?” In order to get that information, we have to open up PageSpeed Insights. When you click that, it’s going to open a PageSpeed Insights, which is another Google tool that’s going to look at how fast the page is loading. It usually takes a few seconds to run this task because they got a lot of things going on in the background. But this is where we’re going to get more information about that specific page. And some of the things that we can do to possibly increase the speed, maybe make the coding a little bit more stable, maybe increase the time that page can be interactive.

As you can see here, it’s going to discover an AMP URL. We are using AMP. And if you run the score on our AMP pages, those are the ones that are performing well. If we went back to the pages that were doing well, you’ll notice here all of these are AMP pages. And the reality is these pages are stripped down. They have a lot less coding. They have a lot less going on. They load very quickly. They rank very well because these are designed for that mobile experience. While we have some pages that may not be doing so great on mobile, we have a ton that are doing well because of the usage of AMP. If you’re not using AMP, I still recommend it. I think it’s a great way to display your pages on mobile. And the reality is they’re fast pages.

They typically do very well in search. When we look at the PageSpeed Insights test, there’s a couple of things that we need to note. If there’s enough real world, real time data, you’re going to see some data here in the field data section. As you can see, we don’t have sufficient real-world data for this page. There is none here. If we’re looking at the origin summary, you can see that we’re doing a little bit better. This is looking at our site as a whole, and the First Input Delay’s in green, Largest Contentful Paint is doing okay. It needs improvement here, as well as the Cumulative Layout Shift. We can make some improvements here as the site as a whole and perform better. Lab data is a controlled look at this specific URL.

And as you can see here, they ran into a couple of different issues like the Largest Contentful Paint the last time was terrible, as you can see. And the Cumulative Layout Shift is well beyond that 0.25. So if we want to optimize this page, we need to understand how this page is interacting and engaging. So as you can see here, we’ve got some issues. Now, the biggest issue that we’re having with our Largest Contentful Paint is images. And this is something we typically see if you’ve got large images, or you’re not compressing images, or they’re not loading in an efficient way, you can run into some issues. This is an area that we can work on some optimization. As you can see here, it’s showing us how the page is loaded. This is a good look too, at the Cumulative Layout Shift. In this first one here, it’s showing the dropdown fully open. And then the page starts to pop up, which it does and the background loads.

And then we got the banners coming in here for cookie consent. But this shift here from this title here going up to here, I know that’s very small if you guys can see it. I can even try to zoom in a little bit. You can see there. The shift from this title going here up to here is where we’re running into that Cumulative Layout Shift issue. If we see a lot of things here with image sizes, we need to take care of those. We need to get those images, we need to compress those images, use caching, size them properly. And then add the back in. Removing unused JavaScript can definitely help as well. Making sure that this is no longer on the site is going to make sure that our site is loading faster and that we’re getting the results that we want without slowing our site down.

If you have JavaScript or tags in there you’re not using, go ahead and remove those. You remove unused CSS, maybe conflicting CSS that can also cause some of the shifting layouts. Maybe you’ve taken different CSS from other places and put them together. It can cause a little bit of those issues. Enable test compression. We can also look at network and how’s your server working. Now, this might be something that you don’t have a lot of background in. And that’s okay. This is where you can reach out and find a developer who can help you. Honestly, there’s a lot of things here that we pass over, that I pass over to our development team because they’re way smarter than me when it comes to this type of stuff, allows us to help us speed up sites. So our site is actually built on the HubSpot platform.

There’s some things that HubSpot does that typically don’t always score perfectly when it comes to some of these tools, but that’s something that we have to look at and minimize and say, “Okay, is it important to have our site on this platform and do we need to reassess the platforms we’re using and try something else?” But there’s a lot of things we can do just from the code level. Just reducing the JavaScript execution time. As you can see, there’s a lot of things we can do to update these pages. And since this is a template page, those updates that we would make would actually solve a lot of the errors that we were seeing over here with our poor mobile scores. So that’s something that we need to look at. This is a great place to get started is within Search Console.

As you can see here, we’re seeing the CLS and the LCP. As you’ll notice over here. The only time we saw First Input Delay was at the site as a whole. Right now when we get to the lab data on this specific page, we’re only seeing scores for Largest Contentful Paint and Cumulative Layout Shift. Those are two areas that we are going to focus on more now because we see Google giving a little bit more attention to both of those. As we talked about in the slide deck, they may shift which of these features in the core vitals are the most important.

I hope you found this video helpful. I hope you learned a little something and I hope you have some ideas on how you can get started to make your site load faster. If you have any questions, please comment below. We’d love to continue that conversation with you. And until next time, Happy Marketing.