How To Pass Core Web Vitals Step By Step For Beginners, Even With Mediavine Or AdThrive

In this article I’ll show you how to pass Core Web Vitals using the exact tech and techniques I used to pass 7 different sites, some of which had AdThrive and Mediavine ads.

But first, never take advice on passing Core Web Vitals from an article which doesn’t pass Core Web Vitals.

Check if this article passes Core Web Vitals (may have to test twice, if it doesn’t pass the first time the cache would’ve recently been cleared).

And here’s another of my sites which passes, this one with AdThrive ads. It’s an established site called Music Industry How To:

Check if that article passes Core Web Vitals (may have to test twice, if it doesn’t pass the first time the cache would’ve recently been cleared).

Happy you can learn something from me? Want to easily achieve the same without being a tech wizard? Then let’s move on. 🙂

If you’ve been trying but still can’t pass Core Web Vitals, today we’re going to fix that. If you follow this article exactly there’s a good chance you will pass on both mobile and desktop.

I’ve now got a passing grade on seven different websites with different tech stacks, including sites that run Mediavine and AdThrive adverts. But when I began my journey to get my websites to pass, I simply couldn’t find any step-by-step information on how to do so.

So in this article I’ll initially share a checklist for those that want to follow steps and pass as soon as possible. I’ll then share more details on why I do each step, so you can modify the process if you need for your specific website.

I’ve made this as easy to follow as possible, even if you’re not a tech guy. I’m not either, but I’ve learned just enough to pass my websites, all without doing anything too technical. But tech people, if I used a word in the wrong context, politely let me know in the comments and I’ll fix it.

This is the guide I wish I had a few weeks ago before I got so emersed in speed optimization, I’d finish workdays with a big headache and dream about performance scores at night.

If you’re like me and you just want to pass, fast, but not get too caught up in all the technical terms and what exactly they mean, let’s get started.

Quick request though, if you’re going to share these tactics with others, which I highly recommend so we can all help build a faster internet, please reference me (Shaun Letang) and share the link to this article.

Checklist – How To Pass Core Web Vitals Fast Step By Step On WordPress

As mentioned, here are the step-by-step things you can do to pass Core Web Vitals with no explanation. While you can just blindly do this, I encourage you to go through the more detailed explanation below as well so you know why you’re doing things.

Of course, take a backup of your website before you get started in case anything goes wrong. While I’ve used these settings successfully over 7 sites with different tech stacks, one or more may not work for you.

I also encourage you to take before and after records of your site’s speed using PageSpeed Insights, the tool we’ll be using to track your progress. The way I like to do this is:

• Choose 4 different pages on your website. So your home page, a typical post, a typical page, and the most media heavy page you have.
• Run three different tests for each page and note down both the mobile and desktop scores for these.
  • Note: On the first test, if you’re using cache, it may appear slower than normal. Feel free to run this first test again.
• Once you’ve implemented all the changes below, run the same tests on the same pages again.
• I’ve created a free PageSpeed Insights Tracking Sheet you can use to keep track of your before and after results.

The ‘important note’ part: the more of these things you do, the more likely you will get a passing grade on Page Speed Insights. Each of these things will get your scored that bit higher, but they all work together to get your website up to scratch. Missing just one of these things could mean the difference between a pass and a fail, so bear that in mind.

The disclaimer part: Some links in this article are affiliate links, but all tools on this page I use myself to pass my own sites. You can always not get them, but you know, you likely need them to pass Core Web Vitals. 🙂

The final disclaimer: After you add each tool, test your website to check everything still works as expected. If anything breaks, you’ll know what to reverse.

So here’s the quick step by step for passing with no explanation (read further below for why we do each thing and more):

WP Rocket

• Buy and add WP Rocket to your WordPress site. $49 for one website & one year of updates, more for more sites. Turn these settings on:
  • Tab: Cache.
    • Enable caching for mobile devices.
    • Separate cache files for mobile devices.
  • Tab: File Optimization.
    • Minify CSS files.
    • Optimize CSS delivery.
    • Minify JavaScript files.
    • Load JavaScript deferred.
    • Delay JavaScript execution.
  • Tab: Media.
    • Enable for images.
    • Enable for iframes and videos.
    • Replace Youtube iframe with preview image.
    • Add missing image dimensions.
    • Enable WebP caching.
      • Note: Only do the above step if you use ShortPixel and have them create WebP images, as recommended below. It’ll say “You are using ShortPixel to convert images to WebP. WP Rocket will create separate cache files to serve your WebP images. More info”. If it says this, select it. If not, you may need to set up ShortPixel then come back to this step.
  • Tab: Preload.
    • Activate Preloading.
    • Enable link preloading.
  • Tab: Heartbeat
    • ‘Reduce activity’ for all three options.

Cloudflare

• Add Cloudflare. Free.
  • Use this guide for setup.
    • Choose the Free plan.
  • In the setup, provided your site uses HTTPS as it should (if not add it asap, it’s needed to pass Core Web Vitals), add all settings:
    • Automatic HTTPS Rewrites.
    • Always Use HTTPS.
    • Auto Minify:
      • JavaScript.
      • CSS.
      • HTML.
    • Brotli.
  • Add the official Cloudflare plugin to your WordPress site (Cloudflare, By Cloudflare, Inc.).
  • Check with your host if any additional setup is needed for your site to work perfectly with Cloudflare. If so, do it.
    • Google search ‘Cloudflare *Your Host*’
      • E.g. Cloudflare WPX.
    • Follow any instructions.

