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. Desktop has never been an issue.
According to Google Search Console, I am getting 212 ms on Mobile (Group INP) and that should be less than 200ms if you want to pass Core Web Vitals Now.
At first, I said to myself that I wasn’t fixing sh*t but then I thought that I should if that’s a tiny SEO factor or something.
I thought that fixing a tiny thing here and there would solve the speed issue but the task became more difficult that I anticipated.
After applying several changes, I was able to pass Core Web Vitals on Mobile
What Have I Done So Far
I use a few plugins and services to keep everything as easy and light as possible.
The services I use are:
| #1 | CloudFlare |
| #2 | Digital Ocean via Cloudways |
I did quite a few things these past few days to optimize my site using GeneratePress.
- I optimized the core block library at first but that inlined CSS at the footer so I removed it completely and wrote CSS for the WordPress Core Blocks I am using. I added that custom CSS to a custom external stylesheet.
- I stopped lazy loading ads with Ad Inserter Pro so I didn’t have to rely on Ad Inserter kinda heavy library. I still use Ad Inserter but not features that add any inline or external scripts.
- I delayed the execution of Google Adsense . At this point only 13 ads load on Desktop and 8 load on mobile. I also added the Adsense Script to the footer instead of the header.
- I also removed Google Ad Manager ads since these ads weren’t really beating Adsense.
- I removed an H5P style that was being loaded everywhere on the site despite not being needed on most pages and posts.
- I removed the GP Mobile Menu because I thought that a bunch of menu links on mobile wasn’t a good experience at all. Then I opted for creating a custom header and an overlay menu for both Desktop and Mobile
- I created a programmable search engine instead and added it to the overlay menu so I don’t have to deal with customizing search forms, the search-results page and no-search-results page. My site doesn’t load any scripts related to the GeneratePress search modal.
- I removed all GeneratePress stylesheets and enqueued a custom stylesheet that make everything look like it used to.
- The HTML of my sites hasn’t been any cleaner.
- I removed Local Google Fonts and started using Web Safe Fonts.
Finally I ended up with no more than 7 requests loading mostly everywhere on the site:
| Order | Request |
| #1 | HTML File |
| #2 | Custom Stylesheet |
| #3 | Scripts to Delay Scripts |
| #4 | Logo Image |
| #5 | Google Analytics (Delayed) |
| #6 | Adsense |
There are a few pages 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
These are the number of scripts and Styles added by H5P
| Order | Request |
| #7 | HP5 style #1 |
| #8 | HP5 style #2 |
| #9 | HP5 style #3 |
| #10 | H5P script #1 |
| #11 | H5P script #2 |
| #12 | H5P script #3 |
| #13 | H5P script #4 |
| #14 | H5P script #5 |
| #15 | H5P script #6 |
| #16 | H5P script #7 |
| #17 | H5P script #8 |
| #18 | H5P script #9 |
Are Ads the Real Problem?
I wanted to do my best to optimize the site and see if those other issues could fix the problem.
Also:
- I didn’t really like the idea of delaying ads for Desktop and Mobile users because Desktop is just simply fine.
- Debug Bear kept telling that the possible problem could be related to an (1) menu icon, (2) search Icons (3) buttons
Perfmatters provided a guide indicating that ads could be the main reason why sites were 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
I don’t really know if delaying ads solved the issue or if it was the combination of several of the optimizations implemented over the past three months.
But It gotta be the ads when you have a super lightweight theme not loading any scripts and whose CSS have been extremely purified.
According to Google Page Speed Insights, I barely got it below 200ms
Hopefully I won’t deal with these type of speed issues again.
