Why does Performance Matter?
If your User Interface takes 10 seconds or more to respond to an interaction.
Then we should talk here.
If our page takes too long to load, it will impact user engagement.
Here's some research on web performance
Anderdeen Group found that a 1 second slow down resulted 11% fewer page views, 7% less Conversion.
Akamai found that 2 seconds delay in web page load time Increase bounce rates by 103%
400 millisecond improvement in performance resulted in a 9% INCREASE in TRAFFIC at Yahoo.
Google found that 2% Slower page resulted in 2% FEWER searches, which means 2% fewer ads shown.
100 millisecond improvement in Performance results in 1% INCREASE in overall Revenue at Amazon.
53% of Users will LEAVE a Mobile site if it takes MORE THAN 3 SECS TO LOAD.
👉 According to the research, if you want Users to FEEL LIKE your site is Faster than your competitors, you need to be 20% faster.
👉 Secondly, as we ship more and more code to the browser, the time to get that code is taking longer and longer.
👉 People usingLTEis also getting slower.
👉 As engineers, we love to write applications, but our applications have to make money to survive.
Slow page load leads to loss of traffic, conversion rate, clients, and money.
That's why performance is extremely important.
Think about Performance
There are different kinds of performance.
1) Network Load Performance
Until the user actually gets the page, there isn't much to optimize.
2) JavaScript Performance
Write code that runs faster, later, or not at all.
3) Rendering Performance
It turns out most of our Javascript happens in the browser, which has its own performance concerns.
They are equally important. But what your application needs to do matters.
Where is the paint point of your application?
Care about What matters to you
The New York Times might care about the time to first headline
Chrome might care about time to inspect the element
Twitter (X) might care about the time to first tweet
Facebook might care about the time to first post
What does your product or project care about?
How do we improve the performance of our application?
We have to...
Measure
If you can't measure, you can't improve.
Don't go just blindly applying Performance optimizations.
There is a cost to every abstraction - and everything has a TRADE OFF.
Please, don't do Premature Optimization.
Performance is one of those things where if we're not keeping an eye on it, it has a chance of getting away from us.
Some things to think about while measuring
Are we testing performance on a fancy Macbook Pro or consumer-grade hardware?
Are we simulating LESS than Perfect network conditions
What is our Performance Budget?
👉 Thinking deeply about the architecture and design of your application is a better use of your time than MICRO-Benchmarks (micro-optimization)
👉 The way we architect the application itself CAN make our stuff Faster before care about the actual parts and compilation performance.
For example with React applications. It can be the way you architect the Component Hierarchy and the State management before any kind of caching or memorization technique.
Three Tiers of Advice
Definitely do this
Maybe do this, but measure before and after
Only do this IF you find a performance problem that needs optimizing
Golden Rules of Performance
Doing LESS stuff Takes Less time
Not doing stuff is faster than doing them.
If you can do it LATER. Don't do it now. Do it Later.
Reference Source: JavaScript Performance Workshop by Steve Kinney