I talked a lot about SEO and Page Speed Insights in some of my articles. Now I think that it would be a good time to share my thoughts about the page speed scores that Google assigns to your pages. I want to delve deeper into my experience with playing with these numbers and truly understanding what these numbers really mean to you and your rankings on Google. Some people think that these numbers are not as important to pursue and that your time is best spent somewhere else. Tough to say really because it is Google after all and the suggestions that they give you really are things that you should address. To be fair to those who say to not obsess over the scores, I say this. I would say that focus more on resolving some of the issues that Google reports, especially to your mobile pages. Let me start with what Page Speed Insights actually is and why I personally think that it is important for your website.
What Is Page Speed Insights?
Page Speed Insights is a website that Google uses to assign a speed score to your web pages. The speed scores range from 0 to 100, with 100 being a perfect score. You can submit your pages for evaluation and Google will give it a score. Naturally, you should start with your home page first because that is the most important web page on your website. The home page usually gets the most traffic since it is just the domain of your website without any pages in the URL. After your page receives a score, you will also receive a report on certain things that you can do to improve your score. Many of these suggestions are actually very good and you should take the time to resolve them. Many people think that you should just have a fast loading page and have that be that. With page load time being a factor in Google rankings, you should take heed in what Google is telling you.
Is Page Speed Insights Really Important?
Is what Google is telling you to do really important? Since I have stated that Page Speed Insights comes from Google, it is very likely that Google is telling you directly what you need to do in order to make your website faster. Unfortunately, many people who are unaware of this very useful tool, do not realize how “slow” their website is until after their website is built and then they run this tool against their web pages. The problem is that the scores that are assigned to your pages are just an estimation of what users might experience on your website. There are too many factors beyond your control that make it even harder to have a fast light website. So yes, I have stated that Page Speed Insights are really important and continue to do so. I want to move on to discuss all of the factors that lie outside your website and why these speed scores might seem more important than you think.
What Are the Factors That Are Outside Your Control?
You really can only control your website. You can control how it is built, the content, the images, the stylings, everything that is directly on it. What about other factors like your users. You cannot control where your users come from, what their connection speed is and what devices they use to access your website. This amount of unknown variability is why speed scores will fluctuate for different users. This also explains why you will get different page speed scores when you check the same page over and over again. Assuming no pages are being made to a web page, if you check that same page a few times, you will notice that the scores will fluctuate based more on a range than a singular exact value. This is why you need to run the speed scores a few times on the same page and see the variability in the score. Sometimes when you run the test you can see the score change between 10 or 20 points. So one time your mobile score is 70, next test is 75 and again can be 60. This is why you should understand that your score will change and will only go up if you resolve the issues that Google suggests.
Is Your Page Speed Score the End All Be All?
There are many other things that you can do to improve your rankings in Google. For example, you can write more quality content that is unique to your website and your audience wants to read. You can update your meta titles and descriptions and see what might get you more clicks and not just impressions. You can also evaluate your pages and do some UX (user experience) tuning and see if you can make your pages easier for your users to navigate. I would spend some time on Page Speed Insights but also tend to other matters so that they do not get neglected. I know that Google checks somes of your UX stuff on your pages but not everything. Adding some call-to-action buttons to increase your conversions can help people know when to take action at the right time. These are all important pieces of creating good web pages that comprise a great website. So this is why I talk about web pages more than just a website because the pages are pieces of a whole website. Every single page plays a role in ensuring that your audience’s intent is satisfied when they visit your website. So no, page speed scores are not the end all be all, but they are worth taking a look at. In many cases, resolving page speed score issues are simple if you follow the recommendations.
Why Are Mobile Scores Usually Lower Than Desktop Scores?
This is a question that a lot of people have because of the stark differences between your mobile and desktop scores. For example, you can have a score of 60 on mobile and 95 on desktop. Based on this example, there is a 35 point difference. Why is there such a large score difference between mobile and desktop? That is a very simple question to answer. The reason why is because Google decided to place more emphasis on mobile versions of websites instead of desktops. This is because people are spending more time on their mobile phones than the traditional desktop. So Google has become more critical of the mobile versions and grades it much harder than the desktop version. So basically if you have a low mobile score but high desktop score, then your website still has issues. Not to say that desktop is not still important, it is just that mobile is much more important and is much harder to get higher speed scores for. Another factor is because mobile devices tend to be weaker because of their smaller physical size when compared to a laptop or desktop. So mobile devices can not process heavier websites as fast as their physically larger counterparts. This leads to longer load times, which leads to lower page speed scores.
Google calls this the “mobile-first” initiative and it marks the movement toward mobile becoming the dominant form factor when accessing the web. This means that heavy websites full of images, CSS and JS need to be optimized very well in order to score high on mobile. This is why I talk about being very mindful in adding JS to your website and see if you truly need to use it or not. If you find another alternative that does not use JS or do without it, that would be ideal. If your website is fast and sacrifices some small pieces of animation here or there, that would be considered a win. Besides, most people just want to access your information as quickly as possible. Some animation just gets in the way and delays information retrieval which adds no value to users. So if you can use something else like a change in color to denote a hover state, then do that instead of making some change in size or gradually change in color. Even these small bits of CSS animation can add up if it is used a lot on a website. So I guess that you need to balance a quick website devoid of most animation, or one that is really spiffy but will add a slight delay in serving your users information. If you need help with optimizing your JS, then check out my article about CloudFlare and using their Rocket Loader feature to defer your JS and load it after your HTML is done loading.
Consider the User Experience, Not Just Page Load Times
Even if your pages load really fast, that means nothing if your users cannot find what they are looking for. This is why typical standard navigation elements are key and we always see these on websites. Header menus, footer links, ample spacing between elements, large readable font, good color contrast are all important. Even if Google does not score these factors, you still need to consider all of them. I still see websites that lack margin and padding and make it very hard to read text on a page. Other websites place either light text on a light background or dark text on dark background. They need to be opposite. So light text on a dark background or dark text on a light background. Yes, even with your hover states for buttons and other elements, you must still follow good contrast common sense. Do not make your users strain or squint their eyes to read your text. This helps with page speed scores because Google wants your websites to be accessible for everyone. So make your text easy to read and easy to find. Which is why search is important when users are just looking for keywords and do want to go through your menus.
Keeping Your Assets to a Minimum: CSS/JS/Images
The less that you have to carry, the faster that you get to your destination right? Same thing applies to SEO, the less assets like images, CSS and JS are on your website, the faster that it loads. Images are pretty but we tend to use them a lot because they are nice to look at. I mean, images make your web pages look like a magazine. Think about using images with actual purpose behind them and not just because everyone else uses them. Use images to tell a story that will invoke emotion behind the message that you are trying to tell people. Is there some meaning that aligns your text to your image? Is there something that your words cannot say alone that would benefit from the use of images? So these are cases where images would help you tell your story and get your audience engaged with your copy. CSS and JS play similar roles when used appropriately. CSS is great to add color and make your pages pretty. JS adds some interactivity so your pages are not just static like a book. This is why GeneratePress is great for those who know how to code because it gives a very minimal WordPress theme that you can start out with and just add what you need as the need arises. I really like this idea because it is better to just add things when you need them instead of having to deal with a WordPress theme that adds so much to every page that you have to peel off the excess. I mean, it is a lot to do and you can only peel so much before either your theme looks off because of the lack of CSS or functionality stops working because of the lack of JS. So this is why it is so important to keep your assets to a minimum.
My Thoughts on Core Web Vitals
Core Web Vitals are a few metrics that are used to focus on the mobile version of your website. I want to discuss two of them because they are very interesting to me, largest content paint and cumulative layout shift. I will discuss each one in their own section and give my two cents on them. As I mentioned earlier, due to Google’s focus on mobile, we need to pay more attention to core web vitals. If you choose to ignore these metrics, you might still get a decent traffic if you do the other things that I mentioned earlier in this article. Again, Google is offering a free tool to evaluate the load times of your pages. So go ahead and just resolve these issues.
Largest Content Paint
This is the first metric that I want to talk about is largest content paint (LCP). This refers to the largest element on the page that is above the fold. Above the fold means any content that appears on page load without you having to scroll. Typically, this content would be an image, if not an image then heading text. If your largest piece of content is an image, then you should try to optimize it and reduce its file size. If you cannot, then decide if this image is necessary to tell your story to your readers. If not, then simply remove the image if it is causing a great impact on your page load times.
Cumulative Layout Shift
The other metric, cumulative layout shift (CLS) is a value assigned to your web pages based on how much it moves during page load. If too many elements are pushing other elements around and the loading of the page looks chaotic, this score will be high, which is bad. Your elements should load from top to bottom in a straight line. So if you are near the bottom of the page and there are still elements at the top loading, then they will push elements down. This really hurts the user experience because it looks really bad when your elements are loading in an order that keeps moving back up to the top. What you might need to do is give fixed widths and heights to your elements so that the page dedicates space to the ahead of time instead of while the page is loading.
Page Speed Insights vs. Lighthouse
From what I understand, Page Speed Insights run test speed scores using a specific device that tends to be on the lower end so that you will optimize your pages for weaker devices. Since the assumption cannot be made that all users use high-end phones, you need to optimize your page load time for users with either lower or mid-end devices. This is about accessibility and making your website usable for all users all over the world. So this is what Pagespeed Insights does. Lighthouse, on the other hand, uses data from users who actually visit your website. This means that if your users are coming from, say, the US, they tend to have newer devices than visitors from other countries. In this case, your mobile scores will be higher in Lighthouse than with Page Speed Scores. So Lighthouse is more accurate because it uses data from your actual visitors and Page Speed Scores uses a lower-end device to make you optimize your pages more. Just something to consider when using them.
This has been a very fun article to write because I have so much to say about Page Speed Insights and all that it has to offer. Again, even though some people say do not take too much stock into them, I would. Mainly because Google is helping you, giving you suggestions to make your pages faster. So make your pages faster, easier to use and keep your assets to a minimum. A good WordPress theme like GeneratePress will give you a clean slate and let you slowly add assets as needed. A couple of metrics called largest content paint and cumulative layout shift are part of Core Web Vitals which are important metrics to resolve. Page Speed Insights uses a low-end device on a low speed network to run tests against your web pages. This is to make you understand that not everyone has high-end devices. Lighthouse uses actual data from your users. If your users come from countries where most people have high-end devices, then your Lighthouse score will be higher than Page Speed Insights.