1/24 WWT: Accelerate with Interaction to Next Paint Insights

So today, we are going to be talking about INP

And the title of this webinar, Accelerate with InP Insights. Before we get into it, though, a little bit about myself

My name is Trevor Tevel, and I assist publishers with optimizations. I help them achieve goals and kind of like their go-to advisor business partner

I work in the San Diego office. I love reading and collecting comic books

You can see my little Spider-Man pin. I'm a jazz music enthusiast

If you don't know, it's Jazzuary right now. I perform and teach improv comedy

I'm married. And I have a mini golden doodle named Honey, which you can see here

she is either screaming or laughing or both. And if you make it through the end of this presentation

you'll get to see a picture of me doing improv. So stay tuned for that

Before we dive in, where to find webinars, you can access all recordings at support.ezoic.com

in the webinar library. And they're recorded, but also if you ever miss one, it's always posted in the webinar library and you can access it

Like I mentioned, going to support.ezoic.com. You can also access the library by going to levels or support in your account settings

Or if you prefer to read rather than watch a video, webinars are also converted to blogs

which you can see at zoic.com slash blogs. I also, shameless plug, I did a webinar on site speed last year that you should definitely check out if you haven't already

And what I'll do is I'll post it in the chat right now

But yeah, let me grab that. And it's optimizing site speed. I'll just post that in the chat

And friendly reminder, if you have questions, post them in the questions and answer section

And we can get to those at the end if we have time. But yeah, if you're having generic speed questions

oh, I'm glad you collect comics too, Grant. We'll have to talk afterwards

But yeah, this optimizing sight speed really covers everything, generic about speed, so I would definitely recommend checking that out because today we are focusing

on something very specific, which is INP. We're going to talk about what it is. We're going to go into measuring

IMP and optimizing INP. So, the big question, what is INP? Interaction to net. Interaction to next

Next, Paint. So, IMP is a core web vital that will replace first input delay in

of this year. IMP observes the latency of all user interactions such as clicks, tags, and keyboard events throughout a user session on the page. It does not observe mouse hovering or scrolling

It reports a single millisecond value, which most other interactions on the page were below

A low INP score is less than or equal to 200 milliseconds

This means that a page is reliably responsive to user input. Now, the INP metric, the full duration associated with each

user interaction. That's what it measures. And the duration of an interaction includes the following

Input delay. The time the browser must wait before it can begin responding to a user interaction

Processing delay. The time it takes for a sites event handling code to execute and rendering delay

The time the browser takes to render the next paint as a visual result of the interaction

So you can see there, the input day, the processing delay. So how is INP different than FID

So first input delay measures the input delay of the first interaction a user makes on the page

IMP observes all user interactions that occur on the page, and it measures the entire duration of each observed user interaction rather than just the initial input delay

And why is Google replacing FID? Well, INP is considered to be more thorough and a reliable indicator of a site's overall user responsiveness

The IMP metric was created to address known limitations with FID. So next we're on to measuring IMP

You can see IMP will be added to your leaked dashboards. Definitely before the end of March

Our team is hoping to release it either next week or the week after or even soon So stay tuned for that And measuring INP So the IMP field data comes from the Chrome user experience report

also known as Crux data. And you can even check out information on crux data at

developer.com.com slash docs slash crux and I'll provide that URL for you right now in the chat. So if you can always take a look at

these on your own time if you'd like. And that will appear. That crux is a data set that reflects

how real world Chrome users experience popular destinations on the web. Crux is the

the official data set of the Web Vitals program. All user-centric core web vitals metrics

are represented in LEAP. So when you go to LEAP, you'll see your Core Web Vitals

If you click on INP, you'll see that graph that I highlighted on the previous page

And then if you scroll down, you'll see the worst pages for interaction to NextPain

And it's below the Core Web Vital graphs. And this can be used to identify

the pages with the worst IMP scores. Now, things to keep in mind with the worst pages report

look at page views. If a page is scoring bad, but it's getting minimal traffic, it doesn't

make sense to put your time and effort towards something that's getting a minimal amount

We want to focus on those pages that are scoring bad and also have a lot of page views

because fixing those first, it's definitely going to help your score. And then also something to keep in mind with Core Web Vitals