Cloudflare APO

• Add Cloudflare APO. $5 per month.
  • Go to your Cloudflare account.
    • Speed. >
      • Optimization. >
      • Automatic Platform Optimization for WordPress.
      • Turn it on (you’ll have to buy).
      • Choose ‘Cache By Device Type’.

ShortPixel

• Add ShortPixel Image Optimizer plugin. Price will depend on how many images you have, if not many it’s free. Otherwise buy credits & pay what you use. Add these settings:
  • General.
    • API Key (you’ll get one by adding your email address).
    • Compression type:
      • Either ‘Lossy’ or ‘Glossy’. I use Lossy.
    • Also include thumbnails.              
    • Image backup.  
    • Remove EXIF.
    • Decide if this feature is for you: Resize large images.
      • Max 1000 x 1000 pixels (choose a size suitable for your site).
        • Cover.
  • Advanced.
    • CMYK to RGB conversion.
    • Next Generation Images.
      • Also create WebP versions of the images.
      • Deliver the next generation versions of the images in the front-end:
        • Using the <PICTURE> tag syntax.
        • Only via WordPress hooks (like the_content, the_excerpt, etc).
    • Optimize Retina images.
    • Optimize PDFs.
    • Optimize media on upload.
  • Cloudflare API.
    • Add in your Cloudflare details.
  • General.
    • Click then ‘Save and Go to Bulk Process’ button.
  • On this new screen, select to start optimization.
  • See section ‘ShortPixel Image Optimizer And Image Compression’ below for more image optimization tips.

Remove Old Code

• Any you no longer use, e.g. Facebook like box code etc. Check in Header / Footer inserter plugins, and anywhere else you add code.

Remove Unneeded CSS

• Check ‘Additional CSS’ in your WordPress Dashboard. Remove any non-essential CSS. Also check other places you’ve added extra CSS.

Add Dimensions To Videos

• Make sure all the videos on your site are embedded with their width and height stated. Note: Copying a Youtube link into WordPress doesn’t do this.

Remove Unnecessary Plugins

• Be strict. Do you still need that random plugin which adds additional functionality to one of your posts that doesn’t even get traffic?

Optimize Your Image Sizes

• If you haven’t uploaded your images to the exact size you need them, do that. Never upload bigger than the image will be displayed.

Use Faster Hosting

• I use WPX Hosting. The offer a great balance of price, speed and support.

Switch To A Faster Theme

• My all-round favorite: Kadence Theme.
• Fastest: GeneratePress.

Minimize Lead Gen plugins

• Manually add Opt-In forms using the code your provider gives.
  • Style using Kadence Blocks.
  • Insert where needed using Advanced Ads plugin, or your favorite ad inserter.

Add AdThrive Optimizations (If You Use AdThrive)

• Ask AdThrive support to turn on Deferred Ad Loading.
• Click the ‘CLS Optimization’ box in the AdThrive WordPress Plugin.

Add Mediavine Optimizations (If You Use Mediavine)

• On the Mediavine Dashboard, select your site:
  • Settings > Ad Settings > Optimize for Core Web Vitals. Select all these options:
    • Optimize Ads for Mobile PageSpeed.
    • Optimize Ads for Desktop PageSpeed.
    • Optimize Ads for CLS.
    • Optimize Sticky Sidebar CLS.

And… that’s it. Unless you’ve got a plugin heavy website / lead generation plugins you don’t want to get rid of / lots of third party scripts, you should now have a website which passes Core Web Vitals on mobile and desktop. 🙂

Of course, as tech stacks are different, there may be some tools you use which stop you from passing. It’d be impossible to write a guide with every tech stack in mind. But the above has worked on the 7 websites I’ve made pass Core Web Vitals; including this one you’re reading now.

Although you’ve already got the roadmap, I encourage you to read on to understand why we did the above things. When you know that, you can adjust things to better match your site specifically if needed.

My Thoughts On Core Web Vitals

Before we go into the more detailed explanation of what you need to do, I want to share my thoughts on what’s needed to pass Core Web Vitals.

Yes you need to make your site faster, but the way I look at it is you really need to update your tech stack. When I started on this process to get a passing grade, I ended up deleting or replacing many of my old plugins and themes. A pass wouldn’t have been possible otherwise.

Many sites are built on old tools which haven’t evolved as new technology has become available. I know this isn’t just my sites as I bought two websites recently and both were using some less than efficient tools. One website wasn’t too bad to be fair, but the other needed a back-end redesign top to bottom.

I know many will be hesitant to do some of the steps in this guide. I get it, changing a theme can be daunting, especially when you’ve had it for a long time or you’ve made customizations around it. But I managed to redesign most of my websites within 15 or 20 minutes using the Kadence theme. While it’s super powerful, it’s really easy to use.

