4 Optimizing Metrics

Optimizing metrics

Improving FCP Practice

Servers need to be quick
Files that need to be delivered are small
Distance for delivery is short

Quick servers

"Do fewer things"

Sized correctly
Minimal processing
Network bandwidth

Small documents

Content size
Compression (things like gzip, etc - specific to technology stack)

This will be dependent on the application, but there are certain upper limits on what you should send.

Short transmission

Where the servers are
How our CDNs are working
How many hops are made between servers

These performance changes are hard to demo, but on the course they were demo'd by simulating the compression and CDN locations.

Improving LCP

Defer resources until later
Optimize images
Reduce request overhead

We can chooce View original trace in a lighthouse report to see the trace waterfall that went into the calculated score.

In the metrics that we are looking at, we can see how the web vitals are calculated on a timeline and compare this to our specific pages to get a better insight into what might the cause.

Defer resources

Maybe things like the JS and images are not shown on the screen or are optional?

We can defer using a few options (not all will be explored):

Decorate script with an async attribute (prevent blocking loads but still executes)

<script async ... />

Decore script a defer attribute (don't execute until we are done)

<script defer ... />

Change the order of things that happen

<body>
  <img />
  <img />
  <script />
  <script />
</body>

Allow loading="lazy" for images - no longer a factor of LCP. The compatibility table of this shows a problem (Safari).

<img loading="lazy" />

Solve lazy loading with JavaScript. Solves compatibility issue.

Responsive Images practice

Even though you can delay images, they may still be quite big.

The example given related to the srcset and sizes attribute for the <img /> tag.

The other alternative is to use tools to crunch images (like TinyPNG, Squoosh, Sharp etc).

Reduce overhead

Use HTTP/2 (enables multiplexing)
Make use of cached assets locally
Pre-loading (can be done for things such as CSS with fonts, @imports etc) - done with the <link rel="preconnect" /> or <link rel="preload" />.

Improving CLS

The aim of the game here is to prevent things from moving around.

Everything that we've worked on with "deferring" image load can be the enemy of CLS.

Changing decisons on where elements go.
Preparing deferred elements to have "placeholder" sizes that keep the space we expect it to take.

Improving FID

This is a little bit more abstract. This is the timed delay between the first click and execution of app code.

This has an interaction wil LCP. If users can click before the deferred LCP assets are parsed and executed, the event callback of the app code for the click could be delayed significantly.

Really, what we want is to answer if the users will wait for the content that is loading:

How valuable is it to them?
How anxious are they?
Do they understand the wait?

Data beyond spreadsheets

Did we improve performance? There were many changes that we made to improve the different metrics.

We collected the field data and pasted it into the spreadsheets.
Because of the improvements we made, we can make estimations based on the desired business outcomes.

Other charts that can help:

Flame chart: relative performance for each user and how many experienced that.
Web vitals: another data layout that can give some insight for users over time.
Page load breakdowns: charting that information over time to see what went well/bad.