In this tutorial, I will help you:
- Optimize your WordPress website speed while loading ads (Adsense, media.net, etc.)
- Explain the issues between generating high revenue vs website speed
Ads (especially Adsense) and web speed have a very long rivalry. If you go for optimizing one the other gets negatively impacted. Since speed has been considered one of the most important aspects of off-page SEO and even Google now has a dedicated ‘Core Web Vital’ section as well, you can’t ignore the unoptimized third-party Ads loading on your Ad spaces.
Revenue vs Speed – You Have To Choose One
Let me tell you this from the start, it’s impossible to get a blazingly fast website and the best ad revenue simultaneously.
What problems are there for ad revenue if we optimize Ad units according to speed:
- Third-party ad exchange networks are slow.
- As you know over-the-fold ads pay the most thanks to their visibility on the screen as soon as someone opens a page.
- If you optimize ads according to the speed of the website, there’s a high possibility that the website may load much faster than those above-the-fold ads.
- Many users just scroll to the main content and those ads might lose some active views destroying CPM and CPC.
What problems are there for website speed if we optimize Ad units according to maximum ad revenue:
- Your onload time of the website will increase
- This will negatively impact your page SEO and you will see a lot of red and yellow notices in the web vitals section of Google Search Console
What’s The Best Approach Then?
The best option would be either:
- Go for in-house advertising if possible (ideal for huge revenue websites) – You will be serving the ads via your own CDN or server which would be super fast. You will decide which ad scripts, images, and js to load.
- Go for an Ad network that has a lazy load feature or better and faster scripts than Adsense
- Find a middle way between ad optimization and speed
It depends on the owner of the website. If he wants maximum revenue go for ads optimization instead of website speed optimization. If he wants more speed (better user experience), go for speed optimization over ads optimization. If both, then we have the middle way.
Optimize For Humans Not Machines
If you want a balance between speed and ad revenue, remember that you should optimize your website for humans, not page speed score. That is probably why huge websites like Forbes and CNN have bad page speed scores but on real visits, the website speed is perfectly fine.
Look for reducing onload speed instead of overall page speed because resources using lazy load will keep on loading.
How To Speed Up Ads on WordPress For Adsense
As of 2023, there are only a few limited ways to speed up ads on WordPress regarding Adsense.
- Lazy Load / Delay Adsense Ads
- Prefetch/Preconnect Adsense Requests
- Don’t Put Your Ads On Above-The-Fold
- Don’t Use Auto Ads
- Check and Update your Ads script regularly
Before doing anything, I want you to check your page which has ads on it, on either GTmetrix or your browser’s Dev Tools. See the AdSense and its related domains request there. Copy them in a notepad or clipboard. You will be needing these soon.
1) Lazy Load / Delay Adsense Ads
You can delay ads try loading AdSense ads on user interaction, on-scroll, or after a specific time. This way instead of loading ads with the main content, the ads will only load after all the content from the website has been loaded. This will boost the onload speed (the only thing that matters) but will slightly prolong the complete load-up depending on what sort of Lazy Load function you have selected.
There are many plugins (Free and Paid) that let us Lazy Load Adsense or any other network’s ad.
Also, many ad networks already have lazy loads as well. But be sure to
List of Plugins That Lazy Load Adsense Ads and Other Scripts
- Flying Scripts (Free)
- WP Rocket (Paid)
- LS Cache (Free)
- Ad Inserter Pro by Igor Funa (Paid)
- Some other ad-inserting plugins with paid versions
Via Flying Scripts Plugin
I use this free plugin called ‘Flying Script’ which is solely made to delay scripts. Why this plugin? It’s completely free and allows you to delay the js script till interaction (in terms of the scroll or touch or click). This way instead of l If no user interaction happens, you can set the timeout as well. Here’s how to lazy load Adsense and other ads on it:
Step 1: Install and activate Flying Script by WP Speed Matters.
Step 2: Go to Settings >> Flying Scripts
Step 3: In Settings >> Include Keyword >> Add this to the list
adsbygoogle.js
Step 4: Select timeout to your desired value. Since my websites load under 1 sec, I have selected the timeout to be 1 sec. This means that once my website is loaded if there’s no user interaction for 1 second, the ad script will load automatically.
Important Notice: Your Ad Earning might get affected!
Your ad earnings might be affected depending on your ad location (above the fold or below). Sometimes the ad is too slow to load and the user might skip it while scrolling to the main content. Try experimenting with the ad location and see how it loads on different internet speeds (4G, 5G, etc).
Warning! This doesn’t work on Auto ads
The method will not work on Auto ads. I tried optimizing websites with Adsense anchor ads (placed via auto ads), but despite delaying the AdSense script it still loaded.
2) Prefetch / Preconnect With Adsense And Its Related Domains
You can improve Adsense ads delivery speed by prefetching or preconnecting the requests from Adsense and its related domains.
How Does It Work?
Usually, when the Adsense code loads on your page, it first sends the request to Adsense and related domains, the domains load the resources and send them back. So on every request, it loads up DNS, TCP, and TLS. We can use resource hints so that the browser can preload them, saving a hundred and sometimes even thousands of milliseconds.
- Prefetch: Only pre-establishes DNS lookup. Supported by all browsers except Safari.
- Preconnect: Pre-establishes DNS + TCP + TLS. Uses server resources, and is supported by most browsers.
Guide With Best Practices For Prefetch / Preconnect
You can use:
- Old-school file edit from theme editor
- Plugins like Code Snippet or WPCode
I like to avoid using plugins the most I can, so I do the old-school method.
Step 1: Copy the code below and put it on the top of your header.php file. You can look for the file by going into Appearance >> Theme Editor >> header.php inside the theme files on the right side. Or use a plugin mentioned above:
#Preconnect adsense related links with prefetch fallback
<link rel="preconnect" href="https://pagead2.googlesyndication.com/">
<link rel="preconnect" href="https://googleads.g.doubleclick.net/">
<link rel="preconnect" href="https://tpc.googlesyndication.com/">
<link rel “dns-prefetch” href=”https://pagead2.googlesyndication.com/">
<link rel=”dns-prefetch” href=”https://googleads.g.doubleclick.net/">
<link rel=”dns-prefetch” href=”https://tpc.googlesyndication.com/">
This code allows you to preconnect the domains used by Google Adsense and if preconnect fails, it has DNS-prefetch as a backup. This also works for other ad networks but do ask your ad provider the links they use for ad delivery.
If resources use the CORS header, just put crossorigin=”anonymous” after .com/”
Myth Buster
1. Prefetch and Preconnect breaks website.
2. Prefetch and preconnect are the same.
3. It is against Google Adsense policies to use resource hints. Google RECOMMENDS this.
4. You can put early hints in the body or footer. No! That doesn’t make sense at all.
Warning! Do not ‘preconnect’ all external resources
Do not waste your server resources and bandwidth by loading all external resources. First, check which external domains are connected on almost every page and then use the preconnect attribute on them.
3) Don’t Put Your Ads On Above-The-Fold
Above-the-fold is the view of your website that is first visible to the users before they scroll. If you have a slow ad delivery network, a huge hero-featured image covering 50% of your page, or a lazy load with more loading time than your actual onload speed. Putting ads above the fold might not be a wise strategy.
However above-the-fold ads pay the highest in comparison to ads below-the-fold. But they can also hurt and go unfilled if they are not loaded before the user scrolls below. Here’s what you can do if you still want to put ads there:
- Go for a fast ad delivery network
- Start your content from above the fold and put a placeholder for the ad
- Using preconnect and prefetch
- Make sure your website onload speed matches the speed of the ad
4) Don’t Use Auto Ads
This is a must if you are looking for speed optimization of your website with ads on it. If you are using Adsense auto ads (including direct ad placement from the Adsense dashboard, anchor ads, or even other types of auto ads), please disable that.
Even though anchor ads, pop-up ads, and full-page ads have higher CPC and CPM than in-article and in-content ads, they can’t be code-optimized (lazy load, etc.) from your side. And let’s be honest, no one likes to see an ad pop-up while looking at something or moving from one page to another.
Moreover, these auto ads customization is quite limited at least on Adsense.
5) Check and Update your Ads script Regularly
Ad networks often update their scripts from time to time. Some may add a CORS attribute (like Adsense did back in 2019). Some may improve the code and bring features like lazy load. So make sure to check your ads code from your ad network dashboard a few times a year. Good ad networks may also inform you about the update.
Summing It Up
In the end, whether you go for ad speed optimization, ad revenue optimization, or a balance between both, depends on you. Speeding up your ad delivery helps in revenue as well if done wisely.
For me, I prefer user experience to ad revenue. So I try to make the ads fast, less distracting, and make sure that they load quickly enough to match the onload speed. If not then I won’t place them in above-the-fold content.
I hope this answers all your queries regarding ad speed optimization. If you are still unsure, be sure to comment below and we will discuss it.