just a friendly reminder. They are impacted by users' browser, device type, country, connection, and more

So sometimes I see publishers, they're getting traffic from places that don't have the best internet connection

and that can impact core web vitals. So just something to think about overall

So measuring INP in the lab. So in a lab speed test like Leaps Lab tab or the PageSpeed Insights test

both FID and INP are not available because they are field data metrics that require real

or simulated user input. So in a lab setting, Google's recommendation is to use total blocking time as a substitute

and to help optimize INP. If you want to learn more about total blocking time, I can provide you that link right here

It's in web.com. And I'll place that in the chat for you all

So you have access to it. Now, total blocking time is a lab metric that assesses page responsiveness during load

And it correlates very well with INP. If your page has a high TBT, that's an important signal that you're

page may not be very responsive to user interactions during the initial page load

If what I'm saying doesn't make any sense at all, the thing that I would suggest remembering

is TBT measures how long a process or a system waits for resources to become available

And you can take a look at that image on the right. Like how long is it happening

Is it useful? Okay, is it usable? So think about total blocking time in that context if you're lost

So finding slow interactions on the page. So we've identified the page in leap

Now we need to find out where those slow interactions are happening

Now there's a few tools our team recommends. I feel like once we get a little closer to March

or later in the year, more tools will pop up, but use the one that works best for you

but these are the ones that our team has had success with

So the first one is debug bears, INP debugger, which simulates user interactions on a pages element

and it returns a list of interactions performed and their durations. This can be useful for finding what interactions on a page may be the biggest contributors to a low IMP score

And you can see right there, you just type in the URL and start the test, and you can change it to mobile or desktop

The next one is the Web Vitals Chrome extension. And this provides updating IMP readings when you manually interact with a page that you're on

Advanced Use instructions are available on web.dev for logging information to your Browser's Developer console with the extension

You can see right here as an example of the Web vitals Chrome extension

And then the last one is Lighthouse. And Lighthouse is accessible in a tab in your browser developer tools And there a time span mode that can be used to measure the IMP score of a page by manually interacting with it

Full instructions are available on web.dev. And this one is nice because you end the time span after interacting with the page and you'll

receive an IMP score and audits relevant to the IMP page. This one's probably the most technical

And what I'll do is I'll provide those links for you right now. So we have the INP debugger

You can find it at debugbear.com slash IMP-Dugger

Just post that in the chat. Then provided by Google in the Chrome Web Store, look up WebVitles

and that is a great extension to help you troubleshoot not only INP but your other core web vitals

We also have advanced instructions on the core web vitals extension, which you could find at web.dev

And you can find it in the article, manually diagnose slow interactions in the lab

And in that article as well, and I'll just provide the hyperlink to it

that give detailed information on how to utilize Lighthouse as well. So we've used those tools

Now it's time to optimize INP. And with optimizing INP, we can utilize LEAP's optimization settings that contain tags that signify which core web vital metrics they are relevant to

These images highlight what's going to be available in LEAP very soon

And to access, for example, these, you can go to LEAP to the Optimize tab in the left-hand side of the screen

and then you can click advanced settings under script exclusions or CSS or Minify

So you can access these. And we want to focus on reducing TBD scores and lab tests by addressing

TBT-specific audits. And we can monitor IMP scores in field data, which can be the graphs found in LEAP, and also available

in BDA. So you can see here, like, the big one that's going to help is like script delay, going to

script execution and then you'll see under script delay, this can really improve INP, reduce CPU

intensive tasks. This can also improve IMP. You'll see also disable ads above the fold can help with IMP, but we know that when we disable

this, it can really lower our overall revenue. So we want to be careful when we disable ads above the fold

And I'll get more into detail on this slide. So there's two types of delays associated with user interactions, input delay and processing delay

And they can be minimized by optimizing JavaScript loading, parsing, and execution

This helps reduce long tasks that can occupy the browser for a

extended periods and delay its ability to process user interactions. Leap script settings help the browser respond quickly to the first user interaction for FID by optimizing JavaScript to reduce input delay

So the JavaScript optimizations that these settings perform also reduce processing delay associated with user interactions

So like I mentioned earlier, LeapScript execution. category settings are the most relevant ones for improving INP