I estimate that most people will be able to complete all of this in one to three days of work. One if you’re comfortable with tech, three if you’re still feeling this stuff out. I’ve tried to be as step by step as possible, but if there are any areas you feel aren’t explained well enough, let me know in the comments and I’ll see if I can help.

With that said though, let’s get into the detail!

How To Pass Core Web Vitals On Mobile, The Core Steps In More Detail

Firstly, let’s add a good caching plugin, CDN, and optimize our images.

Add WP Rocket

When it comes to the 80/20 of site speed optimization, WP Rocket definitely fits into that category. This cashing plugin will instantly improve your results if you’re not already using it, there’s simply so many features that work really well.

I previously used W3 Total Cache, a free caching plugin, but for me WP Rocket got MUCH better results when I tested. Maybe I was just using W3 Total Cache wrong. But if so, that further proves to me how easy WP Rocket is to use as I’ve had great results with it.

Here are the settings you need in each section – click to see a larger version.

Cache Tab:

File Optimization Tab:

Media Tab:

Preload Tab:

Heartbeat Tab:

You want to make sure everything works correctly after applying new settings. A couple of things to point out:

• I didn’t select the ‘Combine CSS files’ or ‘Combine JavaScript files’ option. WP Rocket recommends against it if your site uses HTTP/2; which my sites do. Under those options they show you how to test if your site uses it or not, and if not you may want to try these settings to see if they help. I haven’t tried them personally, but let me know your results in the comments if you do.
• While WordPress has a built-in Lazy Load feature, I found adding the option in WP Rocket is more effective and gives increased speed gains.
• I enable Lazy Loading for iframes and videos as before I did this, Youtube videos really slowed down page loading. Some of my articles with 50+ videos took ages, even with a fast internet connection. This made those pages load as fast as those pages without videos.
• I add missing image dimensions as it helps with the CLS score. Hopefully WP Rocket will give this option for videos as well in future.
• I’m not sure if the Preload feature or the Heartbeat feature adds to your page speed score specifically, but they both seem to help with user experience so I’ve selected them. Feel free to do your own tests here.

Your website should already be running a lot faster with this one change, now let’s move on to another of the biggest changes you can make.

Add Cloudflare

Cloudflare is a CDN, which basically shares ‘copies’ of your website to Cloudflare’s servers all around the world. What this means is people worldwide have a copy that’s closer to them than if you didn’t use a CDN and your site had to travel from your local server to the other side of the world.

Hopefully that makes sense, but if not, just know that it makes your site faster for more people. 🙂

So go ahead, create a free Cloudflare account. You can see how to do that here.

As we already auto minify JavaScript, CSS and HTML using WP Rocket, initially I was unsure of whether or not we should choose those options when they arise on Cloudflare. That said I spoke to support from either WP Rocket or Cloudflare, I can’t remember which, and they recommended that those settings are applied on both tools.

As you see, please also turn on Automatic HTTPS Rewrites, Always Use HTTPS, and Brotli.

Once you’ve added your site, add the Cloudflare plugin to WordPress, activate it, and add the required details. Adding this plugin is important for when you add Cloudflare APO which we’ll talk about in the next section.

Lastly, I suggest you do a quick Google search to find out if your host requires you to select specific settings in Cloudflare for things to work as they should. For example, when I set it up with WPX Hosting, WPX require certain settings which Cloudflare don’t automatically have checked. So search ‘Cloudflare *Your Host*’ on Google and see if there are any additional steps you need to do. If so carry them out.

It can take up to 48 hours for your nameservers to propagate (in non-technical terms, for your site to be fully setup with Cloudflare) but it’s normally much quicker. You’ll get an email from Cloudflare when you can start working on the new version of your website.

Cloudflare APO

While the Cloudflare plan is free, I suggest you also sign up with Cloudflare APO. This is a paid feature, currently $5 per month, but it’s well worth it.

On one of my websites, my server response time wasn’t hitting the speeds I wanted. It was initially looking like this:

The first two screens were blank and some of the website was only showing on the third screen.

A second website I owned was loading on the first mobile screen when I did a Google PageSpeed Insights check, like this:

They were on the same hosting, the same theme and more. But why the difference in server response time?

After spending some time scratching my head, I soon realized it was because I had installed Cloudflare APO on the sites that had a good server response time. The slower site didn’t have this. I quickly installed Cloudflare APO on this site and now server response time matches the other faster site.

To get this APO feature go to the ’Speed’ tap in Cloudflare, click the blue optimization tab, then select the ‘Automatic Platform Optimization for WordPress’ option. Yes, APO stands for Automatic Platform Optimization.

Once you’ve bought the service turn it on via the Cloudflare dashboard and be sure to choose the option ‘Cache By Device Type’.

There you go, another quick and easy speed improvement for your WordPress website. 🙂

ShortPixel Image Optimizer [Image Compression]

So now onto image optimization. We’ll look at this in two parts, with a dedicated section on image resizing later on (in terms of width and height), but for now let’s look at reducing the size of your images in terms of KB and MB. In other words, compressing your images.

For years I’ve uploaded pictures to my site in a web suitable format. On Photoshop, I save most images ‘For Web’, and choose a jpeg quality of 60.

