Fix Issue with CSS Hidden Ads Still Loading in Background

[sadams101]

I believe there is a serious issue with how ads are delivered--the fact that even though desktop or tablet ads might be hidden to the viewer using the desktop, tablet, mobile check boxes you provide in Blocks, or by wrapping the ad code in the CSS tags that hide them from various devices, the ads hidden from mobile are unfortunately still loading in mobile (in the background, and vice versa, mobile directed ads load hidden in desktop, etc.), which makes it nearly impossible to make money with Google or other network ads for the obvious reasons that Google sends ads to sites based on viewability and click through rate. When viewability and/or CTRs drop, worse quality and lower paying ads are served. This also greatly slows down the mobile version for those who run ads.

I discovered this issue using Google site speed tests, which revealed that my large 728x90 and 300x600 desktop display ads were still loading in the background, though hidden, on the mobile speed tests.

Edited December 23, 2021 by sadams101

[SeNioR-]

Have you tried to delete

/* GOOGLE AD CODE FOR RESPONSIVE ADS */
#ipsLayout_mainArea .adsbygoogle { width: 320px; height: 100px; }
@media (min-width:500px) { #ipsLayout_mainArea .adsbygoogle { width: 468px; height: 60px; } }
@media (min-width:1050px) { #ipsLayout_mainArea .adsbygoogle { width: 728px; height: 90px; } }

[Stuart Silvester]

That would be something up to your ad network to implement. Google Ads support responsive ads, so I wouldn't think you need to set up mobile/desktop/tablet specific versions.

The backend has no way to know what device the user is using or what size it is, CSS media queries work in the end users browser based on the viewport size and then hides or shows depending on the CSS classes defined. That does mean that the browser will still load those things, they may just not be visible. That's how CSS and web browsers work.

[sadams101]

I don't use google ads anymore because there was no way to make money, especially given this issue. Unfortunately removing the google responsive CSS code does nothing to prevent this. 

We sell our own ads and use static sized webp banners, and have verified that this was an issue when I did run google ads, and this is still an issue now with our own ads. 

Most people who run ads and want to make any money at it will need to display separate ads targeting mobile devices, tablets or desktops, but not also load the ads in the background that are not targeted for their device. 

I posted this in the "feature suggestions" forum in the hope of a future programmatic solution, but for that to happen Invision would need to also view this as an issue, but apparently they don't. 

As with other issues I've complained about, for example site speed issues (no problems to see here right?), I'll likely need to use my own resources and developers to solve this issue.

[Adlago]

6 hours ago, Stuart Silvester said:

The backend has no way to know what device the user is using or what size it is, CSS media queries work in the end users browser based on the viewport size and then hides or shows depending on the CSS classes defined. That does mean that the browser will still load those things, they may just not be visible. That's how CSS and web browsers work.

However, a mobile browser and a desktop browser are not equivalent. Ie it should be considered what task to give to mobile browsers so that they download content that they can display. Also the bandwidth connection connectivity is different, so the mobile ones are always in the narrow bandwidth connection and the download time is extended ...

With all kinds of optimization techniques - there is always a difference    of 10-15% score speed test desktop/mobile. This difference could be compensated only by an appropriate task oriented to mobile browsers - ie. you should think a little more ...