Many developers and website managers measure their websites in subjective ways, such as "How fast does it feel for my website to load?". But, this could be better and is hard to measure and optimize for. Luckily, in 2023, we have multiple options available, so we don't need to rely on subjective measurements; instead, we can use objective data to inform our improvements and changes.
This post will examine two of the most well-known offerings: Google PageSpeed Insights (PSI) and Google Lighthouse. We will look at what they are, what they offer us, their differences, and how they can help us optimize a website. So, let's get into it!
What is Google PageSpeed Insights?
Google PageSpeed Insights is a free-to-use tool that allows users to measure a website's page speed on desktop and mobile devices using real-world data from users and lab data collected by the tool when running a series of automated tests on the URL provided.
After PSI has completed its tests, it'll show you a report across four categories for both mobile and desktop devices, the categories are.
- Performance
- Accessibility
- Best Practises
- SEO
These categories are divided into individual metrics and improvements that can be made to optimize your page. This then gives you a list of things you can work on to improve to make sure your website is optimized for your users.
It's also worth noting that within the performance category of data, you get a more granular breakdown of the data. The performance category falls into the following categories.
- First Contentful Paint (FCP) - Time it takes for the first text or image to appear on the screen
- Largest Contentful Paint (LCP) - This measures the time it takes for images and text to appear on the screen. If you'd like to read a dedicated guide on fixing LCP issues, you can do so here.
- Total Blocking Time (TBT)- Sum of all time periods between the First Contentful Paint and Time to Interactive
- Cumulative Layout Shift (CLS) - The amount of movement of visible elements in the viewport after the page has loaded
- Speed Index (SI) - How fast the contents of a page are visibly populated
- Time to First Byte (TTFB) - New - How long it takes for the server to respond to a request for a resource
- Interaction to Next Paint (INP) - New - How long it takes to interact with the entire page
The metrics marked with (NEW) above are currently being added to the set of metrics. You may or may not see these in your dashboard when running tests, but you will likely see them in the future once fully rolled out.
What is Google Lighthouse?
Google Lighthouse is a similar tool to PageSpeed Insights in that its sole purpose is to help you improve and optimize your websites to be as performant and accessible as possible. In fact, over the years, the two tools have moved increasingly closer together.
This is because, in the past, Google PageSpeed Insights used to focus on the performance of your website exclusively, but in October 2022, this was changed, and the categories that were exclusive to Lighthouse, such as Accessibility, SEO, and Best Practices were added into PSI's reports.
PageSpeed Insights and Lighthouse have become closer than ever, with only a few notable differences between them. These are:
- Progressive Web App (PWA) - The only report category still unique to Lighthouse is the PWA report that shows if your website qualifies as a Progressive Web App and, if not, what needs to be done to make it one.
- User Data - ****PSI includes data from real users in their results and synthetic lab data when generating reports. Lighthouse, on the other hand, focuses on the synthetic lab data portion.
- Browser Availability - Lighthouse is only available via the desktop version of Google Chrome using the developer tools or the Chrome extension. But PageSpeed Insights can be accessed by any browser or device with an internet connection, making it more accessible.
A few use cases of Google PSI and Lighthouse
We've already covered some of these tools' more significant use cases, such as performance, accessibility, and SEO improvements. Still, there are others they can help you with, so let's look at them in this section.
- Mobile Optimization - Both tools allow you to run audits on mobile and desktop devices and see individual improvements and suggestions for each. This is important because, in 2023, the world runs on mobile devices more than ever, so optimizing is essential for the success of your website!
- Development Best Practices - These tools evaluate your website against the latest web development best practices to ensure you're taking advantage of potential improvements or opportunities by using older methods that have been replaced.
- Competitive Analysis - Because these tools are free and as easy to use as entering a URL in a search box, you can easily research your competitor's websites and see how they're performing. This allows you to identify areas of your website that must be improved or worked upon to ensure you match or outperform your competitors.
Optimizing websites with either PSI or Lighthouse
Understanding the theory behind these tools and what they offer you is only half of the story, so in this section, let's take a look at running an audit with both tools and how you can use them to optimize your website!
PageSpeed Insights (PSI)
When it comes to checking your website using PageSpeed Insights, it couldn't be easier! All you need to do is head to their website and enter the URL you'd like to test. Then, a report will be generated after a few seconds containing the data and insights for the categories mentioned above.
You also get generated a series of summary scores for each category, and if one of your scores has room for improvement (less than 100), then PSI will list opportunities for improvement. These improvements will be shown under their respective categories, with a yellow or red indicator showing their importance and potential impact.
After you have your list of improvements, you should implement them and rerun the page through PageSpeed Insights to see if the issue was resolved.
Running a Lighthouse report
Unfortunately, running an audit through Lighthouse is more problematic as it's more involved to access due to needing to be more conveniently on a URL like PSI is. To run a Lighthouse report on one of your pages, you can use one of the two methods we mentioned earlier, which are.
Once you've decided how to run the Lighthouse report, you can run it on your target webpage and wait for it to produce your report. This report will be similar to PSI but with the included PWA category mentioned earlier. You're then free to follow the same process as PSI and implement the suggested changes before rerunning the audit to see if the issues were resolved.
Testing and production
Consider a couple of things when using them to audit your website and its pages.
- Test Multiple Pages - Avoid falling into the trap of just testing your home page and assuming your entire website is great just because your home page is. Instead, you should test multiple pages on your website to get a complete picture of it. Aim to try one page of each type as a minimum; for example, home, blog page, blog post page, and contact page. This is because different pages have different content and layouts and will likely have various problems.
- Use Production - This issue only applies to Lighthouse as PSI runs against a live URL. When running tests using Lighthouse, don't run the tests against your local development version of the website. This is because your local development instance will likely be faster (and test better) than the deployed production version that your users will see. So, to get the most accurate test results, run it against the production version your users will get.
The importance of speed
Out of all the metrics that are measured when evaluating a website using one of these tools, one of, if not the most important, is the performance and speed of it. So, in this section, let's explore why the speed of a website is vital to the developers making it, the users consuming it, and the overall SEO of the website.
Developers
Having a fast website is pivotal for developers because a fast website is a website that helps them achieve the goals that have been given to them by clients and companies. A fast website delivers a better UX and SEO performance, as we'll explore in a moment, but it can also help increase its conversion rate and boost a business's bottom line. This is because fast websites are more likely to retain and convert users into customers and generate revenue for the website's business.
Users
From a User Experience (UX) perspective, users want fast websites. If a website takes too long to load, people won't use it; instead, they'll back out and find another page. You've experienced this when a page has taken a long time to load, so do you want users doing that to your website?
Furthermore, if we pay attention to the possibility of a user backing out and changing pages, there is frustration if a page change or load takes too long. This frustration will likely lead to users forming negative opinions and connotations of your website, reducing their chances of returning to it.
SEO
In April 2023, the Page Experience Update was launched by Google. This update caused a debate about whether page speed is an important ranking metric for SEO. But, what is agreed upon is that exceptionally slow websites will be penalized in search rankings. So, while being the fastest website may or may not benefit you, you should still aim to have good page loading speeds to avoid penalties.
Ultimately, this is why Google has created tools like PageSpeed Insights and Lighthouse to help developers and website owners optimize their websites and their speed to be better candidates for search and consumers.
Conclusion: use PageSpeed Insights and Google Lighthouse
Throughout this post, we've been comparing both Google PageSpeed Insights and Google Lighthouse, looking at their similarities and differences and, ultimately, how we can leverage them to improve our websites to perform better for our businesses, users, and search engines.
As we've seen in this post, the differences between the two are few. For the vast majority of people, it makes sense to use the tool that is the most accessible to you unless you're trying to optimize for a specific metric only offered by one of the tools, such as PWA's on Lighthouse or accurate user data from PSI.
I hope you found this post helpful, and thank you for reading.
