iiinova — where your digital self keeps evolving

Nesters Kovalkovs @nesters.me · 19/12/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.com

Day 3 of page performance livestreams. More roasts!?!

YouTube video by Nesters Kovalkovs

051

Nesters Kovalkovs @nesters.me · 18/12/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.com

'Page performance' roasts today? Time to cook @austernotus and @GarethWall!

YouTube video by Nesters Kovalkovs

030

Nesters Kovalkovs @nesters.me · 18/12/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...

youtube.com

YouTube

Share your videos with friends, family, and the world

010

Nesters Kovalkovs @nesters.me · 13/12/2024

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

pagespeed.web.dev

PageSpeed Insights

000

Nesters Kovalkovs @nesters.me · 13/12/2024

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

010

Nesters Kovalkovs @nesters.me · 13/12/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.

220

Nesters Kovalkovs @nesters.me · 12/12/2024

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

t.co

https://www.desmos.com/calculator/dufar5rf4g

010

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 12/12/2024

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)

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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%

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

100

Nesters Kovalkovs @nesters.me · 12/12/2024

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.

Scoring curve showcasing diminishing returns

140

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

010

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

120

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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

110

Nesters Kovalkovs @nesters.me · 11/12/2024

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.

Poor user experience - according to PageSpeed Insights

130

Nesters Kovalkovs @nesters.me · 10/12/2024

The rest of the BadBI series didn't make it to BS-ky?

110

Nesters Kovalkovs @nesters.me · 09/12/2024

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

youtube.com

Nesters Kovalkovs

000

Nesters Kovalkovs @nesters.me · 09/12/2024

- 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

nesters.me

Accelerated Growth Insights Newsletter

Receive insights on how to accelerate your growth by improving your conversions, customer experience, marketing, sales funnels, and more. Join AGI today.

120

Nesters Kovalkovs @nesters.me · 09/12/2024

- 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

100

Nesters Kovalkovs @nesters.me · 09/12/2024

- 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

100

Nesters Kovalkovs @nesters.me · 09/12/2024

- 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

100

Nesters Kovalkovs @nesters.me · 09/12/2024

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

100

Nesters Kovalkovs @nesters.me · 09/12/2024

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

110

Nesters Kovalkovs @nesters.me · 09/12/2024

- 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

100

Nesters Kovalkovs @nesters.me · 09/12/2024

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

100

Nesters Kovalkovs @nesters.me · 09/12/2024

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: 👇

120

Nesters Kovalkovs @nesters.me · 09/12/2024

Technically, no. For Season 1, I mainly need to execute - which already is a problem because I don't have any inertia going for me in terms of publishing content to various channels. However, I could measure it in engagement OR actual sales (plan to add paid content to each season).

000