Improving First Input Delay

[00:00:00]
>> We are gonna move on to another score or another metric. We're gonna look at first input delay, which is a little bit more abstract. First input delay isn't a problem that we would really have on the current request metrics site. The first input delay is the browser time delay between the user's first click and the execution of application code.

[00:00:23]
So by pushing all of that stuff to do later, when the user thinks the page is ready, have we put too many things on the browser's plate that it can't respond fast enough and pass events to your code fast enough that the user feels like the page is fast?

[00:00:45]
Essentially, don't put too much stuff on the page. This also has an interaction with LCP. Let's say you have an obnoxious amount of JavaScript on your page, as far too many sites do. Well, if you have that obnoxious amount of JavaScript before LCP, well, the user will kind of forgive you, right?

[00:01:10]
You're loading, maybe you even have a loading screen that says, hey, here's a bunch of stuff that we have to download in order to do something. Well, depending on the value that your page is delivering, that might be okay. The user might understand and expect it. But if they don't understand and expect a delay, while you load JavaScript and you've pushed it to after the largest contentful paint as then you've shown the user, hey, I'm ready.

[00:01:36]
But in the background, the browser is still downloading and parsing and pulling together huge JavaScript applications. We've given the browser too much to do. And when the user starts to interact, the browser's gonna feel leggy it's gonna kind of jitter around and it's gonna be a bad experience.

[00:01:54]
It's gonna make the user feel like if your app is slow, and that's going to make them angry. Dealing with first input delay, is largely dependent on the psychology of waiting. So you've given the user an indication that the page is ready when largest contentful paint happens. But if your page isn't ready, because you really have a whole lot more JavaScript that is critical to the function of your page, and is going to consume a lot of the browser's resources, then your page isn't ready.

[00:02:29]
And your people or the amount of stuff you need to do is going to require the your user to wait. And so particularly I wanna call out point number six here is that, people are gonna wait for value. If you're building an app, and it is highly dynamic, highly interactive.

[00:02:50]
It's got video, it's like the front end master's course interaction kind of thing. The user will expect a certain amount of waiting. They're gonna expect that you're gonna deliver a lot of JavaScript. And they're gonna expect that like, it's gonna take a while to figure out what this application is gonna do, and they will forgive some of that.

[00:03:09]
But if you landed on npr.org, or CNN or New York Times or any of those new sites, and it prompted you with this obnoxious loading screen before you got to your article, you'd be like screw this, I don't need to wait for this. This is not something valuable enough that you need to delay my experience to pull down all this JavaScript for.

[00:03:30]
And so first input delay is a concerning metric for you. Chances are it means you're pushing down too much JavaScript for the value your users see on your site. So, will a user wait for it? You need to consider what the context is of your application. How anxious is your user when they are loading the page?

[00:03:55]
Did they just click on a news article and they're just avoiding what they should be doing and wasting time on the Internet? They're anxious level is low. Are they waiting for a medical results? Are they waiting for their loan approval? Are they waiting for whether or not they have this job?

[00:04:14]
Their anxiety level is probably pretty high. And they're going to be less forgiving of a wait. How valuable is this thing to them? If you're building a site that is delivering a lot of value, something that the user wouldn't expect to just get from any old website, well, they'll be willing to wait a little bit longer.

[00:04:33]
You can now put a loading screen up and the user will forgive you. They will expect it. But they wouldn't expect it if what you have delivering is a lower value thing, like a new site, a content site or whatever. And then do they understand the wait? You have made the user wait, while you load of the client side app.

[00:05:01]
Do they understand that? Do they understand why they're waiting? And do they value it enough to do the wait? These are things that you need to consider for your app. Okay, sorry, that's a little abstract. But first input delay is kind of abstract.