Nesters Kovalkovs

YouTube video by Nesters Kovalkovs Day 3 of page performance livestreams. More roasts!?!

Day 3 of page performance livestreams.

I shall continue roasting and teaching some more.

Twitch: www.twitch.tv/nestersk
YT: www.youtube.com/watch?v=-CI4...

Here's some free content for those who are too lazy to attend:
excalidraw.com#json=9_OBCvw...

YouTube video by Nesters Kovalkovs 'Page performance' roasts today? Time to cook @austernotus and @GarethWall!

'Page performance' roasts today?
Time to cook @austernotus.bsky.social and @garethwall.bsky.social.
Welcome to join the discussion and get roasted as well.

Twitch: www.twitch.tv/nestersk
YT: www.youtube.com/watch?v=AjqC...

Page performance livestreams for my Season 1 content are well underway.

Streaming every day this week.

Roasts, educational streams with more technical deep dive, Q&As, and more.

Feel free to join.

Recording from yesterday's livestream:
www.youtube.com/live/gPqByIR...

Yes, that's what you measure on PageSpeed Insights - pagespeed.web.dev

Once I start roasting people, there will be more of that!

In this case:
- reviewed existing code and it had couple leftover scripts that were no longer used but still parsed and executed - REMOVED
- moved some styling/script files to inline - they were small
- small changes to defer couple scripts

Walk the talk.

I spent almost an hour getting my newsletter sign up page to a perfect 100 Lighthouse score on mobile.

No functionality sacrificed.

Yes, it will sometimes return 99.
Yes, the page is just the form.

However, it was hovering over high 80s/low 90s for too long.

I got the job done.

We'll be diving more into specific metrics and their optimization in future posts.

Links:
(1) Lighthouse score calculator: googlechrome.github.io/lighthouse/s...
(2) Chart showcasing awarded score weight vs. absolute performance score in a metric (diminishing returns):
t.co/j6QjSRvRn0

I did not mention 'optimizing SEO' in these use cases, because Google Lighthouse itself is not relevant for that directly.
It can provide some guidance for user experience, sure, but that might not have any impact on SEO.

4. Site monitoring health over time - it can help identify issues with the website changes or degradation in server infrastructure performance

5. Evaluating introduction of 3rd party tools - whether it's a live chat client, user tracking for analytics - they all leave negative impact on performance

3. User Experience review for various audiences - mobile vs. desktop, new users vs. returning users, performance for different entry points (homepage, blog posts, product page etc), and more

Google Lighthouse is only relevant and comparable within a specific context.

Common use cases

1. Debugging performance issues - run it during development to identify bottlenecks

2. Automated testing in CI/CD pipelines - maintain quality standards by running it as part of your development workflow

You can run the test with:
- different network conditions (including throttling)
- different device performance (and/or throttling)
- cache vs. no-cache
- different pages on the website

Every single variable here can severely impact the score you'll get as part of the lab test.

Those last 100ms of load time are much harder to optimize for than the same 100ms, when your site is performing poorly.

Simulated nature of the test
Now that you understand how the score is calculated - there's another issue - it's a simulated 'lab test'.

No two scores are the same.

In real life, when you're trying to squeeze the very last bit out of everything - you hit physical limits - the performance of your hardware, bandwidth of your internet connection, the responsiveness of your server etc.

Google's own documentation states: "For example, taking a score from 99 to 100 needs about the same amount of metric improvement that would take a 90 to 94."

And that's only 'metric improvement' - the absolute change in a value.

You might have noticed that in life often becoming top 10% in something is challenging, but achievable, however, going from top 10% to top 1% is incredibly hard.
Well, it's the same with Google Lighthouse.

This is the case for TBT, for example, with 30% contribution to score, while not being a primary Core Web Vitals metric.

And when you're aiming for that perfect 100 - you will hit the beautiful wall of diminishing returns.

What might blow your mind is that - the metrics with large contribution to your Lighthouse score are not even the ones that determine, whether you pass or fail for the Core Web Vitals Assessment (the field data, explained in the previous post)

Fail one - and your score is nowhere close to 100.

Let's look at what these metrics are, and their respective weight in the scoring:
Total Blocking Time (TBT) - 30%
Largest Contentful Paint (LCP) - 25%
Cumulative Layout Shift (CLS) - 25%
Speed Index (SI) - 10%
First Contentful Paint (FCP) - 10%

You just can't quite get the same score between multiple test runs.

The score calculation
The Lighthouse score is a weighted average of five key performance metrics that Chrome collects and evaluates during a page load.
So you have these 5 metrics, and each contributes a portion of the score.

Good Lighthouse score

Google Lighthouse scoring calculator

Scoring curve showcasing diminishing returns

Yes, you read that right.

Why you've been struggling to get a perfect Google Lighthouse score

Let's continue with breaking down the PageSpeed Insights. This time - how exactly is the Lighthouse performance score calculated?

I bet at least some of you have lost sleep over it.
It might have felt like playing a slot machine.

Where to go from here
To truly make use of the tool and these reports - you will need more understanding on what each of these metrics mean, and how they can be optimized.

This is what I will focus on in future posts.

6. Cost saving - there are cases where you can both save on your cloud bill, as well as, reduce your ad spend by making the site faster - if the person doesn't wait for your page to load, you still pay for the click with Ads.

5. Monitoring - you can identify how performance changes over time with shifts in audience, network conditions, as well as, changes you make to the website. Sometimes it goes overlooked how one small change might have completely ruined user experience.

4. Competitive analysis - you can use PSI as a benchmark to understand what the industry / niche standard is for performance related user experience.

3. User experience improvement - PSI is a good showcase of potential problem areas in user experience, particularly for mobile users that can represent 75-80% of the total audience.

2. SEO enhancement - Core Web Vitals (the field data) is a minor ranking factor, and, especially slow, websites might even have issues with indexing by exhausting search engine crawlers.

1. Website optimization - lab data, aside from scoring, still provides good information on exactly what you could be improving, identifying individual scripts and resources that might be 'problem areas'.
Web developers often overspend time on this, but it's still a good guide.

You'll understand where your website and real users are trending in terms of 'user experience'.

That's actionable feedback.

Common use cases
Now that we have put the two parts of PSI together - the lab and the field data, let's consider common use cases.

The issue with this report is that it can't be accessed for low volume sites. You would need around 1000+ monthly visits to start seeing field reports for your website.

Field data makes this report very valuable and you should consider reviewing it at least monthly.