The first delay associated with user interactions, presentational delay, not presidential

is caused by the time the browser spends recalculating the pages layout and rendering

reducing and simplifying CSS can optimize the browser's style recalculations and improve

IMP scores. Leap CSS optimization settings help optimize the browser style recalculations

by removing unused CSS and minifying the CSS that is used. So I'm highlighting here

minify settings, we can minify JavaScript, and then we also have the critical CSS removed

unused CSS that can really help. You can monitor these in BDA. This is going to be added

into the core web vital section in BDA so you can monitor. The one thing that I do want to

stress is when we do make changes to our leap settings, so let's say you go in to script execution and you turn on one of those functions, we need to be patient

We not going to see an immediate impact to our core web vital scores What I recommend doing and what I typically do when I work with publishers is we make a change to the optimization settings And I like to usually wait seven to 14 days to see the reaction and then go from there

So further INP optimizations. So the Lighthouse Time Span mode, which I mentioned earlier, can provide IMP optimizations

specific audits once you interact with the page, which you can see here. And these audits can be

examined for opportunities to speed up user interactions, which you can see in the image. And then you can

identify the slow interactions in the page by using the leap and the tools that I mentioned earlier

find out which types of delays in those interactions are taking the longest. And then that information

can help you more accurately address your user interactions and more quickly improve your IMP scores

if the user interactions cannot be improved by utilizing those LEAP settings that I highlighted earlier

So if you've tried LEAP and you're still having those issues, here's what you can do

Most processing delays will come from how, a site is built and may not be able to be fully addressed by LEAP. So, for example, your site

could have event handling code that performs a lot of work in response to a user interaction

delaying the browser's next paint without any visual update like a loading icon. So to optimize

event handling code, you would want to speed it up or offload some of its tasks and or provide

a visual update to the user faster to improve your IMP scores. You can manually remove unused or

mostly unused CSS JavaScript and plugins from your site to reduce delays and improve

IMP scores. So when publishers typically reach out to me and they're like, Trevor, my site's slow

I need help. How can you make my site faster? How can we improve site speed

The biggest things that I often look at first and the things that I highlight are cloud integration

Are you name server, cloud player integrated, or are you WordPress or standalone

If you're cloud integrated, your site's going to be much faster as opposed to those other integrations

Reason why you can utilize all of LEAP settings, especially caching. That's the next thing I look at

What is your cash hit rate? Is it low? Is it high? We want a high cash hit rate

We want it in the green. Because we can deliver your site faster to users

And then the last thing that I look at is in that leap dashboard, I look at those recommendations

And I look at those plugins. A lot of people will sometimes have like two pages, three pages, just a laundry list of plugins

Those slow your site down. Are you really utilizing all of those plugins

Assess your site. If you aren't utilizing them, remove them and delete them from your WordPress

because even if you remove them and they're still present, it can still slow down your site

So I always think about that and I definitely touched on that in my last speed webinar

which you can check out in the webinar library. The other things that you can do is you can reduce

presentational delay through minimizing the DOM size of your pages. And if you're still lost, don't sweat

We're here to help. You can reach out to your publisher's success manager

You can reach out to support. Or you can even go to the optimized IMP guide from Google

which is web. slash articles, optimize, INP, and I'll provide this handy link for you as well

I'll answer that question right now, Mohamed. Where can I see the recording of this webinar

You'll be able to see it in the webinar library. So you'll just go to your help center trainings and events

So you can just go to your support section. You can scroll down, click on webinar library, and then you'll see the webinar

It'll be uploaded, but then you can also look at past years, and you can look up speed

and you can search, and you can see all the different webinars that we've done in the past

I did the one optimizing site speed. Great question, Mohaman. But yeah, we are here to help

you're here to help. You're not on your own. That's one of the benefits of being with ESO is you have a wealth of resources that can help you on your publishing journey

And I promised there is a picture of me doing improv. I'm a weird dinosaur creature with a long tail. And something that would definitely help is if

we are trying to improve and overhaul these webinars. So we would love your feedback and it would definitely help me as well

So I just left that in the chat. So feel free to fill out that webinar feedback form so we can improve and we can provide you information on topics that you want to learn about