Part 1: Understanding
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?
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.
This is the translation of that psychology into things we can measure.
Google is measuring your core web vitals right now.
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.
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.
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.
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.
Select one answer
You should detach your Chrome Devtools - this is to correctly emulate the pages that users will actually load.
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.