This has meant my images still look good but are a lot smaller. For example, here’s the results of an image I saved first as a regular PNG, and then also saved as a JEPG using the optimization I just spoke about:

	Size
PNG	496kb
Optimized JPEG	71.4kb

That optimized image is more than 85% smaller, or in other words, the bigger image will take more than 594% longer for your visitors to load!

Here’s a link to the image after being optimized before loading to WordPress.

For me this is the best practice; upload optimized images directly.

That said, on my website I also use ShortPixel. ShortPixel optimizes your image even more. it has three quality settings:

• Lossless – doesn’t look any different from the original.
• Glossy – still looks good, but loses some pixels over the original file.
• Lossy – gives “the smallest optimized images you can get”.

From top to bottom, each level you go down your image gets compressed more. So it’s both smaller in terms of kb and mb, but the image also visually becomes less detailed.

I personally use Lossy for all of my sites; the option with most compression. At first I didn’t like this setting as I could see the poorer quality in the images. That said, the pages load faster, and not one visitor out of over a million since I activated this on my sites have complained.

Here’s the same picture but optimized with ShortPixel at the Lossy setting:

And here’s the comparison:

	Size
Optimized JPEG	71.4kb
With ShortPixel compression	36kb

That’s a 49% smaller file than my initial optimization on Photoshop, and a 92% smaller file than an unoptimized PNG. So yer, optimize your images people!

I think if you’re in a niche where image quality matters more, for example an art gallery website, you’ll likely want to choose Glossy or maybe even Lossless. But if the main aim is speed, go with Lossy. Besides, you can mainly notice the quality difference on desktop, on mobile the image still looks great. And that’s what we’re optimizing for, mobile first.

Here are my settings for ShortPixel.

ShortPixel General Settings:

ShortPixel Advanced Settings:

ShortPixel Cloudflare API Settings:

Once you’ve set all those, go back to the ‘General’ tab and click ‘Save and Go to Bulk Process’. On the new screen once you’ve reviewed the settings choose to optimize the images. It can take a while if you’ve a lot of pictures on your site, it took hours over two days for me, but it’s worth the wait. You can always work on other things in a different tab while it’s running.

Final note, you’ll likely have to sign up and pay if you have more than 100 images to optimize. Credits aren’t expensive though and as you get 100 new free images each month, unless you’re uploading more images (including thumbnails) than that a month it’s a one-off cost. So highly recommended.

Additional Optimizations For Passing Core Web Vitals

With just the above changes most websites should be getting into the yellow for mobile results on Page Speed Insights. While that’s likely better than where you were before, we don’t want to settle for this, oh no. So as well as adding the above tools, let’s do some further optimization to get your speed up even more.

Remove All Old Code

When I had a look through one of my websites, I soon found a bunch of old code which had some use at a point in time, but was no longer needed now. For example, I had Facebook code for a Like Box, Facebook ads code, Google Tags code, Mailchimp code (I now use Active Campaign), and more.

All of these I could get rid of so my site runs less JavaScript and my load times speed up. To my understanding this helped reduce the blocking time of my website.

I encourage you to go through your site and see if you can do the same; is there any old code which you no longer need? Look in any header and footer plugins you may have, in any header or footer settings you have in your theme, or any hard coded changes you’ve made over the years. Hopefully you can tell what each bit of code is and whether or not you can delete them. I encourage you to make a backup of all code before you remove it just in case you remove the wrong thing.

Remove Unneeded CSS

As well as removing old code, I also removed all old unneeded CSS. overtime I had modified the look of my theme by adding additional CSS in the ‘Additional CSS’ section of my WordPress site.

And while my website did look better, there were two main issues here:

1. I was putting lipstick on a pig. If I wanted my theme to look better, it probably would have been better to use a better looking theme.
2. The real problem though was that this change in appearance was causing issues with my Core Web Vitals score. As I was changing the font via CSS, the line height for text in my article was shifting. This wasn’t good for my Cumulative Layout Shift (CLS) score, so had to be changed. When I changed theme, more on that below, I took away all this bloat CSS. The CLS issues my text caused also went away.

So I encourage you to go through any added CSS, whether via the Additional CSS section or anywhere else you may have put it, and ask yourself: how much do I really need this? Be strict with what you keep, ideally removing it all if possible. Or at least test to see if it helps your speed score.

Add Dimensions To Videos

In the same way we had WP Rocket add dimensions to images that didn’t have any, we need to do the same with videos.

Doing this I’ve added 5 points to my Google Page Speed Insights score for posts with a lot of videos, as doing this gets rid of the Cumulative Layout Shift issues videos without the dimensions cause. One of my posts went from 91 to 96 on mobile after this change.

Unfortunately though, as this isn’t something WP Rocket does automatically, we have to do this manually. This can be a long and boring process for sites with a lot of videos like a couple of mine have. Outsourcing could be your friend.

The quickest system I’ve created to add Youtube videos on each WordPress Gutenberg post is:

