Oh, hi. Welcome to the racetrack. It's

such a wonderful day for a performance

race today.

Yeah, I knew it. Wow, what a race that

was. Okay, now back to business. I'm

Matias. Get in and buckle up. I'll take

you for a tour around a racing themed

website to explore the updated

performance panel and dev tools and

learn about local metrics, performance

insights, and speculation rules. So,

engine start in 3 2 1 go.

[music]

This is the website for our racing

track. Find it at the link below. It

features a big hero image and a headline

in a brand font. A layout as dozens and

dozens of product and landing pages out

there use it. A layout like this can be

a pitfall for performance. Let's briefly

go over the basics and see what happens

in detail. In Chrome DevTools, go to the

performance panel. With the updated

performance panel landing page, we

immediately can take a look at our core

web vital LCP, CLS, and INP as recorded

during page load. Those metrics also

take environment settings into account

as potentially configured on the right

hand side. We are at around 1.4 seconds

for LCP. That's all right. Just below

the timing, you see the LCP element. Not

too much surprise for this side. It's

the background image.

While our current timing is green, there

are some small improvements we can

implement for a layout like this. I bet

they are obvious for some. And if not,

don't fear. Performance insights are an

easily accessible guide.

To access them, record a performance

profile on load by pressing record and

reload in the lower right corner of the

performance panel.

After the recording is finished, open

the insight sidebar by clicking the

toggle in the top left corner of the

panel. Clicking on insights like LCP

request discovery gives you actionable

advice on how you can improve the

relevant metric and zoom the trace on

the right to the relevant section.

By clicking ask AI in an insight, you

can open the AI assistance panel and

start a chat to get insights tailored to

your specific site.

With this example though, we don't need

to touch the code and can just click the

toggles above the hero image to enable a

blur placeholder, prioritize the banner

image, and use a system font instead.

Let's see if that improves our SCP

timing by recording another trace. Yeah,

quite an improvement. So, keep

performance insights in mind next time

you need to debug a proper site that

doesn't have fixes enabled by checkbox.

Now, let's get back into the car and off

to the next station.

Scrolling down, you find the three

drivers taking part in this race. Ruby

writing, Jason HX, and Node Lee.

Clicking on any of the buttons below

their names takes you to the driver

profile. Now, the issue is those pages

take over 5 seconds to load. That's a

bad user experience, but we can't really

fix it because they're coming from a

different application owned by another

team. We have a way out, though.

Speculation rules. Go back to the main

page. Toggle the enable speculation

rules checkbox and reload.

Let's briefly explore what this checkbox

has done. Go to the elements panel.

Press command F to enable search and

type speculation rules. The little JSON

in the script element is a speculation

rules config and tells the browser to

pre-render a list of pages.

Of course, there is a more

straightforward way in DevTools to

inspect this config than looking at the

raw JSON.

Let's head to the application panel. In

the left panel, scroll down to

background services and select

speculative loads and then speculations.

Here you have easy access to both the

rules and the results. Since they all

marked as ready, our driver BIOS should

now load instantaneously as they are

pre-rendered.

You can click any of them to check and

observe an LCP close to zero. Amazing.

If this was the first time you heard

about speculation rules or you just need

a refresher, make sure to check this

link to learn more.

Speculation rules is only one of the

newer performance APIs.

There's another one that we can take for

a test drive. Come with me. The cars

racing on this track are animated with

request animation frame. So the

animation is running on the main threat.

By clicking on any of the tracks, you

can place an obstacle on the same track.

The collision detection in the cars will

try to calculate a route around the

obstacle which requires some heavy

computation.

This work is also happening on the main

thread blocking the animation. Sounds

confusing. Just click a track and see as

things come to a halt. At the same time,

looking at the local metrics in the

performance panel show an almost 2C INP

timing. Even people with super fast

devices will notice something is off

here. and they'd be right. But with

theuler yield API, you can break up a

long task and yield back to the main

thread to make room for other critical

work like updating animation frames

before continuing the task.

As with the first section, just click

the check box to enable this

optimization and reload. After

reloading, try placing an obstacle

again. With a scheduleuler yield now

being implemented, the animation is

running every other tick. So there's

visual feedback for you as a user, which

brings down inpul

yield, check our documentation about

long tasks on web.dev.

And that's it with our visit to the

racing track. By following along, you

learned about performance insights and

how you can ask AI for tailored advice.

How to debug speculation rules and

schedule a yield as a simple fix to

break up long tasks. Now you know your

way around the track and the performance

panel in Dev Tools. If you enjoyed the

ride, feel free to share this link with

a friend and get rev up

for the next DevTools adventure.

[music]

>> [music]