Elements of Performance
Part 1: Understanding
- Psychology of performance.
- Measuring performance.
- Interpreting performance data.
Why is performance important>
- There are a lot of conversion stats (although you need to take these studies with a grain of salt).
- Take with a grain of salt (correlation is not the same as causation).
- There is no one metric that perfectly correlates with another.
- "Google says so" - this is really important, because they will rank your site based on performance.
- Angry and frustated users won't stick around long.
Perceived performance exercise
This exercise asks us to say what we "think" in terms of how performant websites are.
So, why is it that we "think" these things are slow?
- A lot of the content did not come first.
- Ads were a priority and took our attention first.
The psychology of waiting
The example given was a bar with no queue that you wait forever for the bar tender to serve you.
The contrast example was a busy bar when you expect the bar tender to server you.
These perceptions relate the psychology of waiting.
- People want to start.
- Bored waits feel slower.
- Anxious waits feels slower.
- Unexplained waits feel slower.
- Uncertain waits feel slower.
- People will wait for value.
Web vitals
This is the translation of that psychology into things we can measure.
- The old way: page load (start until load). This event became gained (lazy-loading).
- The new way: Start -> first contentful paint -> largest contentful paint. We also include culmulative layout shift + first input delay. These are the core web vitals.
Google is measuring your core web vitals right now.
What should we think about to understand performance?
First Contentful Paint (FCP)
Time from the user clicks the link until the first bit of content is rendered.
This ties back to the time until the user sees an indication that the page is loading ie respond quick.
Largest Contentful Paint (LCP)
Throughout the loading cycle, different parts of the screen will draw. The time for the largest amount of area is drawn is the LCP.
This is when the user percieves the website as "almost ready" or ready ie get to the point.
Culmulative Layout Shift (CLS)
The gif used to represent this is when a user goes to click a button and then the hover asynchronously loads something else and you almost click an ad.
This movement is frustating and is known as layout shift. The CLS is the culmulative of ALL of these layout shifts.
This is done over the lifecycle of the entire page. If you keep loading things in later and pushing things down, Google won't like this ie don't move stuff around.
How might this affect client-side rendering? In those applications, it could redraw a whole page. If it pushed stuff around, it just ruined your CLS.
First Input Delay (FID)
This is the hardest for people to initially understand.
If the browser looks ready, but then you go to click on an article, they may have deferred a lot of content.
If they're delayed a lot of content, then clicking on the link might actually have a delay before the event first because of the loading delay.
This time between the first click and the execution of the application code ie don't load what you don't need.
In layperson terms, describe FCP?
Select one answer
Using Lighthouse
You should detach your Chrome Devtools - this is to correctly emulate the pages that users will actually load.
With the LightHouse tab itself, you want to ensure that you are selecting Clear storage and Simulate Throttling before running a performance report. It should ask "what would an experience for a first-time user be?".
LightHouse can do a bunch of other things, but in this case we will just focus on performance.
After selecting, it will produce a report and give you some information on the web vitals.
Quirks
- Relative to your machine (or throttled version of your machine).
- Performance is also relative to Chrome window size.
- Chrome application priority also applies - it should stay in the foreground.