1. Add a HTML box in every area you want to add a video.
2. Take the embed code from a video (on the Youtube page ‘Share’ > ‘Embed’).
3. Delete the individual video code – the part after: /embed/ – up to “.
4. If you want to center your videos, add <div align=”center”> to the beginning of the code, and </div> to the end.
5. Paste this new code into all those HTML boxes.
6. Open all the videos you want to add on Youtube, then take the individual video code, the bit after: /watch?v=
7. Paste each code after: /embed/ in the Youtube embed code we previously added to the HTML boxes.
8. And… that’s it! If you want feel free to adjust the height and width code in the embed code, but I’ve found the default to be fine for me.

Before you go and do all this though, test the page of yours which has the most videos. Run a speed check with all the videos, then add the dimensions, clear the cache (both Cloudflare and WP Rocket), and run the test again 2 – 3 times. Is there an improvement on your CLS score? If so you need to do this site wide. If not, it may not impact your theme. So only come back and add video dimensions if you find there are CLS issues on specific pages once all other changes are complete.

Remove Unnecessary Plugins

So we’ve gotten rid of old code and CSS, now let’s get rid of old plugins!

If you’ve been running your site for more than a couple of years, you’ve likely got some which you no longer need. For example, I had a competitions plugin which I hadn’t used in a while. I also removed my social sharing plugin, as it didn’t add much to my site’s growth. Overall the most plugins I have on any one site is 20 – which is still quite a lot compared to my others, but a lot less than I had before.

All of the ones I keep fit into one of these three categories:

1. Can’t delete as it speeds up my site.
2. Can’t delete as it secures my site.
3. Can’t delete as it makes me money.

If a plugin doesn’t fall into one of these categories I now delete it. Plugins which make things look a bit nicer or seem a bit cooler have no place on my new faster website.

That said I feel my sites still look good and modern. I just don’t need additional plugins to make that the case.

Be strict when going through this process. I found myself thinking “but I need this plugin because it does XYZ”. But when I started asking myself why I need that feature though and how much it really helps my business, I realized there were many plugins I could get rid of with no impact to my traffic, earnings, or security. Additionally it could help with my site speed.

Optimize Your Image Sizes

This is something I never even considered to be an issue until I worked on my friend’s site. As I mentioned before, I always optimize my images before I upload them to WordPress; pretty standard right? Well when I saw the multiple-MB PNG images on my friends site, I realized not everyone does this!

If you have images that were uploaded bigger than you display them on your website, you’ll probably want to go back, remake these images and upload them in a new more optimized size and format. That said, if you have a lot of images on your website already, this could be a huge job.

While I haven’t used this feature before, I know one of the ShortPixel plugins may have an option to make big images smaller. That said, my friend whose site I worked on actually had the pro version of the Imagify plugin on his website.

I tried to use one of their features to make all his big images smaller, but it only seemed to work for some of the images. Maybe I was using it wrong, but most of the images stayed the same big size, even if it was bigger than the max size I specified. I guess it’s something to do with them only resizing images that haven’t already been optimized, but it wasn’t clear which images had been optimized and which hadn’t. Either way, I couldn’t get it to work as needed.

If you have more than a few big images and resizing them manually would be a long task, you may want to try ShortPixel or Imagify to make all the images on your website smaller. It likely won’t give you the best results in terms of maximum optimization, especially if you have many images of different sizes which most sites do, but it’s better than having very big images in abundance.

Bigger Changes That May Be Needed To Get A Passing Performance Score

While all of the above changes are ones that most site owners would be willing to do, the below changes are ones some people may be hesitant to make. I know it can feel like a big move switching hosting, changing your theme or changing your lead gen plugins. But doing any of the below things, if needed, will have a huge impact on passing Core Web Vitals. I’d go as far as to say that if you fall short in anyone of these three areas, there’s a good chance you won’t be able to hit that passing grade.

With that said, here are my recommendations in these areas. Bear in mind that most of the time the switch isn’t as daunting as you may think.

Use Faster Hosting

Having fast hosting is important when it comes to having fast page speed. I’ve been using WPX hosting for a number of years now so I didn’t need to switch host to get my site moving faster. But if you’re using something like a shared plan on Bluehost or other cheaper hosting service, most likely your site will never hit the speed levels you need it to. Especially if you’ve got a plugin heavy website.

WPX and Kinsta are the only two higher priced hosting companies have tried and both of them do well. That said WPX is cheaper and allows more websites and more bandwidth, so I’ve always used that as my main host. I haven’t tried any of the other big players but I’m sure there are more which would do just as good a job. That said I’ve used WPX for years and I’m happy, so that’s my recommendation if you need a faster host. The good thing is they handle the migration to their service for you so it’s very easy and hands off.

Use A Faster Theme

The next bigger change is changing your theme. Funnily enough I don’t think this is much of a big change, as when you switch to some of these more modern themes, they’re quite easy to get up and running. Or at least they were for me; it’s hard for me to know if it’s easy for me because I’ve been doing this for a number of years, or if it’s genuinely easy. But either way, if you’re comfortable using WordPress, it should be easy enough for you.

There’s no one single theme you need to use to pass Core Web Vitals. I’ve tried and pass with these three following themes:

• Kadence (one site with Mediavine ads, one with AdThrive ads).
• GeneratePress.
• The Genesis theme ‘Milan Pro’ (with AdThrive ads).

