✅ Purchase hosting
✅ Register a domain
✅ Develop a great-looking website
✅ Hit publish
Test your website’s speed…
It’s frustrating and demotivating.
We know.
Especially after you’ve done all the right things.
Luckily, we’ve collected a list of optimizations that will allow you to transform your bad PSI score into…
But before that, there are some foundational insights (pun intended) you should know about Google’s PageSpeed Insights.
How to Navigate Your PSI Report (The Latest Version)
Millions of people use Google’s PSI – from website owners with zero technical expertise to experienced web developers. Hence, its UI must be easy to navigate and provide granular data simultaneously.
And it sure does.
Here are the main elements of your PSI report:
1. Mobile and Desktop Performance
When 53.74% of the total web visits are mobile, monitoring your site’s performance on desktop and mobile is essential.
In PSI, you can easily switch between both:
2. Core Web Vitals Assessment
In 2021, Google introduced the Core Web Vitals (CWV) – a set of three metrics measuring your page’s load time, visual stability, and page interactivity.
Basically, they are Google’s way of sizing up your page’s overall UX.
The respective metrics are:
- Largest Contentful Paint (LCP) – measures how long it takes for the largest above-the-fold element to load on a page.
- First Input Delay (FID) – measures the delay between a user’s first interaction and the moment the browser can respond.
- Cumulative Layout Shift (CLS) – measures how much unexpected layout shifts affect the user experience on a page.
In the widget, there are three other notable metrics:
- First Contentful Paint (FCP) – measure the time it takes for the browser to visualize the first piece of DOM content (e.g., image, SVG, non-blank canvas element) on a page.
- Interaction to Next Paint (INP) – records the latency of all interactions throughout the entire page lifecycle.
- Time to First Byte (TTFB) – measures how long it takes for a client’s browser to receive the first byte of the response from the server.
They don’t play a part in your Core Web Vitals assessment. However, each measures an important aspect of your site’s loading process, so you should aim to achieve a good score on all three.
Note that the CWV widget shows data for the last 28 days. This means you will not see an immediate improvement in your Core Web Vitals after applying some optimizations.
And one more thing…
From the top right corner, you can switch between “This URL” and “Origin”:
- “This URL” shows Core Web Vitals results for the specific web page you’re testing.
- “Origin” provides data about your site’s overall Core Web Vitals score.
What if PSI doesn’t show CWV data?
There are two reasons for that to happen:
- Your property is new in Search Console (it might take a few days before CWV data is shown)
- There is not enough data available in the CrUX report to provide meaningful information for the chosen device type (desktop or mobile)
3. Performance Score & Opportunities and Diagnostics
The next section is your Performance score, followed by the Opportunities and Diagnostics panel.
In a recent update (Oct 2022), Google has added three more scores in addition to Performance. The added categories are Accessibility, Best Practices, and SEO.
- Accessibility – measures your site’s availability to users regardless of impairments or operational diversity.
- Best Practices – evaluates if your website adheres to guidelines regarding trust and safety, JavaScript, images, source maps, etc.
- SEO – measures how well your web page follows basic search engine optimization advice.
Then, you have the metrics that build your Performance score:
And at the bottom, you will see the Opportunities and Diagnostics panels.
In a nutshell, they provide you with a list of optimizations that, once applied, will improve your PSI score and Core Web Vitals.
Each improvement suggestion is expandable, providing you with more granular data, an explanation of the warning, what improvements you can expect, and affected metrics.
And here’s a nice trick…
By clicking on each score, you will be redirected to the specific optimization suggestion that will affect it.
On the other hand, you can switch between audits relevant to specific metrics – FCP, TBT, CLS, or LCP.
What Do You Consider a Good PSI Score for a Web Page?
A score of 90 or above is considered good. 50 to 89 is a score that needs improvement. Аnd below 50 is considered poor.
The good thing is that Google’s PSI uses a tri-color scoring system, so you shouldn’t bother remembering the exact thresholds.
The only things you should remember are that:
- Green = Good Performance
- Orange = Needs Improvement
- Red = Poor Performance
And you will find the tri-color system used all over your PSI report:
How is My Site’s Performance Score Calculated?
Your Performance score is a weighted average of these six metrics:
- First Contentful Paint (FCP)
- Time to Interactive (TTI)
- Speed Index
- Total Blocking Time (TBT)
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
Each metric has a different weight and, respectively – a different impact on your score:
Important note from Google:
“In general, only metrics contribute to your [Lighthouse] Performance score, not the results of Opportunities or Diagnostics. That said, improving the opportunities and diagnostics likely improve the metric values, so there is an indirect relationship.”
Why is My Score Different Each Time I Test?
You’ve probably noticed that your PSI score can fluctuate without applying any changes to your website.
Like the last time you ran a test and accidentally closed the tab, so you had to rerun it.
And all of a sudden, your score has changed.
Don’t worry, you’re not crazy, nor is there a problem with your website.
There are a lot of underlying conditions and variables that impact your Performance score. Including:
- A/B tests or changes in ads being served
- Internet traffic routing changes
- Testing on different devices (a high-performance desktop vs. a low-performance laptop)
- Browser extensions that inject JavaScript and add/modify network requests
- Antivirus software
In fact, there’s in-depth Lighthouse documentation on variability, zoning in on the different factors that play a role in your site’s score and its fluctuation.
Make sure to look them up, and remember – don’t jump to conclusions about your site’s performance after a single-page speed test. Run tests regularly and use other testing tools as well.
Now, let’s move on to the next most baffling question about PageSpeed scores.
Why is My Mobile Performance Score Lower Than My Desktop?
These are the three main reasons:
- Mobile devices have slower processors
- PageSpeed Insights run mobile tests on a slower network
- Mobile devices have device-specific CSS rules (re-sizing images, viewport size, etc.)
Let’s delve deeper into each reason.
Firstly, although today’s mobile devices are advanced, we can agree they cannot be compared to the latest Mac or custom-built PCs. Hence, they have less computing power which leads to slower page rendering.
Secondly, PSI uses a slow 4G throttling when testing your site on mobile:
The truth is mobile networks are unstable.
For instance, you’re surfing at full 4G or 5G speed on your way to the subway. After a few minutes, you’re already under the ground, and suddenly, your connectivity worsens.
Hence, the browsing experience gets slower.
To recreate these scenarios accurately, Google runs a mobile test on a slower network.
Lastly, mobile devices resize the various page elements, such as images. This is referred to as mobile CSS language rules. These processes take a toll and slow down your site’s performance.
So the next time you test your site and see a difference between the mobile and desktop score, remind yourself there are reasons for that outside of your control.
How much does the Google PSI score matter?
Not as much as you think.
Here’s the truth:
Your Performance score is based on lab data.
The lab data is provided by Lighthouse. It’s collected within a controlled environment with a predefined device and network settings.
Put simply, a 100/100 score does not mean that your visitors have an excellent experience browsing your website.
You do not need to over-obsess with reaching a perfect score. That’s not how Google PageSpeed Insights is meant to be used.
You should instead focus on implementing all suggestions in the Opportunity and Diagnostics panel. That will lead to much greater benefits for your website.
Like…
The Core Web Vitals assessment we mentioned earlier is based on field data (also known as Real User Monitoring).
“Field data is determined by monitoring all users who visit a page and measuring a given set of performance metrics for each one of those users’ individual experiences. Because field data is based on real-user visits, it reflects the actual devices, network conditions, and geographic locations of your users.”
The Chrome User Experience Report (CrUX) provides information for the Core Web Vitals section in your PSI report.
Another harsh truth is that:
Your PageSpeed score will not affect your ranking. Core Web Vitals will.
Passing them is what boosts your site in the SERP and leads to more conversions.
For example, Rakuten 24 increased revenue per visitor by 53.37% and conversion rate by 33.13% after improving their Core Web Vitals.
Another one would be The Economic Times which reduced their bounce rates across their website by 43% after optimizing their Largest Contentful Paint (LCP) and Cumulative Layoutshift (CLS) scores.
То summarize:
Use the Performance score for testing and debugging purposes. Don’t waste your time chasing the perfect score. While it looks good on paper, it doesn’t do much in the real world. A lot of websites have 100/100 PSI scores but fail their CWV. In fact, according to the latest CrUX results – only 41.6% of all tested websites have good Core Web Vitals.
How to Improve Your PageSpeed Score on Both Mobile and Desktop (Checklist)
We’ve prepared a list of the optimizations that will have the most significant impact on your PageSpeed score and real-world performance.
1. Add a caching layer
Having a caching layer on your website is one of the fundamental steps towards improving your performance, reducing your server’s load, and providing visitors with an exceptional experience.
Next steps: Use a world-class caching tool that automatically adds a caching layer to your website.
2. Optimize your images
99% of websites rely on visual content to engage their visitors. However, unoptimized images can seriously hinder your site’s performance, leading to unsatisfactory results. That’s why it is important to apply the respective optimizations.
Next steps: Choose the right image format (JPEG, WebP, PNG, etc.), compress them before uploading to reduce their file size, and use a CDN.
3. Compress and minify your code
Reducing HTML, CSS, and JavaScript file size is crucial to speeding up your website. You can make your site’s code lighter by compressing or minifying it. Applying code minification will remove unnecessary parts like whitespace and comments from the code, on the other hand – code compression will apply algorithms to rewrite the files’ binary code, using fewer bits than the original.
Next steps: Apply code compression and minification (manually or using a tool).
4. Eliminate render-blocking resources
Some CSS and JavaScript files can be “render-blocking.”
When the browser encounters them, it must download, parse, and execute them before doing anything else, including rendering.
To optimize the rendering process, you can apply techniques such as Critical CSS, delay third-party scripts by using async and defer, and apply code optimization and splitting.
Next steps: Implement Critical CSS, defer third-party scripts, and apply code optimization (manually, ask a developer or use a tool).
5. Minimize main-thread work
The Main Thread is where the browser does most of the work needed to display a page. Long-running JavaScript tasks can block the Main Thread, leading to slow load times, unresponsive pages, and a bad user experience.
Next steps: Remove unnecessary plugins, implement Critical CSS, reduce unused CSS, and delay or remove third-party JavaScript.
6. Reduce the impact of third-party code
Most websites rely on third-party scripts. Of course, there’s nothing wrong with it, but there’s a thin line between helping your site and hurting it. That’s why it’s essential to minimize their negative impact while still utilizing their valuable features.
Next steps: Lazy load third-party scripts, try self-hosting some of them, establish early connections using prefetch, or remove entirely the ones that don’t serve you.
7. Bonus Advice: Use CDN to serve your content
A Content Delivery Network (CDN) consists of multiple geographically distributed servers at various points of presence (PoP) all around the globe.
Relying on a CDN will shorten the physical distance between your users and your content (web servers). It’s a great way to speed up your site while doing business internationally.
Next steps: Find a CDN provider with a large network of servers distributed all over the globe.
Wrapping Up
Regularly testing your website will allow you always to know how your website’s performing.
However, avoid focusing solely on your PageSpeed score.
Instead, knuckle down and start implementing all improvement suggestions. Everything else will follow.
You will see an immediate boost in your Performance score, but more importantly – you will be on the path toward passing your Core Web Vitals.
We know that standing in front of a long list of improvement suggestions can be frightening.
But the good news is you can deal with them automatically!
As an all-in-one solution, NitroPack combines 35+ optimizations to improve your site’s performance. No need to write or change a single line of code.
Install, connect, and NitroPack starts applying improvements on its own.
You can see your site with NitroPack before installing, and there’s a 14-day money-back guarantee if you don’t see immediate results.
