How do we know if a website is performant? 🤔

#performance #javascript #webdev #programming

I was recently asked by my friend a really important question about his project: Is this a performant website?. And because of that I started wondering, what does it actually mean that a website is performant or not. Is there some kind of universal metric that would allow me to distinguish easily that certain website is really well performing and other is completely broken?

These questions inspired me to write this article which will be a bit different than other because it will be more about free thoughts about certain topic rather than a tutorial so I am especially looking at your comments and ideas :)

Performance Auditing tools

If you ever looked at web performance auditing tools, you probably know that there is a lot of them. Some of them are more advanced than others and offer unique functionalities that cannot be that easily compared. List below contains some of the most popular ones:

Because of that, it is important to not only use one tool and believe it completely as it can show wrong data sometimes. The better solution would be to few of them continously so that you can take an average score and base your actions on this number.

My favourite tools

I am using Page Speed Insights on the daily basis as it delivers both the Lighthouse and CrUX score. So it kinda is a 2 in 1 tool that delivers you info about audits that were conducted on isolated environment (so called lab data) and on the real user experience (field data).

Thanks to that, you can compare how your website is perfoming in the box and how real users are experiencing it. From that comparison, you may have interesing results. For example, if a website has a CLS (Cumulative Layout Shift) metric score of 0 in Lighthouse and 0.3 in CrUX it means that for users, there is some layout shift that is bad for their experience.

By using PSI, you will get a score of Core Web Vitals and Lighthouse that will show you how your website is performing.

Is this a performant website?

By looking at above section, you may be thinking that we already received an answer to the question that I have stated in the title. We have an app that will tell us how our website is performing in isolated environment (lab) and for real users (field). So we are good to go right?

Not really :( As with many things in software development, the answer is usually:

it depends

Why? Because these metrics are standarized for all kinds of websites. And because of that you will be using the same metric for simple portfolio pages or blogs as for complex e-commerce websites and because of that you can get strange results. For example.

If a server side rendered e-commerce website gets a
Lighthouse score of 70, is it less performant than 
a static blog that gets the score of 85?

If we only take a look at numbers, then yes, the online store is less perfomant. But at this point we are not taking into consideration the fact, that e-commerce websites are more advanced, require more interactive and constantly changing data than a blog or portfolio page.

The better option here would be to compare scores of such metrics to the same application types, for example compare two e-commerce websites, not an e-commerce and a blog.

Summary

It is important to always have a proper context for performance auditing as without it you may be running in circles due to the fact that you just won't get as good scores for e-commerce as you can get for a blog. This is technically not possible (unless your e-commerce website has one product ;))

Let me know in the comments what are your thoughts about that