That said, when it comes to switching from a different theme and making your site faster, I like to use the Kadence theme.

This is because Kadence is really easy to set up, has a lot of powerful features, and is really, really fast.

During my research though, I read that GeneratePress is faster than Kadence.

So if you value speed over all else, GeneratePress is the way to go. That said the Kadence theme has a few more features in its free theme than GeneratePress does, hence why I more use Kadence. I still use both themes though and they both work well.

Minimize Lead Gen Plugins

Recently, coming off the back of getting passing scores for a number of my websites, I was feeling quite confident in my site speed improving ability. So I offered to do my friend’s website Sports Trading Life in exchange for him allowing me to use his website as a case study.

My thoughts were that if I could get a website with AdThrive and Mediavine ads to pass Core Web Vitals, I should have no problem getting a site with no adverts to pass. After all I’ve done it before, so how hard can it be right?

Wrong!

I did most of the optimizations mentioned above, bar resizing his image’s width and height (many of them were huge and it would have been a big job, so I left him to do that ?). While the site did greatly speed up, it still wasn’t quite getting a passing mark on mobile.

Here are the before and after stats:

Before – Taken 4.5.21
How To Trade Football:	https://sportstradinglife.com/2019/01/how-to-trade-football/
	Test 1	Test 2	Test 3
Mobile	10	12	11
Desktop	16	17	20
How To Win A 1.01 Lay On Betfair	https://sportstradinglife.com/2021/04/how-to-win-a-1-01-lay-on-betfair-video/
	Test 1	Test 2	Test 3
Mobile	11	13	14
Desktop	61	58	58
Home Page	https://sportstradinglife.com/
	Test 1	Test 2	Test 3
Mobile	43	46	42
Desktop	89	90	92
Profitable Trader	https://sportstradinglife.com/2021/05/how-to-handle-being-a-profitable-sports-trader-not-a-typo/
	Test 1	Test 2	Test 3
Mobile	46	53	45
Desktop	60	78	78

Here were his stats for the same pages after I made the above changes:

After – Taken after 6.5.21
How To Trade Football:	https://sportstradinglife.com/2019/01/how-to-trade-football/
	Test 1	Test 2	Test 3
Mobile	61	59	61
Desktop	90	88	83
How To Win A 1.01 Lay On Betfair	https://sportstradinglife.com/2021/04/how-to-win-a-1-01-lay-on-betfair-video/
	Test 1	Test 2	Test 3
Mobile	64	67	63
Desktop	92	94	94
Home Page	https://sportstradinglife.com/
	Test 1	Test 2	Test 3
Mobile	71	67	82
Desktop	98	99	97
Profitable Trader	https://sportstradinglife.com/2021/05/how-to-handle-being-a-profitable-sports-trader-not-a-typo/
	Test 1	Test 2	Test 3
Mobile	71	74	77
Desktop	98	98	99

So a huge improvement; as you can see, one page went from 12 to 61 on mobile; that’s 408% faster.

Another went from 14 on mobile to 67; that’s 378% faster than before the changes!

But while it was a huge increase in speed and his visitors would likely thank him, it still didn’t receive a passing grade. The reason for this? Lead gen tools!

This website has three lead gen / social proof tools on it:

1. ThriveLeads.
2. Hello Bar.
3. Use Proof.

With these tools activated, it got the above-mentioned grades.

I deactivated two of them, ThriveLeads and Hello Bar. I also deactivated Thrive Architect as he only uses it on two pages from what I can see. The result? A passing grade on mobile over 90! And this is before I removed the use Proof code; that may or may not have made the site even faster if I removed it, I didn’t try as I had seen what I needed. At this stage many of the images were also still very big.

I also use ThriveLeads for one of my sites. With it on all pages, I couldn’t get past a score in the 80s for any page. As soon as I removed it, I got passing scores of 90+ for those same pages.

While lead gen plugins are great for collecting leads, the ones I’ve tried aren’t good for passing Core Web Vitals. But if your website makes money from collecting leads, what can you do?

Well one option is adding lead gen boxes to your site using the HTML your email marketing platform provides, and styling it on your website with Kadence Blocks. You can add it in your posts or pages using your favorite advert inserter; I personally use Advanced Ads.

Of course, you won’t get all the features you will by using a dedicated WordPress lead capture plugin. I won’t lie, I don’t know the perfect solution here. Maybe you can hire a developer to make ThriveLeads or your other lead gen plugins not add 10+ points to PageSpeed Insights score? Maybe have them built you one from the ground up? Or maybe there’s a faster tool which I don’t know about? Let me know in the comments if you know a better way.

For now though, the choice my friend needed to make was:

Pass Core Web Vitals but get rid of many of his lead gen tools.

Or:

Leave the tools as they are and not pass Core Web Vitals.

He of course picked the second options, as leads pay the bills, not speed.

How To Pass Core Web Vitals With Ad Networks Mediavine Or AdThrive

When I first started looking into Core Web Vitals, I saw a lot of talk of not being able to pass with ads on your website. Over these last few weeks though I’ve learned that having AdThrive or Mediavine ads on your website doesn’t make it any more difficult for you to get a passing grade. I know this because I have two websites on AdThrive and one on Mediavine, all of which get above 90 PageSpeed Insights score on mobile.

