Is it black hat SEO to add content (self hosted ad images) after window onload

Question

There are about 12-15 Ads:Images(mostly GIFs, self hosted on same server and domain) and appear on all the pages. Since the file size of GIFs are relatively larger(some upto 2 MB), they have started to slow down the website.

I don't want users to wait longer for the main content due to those ads. So, I have decided to load those ads after window.onload event. But I had read somewhere(which I can't find now) that doing so may look like Black Hat Seo technique to some search engines, mainly google. Is it true? Could someone please verify? Does it look like tricking search engines?

Please note that:

1. I am NOT talking about DOMContentLoaded event. I mean on window load event.
2. To avoid CLS, I will be using a placeholder SVG image. The code will look something like this.

    $(window).on('load', function(){
      const lImgs = document.querySelectorAll("img.ads");
      lImgs.forEach((item) => {
        item.src = item.dataset.src;
      });

I have looked into other similar questions but could not find a specifically matching situation. Can I proceed with this approach without worrying about SEO negatives?

Answer 1

No, what you're doing is extremely unlikely to be considered black SEO if that's all you're doing.

Why Black SEO and Ads

Now that we've established that, I'll expand on it a tiny bit. Ads, generally, are signals for search engines (SEs) to lower the site quality, which is actually a good call. Users generally don't want to see ads and if a site uses ads, then the quality has to go down.

Therefore, organically, site owners may decide to hide ads from SEs, but show them to users. That would be considered classical cloaking. If and when SEs notice it, they will likely just stop giving the site any traffic by filtering them out. How do they notice? Well, usually tech savvy people or competing SEOs who play with their user-agents find those sites and report them to SEs.

Why having all in window load is not necessary

Because it's not 2005 when it was indeed a problem? No,more like because SEs have quite advanced indexing bots that can detect things like these surprisingly well. First of all, they don't just wait till the dom is ready, grab whatever's in DOM and ciao. No, similarly, they don't just wait for window loaded. An indexing bot has to measure a lot of meta things while it gets the page content. One of those things is page rendering speed. More accurately, time from the original network request to complete page render.

They realize that there are likely third party scripts working syncly with other things, depending on the resources loaded with window loaded. So they wait. They give a page some adequate time to load fully (which doesn't mean rendered), then they check pending network requests if any of them can be meaningfully attributed to resource loading and wait for them to be done with it, and then either they get to the point where remaining active network requests are things like polling, or ws or video streaming that is of no value or they leave the page on hard timeout, at which point a page is likely penalized for being too slow to load all resources.

We can discuss particular algos for a while, they have tons of code there, but let's not. Just imagine how you would do it if you would be given a lot of money and time and you can safely presume that it's done thrice better than that.

How can you be sure

Very simple, really. A few methods. We'll start from the trivial one. After having your lazy loaded ads in place, go to the Google/Bing Search Console and use the Fetch as bot functionality. It will fetch your page and render it, showing you the render result. Make sure the result has ads in it. If it does not, you have problems. Maybe shifting your listener to an earlier page event would fix it. Note that this thing is not a real indexer, so its functionality is not as elaborate, but hey, better be safe than sorry.

Additional way of measuring it is by having a script that detects indexing bots on pages and measures time the bots spend on a given page. Best do that with JS and not rely on the difference in time between pages. I would try start counding from as early as possible and till window.onbeforeunload. Then see at which values the ads typically appear for you and compare that with SE's average numbers.

Finally, you can run a script that would constantly check if ads have been explicitly rendered and send an event when they are. then just check if you have those events originating from your favorite bots' user agents.

I would use GTM and GA for that kind of tracking for further analysis.