Exclude iframes from image optimization

Lee Hodson (VR51)
(@leehodson)

3 years, 11 months ago

Is there a filter I can use to exclude any and all content loaded within an iframe from being lazyloaded?

Having tested with lazyload enabled/disabled and other Autoptimize options enabled/disabled I see that lazyload causes issues with Instagram embeds and ad units.

I tried excluding iframes by using class names with an asterisk e.g. ‘adunit *’ to capture all elements within iframes but this did not work and nomatter how many classes I exclude there are still embedded content units that get lazyloaded (well, that don’t load).

Is there a way to exclude iframes or is there an option (maybe a hidden one) to automatically wrap noscript comments around iframes (even, will noscript work to prevent lazyloading of iframes)?

Secondly, if I wrap noscript comments around iframes will doing so be detrimental to the way those iframes load?

As a side note, ads are optimized by some ad networks. When networks say ‘optimized’ they usually mean lazyload. I wish networks would leave optimization to website owners but no matter how much I argue this point with various networks (looking at you Mediavine) the networks ignore the request.

Lee

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years, 11 months ago

Very weird Lee, as AO does not lazyload iframes to begin with. Do the iframes come with class="lazyload" ?
Thread Starter Lee Hodson (VR51)
(@leehodson)

3 years, 11 months ago
Not that I can see within the HTML of the site or the HTML of the embedded iframes.

Here is an example of an iframe (sensitive elements replaced by #[explanation]):

<iframe frameborder="0" src="#[add_script_location]" id="google_ads_iframe_/1030006/#[domain]/sticky_sidebar_0" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="1" height="1" data-is-safeframe="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" data-google-container-id="3" style="border: 0px; vertical-align: bottom; height: 600px; width: 300px;" data-load-complete="true"></iframe>

Inspector shows loads of other HTML loaded by the iframe. I’m not seeing a ‘lazyload’ added to any part of the embedded content nor added to any of the site’s HTML (I keep lazyloading disabled because it affects the ads).

However…

The advertiser’s script includes ‘lazy: true’ e.g,
```
<script type="text/javascript">(function(w, d, s, id) {
  w.PUBX=w.PUBX || {pub: "#[domain]", discover: true, lazy: true};
  var js, pjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; js.async = true;
  js.src = "//main.pubexchange.com/loader.min.js";
  pjs.parentNode.insertBefore(js, pjs);
}(window, document, "script", "pubexchange-jssdk"));</script>
```
The included external script also includes the word ‘lazy’: https://main.pubexchange.com/loader.min.js

I assume ‘lazy’ in the ad network’s scripts means lazyload.
Plugin Author Optimizing Matters
(@optimizingmatters)

3 years, 11 months ago

In that case this is probably a conflict between AO’s lazysizes and the ad network’s lazyload Lee .. :-/

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Exclude iframes from image optimization’ is closed to new replies.

Tags