If anything, it’s harder to pass with lead generation tools!

There are the few small tweaks you’ll need to make so your ads don’t become the cause of you failing CWV; read on to find out what they are.

AdThrive

There are two main things you need to do so your AdThrive adds don’t impact your score:

Have AdThrive support turned on Deferred Ad Loading – simply follow this guide to see how to do that. While this feature isn’t shown in your AdThrive dashboard, if you get in contact with them and ask them to activate this feature they will.

And the difference is night and day! While I can’t remember the exact number of points I gained when I activated this, it took one of my sites from a score where I felt like I was miles from passing, to a passing grade after this one change. Yes, it really is that impactful.

It’s important to note that Adthrive give a warning that this feature could lower your revenue. While I don’t micro monitor my exact daily earnings, I haven’t really seen any noticeable dip in earnings. If there was one it was very, very small indeed. Beside, I would have been happy with a small dip in earnings in exchange for a much faster site which people stick around longer for.

The second and final setting you need to change when running AdThrive ads is click on the ‘CLS Optimization’ box.

This is located as a setting in the AdThrive WordPress plugin. This option helps reduce Cumulative Layout Shift from your adverts.

With those two options selected, AdThrive now won’t be a determining factor for you failing Core Web Vitals. Easy right?

Mediavine

You can run Mediavine ads and still get a passing Core Web Vitals grade; I’ve done it. All you need to do is go to ‘Settings’ then ‘Ad Settings’ in your Mediavine dashboard’s sidebar, and have these options selected:

It couldn’t be easier. 🙂

Mediavine do warn that you could see a drop in revenue when you select some of these options, but I honestly haven’t noticed anything. My RPMs are high as ever. Do bear this in mind though as your results could be different than mine.

Still Not Passing? How To Identify What’s Holding You Back

If you carried out all of the above, there’s a good chance your website now passes Core Web Vitals. But what if it doesn’t? Afterall, there’s no way I could try my setup with every tech stack available; there’s simply too many variables at play. And it may be the case there’s one or more plugins or scripts which are stopping you from getting 90+ on mobile.

So if you’re not currently passing, you need to diagnose what exactly is stopping you from doing so. The way I would do this is by clearing your cache, both from WP Rocket and Cloudflare, and going to PageSpeed Insights. Open three new tabs and run a page speed check on one general page on your website three times. Make sure you don’t start a new test for that page until the previous one is finished so you get different results each time. Your first result may be slower than the other two as the page won’t be cashed; so feel free to run that one again.

Once you have the results, look under the ‘Opportunities’ tab for any potential issues.

While it says these things don’t directly impact your Performance score, I’ve sorted out issues here in the past and they’ve helped my score go up, so they likely do help indirectly at least.

What you want to do is expand any sections, for example ‘remove unused JavaScript’ and hover over the URL that displays.

Img, remove unused JavaScript

Often you can get an idea of where that string is coming from by reading all the words. For example a JavaScript URL that reads ‘Autoptimize’, is pretty safe to assume that that comes from the Autoptimize plug in.

Once you’ve gone through and made a note of all of the things causing speed issues, you can decide which of these tools you do and don’t need. Are there faster options that can replace them? Can you just get rid of them altogether? Or do you need them regardless of potential speed issues?

What I would say is temporarily deactivate any of these plugins or tools that pop up, clear your cache, then run the speed test again. Are you now passing? If so, you found your issue. Now it’s down to you to decide how you deal with that issue if at all.

One important thing I’d say though is just because it appears as an ‘issue’ when you run a PageSpeed Insights test, that doesn’t mean that getting rid of it would definitely help. Maybe it causes a slight speed issue but it helps different much bigger speed issues. Or maybe it’s a tool that helps you make a lot of money, in that case you most likely won’t want to delete it even if you do marginally fail Core Web Vitals.

As always, make a backup of your website before you make any big changes and good luck identifying any outstanding issues. Maybe leave a comment if you’ve done the above and you’re having trouble passing; someone in the comments may be able to help.

Alternative Tools I Stopped Using

This is a quick section about tools which I tried that somewhat helped speed things up, but I didn’t end up using them for some reason.

WPX CDN

While I love WPX Hosting and highly recommend them, in my tests the WPX CDN didn’t perform as fast as the free Cloudflare CDN and paid Cloudflare APO combination. Because of this I use WPX for my hosting and Cloudflare for my CDN.

Autoptimize

This is a free plugin that minifies HTML, CSS and JavaScript. When I got WP Rocket and tested the same features on there, WP Rocket’s version of these features made my sites run faster than with Autoptimize. So I took Autoptimize off my websites.

Critical CSS

When I first started my speed journey and added Autoptimize, one of the features they said you can upgrade to is Critical CSS. For this feature you need to pay £7.00 a month (around $9.90). I paid this initially, until I found out that WP Rocket had the same feature included in the price. So I went on to cancel the Critical CSS service as it would have been a LOT more expensive when I factored in all my websites.

W3 Total Cache

