Nesters Kovalkovs

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

18 Dec 2024

'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...

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

19 Dec 2024

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.comYouTubeShare your videos with friends, family, and the world

18 Dec 2024

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...

13 Dec 2024

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.

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.

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.

t.cohttps://www.desmos.com/calculator/dufar5rf4g

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

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

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

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.

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

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.

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.

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.

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.

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)

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.

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.

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%

Why PageSpeed Insights (PSI) doesn't serve you well But, first - let's address what PageSpeed Insights is. It's a free web performance analysis tool by Google. The goal? Provide a report on how a webpage performs in terms of speed and user experience.

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.

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.

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

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.

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.

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.

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.

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.

Except, to be considered Good - at least 75% of your real Chrome users would need to meet Google's set benchmark for each individual metric of choice. The 'core' of these metrics is: Largest Contentful Paint (LCP) Interaction to Next Paint (INP) Cumulative Layout Shift (CLS).

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.

And when it is, it might be something you are not willing to compromise on. Field data Now there is the other side of PageSpeed Insights tool. It's better known as Core Web Vitals or CrUX (Chrome User Experience Report).

This part of the report encompasses couple key metrics, and provides a report on real Chrome user data from the last 28 days (with access to historic data via API). Same 'Good' / 'Needs improvement' / 'Poor' labeling is used.

The breakdown is quite simple: 90+ score (green color) - good 50-89 score (amber color) - needs improvement <50 score (red circle) - poor. Because of the simulated nature of the test, which is emulated as a slow device with poor network conditions - it is meaningless for real user representation.

You can find yourself stuck with a site that has 45 score for performance (so called 'poor experience') and you struggle making it go any higher. And the list of recommendations is heavily focused on scripts (especially, JavaScript), which often is not the main culprit for a poor score.

The outcome? A detailed report on metrics and recommendations for improvement for both - the mobile and desktop devices. So far so good. However, what people mostly focus on is the Lighthouse performance score provided by the 'lab test'.

The lab data This is the iconic part of PageSpeed Insights. A green, amber or red colored circle with a score in the middle. If you've seen the red circle, there's a chance you've 'wasted' countless hours optimizing your site, and, eventually, gave up.

nesters.meAccelerated Growth Insights NewsletterReceive insights on how to accelerate your growth by improving your conversions, customer experience, marketing, sales funnels, and more. Join AGI today.

Last week I introduced my new content model for the foreseeable future - Seasons. I expect it to be my primary content focus for the next year. Let’s address the actual content plan for Season 1, which is focused on ‘page performance’. The topics I plan to cover in this Season: 👇

- a product(?): not guaranteed, but I have done some initial research for a potential SaaS launch within the Season 1 context However, I'll include ways to find me on the other channels, so you can follow along: - newsletter (aggregated Seasons coverage and other insights) - nesters.me/newsletter

youtube.comNesters Kovalkovs

- X - x.com/nestersk - Twitch (for livestreams) - twitch.tv/nestersk - YT (for livestreams AND videos) - youtube.com/@nesterskova... - LinkedIn (for potential posts) - linkedin.com/in/nestersk/ You can sign up for the newsletter, drop a follow/subscribe on the other platforms, if you wish to.

- livestreams: covering more technical walkthrough and optimization possibilities, likely combined with the roasts. This will the primary channel to learn in-depth technical aspects and strategies to address page performance

- Spaces on X: there will be at least a single discussion on X about the whole topic, so you’re welcome to tune in - paid workshop / mini-course: this is quite possibly something I am considering to put together as the most condensed version of consuming all the knowledge at once

What and where will it be covered: - written social media posts (X, the other platform, and maybe even in LinkedIn): medium to long posts walking you through each individual aspect. Supposed to be educational and informative

- Shorts and short-to-medium length YT videos: same topics covered with more visual explanation for those who need it, this might include the ‘roasts’ - newsletter posts: couple posts covering the same topics in an aggregated form, more directed toward audience that might miss it elsewhere

- Other relevant aspects and metrics to measure impact of your site’s performance: bounce rate, time spent on site, conversion rate etc - Optimizing performance: where to start, most important issues to look at, and why optimizing for Google Lighthouse / GTMetrix scores is not the right approach

- Page performance impact on SEO: indexing issues and potential penalties due to poor user experience signals

- Google Lighthouse and PageSpeed Insights: what it is, what it is useful for, and why it causes so much confusion and frustration for people - Core Web Vitals: what it is, why it’s actually a more relevant benchmark for you, and what metrics go into it (LCP, CLS, INP etc)

How to get your next 100 followers. A thread. 👇

Join 3 additional Starter Packs.