Your website does not want to rank. And even when people visit it, the bounce rate turns out to be very high. You suspect that this could be because your website is simply too slow in the eyes of Google and your users.
So, you are asking yourself: How can I increase Google page speed?
We happen to have the answer to this question. We'll also describe the process so you get a better understanding of what the PageSpeed score is all about.
In this guide to Google PageSpeed Insights:
Buckle up and let's get right down to the burning question. What does Google think about your website and how a slow website can be a problem?
Website speed optimization is one of the essential SEO factors. Mobile page speed tests performed by Google bots directly influence your position in search result pages.
Let's take a step back.
The primary mission of Google is to provide the best result that answers the user's query. It should be accurate, informative, available to everyone, and fast.
Your brand new website can look great and load fast in your browser, on your desktop PC, when you use your broadband connection. But what about that poor kid from a developing country who uses an old smartphone? And has to pay hard-earned money for every megabyte of data transfer because the infrastructure in their country is terrible?
Over 60% of all Google searches happen on mobile devices. And cellular data is not free!
Google’s developers explicitly say that they are very serious about how much mobile data is used.
Large network payloads are highly correlated with long load times. They also cost users money; for example, users may have to pay for more cellular data. So, reducing the total size of your page's network requests is good for your users' experience on your site and their wallets.
Source: Google Developers (web.dev)
Website loading time is not a vanity metric invented for web developers to brag about their performance. It is something that translates directly into saved time and money for users.
To analyze the SEO performance of your pages, you should use a website SEO checker.
There is a strong correlation between SEO ranking positions and page speed performance.
According to Google’s mobile page speed research:
As page load time goes from one second to seven seconds, the probability of a mobile site visitor bouncing increases 113%
And there is some very strong evidence for bounce rate being one of the essential ranking factors. This has also been mentioned in our selection of SEO tips from experts.
Other factors that affect SEO
Your mobile page speed is just one of several things that Google takes into account when determining your position. Ultimately, the quality of your keyword research, content marketing, and backlink profile are the most important elements: Website Backlink Checker
The best way is to use Google's tools which give advanced and accurate reports about your desktop and mobile page speeds. There are lots of different panels, but most of the metrics overlap in all of them.
The most popular tools for testing page speed metrics are:
You can use them to run performance analysis of any page on the internet for free.
What is Google PageSpeed Insights?
PageSpeed Insights is a free tool for web developers for measuring website loading times. It allows you to test any website for specific speed metrics such as Speed Index or Time to Interactive. The overall performance score returned by the tool is measured for mobile and desktop devices separately.
The same data can also be found in third-party apps. For example, Seodity has an integrated performance panel powered by Lighthouse in addition to keyword research and seo audit tools.
OK—
But what exactly does it all mean?
Let’s take a closer look at each metric.
PageSpeed Insights return performance data (“field data”) only while Lighthouse gives you some additional scores (“lab data”).
So—
What does Google Insights show you?
Performance/Field Data (Google PageSpeed Insights):
Page speed performance scores below 90 are marked as the orange zone and need improvement. However, there is no clear answer as to what page speed score is “good enough”. You can see many pages with the performance score way below 30 that still rank on top positions in Google.
In most cases, it is worth having a better page load speed than our direct competition for a given keyword.
Sometimes it turns out that the performance is not as satisfactory as we would like it to be and the website is still rated positively in terms of Core Web Vitals.
Here is a quick breakdown of the components and their corresponding benchmarks:
The page speed performance score is calculated based on the six load time metrics mentioned above. You can see how changing them influences your overall score by using the Lighthouse Scoring Calculator.
The PageSpeed score is a subset of the metrics analyzed during general website audits carried out by Google. Performance is one of the elements.
Lab Data (Google Lighthouse):
Ultimately, your page speed score should always be analyzed in the wider context.
To check your full Lighthouse report you can open developer tools available in Google Chrome. Just press Command + Option + J (Mac) or Control + Shift + J (Windows) and click >> to open Lighthouse reports. You can also install it as a browser extension.
Now that you know what this is all about, let's get down to business.
The site speed testing tools themselves will tend to enumerate the things you can do to improve your score. Whether it is PageSpeed Insights, Lighthouse or Seodity, they will create detailed reports listing opportunities for reducing page loading time.
Most sites face the same problems and make the same mistakes. But there is no need to worry. You can fix them with a relatively small effort and significantly improve your performance.
The easiest and most common opportunities to improve your website speed are:
Each of these tips to increase PageSpeed score is described in detail right below. Keep on reading to find out more.
If your website is slow, there is a high probability that your hosting is of poor quality. For example, shared hosting is a big no-no. Good things are rarely cheap and web hosting services are no exception. For peace of mind, it is better to invest in a premium solution that has a good track record among web developers.
Slow server response times affect performance and your TTFB (Time To First Byte) should never exceed 600 ms. Otherwise it will fail Google’s performance audit.
The fastest web hosting services according to BitCatcha are:
If your current hosting service is underperforming and pales in comparison to the options above, you may want to consider a migration. It may be painful at first, but it will pay off in the long run.
Now, this one is a rookie mistake but also something that can be very easily overlooked. It happens to everyone once in a while (guilty as charged). Take a look:
Here is a tiny little icon with the photo of the author.
But wait—
Is it really tiny?
Let’s inspect it with Google Lighthouse.
It turns out that the image is huge. If you right-click it, you can open it in full resolution too. And it is way bigger than it needs to be.
Of course, the image is styled with CSS in such a way that it only displays as a small icon. But the original source file that has to load in the user's browser is a high-resolution PNG file. It is better to use smaller sizes. An icon of this type does not have to be larger than about 200x200 px.
Setting the right sizes is only the first step in the image optimization process. It is also important to choose the right format and compression rate. The file type that is best suited for websites is PNG.
But not all PNGs are created equal. For the sake of argument, let's assume that the author's original photo is indeed in good resolution.
Is it possible to squeeze it a little bit more? And save some loading time for people browsing our site?
Here is the compressed version of the image that we can get from a free online image compression tool.
The file size was reduced from about 600 KB to 140 KB. And, to be honest, I can’t see any quality difference whatsoever.
Consider using a tool like Tiny PNG to reduce file size without sacrificing quality.
When you watch a movie on Netflix, you don't have to wait for the whole movie to load. The movie is downloaded by your device and loaded bit by bit and streamed in real time.
If you had to download the entire movie to watch it, it would probably mean waiting several minutes or even half an hour with a poor connection. And then after 3 minutes of watching it you might decide that it's a total schlock and you don’t want to watch it after all. It makes sense that Netflix movies are streamed and you don’t need to download the whole thing.
It is reasonable, right?
Now—
When you think about this, the same thing should be true for websites. What is the point of loading all resources and images from the very top to the very bottom of the page if the visitor may never even reach that part?
It may turn out that the majority of your visitors never get past the 50% scroll depth.
The whole idea of lazy loading is based on this premise. You should always prioritize above-the-fold content.
Instead of forcing users to download everything to their browsers all at once, you serve them your page bit by bit as they scroll down.
You can find out more here: How to Use Lazy-Loading to Improve Page Loading Speed
What exactly is a render-blocking resource? In the context of speeding up your page loading time, we usually treat the CSS file as the primary render-blocking resource. Browsers don’t render a website until they fetch the DOM and all CSS files.
Wait, but what if there are several CSS files bundled together but some of them are used only in specific situations?
Well, that’s exactly why you should pay attention to “media types” and “media queries”. Telling a browser to use a stylesheet only when certain conditions are met is really important.
If you don’t state it explicitly, browsers will download CSS files that you intended to use only for print media. And they won’t render the website and show it to the user until they are done! That’s why paying attention to your stylesheets and organizing them is crucial. Which brings us to the next point…
Have you ever added a snippet that was needed for some online diagnostic tool and then completely forgot about it? Or maybe you wanted to add some functionality on your own, which eventually turned out to be completely unnecessary?
For some reason, it is always easier to add new lines of code than to clean and delete them. Before you know it, it all piles up and gets buried somewhere where you never look. And there are a lot of plugins that force you to insert additional scripts on your site too.
You should consider using tools such as the Coverage tab in Chrome to find unused JavaScript and CSS.
To open it, just open your website in Chrome, run the command tool, start typing “coverage”, and choose Show Coverage/Drawer.
You can learn more about analyzing the results of the Coverage reports here.
Regular cleanup of the code on your website is one of the best practices when it comes to getting good assessment by Google PageSpeed Insights.
Also, consider the number of tasks, requests your page processes, and how you use cache memory. Instagram developers reduced JSON response file size and it significantly improved the average memory usage and the number of errors. Sending data about 5 instead of 20 comments below each Instagram post turned out to be a great idea.
When you write your website code, it should be easy to understand. That’s why you use proper formatting, indentation, and comments. But when the site is tested and ready to be published, you might as well get rid of a lot of unnecessary characters and simplify the code. It looks terrible, but it is fully readable for web browsers. And the final version of the website looks the same to your customers.
Source: CSSNano
All languages used in web development can be minified. You should consider using:
It may seem that saving a few bytes is a waste of time. But don’t be deceived! Just try saving several KBs here and there and you’ll find out that it all adds up. Minifying HTML, CSS, and JavaScript on your website can decrease the loading time by 50%.
PageSpeed Insights is a powerful tool that can help you identify problems with your website load times. It can generate detailed reports for any website and you can use it for free.
It doesn’t matter if you are using WordPress, Shopify, or you have your own custom website developed from scratch—analyzing your page speed on a regular basis (and making improvements) should be second nature.
The most important things to remember:
If you are interested in a website audit and finding more issues with your website, you can run a full audit in Seodity. Our tool can identify all potential problems and offer tips on solving them.
Kazimierz is a tech journalist and content marketing professional