How to leverage PageSpeed Insights to optimize your site for the search engines, and achieve a better user experience

Results with WP/HTML sites

 

Why is Page Speed Important?

divi speed

 

The Page Experience Update

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:

key aspects:

1. Loading time:. How fast does your website load? How fast does that main content get in the visitor's view?

2. Interactivity. How long does it take for a user to actually engage with your page?

3. 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.

 

page speed insights report

 

How to Check Our Page Speed?

The first way is to go into search console (GSC) and eventually through a number of clicks, you will get over to page speed insights. One would expect that both tools would have been integrated together but it's seldom the case. GSC lags behind most of the time and fails to report on positive speed changes!! The page experience tab within Google search console breaks it down, how your page is performing, and shows you what are called core web vitals.

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. Thus, page speed insight is the tool that does this for us. They report both on mobile as well as desktop, and they give us suggestions on how these pages could be improved. You can read more about it at developers.google.com/ and web.dev.

It’s a pretty simple page. 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 and then up at the top, it’ll say the URL, as well as a link to page speed insights, which will then launch the tool page. 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 tabs: got mobile and desktop. So you can look at your speed on both instances. Now Google is mobile first traffic-wise, so you need to prioritize mobile.

Now, one thing you’ll notice is most of the time, your sites are 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, 41 out of a 100, so it’s a failing grade. Then it’ll tell us why this specific page is failing.

page speed insights

 

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.

Field Data:. So starting with field data, this is a historical report about a particular URL and how it’s performed over time. It was terrible before and still bad now. IF Chrome doesn’t have enough of sufficient real-world data, it won't give us any field data on this page, if it's 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 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. 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 a flow chart here with thumbnails 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 a screenshot, then the navigation, and then you’ll start to see different elements load in the page, as it become available to the crawler. Blank pages mean that there’s a little bit of a lag here.

When the tool reports "render-blocking" resources, Google is not able to get to the content until the problematic section gets out of the way (issues whith crawling). Below the problematic sections and the treemap, we find the opportunities section and below that the diagnostics.

opportunities are 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.

pagespeed insights opportunities

 

Page Experience (GSC) 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 Vitals (GSC) 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 the pages that are good, the ones that need improvement and the ones that are having issues, just by clicking on the different tabs.

So we’ve got some pages here that are having some speed issues. They’re taking longer than 2.5 seconds to load. We need to fix those, so let’s take a look at what they are. Now typically, it’s going to give you only the largest defender, not a whole list of pages, but if you click on, it’ll say, “here’s similar pages.” So if you look, they’re all the same layout 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 (GSC) 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.

If you are using AMP for your mobile pages, you could crawl this AMP as well, and 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, has javascript limitations of 150KB etc.

Below that, we see our score, which is terrible for the MOZ page. It’s a 41 out of a 100, so failing desperately. 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, it takes 2 seconds. Time to interact, 13.4seconds. Speed index, 2 seconds. Blocking time, largest contentful paint, 6 seconds. Cumulatively out shift at 0.

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.”

I can do a number of things. If I’ve got access to the server, I can work on server response times, 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 compression. You notice that some of these work in multiple areas.

But look at all the biggest issue, and the biggest defender, is images (LCP 6 seconds - weighs 25% on the overall score). 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 - but doesn't work for Safari (fail here), you can use tools like Imagify.

Remove unused JS (2.4s) It looks like the page loads js that goes down the drain. One approach is to disable the scripts or defer them. If the budget is enough (rare fact), the javascripts need to be re-written.

Reduce the impact of third-party code (370ms) Sites like MOZ use a bucket of tracking scripts and ads. All these need handling (deferred). The tool tells me it's the usual suspects: Facebook scripts, Google Ads and Analytics, Amazon ads, Twitter Analytics, etc.

There isn't even a rule to cache resources at server-level.

 


Fix Search Console Errors

Add to cart

 

 


Core Web Vitals fixed

Add to cart

 

 

Fast WordPress 90+ speed

Fast WordPress 90+ speed

Add to cart

 

 


Fast Elementor 90+ speed

Add to cart

 

 


Fast Divi 90+ speed

Add to cart

 

 


Fast Shopify 90+ speed

Add to cart

 

 

Rank a Video

Rank a Video

Add to cart

 

 


Optimize a WordPress database

Add to cart

 

 

Read more

Wordpress Themes that Kill Your Speed

Wordpress themes tested on real sites with metrics, traffic and a lot of bloat.

How to Redesign a Site with SEO

When you redesign a site, you have to factor in critical SEO parameters to keep the flow of traffic running.