My War Against INP issues [SOLVED]

Manuel Campos

Optimizing your site for core web vitals was a piece of cake even for sites using all types of ads.

I always got away with it and passed CWV reports until Interaction to Next Paint (INP) became a new metric.

All INP issues my sites are getting have to do with the mobile experience

According to Google Search Console, I am getting 212 ms on Mobile (Group INP) and it should be less than 200ms.

Pretty close, right?

At first, I said to myself that I wasn’t fixing sh*t but then I thought that I should.

I thought that fixing a tiny thing here and there would solve the speed issue but It was ads scripts and their bunch of requests ads make.

No matter how many scripts, styles and featured I have removed and optimized, I still haven’t found a way to fix mobile INP issues.

I delayed the execution of ads on mobile and the problem got solved within days.



What I did Before Delaying Ad Scripts?

I did quite a few things to solve INP issues:

  • I stopped lazy loading ads with Ad Inserter and started delaying ads with an inline script so I didn’t have to rely on Ad Inserter kinda heavy library.
  • My first ad was inserted after paragraph #4 and not after paragraph #3.
  • I removed the GP Mobile Menu because I thought that a bunch of menu links on mobile wasn’t a good experience at all. That meant two scripts less.
  • I removed an H5P style that was being loaded everywhere on the site despite not being needed on most pages and posts.
  • I removed three icons placed at the footer (probably for nothing)

Finally I ended up with no more than 7 requests loaded everywhere:

OrderRequest
#1HTML
#2Local Google Fonts
#3Child Theme Style
#4Main GeneratePress Style
#5Breadcrumbs SVG Icon
#6Logo Image
#7Google Analytics (Delayed)
Styles and Scripts Loaded in a few pages

There are a few pages (around 5) in which H5P styles and scripts are being loaded.

However all the scripts are being delayed and the styles don’t load before more important requests

OrderRequest
#8HP5 style #1
#9HP5 style #2
#10HP5 style #3
#11H5P script #1
#12H5P script #2
#13H5P script #3
#14H5P script #4
#15H5P script #5
#16H5P script #6
#17H5P script #7
#18H5P script #8
#19H5P script #9

The rest of scripts and styles are inlined so they don’t create additional requests.

The rest of requests in both types of pages were external requests made by Google Adsense and Google Ad Manager ads

So no matter what I did, I couldn’t lower INP to less than 200 ms.

The INP Debug bear keeps pointing out that the problems have to do with the header search icon and a few GenerateBlocks Icons on the footer.

But that was not the case.

I checked the rest of the sites and realize that:

  • Field data is collected from the experience of real users so you can have identical wordpress stack and one site is getting INP issues and another one isn’t
  • Some sites didn’t have the problems that I was trying to tackle but they were getting INP issues too.

So It is all about the ads and the bunch of requests they create.


So it is 100% Ad Script’s Fault

I wanted to do my best to fix other issues and see if those other issues could fix the problem.

Also:

  • I don’t really like the idea of delay ads for Desktop and Mobile users because Desktop is simply fine.
  • Debug Bear kept telling that the problem was related to an Icon here and and Icon there.

Perfmatters provided a guide indicating that ads could be the main reason why sites wer experiencing INP issues:

We’ve seen a big correlation with high total blocking time (TBT) resulting in higher INP values. So sometimes it can help to track down the biggest contributors to TBT. Many sites that are running ad networks like Google Adsense, Raptive (AdThrive), BlogHer, Mediavine, etc., typically have higher TBT. We recommend reaching out to them to see what they are doing to best optimize for INP.

How to optimize Interaction to Next Paint (INP) in WordPress

So I decided to delay Adsense ads.

INP issues got solved after a few days.

You can verify that ads are being delayed by running Google Page Speed Insights Tests.


Manuel Campos, English Professor

Manuel Campos

I am José Manuel. I am writing about things I know and things that I am learning about WordPress. I hope you find the content of this blog useful.

WP SURFER

home

about

privacy

contact

© 2024 WP SURFER • Made with Love in Costa Rica