This was another plugin that WP Rocket replaced. In my tests WP Rocket performed much better than the free W3 Total Cache. To be fair, it may just be that I didn’t have the correct settings in place. But W3 does have a lot of options, and not being a tech guy I can honestly say that I don’t know if I was using it in the best way possible.

For me this is a point for WP Rocket though as it’s really simple to get the best settings fast. It’s well laid out and it’s not too techy.

PNG To JPEG Plugin

I tried a plugin which converts PNGs on your WordPress site to JPEGs. I use it on my friend’s website as many of his images were uploaded in PNG format. While it did convert some of the images I had selected, for some reason it didn’t convert all of them, even if they didn’t have a transparent background. So this is actually better than nothing, but it still didn’t fully work as advertised.

Imagify Pro

On my friend’s Sports Trading Life website which I mentioned earlier, he actually had a copy of Imagify Pro installed. I tried to use it to optimize his images but for some reason things didn’t go as I expected them to. Many of the images still appeared larger than the option I had chosen, and it wasn’t clear how much of a compression the optimizations were doing.

In all fairness to Imagify, maybe I was using it wrong. I didn’t read the instructions before, but I tried to use it in the same way I used ShortPixel – one bulk optimization for all the images on the website. For some reason though it only seemed to do a few images and then once finished told me there were a lot more optimizations to be done. I couldn’t find where to work on all images at once.

I selected to run things again, not sure if it was going over the same images or if it was optimizing new images, and when that run finished it told me there was still a lot more optimization to do. At this point I gave up as I didn’t want to over optimize his images when I couldn’t clearly see what was being done.

My personal preference with image optimization is ShortPixel, but I know a lot of people use Imagify. I’ll leave it to you to decide which you use.

Lazy Load for Videos

When I discovered how much of a negative impact videos could have for page speed, I quickly looked for a lazy loading solution. Lazy Load For Videos is what I found. While it’s a good idea in theory, the main issue I had with this plugin is it would only lazy load your YouTube videos if it was a raw YouTube watch link pasted onto a WordPress website. If you used an embed code, which I did for the majority of my videos up to that point, it would cause an error and not lazy load your videos.

Because of this, if I wanted to use this plugin I would have had to manually go in and change all the YouTube video code on my website. This would have been a long and boring job. Thankfully a friend let me know that there was a video lazy loading option in WP Rocket so I tried that instead. It worked with embedded YouTube videos and was a lot less buggy, so I got rid of Lazy Load For Videos.

Other Tools

There were other tools I tried along the way that I didn’t end up using, but those are the ones which I remember. If I remember any others I’ll update the list and include them here.

What I Still Need To Test

So while this guide is pretty comprehensive, there are a few more things I want to try and update this guide with in future:

Passing Core Web Vitals With Ezoic Ads

I have a site with Ezoic ads which I want to work on. Can I get it to pass Core Web Vitals? Let me know if you want me to try this, and of course share what I did if I can.

Extra Reading And Watching

During my time trying to get my sites to pass, there were countless forum threads, Facebook group posts and blog posts read. There were also a number of videos watched. Not all of them were helpful.

Some of them though were crucial for figuring out one thing I was stuck on. Others had a few helpful tips around page speed.

While it’d be very long for me to go through every little thing I watched and read along this journey, here are a few which I felt were good resources:

13 Tools We Use to Build New Sites in 2021 by Authority Hackers.

I love the Authority Hacker guys, and this video was a real gem. It’s the thing that first introduced me to the Kadence theme (now my go-to theme if I want a fast site). Furthermore, even though I already used Cloudflare APO for one of my sites, this video’s helped make clear how good it really is. Now I use it on all my sites that need that extra push.

How to Increase PAGESPEED for CORE WEB VITALS by Matt Giovanisci.

I actually found this video after I had passed my sites. While I already did many of the things he’s mentioned, I did get one very good tip from it: When displaying your ‘top of the page’ lead gen box on mobile, don’t include an image. While this wasn’t mentioned in the video, I did notice it when I looked at his website. This one change positively impacted my score on mobile. While I haven’t finished watching this video (I’m at 37 minutes of 1 hour 39 minutes), I’ll definitely be watching the rest for any other nuggets I can pick up.

Google Page Experience Update – May Core Web Vitals Update – by Marty in the Fat Stacks Community.

This is a post made by Marty in the Fat Stacks community. As it’s a private community you won’t be able to see it unless you’re a member. When I found this thread I was already doing most of the things he discovered (and a few others), but I did remember having an ‘ah ha’ moment when I read it, allowing me to add a tool or strategy to my process. Annoyingly I can’t remember what exactly it was, but either way props to Marty for a good post.

I hope you find these additional resources useful.

How To Pass Core Web Vitals Step By Step, Conclusion

So there you have it, my step-by-step guide to passing Core Web Vitals without too much techno babble. Has it helped you pass? If so that’s great news, I would highly appreciate you let others know about this guide so they can get a passing grade too!

If not, do you know what’s holding you back?

Whether or not you passed, let us know what progress your site has made in the comments. I’m pretty confident that the majority of people will get a faster speed than they had before if they make most of these changes.

So let me know your thoughts on site speed in the comments and let’s see if we can help each other pass more websites. I hope you found this guide helpful, please share if so. 🙂

Shaun.