These notes are sourced from Web Performance Fundamentals on Front End Masters by Todd Gardner

Understanding Performance

Why is performance important?

The main two reasons are:

1. As of 2021, Google ranks you on performance. Performance can make a big difference in whether people see your site on Google search results.
2. Angry and frustrated users don't stick around long.

In the real world, a faster load time can increase revenue and conversion rates.

What does fast mean?

Websites that feel fast have ads as an afterthought. All the content you want is all there, but later, come the ads. When ads load first, it's distracting and slows down the content of the page.

Know the psychology of users:

1. People want to start
2. Bored waits feel slower
3. Anxious waits feel slower
4. Unexplained waits feel slower (Why am I waiting?)
5. Uncertain waits feel slower (How long is this going to take?)
6. People will wait for value

Measuring Web Vitals/Performance

The old way: page load, how long from the time you clicked until the page loaded
The new way: web vitals

1. FCP: first contentful paint
2. LCP: largest contentful paint
3. CLS: cumulative layout shift
4. FID: first input delay

Google's web master tools measure these values and if you cross over their threshold they'll say they'll reduce your rank if you don't fix the issue

FCP: Respond quickly

Time from when the user clicks the link and the first meaningful bit of content enters the page.

100ms means good performance
300ms means poor performance

LCP: get to the point

The time at which the largest percentage of the screen has been rendered gets the LCP. A proxy for when the user thinks the page is almost ready, and most of the page is there.

2.5s means good performance
4.0s means poor performance

CLS: don't move stuff

All the times shifts (pushing the page down as loads come in) happen as the page loads.

.1 means good performance
.25 means poor performance

First Input Delay: don't load too much

Browser time delay between the user's first click and execution of application code.

Lighthouse: Measuring your performance in Chrome

Lighthouse is a top level tab in dev tools. Lighthouse generates a performance report. Make sure you clear storage and leave throttling on (simulate what a user sees versus what a developer sees).

Generate report to reload Chrome in the background and produce a performance report. It'll show all the above metrics and a couple more.

FYI:

• Chrome Lighthouse reports are relative to what a user sees
• Shows the performance relative to the Chrome window size so make sure to detatch
• Chrome application priority (make sure Chrome stays in the foreground)